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 prev product. If the product is the first product displayed from a search results page Back to results link is displayed instead of prev product.

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.

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

ProductNavigation (optional)