If you are a vendor and want to attract more customers to your e-commerce store. Explore our WebAR Magento 2<\/a> extension.<\/p>\n<\/blockquote>\n\n\n\n As we have to add content in the configurable products’ media gallery when we deep-dive into the code, we will find that configurable product images are being changed\/loaded from the <magento-root-dir.>\/vendor\/magento\/module-configurable-product\/view\/frontend\/web\/js\/configurable.js file.<\/p>\n\n\n\n Where, the _changeProductImage()<\/strong> function is responsible for achieving this.<\/p>\n\n\n\n So, to add the custom content I have overridden the _changeProductImage() function and added some required files which are required to achieve our goal.<\/p>\n\n\n\n First of all, we will create a demo module<\/a>. Here, I have created the Webkul_ExtraContentInFotorama<\/strong> module. Further, follow the below steps:<\/p>\n\n\n\n 1.<\/strong> Create catalog_product_view_type_configurable.xml <\/strong>file inside the <magento-root-dir>\/app\/code\/Webkul\/ExtraContentInFotorama\/view\/frontend\/layout\/ <\/em>directory.<\/p>\n\n\n\n 2. <\/strong>Create a Configurable.php<\/strong> file inside the <magento-root-dir.>\/app\/code\/Webkul\/ExtraContentInFotorama\/Block\/Product\/Renderer\/ <\/em>directory.<\/p>\n\n\n\n 3. <\/strong>Create a configurable.phtml <\/strong>file inside the <magento-root-dir>\/app\/code\/Webkul\/ExtraContentInFotorama\/view\/frontend\/templates\/product\/view\/type\/options\/ <\/em>directory.<\/p>\n\n\n\n 4.<\/strong> Create a requires-config.js<\/strong> file to mention the mixin file for the configurable.js<\/strong> file inside the <magento-root-dir.>\/app\/code\/Webkul\/ExtraContentInFotorama\/view\/frontend\/<\/em> directory.<\/p>\n\n\n\n 5.<\/strong> Create a configurable.js <\/strong>file inside the <magento-root-dir.>\/app\/code\/Webkul\/ExtraContentInFotorama\/view\/frontend\/web\/js\/<\/em> directory.<\/p>\n\n\n\n 6.<\/strong> After adding the above code to your module. Deploy the code and see the result<\/strong>. Hope this will be helpful. Thanks \ud83d\ude42 <\/p>\n\n\n\n You may also check the Magento 2 Advanced Media Manager<\/a> extension to edit the images present in the media gallery and add watermarks, filter, rotate, resize, and more.<\/p>\n\n\n\n You can check our next blog Magento 2 Custom Content in Configurable Product Media Gallery<\/a> to display custom content in the media gallery in text and visual swatch case on the configurable product page.<\/p>\n","protected":false},"excerpt":{"rendered":"<?xml version="1.0"?>\n<!--\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_ExtraContentInFotorama\n * @author Webkul Software Private Limited\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\n -->\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 <referenceBlock name="product.info.options.wrapper">\n <referenceBlock class="Webkul\\ExtraContentInFotorama\\Block\\Product\\Renderer\\Configurable" \n name="product.info.options.swatches">\n <\/referenceBlock>\n <\/referenceBlock>\n <\/body>\n<\/page><\/pre>\n\n\n\n
<?php\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_ExtraContentInFotorama\n * @author Webkul Software Private Limited\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\ndeclare(strict_types = 1);\n\nnamespace Webkul\\ExtraContentInFotorama\\Block\\Product\\Renderer;\n\n\/**\n * Swatch renderer block\n *\/\nclass Configurable extends \\Magento\\Swatches\\Block\\Product\\Renderer\\Configurable\n{\n \/**\n * Path to default template file with standard Configurable renderer.\n *\/\n public const CONFIGURABLE_RENDERER_TEMPLATE = 'Webkul_ExtraContentInFotorama::product\/view\/type\/options\/configurable.phtml';\n\n \/**\n * Return renderer template\n *\n * Template for product with swatches is different from product without swatches\n *\n * @return string\n *\/\n protected function getRendererTemplate()\n {\n return $this->isProductHasSwatchAttribute() ?\n parent::SWATCH_RENDERER_TEMPLATE : self::CONFIGURABLE_RENDERER_TEMPLATE;\n }\n}<\/pre>\n\n\n\n<?php\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_ExtraContentInFotorama\n * @author Webkul Software Private Limited\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\n?>\n\n<?php\n\/** @var $block \\Magento\\ConfigurableProduct\\Block\\Product\\View\\Type\\Configurable*\/\n$product = $block->getProduct();\n$_attributes = $block->decorateArray($block->getAllowAttributes());\n\n$linkUrl = "https:\/\/webkul.com\/blog\/design-patterns-in-magento-2\/";\n$thumbnailImage = "Provide a thumbnail Image URL";\n$linkContent = "Design Patterns in Magento 2";\n?>\n\n<?php if ($product->isSaleable() && count($_attributes)) :?>\n <?php foreach ($_attributes as $_attribute) : ?>\n <div class="field configurable required">\n <label class="label" for="attribute<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>">\n <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?><\/span>\n <\/label>\n <div class="control">\n <select name="super_attribute[<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>]"\n data-selector="super_attribute[<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>]"\n data-validate="{required:true}"\n id="attribute<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>"\n class="super-attribute-select">\n <option value=""><?= $block->escapeHtml(__('Choose an Option...')) ?><\/option>\n <\/select>\n <\/div>\n <\/div>\n <?php endforeach; ?>\n <script type="text\/x-magento-init">\n {\n "#product_addtocart_form": {\n "configurable": {\n "spConfig": <?= \/* @noEscape *\/ $block->getJsonConfig() ?>,\n "gallerySwitchStrategy": "<?= $block->escapeJs($block->getVar(\n 'gallery_switch_strategy',\n 'Magento_ConfigurableProduct'\n ) ?: 'replace'); ?>",\n "thumbnailImage":"<?= \/* @noEscape *\/$thumbnailImage?>",\n "linkUrl":"<?= \/* @noEscape *\/ $linkUrl?>",\n "linkContent":"<?= \/* @noEscape *\/ $linkContent?>"\n }\n },\n "*" : {\n "Magento_ConfigurableProduct\/js\/catalog-add-to-cart": {}\n }\n }\n <\/script>\n<?php endif;?><\/pre>\n\n\n\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_ExtraContentInFotorama\n * @author Webkul Software Private Limited\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\nvar config = {\n config: {\n mixins: {\n 'Magento_ConfigurableProduct\/js\/configurable' : {'Webkul_ExtraContentInFotorama\/js\/configurable':true}\n }\n }\n};<\/pre>\n\n\n\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_ExtraContentInFotorama\n * @author Webkul Software Private Limited\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\n\ndefine([\n 'jquery',\n 'underscore',\n 'mage\/translate'\n], function ($, _, $t) {\n 'use strict';\n\n return function (configurable) {\n \n $.widget('mage.configurable', configurable, {\n \/**\n * Change displayed product image according to chosen options of configurable product\n *\n * @private\n *\/\n _changeProductImage: function () {\n var self = this;\n\n \/\/Thumbnail Image for Custom Content\/\/\/\/\n var contentThumbnailImage = self.options.thumbnailImage;\n \n var images,\n initialImages = this.options.mediaGalleryInitial,\n gallery = $(this.options.mediaGallerySelector).data('gallery');\n\n \/\/\/\/\/\/\/\/\/Load Custom Content in Fotorama\/\/\/\/\/\n self._loadCustomContent();\n \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n if (_.isUndefined(gallery)) {\n $(this.options.mediaGallerySelector).on('gallery:loaded', function () {\n this._changeProductImage();\n }.bind(this));\n\n return;\n }\n\n images = this.options.spConfig.images[this.simpleProduct];\n\n if (images) {\n \/\/Remove Extra Content from Fotorama\/\/\/\/\n initialImages = self._removeExtraContentfromArray(initialImages);\n images = self._removeExtraContentfromArray(images);\n \n \/\/Push Extra Content in Fotorama\/\/\/\/\n self._pushContent(images, contentThumbnailImage);\n \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n images = this._sortImages(images);\n\n if (this.options.gallerySwitchStrategy === 'prepend') {\n images = images.concat(initialImages);\n }\n\n images = $.extend(true, [], images);\n images = this._setImageIndex(images);\n\n gallery.updateData(images);\n this._addFotoramaVideoEvents(false);\n } else {\n \/\/Remove Extra Content from Fotorama\/\/\/\/\n initialImages = self._removeExtraContentfromArray(initialImages);\n\n \/\/Push Extra Content in Fotorama\/\/\/\/\n self._pushContent(initialImages, contentThumbnailImage);\n\n gallery.updateData(initialImages);\n this._addFotoramaVideoEvents(true);\n }\n },\n\n \/**\n * Set correct indexes for image set.\n *\n * @param {Array} images\n * @private\n *\/\n _setImageIndex: function (images) {\n var length = images.length,\n i, j = 1;\n \n for (i = 0; length > i; i++) {\n if (images[i].type == "ExtraContent") {\n images[i].i = 1;\n } else {\n images[i].i = j + 1;\n }\n }\n return images;\n },\n\n \/**\n * Delete Additional content from array\n * \n * @param {Array} fotoramaContentArray\n * @returns {Array}\n * @private\n *\/\n _removeExtraContentfromArray: function(fotoramaContentArray) {\n fotoramaContentArray = fotoramaContentArray.filter(\n element => element.type !== "ExtraContent"\n );\n return fotoramaContentArray;\n },\n\n \/**\n * Push content in array\n * \n * @param {Array} fotoramaContentArray\n * @param {string} contentThumbnailImage\n * @private\n *\/\n _pushContent: function(fotoramaContentArray, contentThumbnailImage) {\n var self = this;\n if (typeof fotoramaContentArray != "undefined" && \n (self.options.linkUrl != "" || self.options.linkUrl != null)) {\n fotoramaContentArray.unshift({\n thumb: contentThumbnailImage,\n src: self.options.linkUrl,\n type: 'ExtraContent',\n caption: self.options.linkContent,\n isMain: "true",\n position: 0\n });\n }\n },\n\n \/**\n * Load custom content\n * \n * @private\n *\/\n _loadCustomContent: function() {\n var self = this;\n var galleryDivFotorama = $('div.gallery-placeholder > div.fotorama');\n var variantText = "None";\n var variantTextColor = "#FFED8F";\n \n \/\/Get Selected Variant Value\n variantText = self._getSelectedVariant();\n\n switch (variantText) {\n case "Mango Velvet": variantTextColor = "#FF8200"; break;\n case "Peacock Velvet": variantTextColor = "#A7D46F"; break;\n }\n\n galleryDivFotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {\n\n if (extra.frame.type === 'ExtraContent' && extra.frame.src != "") {\n var extraContentHtml = '';\n \n extraContentHtml += '<div id="wkExtraContent" ';\n extraContentHtml += 'style="background-color:'+variantTextColor+';">';\n extraContentHtml += '<h1 style="margin-top:250px">'+'Extra Content'+'<\/h1>';\n \/\/\/Show Variant Text\/\/\/\n if (variantText != '') {\n extraContentHtml += '<p style="font-size:20px">Selected Variant:<\/p>';\n extraContentHtml += '<p style="font-size:18px">'+variantText+'<\/p><br\/>';\n }\n \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n extraContentHtml += '<a href="'+self.options.linkUrl+'" style="font-size:18px">'\n extraContentHtml += self.options.linkContent+'<\/a>';\n extraContentHtml += '<\/div>';\n\n extra.frame.$stageFrame.html(extraContentHtml);\n }\n });\n },\n\n \/**\n * Get Selected Variant Value\n * \n * @return {string}\n * @private\n *\/\n _getSelectedVariant: function() {\n var variantTextVal = "";\n var variantTextArr = []; \n var selectedText = $('.product-options-wrapper select[id^="attribute"] option:selected').text();\n if (selectedText.indexOf('+') == -1) {\n variantTextVal = selectedText;\n } else {\n variantTextArr = selectedText.split('+');\n variantTextVal = $.trim(variantTextArr[0]);\n }\n return variantTextVal;\n },\n });\n\n return $.mage.configurable;\n };\n});<\/pre>\n\n\n\n
Refer to the below image for the result.<\/p>\n\n\n\n![\"CustomMediaInConfigurableProductGallery\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/CustomMediaInConfigurableProductGallery.gif\")
<\/figure>\n\n\n\n