Add Size Guide In Product Page Magento 2

Today I will show you how to add size guide in product page in Magento 2. This will help your customers easily choose the right size. You can do this through a few steps.

 

Step 1:

Create catalog_product_view.xml under /app/code/Magepow/Custom/view/frontend/layout/

 

File: /app/code/Magepow/Custom/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="product.info.options.wrapper"> <block name="sizeguide" template="Magepow_Custom::size_guide.phtml" group="detailed_info" before="-"> <arguments> <argument translate="true" name="title" xsi:type="string">Size Guide</argument> </arguments> </block> </referenceBlock> </body></page>

Step 2:

Create size_guide.phtml under /app/code/Magepow/Custom/view/frontend/templates/

 

File: /app/code/Magepow/Custom/view/frontend/templates/size_guide.phtml

<?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $product = $objectManager->get('Magento\Framework\Registry')->registry('current_product'); if($product->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE): $sizeguideBlock = $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('size_guide')->toHtml(); $data = $product->getTypeInstance()->getConfigurableOptions($product); $show_size = false; foreach ($data as $key => $value) { if($value['0']['attribute_code'] == 'size') { $show_size = true; break; } } ?> <?php if(isset($show_size) && $show_size != false): ?> <div class="size-guide"> <a class="size-guide-text" ><?php echo $block->escapeHtml(__('Size Guide')); ?></a> <div id="size-guide-popup" style="display: none;"><?php echo $sizeguideBlock; ?></div> </div> <script type="text/x-magento-init"> { "*": { "magepowSizeGuide":{} } } </script> <?php endif; ?><?php endif; ?>

Step 3:

Create requirejs-config.js under /app/code/Magepow/Custom/view/frontend/

 

File: /app/code/Magepow/Custom/view/frontend/requirejs-config.js

var config = { map: { '*': { magepowSizeGuide: 'Magepow_Custom/js/sizeguide' } }};

Step 4:

Create sizeguide.js under /app/code/Magepow/Custom/view/frontend/web/js

 

File: /app/code/Magepow/Custom/view/frontend/web/js/sizeguide.js

define([ "jquery", 'Magento_Ui/js/modal/modal'], function ($, modal) { 'use strict'; $.widget('mage.sizeguide', { _create: function () { $('.size-guide .size-guide-text').click(function () { $('#size-guide-popup').modal({ type: 'popup', modalClass: 'modals-sizeguide', responsive: true, buttons: false }); $("#size-guide-popup").modal("openModal"); }); $('.delivery-return .delivery-return-text').click(function () { $('#delivery-return-popup').modal({ type: 'popup', modalClass: 'modals-sizeguide', responsive: true, buttons: false }); $("#delivery-return-popup").modal("openModal"); }); } }); return $.mage.sizeguide;});


Step 5:

Now install the custom module and refresh Magento cache

 

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento cache:flush

 

Done. Hope this article will help you in some way.