Add Size Guide In Product Page Magento 2

Posted: November 18, 2019

Today I will show you how to add a size guide to the 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.

Press Contact

Add Size Guide In Product Page Magento 2