ProductNavigation (optional)
- Marta Siewierska-Stańczak
https://github.com/magesuite/product-navigation
This module displays previous/next product links on PDP. On category pages and search results pages links-collector.js script of the module collects product URLs and saves them inside localStorage. product-navigation.js script of the module populates the navigation template with links to prev and next products. If the product is the first product displayed from a category page, also Back to category link is displayed instead of the prev product. If the product is the first product displayed from a search results page Back to results link is displayed instead of the prev product.
Â
- 1 Installation
- 2 Admin settings
- 3 Backend
- 4 Frontend
- 4.1.1 XML settings
- 4.1.2 Widget options
- 4.2 Styling
Installation
This module is optional
composer require "creativestyle/magesuite-product-navigation" ^1.0.0Â
Admin settings
No admin settings. After installation, the module is enabled by default.
Backend
BE documentation in progress
Frontend
Â
XML settings
path: product-navigation/view/frontend/layout/catalo_product_view
<block name="product.nav.bar" template="MageSuite_ProductNavigation::navbar.phtml">
<arguments>
<argument name="category_label" xsi:type="string" translate="true">Back to category</argument>
<argument name="search_label" xsi:type="string" translate="true">Back to results</argument>
<argument name="prev_label" xsi:type="string" translate="true">Previous product</argument>
<argument name="next_label" xsi:type="string" translate="true">Next product</argument>
<argument name="widget_options" xsi:type="array">
<item name="showNavigation" xsi:type="boolean">true</item>
</argument>
</arguments>
</block>Name | Type | Default |
|---|---|---|
category_label | string | Back to category |
search_label | string | Back to results |
prev_label | string | Previous product |
next_label | sting | Next product |
widget_options | array | true |
Widget options
Name | default |
|---|---|
breadcrumbLinkSelector | .cs-breadcrumbs__link |
categoryLinkSelector | .cs-product-navigation__link--category |
searchLinkSelector | .cs-product-navigation__link--search |
prevLinkSelector | .cs-product-navigation__link--prev |
nextLinkSelector | .cs-product-navigation__link--next |
activeListElClass | cs-product-navigation__list-item--active |
readyClass | cs-product-navigation--initialized |
showNavigation | true |
storageKey | mgs-product-navigation |
productLinkRegexp | /<a href="([^"]+)" class="cs-product-tile__name-link/g |
Â
Styling
Styling is provided by default in theme-creativeshop:
theme-creativeshop/src/components/product-navigation/product-navigation.scss