{"id":11340,"date":"2025-04-03T12:00:00","date_gmt":"2025-04-03T12:00:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=11340"},"modified":"2025-04-03T04:08:35","modified_gmt":"2025-04-03T04:08:35","slug":"show-related-products-in-the-popup-modal-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/show-related-products-in-the-popup-modal-in-magento-2\/","title":{"rendered":"How to Show Related Products in the Popup Modal in Magento 2?\u00a0\u00a0"},"content":{"rendered":"\n

Capturing customers’ attention while they are in your store is a pure game of smart efforts.<\/p>\n\n\n\n

One of the ways is displaying related products in a popup.<\/p>\n\n\n

\n
\"Related<\/figure>\n<\/div>\n\n\n

This allows your customers to engage with more products, often resulting in more sales. In this blog, I will show you how to implement this functionality on your Magento 2 store using our solution.\u00a0<\/p>\n\n\n\n

Steps: Show Related Products in the Popup Modal in Magento 2<\/h2>\n\n\n\n

Step 1: Create a Modal Template<\/h3>\n\n\n\n

First, create a new template file for the modal in your custom theme or module.
Create a related_products.phtml <\/strong>file in a custom module under app\/code\/Vendor\/Module\/view\/frontend\/templates\/modal and <\/strong>add this code.<\/p>\n\n\n\n

<?php\n$relatedProducts = $block->getRelatedProducts();\n?>\n<div id=\"related-products-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"relatedProductsModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\" role=\"document\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\" id=\"relatedProductsModalLabel\">Related Products<\/h5>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                    <span aria-hidden=\"true\">&times;<\/span>\n                <\/button>\n            <\/div>\n            <div class=\"modal-body\">\n                <?php if (!empty($relatedProducts)): ?>\n                    <ul class=\"related-products-list\">\n                        <?php foreach ($relatedProducts as $product): ?>\n                            <li>\n                                <a href=\"<?= $product->getProductUrl() ?>\">\n                                    <img src=\"<?= $block->getImageUrl($product) ?>\" alt=\"<?= $product->getName() ?>\" \/>\n                                    <span><?= $product->getName() ?><\/span>\n                                <\/a>\n                            <\/li>\n                        <?php endforeach; ?>\n                    <\/ul>\n                <?php else: ?>\n                    <p>No related products found.<\/p>\n                <?php endif; ?>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<\/pre>\n\n\n\n
Step 2: Create a Block Class<\/h3>\n\n\n\n
Next, create a block class to fetch the related products for the current product.<\/p>\n\n\n\n
Create a RelatedProducts.php<\/strong> file at app\/code\/Vendor\/Module\/Block<\/strong> and use the below code:<\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Block;\n\nuse Magento\\Catalog\\Block\\Product\\AbstractProduct;\nuse Magento\\Catalog\\Model\\ProductFactory;\nuse Magento\\Framework\\Registry;\nuse Magento\\Framework\\View\\Element\\Template\\Context;\n\nclass RelatedProducts extends AbstractProduct\n{\n    protected $productFactory;\n    protected $registry;\n\n    public function __construct(\n        Context $context,\n        ProductFactory $productFactory,\n        Registry $registry,\n        array $data = []\n    ) {\n        $this->productFactory = $productFactory;\n        $this->registry = $registry;\n        parent::__construct($context, $data);\n    }\n\n    public function getRelatedProducts()\n    {\n        $product = $this->registry->registry('current_product');\n        if ($product) {\n            return $product->getRelatedProducts();\n        }\n        return [];\n    }\n\n    public function getImageUrl($product)\n    {\n        $imageHelper = $this->helper('Magento\\Catalog\\Helper\\Image');\n        return $imageHelper->init($product, 'product_base_image')->getUrl();\n    }\n}\n<\/pre>\n\n\n\n
This code will help to handle the logic for retrieving related products and providing image URLs.<\/p>\n\n\n\n
Step 3: Add Modal Template to the Layout<\/h3>\n\n\n\n
This step will help you to include the modal in the product page of the website.
Create catalog_product_view.xml <\/strong>file under app\/code\/Vendor\/Module\/view\/frontend\/layout <\/strong>directory with the below code:<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceContainer name=\"content\">\n            <block class=\"Vendor\\Module\\Block\\RelatedProducts\" name=\"related.products.modal\" template=\"Vendor_Module::modal\/related_products.phtml\" \/>\n        <\/referenceContainer>\n    <\/body>\n<\/page>\n<\/pre>\n\n\n\n
Step 4: Initialize the Modal Using JavaScript<\/h3>\n\n\n\n
Add JavaScript to activate the modal functionality and initialize\/handle the modal’s behavior. <\/p>\n\n\n\n
This script should be added to your template file or included as a separate JavaScript file.
Create modal.js <\/strong>file at app\/code\/Vendor\/Module\/view\/frontend\/web\/js directory and use the below code:<\/p>\n\n\n\n
<script type=\"text\/x-magento-init\">\n{\n    \"#related-products-modal\": {\n        \"Magento_Ui\/js\/modal\/modal\": {\n            \"type\": \"popup\",\n            \"title\": \"Related Products\",\n            \"buttons\": []\n        }\n    }\n}\n<\/script>\n\n<script type=\"text\/javascript\">\nrequire([\n    'jquery',\n    'Magento_Ui\/js\/modal\/modal'\n], function($, modal) {\n    var options = {\n        type: 'popup',\n        responsive: true,\n        innerScroll: true,\n        title: 'Related Products'\n    };\n\n    var popup = modal(options, $('#related-products-modal'));\n\n    $('#your-trigger-element').on('click', function() {\n        $('#related-products-modal').modal('openModal');\n    });\n});\n<\/script>\n<\/pre>\n\n\n\n
Step 5: Include JS in to your layout<\/h3>\n\n\n\n
Add the necessary JavaScript in the layout to ensure the modal operates correctly.\u00a0<\/p>\n\n\n\n
Modify the catalog_product_view.xml<\/strong> file as shown:<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceContainer name=\"content\">\n            <block class=\"Vendor\\Module\\Block\\RelatedProducts\" name=\"related.products.modal\" template=\"Vendor_Module::modal\/related_products.phtml\" \/>\n        <\/referenceContainer>\n        <referenceContainer name=\"head.additional\">\n            <block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"related.products.modal.js\" template=\"Magento_Theme::js\/related_products_modal.phtml\" \/>\n        <\/referenceContainer>\n    <\/body>\n<\/page>\n<\/pre>\n\n\n\n
This code will ensure the modal opens when the trigger (button) is clicked.<\/p>\n\n\n\n
Step 6: Add a button to Trigger the Modal<\/h3>\n\n\n\n
To trigger the modal, you\u2019ll need to add a button on the product page that users can click to open the modal.<\/p>\n\n\n\n
Add the button tag as shown to the catalog_product_view.phtml<\/strong> file to add the button:<\/p>\n\n\n\n
<button id=”show-related-products” type=”button” class=”action primary”>Show Related Products<\/button><\/strong><\/p>\n\n\n\n
After following all the steps, clear the cache and deploy the static content by running the necessary commands to apply changes.<\/p>\n\n\n\n
Adjust the path and namespace according to your module and theme structure.
That\u2019s it! Your related products will start displaying as the shoppers scroll through your store. \ud83c\udf89<\/p>\n","protected":false},"excerpt":{"rendered":"
Capturing customers’ attention while they are in your store is a pure game of smart efforts. One of the ways is displaying related products in…<\/p>\n","protected":false},"author":5,"featured_media":11361,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-11340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/11340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=11340"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/11340\/revisions"}],"predecessor-version":[{"id":11344,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/11340\/revisions\/11344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/11361"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=11340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=11340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=11340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}