Use cases

Our module supports adding New, In stock, Out of Stock and On Sale filters to Magento 2 layered navigation multi select. By allowing users to sort items that way, you make the searching process more convinient and effective.

1. Toggle content by filter
2. Stock Filter
3. On Sale Filter
4. New Filter
5. Rating Filter
6. Integration with magento 2.1
7. Porto Img Lazyload Fix

Toggle content by filter

If you want to show/hide some HTML when some specific filter was applied in layered navigation. So before you show some HTML you need to add it to the category page. If you already have HTML content at the page. Just wrap it in container <div class="swissup-aln-toggle swissup-aln-toggle-color-5484 swissup-aln-hidden"><!--your toggle content here --></div>.

1. Create a static block for all categories. Go Content -> Blocks -> Add New Block and fill the form like above
2. Create widget (type static block). Go Content -> Wifdgets -> Add Widget and fill form Storefront Properties -> Type select Cms Static Block. In Widget Options -> Block select block name you created at previous step. Layout updates fill like at picture.
   • Click Add Layout Update. Select Display on Anchor Categories
   • Categories select ‘All’
   • Container ‘Main Content Top’ - will shows above product listing
   • Repeat for Non-Anchor Categories
3. Flush Cache
4. Open any category page. In my case, I see many X.
5. Select attribute-value pair for example color purple. After reloading you can copy your attribute-value from the address bar (in my case ?color=5484)
6. Open you custom static block created at first step and add some html markup <div class="swissup-aln-toggle swissup-aln-toggle-color-5484 swissup-aln-hidden">any HTML tags, picture, another widgets, etc.</div>

When attribute color option purple (5484) was apply js code remove class “swissup-aln-hidden” and show widget content.

Stock Filter

Please follow the next steps:

1. Go Stores -> Configuration -> Catalog -> Inventory -> Stock Options -> Display Out of Stock Products and enable the display Out of Stock Products.

   

2. Open Store -> Attributes -> Product.

3. Find the attribute quantity_and_stock_status.

   

4. Open Storefront Properties and find Use in Layered Navigation and set Filterable with results.

   

5. In console run - php bin/magento indexer:reindex.

6. Check on the frontend. At least one product must be ‘out of stock’.

   

On Sale Filter

1. Open Store -> Attributes -> Product.

2. Find attribute special_price.

   

3. Open Storefront Properties and find Use in Layered Navigation and set Filterable with results.

   

4. In console run - php bin/magento indexer:reindex.

5. Check on the frontend.

New Filter

1. Open Store -> Attributes -> Product.

2. Find attribute new. It comes with Magento 2 Sample Data, so you can create it manually if you don’t have it. It should have Yes/No type and new as attribute code.

   

3. Open Storefront Properties section and find Use in Layered Navigation config - set it Filterable (with results).

   

4. Execute re-index in console: php bin/magento indexer:reindex.

5. How to set product as New in Magento 2:

   • Go Catalog > Products, choose the product you want to set as New and click “Edit”.
   • Find Set Product as New From config and fill the date fields.
   • Save the changes.

6. Check the frontend.

Rating Filter

With rating filter functionality it is no need to scroll through thousands of products. The opportunity to sort items by rating is good for clients who trust other customers reviews.

1. Open Store -> Attributes -> Product.

2. Find attribute rating_summary.

   

3. Open Storefront Properties and find Use in Layered Navigation. Check/set Filterable with results (by default Yes).

   

4. In console run

    bin/magento index:reindex
   

Integration with magento 2.1

For compatibility with 2.1 need apply changes from 2 commits:

• magento/magento2@f8c75a8
• magento/magento2@87ec99d

    curl -L https://github.com/magento/magento2/commit/f8c75a8.patch > /tmp/f8c75a8.patch
    git apply --check /tmp/f8c75a8.patch
    git apply /tmp/f8c75a8.patch

    curl -L https://github.com/magento/magento2/commit/87ec99d.patch > /tmp/87ec99d.patch
    git apply --check /tmp/87ec99d.patch
    git apply /tmp/87ec99d.patch

Porto Img Lazyload Fix

Add js patch

$(document).on('swissup:ajaxlayerednavigation:reload:after', function (event, navigation, response) {
   $("img.porto-lazyload:not(.porto-lazyload-loaded)").lazyload({effect:"fadeIn"});
});