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.
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.