Алголия и масонство

После этой проблемы. Мне интересно, поддерживается ли сейчас Masonry через библиотеку мгновенного поиска Algolia?

В настоящее время не удается загрузить свойства кладки.

Спасибо

РЕДАКТИРОВАТЬ - Полный скрипт

<script>

    var hitTemplate = document.querySelector('#hit-template').textContent;

    const search = instantsearch({
      appId: '{{ craft.searchPlus.getAlgoliaApplicationId }}',
      apiKey: '{{ craft.searchPlus.getAlgoliaSearchApiKey }}',
      indexName: 'products',
      urlSync: true
    });

    search.addWidget(
      instantsearch.widgets.infiniteHits({
        container: '#infinite-hits-container',
        templates: {
          empty: 'No results',
          item: hitTemplate
        },
        showMoreLabel: 'Load More Deals',
        hitsPerPage: 80
      })
    );

    search.addWidget(
      instantsearch.widgets.menu({
        container: '#womensCategories',
        attributeName: 'womensCategory.title',
        limit: 50,
        templates: {
          header: 'Womens'
        }
      })
    );

    search.addWidget(
      instantsearch.widgets.menu({
        container: '#mensCategories',
        attributeName: 'mensCategory.title',
        limit: 50,
        templates: {
          header: 'Mens'
        }
      })
    );


    search.addWidget(
      instantsearch.widgets.refinementList({
        container: '#stores',
        attributeName: 'retailer',
        operator: 'or',
        limit: 10,
        templates: {
          header: 'Store'
        }
      })
    );

    search.addWidget(
      instantsearch.widgets.refinementList({
        container: '#gender',
        attributeName: 'gender',
        operator: 'or',
        limit: 2,
        templates: {
          header: 'Gender'
        }
      })
    );

    search.addWidget(
      instantsearch.widgets.refinementList({
        container: '#size',
        attributeName: 'size.sizing',
        operator: 'or',
        limit: 20,
        templates: {
          header: 'Sizing'
        }
      })
    );


    search.addWidget(
      instantsearch.widgets.numericRefinementList({
        container: '#price',
        attributeName: 'salePrice',
        options: [
          {name: 'All'},
          {end: 20, name: 'less than 20'},
          {end: 50, name: 'less than 50'},
          {start: 50, end: 100, name: 'between 50 and 100'},
          {start: 100, end: 300, name: 'Expensive'},
          {start: 300, name: 'Very Expensive'}
        ],
        templates: {
          header: 'Price'
        }
      })
    );


    search.start();

</script>

Я отредактировал приведенный выше код, чтобы включить мой полный сценарий, надеюсь, этого будет достаточно, чтобы добавить ответ. Это просто инициализируется на странице с использованием 1 контейнера.

Источник

1 ответ

Вы можете сделать это с помощью новых разъемов в InstantSearch, вы будете использовать connectInfiniteHits сделать виджет, который использует кладку внутри, где у вас есть полный контроль над DOM.

Прочитайте больше:

Источник
Другие вопросы по тегам