问Algolia和石工

EN

<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>