Today, we will learn how we can create Previous and Next buttons on the product detail page so that we can navigate to NEXT and PREVIOUS products from that page.
In this tutorial, we will navigate to a product that is of the same category as the current product. So, the next product or current product should be from the same category.
We will achieve this by creating a module in which we add an extra block on the product page to add the previous and next links.
Let’s start with creating a module.
Step 1: Create registration.php in app/code/<Vendor>/<Module_Name>/
We are creating registration.php in app/code/Bizspice/PreviousNext
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Bizspice_PreviousNext',
__DIR__
);Step 2: Create module.xml in app/code/Bizspice/PreviousNext/etc/
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Bizspice_PreviousNext" setup_version="0.0.1">
</module>
</config>Now your module is ready for a setup so we will create logic and write HTML code for the Previous Next button.
Step 3: Now create a phtml file where we write our logic. Let’s create previousnext.phtml under app/code/Bizspice/PreviousNext/view/frontend/templates/product/view
<?php
$productId = $block->getProduct()->getId();
$cat_ids = $block->getProduct()->getCategoryIds();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->create('Magento\Catalog\Model\Product');
$productt = $objectManager->create('Magento\Catalog\Model\Product');
$category = $objectManager->create('Magento\Catalog\Model\Category')->load($cat_ids[0]);
// print_r($category->getUrl());
$category_product = $category->getProductCollection()->addAttributeToSort('position', 'asc');
$category_product->addAttributeToFilter('status',1);
$category_product->addAttributeToFilter('visibility',4);
$cat_prod_ids = $category_product->getAllIds();
$_pos = array_search($productId, $cat_prod_ids); // get position of current product
$_next_pos = $_pos+1;
$_prev_pos = $_pos-1;
$keys = array_keys($cat_prod_ids);
if(in_array($_next_pos, $keys)){
$_next_prod = $product->load($cat_prod_ids[$_next_pos]);
}
if(in_array($_prev_pos, $keys)){
$_prev_prod = $productt->load($cat_prod_ids[$_prev_pos]);
}
?>
<div class="previous_next">
<?php if(in_array($_prev_pos, $keys)): ?>
<a href="<?php print_r($_prev_prod->getProductUrl()); ?>"><span>PREVIOUS </span></a>
<?php endif; ?>
<?php if(in_array($_next_pos, $keys)): ?>
<a href="<?php print_r($_next_prod->getProductUrl()); ?>" style="float:right;"><span>NEXT </span></a>
<?php endif; ?>
</div>Here we have to get the product id of the current product, and from that, we have to get the category of the product. So as now we have the category id of the current product, we can get the next product and previous product by just adding or subtracting the id by 1.
Step 4: As we have now added our logic, we will now add the template to the product page. For that, we will use the catalog_product_view.xml layout in our Module.
Create catalog_product_view.xml in app/code/Bizspice/PreviousNext/view/frontend/layout
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="page.wrapper">
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.previousnext" template="Bizspice_PreviousNext::product/view/previousnext.phtml" />
</referenceContainer>
<move element="product.info.previousnext" destination="main.content" before="-"/>
</body>
</page>Done, now you can navigate to the next or previous products on the product page.
