In Magento 2, on the configurable product page, for rendering the swatch attributes, <magento-root-dir.>\/vendor\/magento\/module-swatches\/view\/base\/web\/js\/swatch-renderer.js <\/em>file is responsible.<\/p>\n\n\n\n So, to add extra content in the configurable product’s media gallery(in text and visual swatch case), we need to override a few methods of the swatch-renderer js file. <\/p>\n\n\n\n For example, updateBaseImage<\/strong>, _onGalleryLoaded<\/strong> and _loadMedia<\/strong> functions are responsible for updating the media gallery after swatch rendering and swatch selection.<\/p>\n\n\n\n So, to add the custom content I have overridden the required functions 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 a di.xml <\/strong>file inside the <magento-root-dir>\/app\/code\/Webkul\/ExtraContentInFotorama\/<\/em>etc\/ <\/em>directory.<\/p>\n\n\n\n 2.<\/strong> Create ConfigurableAfterGetJsonConfigPlugin.php<\/strong> file inside the <magento-root-dir>\/app\/code\/Webkul\/ExtraContentInFotorama\/Plugin\/ConfigurableProduct\/Block\/<\/em> directory.<\/p>\n\n\n\n 3.<\/strong> Create a requires-config.js<\/strong> file to mention the mixin file for the swatch-renderer.js<\/strong> file inside the <magento-root-dir.>\/app\/code\/Webkul\/ExtraContentInFotorama\/view\/frontend\/<\/em> directory.<\/p>\n\n\n\n 4.<\/strong> Create a swatch-renderer.js <\/strong>file inside the <magento-root-dir.>\/app\/code\/Webkul\/ExtraContentInFotorama\/view\/frontend\/web\/js\/<\/em> directory.<\/p>\n\n\n\n 5.<\/strong> After adding the above code to your module. Deploy the code and see the result in the text swatch case<\/strong>. Refer to the below images for the result.<\/p>\n\n\n\n 6. <\/strong>See the result in the visual swatch case<\/strong>. Refer to the below images for the result.<\/p>\n\n\n\n Note:<\/strong> Remember to add <sequence><\/em> in the module.xml<\/strong> file to load the Magento_Swatches<\/strong> module before your custom module. Hire Magento developers<\/a> who are dedicated to achieving outstanding outcomes for your unique e-commerce ventures in order to add a personal touch.<\/p>\n\n\n\n Additionally, there is no need to search further; seize the chance to kickstart your projects with the suggested Magento development company<\/a>.<\/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<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager\/etc\/config.xsd">\n <!--Add Extra Configuration Data In JsonConfig-->\n <type name="Magento\\ConfigurableProduct\\Block\\Product\\View\\Type\\Configurable">\n <plugin name="Wk_afterGetJsonConfig"\n type="Webkul\\ExtraContentInFotorama\\Plugin\\ConfigurableProduct\\Block\\ConfigurableAfterGetJsonConfigPlugin"\n sortOrder="50" \/>\n\t<\/type>\n<\/config><\/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 *\/\nnamespace Webkul\\ExtraContentInFotorama\\Plugin\\ConfigurableProduct\\Block;\n\nclass ConfigurableAfterGetJsonConfigPlugin\n{\n \/**\n * @var \\Magento\\Framework\\App\\RequestInterface\n *\/\n protected $request;\n\n \/**\n * @var \\Magento\\Framework\\Json\\Helper\\Data\n *\/\n protected $jsonHelper;\n\n \/**\n * Initialize dependencies\n *\n * @param \\Magento\\Framework\\Json\\Helper\\Data $jsonHelper\n * @param \\Magento\\Framework\\App\\RequestInterface $request\n * @return void\n *\/\n public function __construct(\n \\Magento\\Framework\\Json\\Helper\\Data $jsonHelper,\n \\Magento\\Framework\\App\\RequestInterface $request\n ) {\n $this->request = $request;\n $this->jsonHelper = $jsonHelper;\n }\n\n \/**\n * Composes configuration for js\n *\n * @param \\Magento\\ConfigurableProduct\\Block\\Product\\View\\Type\\Configurable $subject\n * @param string $resultJson\n * @return string\n *\/\n public function afterGetJsonConfig(\n \\Magento\\ConfigurableProduct\\Block\\Product\\View\\Type\\Configurable $subject,\n $resultJson\n ) {\n \/\/Check if request is made from product page\/\/\n if (strtolower($this->request->getFullActionName()) == "catalog_product_view") {\n $result = $this->jsonHelper->jsonDecode($resultJson);\n\n \/\/\/\/\/Set Extra Configuration Data\/\/\/\/\/\n $customConfig = [];\n \n $customConfig["linkUrl"] = "https:\/\/webkul.com\/blog\/design-patterns-in-magento-2\/";\n $customConfig["thumbnailImage"] = "Provide a thumbnail Image URL";\n $customConfig["linkContent"] = "Design Patterns in Magento 2";\n\n \/\/set super attribute id, on which selection you want to change the content\/\/\n $customConfig["defaultVariantAttribute"] = 138; \n\n $result["customConfig"] = $customConfig;\n\n $resultJson = $this->jsonHelper->jsonEncode($result);\n\n \/\/\/\/\/\/\/\/\/\n }\n \n return $resultJson;\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 *\/\nvar config = {\n config: {\n mixins: {\n 'Magento_Swatches\/js\/swatch-renderer' : {'Webkul_ExtraContentInFotorama\/js\/swatch-renderer':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 *\/\ndefine([\n 'jquery',\n 'underscore',\n 'mage\/translate'\n], function ($, _, $t) {\n 'use strict';\n\n return function (SwatchRenderer) {\n \n $.widget('mage.SwatchRenderer', SwatchRenderer, {\n \/**\n * Update [gallery-placeholder] or [product-image-photo]\n * @param {Array} images\n * @param {jQuery} context\n * @param {Boolean} isInProductView\n *\/\n updateBaseImage: function (images, context, isInProductView) {\n var self = this.options.jsonConfig.customConfig; \/\/Load Custom Content Config.\n\n \/\/\/Check if linkUrl is empty\/\/\n if (self.linkUrl == "" || self.linkUrl == null) {\n return this._super(images, context, isInProductView);\n }\n \/\/\/\/\/\n\n var justAnImage = images[0],\n initialImages = this.options.mediaGalleryInitial,\n imagesToUpdate,\n gallery = context.find(this.options.mediaGallerySelector).data('gallery'),\n isInitial;\n\n if (isInProductView) {\n if (_.isUndefined(gallery)) {\n context.find(this.options.mediaGallerySelector).on('gallery:loaded', function () {\n this.updateBaseImage(images, context, isInProductView);\n }.bind(this));\n\n return;\n }\n\n imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];\n isInitial = _.isEqual(imagesToUpdate, initialImages);\n\n if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {\n \/\/Remove Additional Extra Content\n initialImages = this._removeExtraContentfromArray(initialImages);\n \/\/\/\/\/\/\/\/\/\/\/\/\/\/\n imagesToUpdate = imagesToUpdate.concat(initialImages);\n }\n\n imagesToUpdate = this._setImageIndex(imagesToUpdate);\n\n gallery.updateData(imagesToUpdate);\n this._addFotoramaVideoEvents(isInitial);\n } else if (justAnImage && justAnImage.img) {\n context.find('.product-image-photo').attr('src', justAnImage.img);\n }\n },\n\n \/**\n * Callback which fired after gallery gets initialized.\n *\n * @param {HTMLElement} element - DOM element associated with a gallery.\n *\/\n _onGalleryLoaded: function (element) {\n var galleryObject = element.data('gallery');\n\n \/\/\/\/\/\/\/\/\/\/\/\/\n var currImgs = galleryObject.returnCurrentImages();\n \n \/\/Load Extra Content\/\/\n this._loadExtraContent();\n\n \/\/Push Extra Content in images gallery\n var self = this.options.jsonConfig.customConfig;\n var modelThumbnailImg = self.thumbnailImage;\n \n this._pushExtraContent(currImgs, modelThumbnailImg);\n \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n this.options.mediaGalleryInitial = currImgs;\n\n \/\/\/Update Current Images in Media Gallery\/\/\/\n galleryObject.updateData(currImgs);\n },\n\n \/**\n * Load media gallery using ajax or json config.\n *\n * @private\n *\/\n _loadMedia: function () {\n var self = this.options.jsonConfig.customConfig; \/\/Get Custom Config.\n\n var $main = this.inProductList ?\n this.element.parents('.product-item-info') :\n this.element.parents('.column.main'),\n images;\n\n if (this.options.useAjax) {\n this._debouncedLoadProductMedia();\n } else {\n images = this.options.jsonConfig.images[this.getProduct()];\n\n if (!images) {\n images = this.options.mediaGalleryInitial;\n }\n\n \/\/\/\/\/\/\/\/\/\/\/\/Load Extra Content\/\/\/\/\/\n this._loadExtraContent();\n \/\/Remove Extra Content from image array\n images = this._removeExtraContentfromArray(images);\n\n var self = this.options.jsonConfig.customConfig;\n var modelThumbnailImg = self.thumbnailImage;\n \n \/\/Push Extra Content from image array\n this._pushExtraContent(images, modelThumbnailImg);\n \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n \n this.updateBaseImage(this._sortImages(images), $main, !this.inProductList);\n }\n },\n\n\n \/**\n * Delete Additional Extra Content from array\n * \n * @param {Array} imagesArray\n * @returns {Array}\n * @private\n *\/\n _removeExtraContentfromArray: function(imagesArray) {\n imagesArray = imagesArray.filter(element => element.type !== "ExtraContent");\n return imagesArray;\n },\n\n \/**\n * Push Extra Content in array\n * \n * @param {Array} fotoramaContentArray\n * @param {string} modelThumbnailImg\n * @private\n *\/\n _pushExtraContent: function(fotoramaContentArray, modelThumbnailImg) {\n var self = this.options.jsonConfig.customConfig;\n\n if (typeof fotoramaContentArray != "undefined" && \n (self.linkUrl != "" || self.linkUrl != null)) {\n fotoramaContentArray.unshift({\n thumb: modelThumbnailImg,\n src: self.linkUrl,\n type: 'ExtraContent',\n caption: self.linkContent,\n isMain: "true",\n position: 0\n });\n }\n },\n\n \/**\n * Get Selected Variant Value\n * \n * @return {string}\n * @private\n *\/\n _getSelectedVariantValue: function() {\n var self = this.options.jsonConfig.customConfig;\n var optionTextVal = "";\n var optionTextArr = []; \n var selectedText = "";\n var selectedVal = "";\n var selectedSwatchAttrId = 0;\n var defaultVariantAttribute = self.defaultVariantAttribute;\n \n if ($('.product-options-wrapper select[id^="attribute"]').find().length) {\n selectedText = $('.product-options-wrapper select[id^="attribute"] option:selected').text();\n } else {\n if ($('.swatch-attribute-options .swatch-option[aria-checked="true"]').length) {\n var swatchId = "";\n var idParts = [];\n $('.swatch-attribute-options .swatch-option[aria-checked="true"]').each(function() {\n swatchId = $(this).attr("id");\n idParts = swatchId.split('-');\n\n for (let index=0; index<idParts.length; index++) {\n if ($.isNumeric(idParts[index])) {\n selectedSwatchAttrId = idParts[index];\n break;\n }\n }\n if (parseInt(defaultVariantAttribute) == selectedSwatchAttrId) {\n selectedText = $(this).attr("data-option-label");\n }\n });\n }\n }\n\n \/\/\/\/\/Get Selected Variant Value\/\/\/\/\/\n selectedVal = $('.product-options-wrapper select[id^="attribute"] option:selected').val();\n if (selectedVal == "" && $('.product-options-wrapper select[id^="attribute"]').find().length) {\n selectedText = $('.product-options-wrapper select[id^="attribute"] option:eq(1)').text();\n } else {\n selectedVal = selectedText;\n }\n \/\/\/\/\/\n\n if ($('.product-options-wrapper select[id^="attribute"]').find().length) {\n if (selectedText.indexOf('+') == -1) {\n optionTextVal = selectedText;\n } else {\n optionTextArr = selectedText.split('+');\n optionTextVal = $.trim(optionTextArr[0]);\n } \n } else {\n optionTextVal = selectedVal;\n }\n \n return optionTextVal;\n },\n\n\n \/**\n * Event for swatch options\n *\n * @param {Object} $this\n * @param {Object} $widget\n * @private\n *\/\n _OnClick: function ($this, $widget) {\n var self = this.options.jsonConfig.customConfig;\n var wkExtraContentDiv = $("#wkExtraContent");\n var mainVariantAttributeId = self.defaultVariantAttribute;\n\n var swatchId = $this.attr("id");\n var idParts = swatchId.split('-');\n var selectedSwatchAttrId = 0;\n\n for (let index=0; index<idParts.length; index++) {\n if ($.isNumeric(idParts[index])) {\n selectedSwatchAttrId = idParts[index];\n break;\n }\n }\n \n if (typeof wkExtraContentDiv == "object" \n && selectedSwatchAttrId == parseInt(mainVariantAttributeId)) {\n var label = $this.attr("data-option-label");\n var bgColor = "#86FA50";\n\n switch (label) {\n case 'Gold': bgColor = "#DFD906"; break;\n case 'Diamond': bgColor = "#AFF3F2"; break;\n }\n\n setTimeout(function(){\n $("#wkExtraContent").css("background-color", bgColor);\n }, 300);\n \n }\n\n this._super($this, $widget);\n },\n\n \/**\n * Load Extra Content\n * \n * @private\n *\/\n _loadExtraContent: function() {\n var thisJs = this;\n var self = this.options.jsonConfig.customConfig;\n var divFotorama = $('div.gallery-placeholder > div.fotorama');\n\n if (self.linkUrl == "") {\n return;\n }\n var variantText = "None";\n \n \/\/Get Selected Variant Value\n variantText = thisJs._getSelectedVariantValue();\n\n divFotorama.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" style="background-color:#86FA50">';\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.linkUrl+'" style="font-size:18px">'\n extraContentHtml += self.linkContent+'<\/a>';\n extraContentHtml += '<\/div>';\n\n extra.frame.$stageFrame.html(extraContentHtml);\n }\n });\n }\n\n });\n\n return $.mage.SwatchRenderer;\n };\n});<\/pre>\n\n\n\n![\"TextSwatchAttribute\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/TextSwatchAttribute-1200x606.png\")
<\/figure>\n\n\n\n![\"TextSwatchResult\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/TextSwatchResult.gif\")
<\/figure>\n\n\n\n![\"VisualSwatchAttribute\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/VisualSwatchAttribute-1200x605.png\")
<\/figure>\n\n\n\n![\"VisualSwatchResult\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/VisualSwatchResult.gif\")
<\/figure>\n\n\n\n
Check the Magento 2 Advanced Media Manager<\/a> extension that allows editing the images present in the media gallery and add watermarks, filter, rotate, resize, and more.<\/p>\n\n\n\n