34

Monocat, Magento have a existing feature to show simple product images at shopping cart. In order to show simple product image instead of configurable ,please goto admin ->System -> Configuration ->Sales -> Checkout -> Shopping Cart -> Change Configurable Product Image value to Product Thumbnail Itself and click on save save config to ...


28

Copy the folder app/design/frontend/RWD/default/template/configurableswatches/ and its content to app/design/frontend/DEFAULT/default/template/ (or your package template folder) Copy the file app/design/frontend/RWD/default/template/catalog/product/view/type/options/configurable.phtml to app/design/frontend/DEFAULT/default/template/catalog/product/...


22

Right. I detect problem on Mage_ConfigurableSwatches_Helper_Mediafallback::attachConfigurableProductChildrenAttributeMapping function. I make some changes on it. This increase performance. Try: Copy /app/code/core/Mage/ConfigurableSwatches/Helper/Mediafallback.php to /app/code/local/Mage/ConfigurableSwatches/Helper/Mediafallback.php. On /app/code/local/...


10

You have to apply changes under app/design/frontend/{Package}/{themename}/etc/view.xml file. For changes value of swatches you have to add your tag inside view.xml files <media> <images module="Magento_Catalog"> <image id="swatch_image" type="swatch_image"> <width>50</width> ...


8

Make your theme extend Magento_Swatches. Copy swatch-renderer.js to your Magento_Swatches/web/js folder. Edit js file, comment out or delete the $.widget('mage.SwatchRendererTooltip' ... part.Then find // Connect Tooltip container.find('[option-type="1"], [option-type="2"], [option-type="0"], [option-type="3"]') .SwatchRendererTooltip(); and ...


7

I've created a module to override \Mage_ConfigurableSwatches_Model_Resource_Catalog_Product_Attribute_Super_Collection::_loadOptionLabels with the following: protected function _loadOptionLabels() { if ($this->count()) { $attributeIds = array(); $productId = false; $filterLabels = false; foreach ($this->_items as $...


7

1) Copy and create template vendor/magento/module-swatches/etc/view.xml into your theme app/design/frontend/[Vendor]/[Theme Name]/Magento_Swatches/etc/view.xml 2) Clear cache : php bin/magento cache:clean 3) Resize images : php bin/magento catalog:images:resize 4) Flush browser cache (F12 in Chrome, then right click refresh icon and choose "Emtpy Cache ...


7

As I can't replicate this issue it's hard for me to say what the issue is exactly but following the code from the error it seems to be when $('[data-gallery-role=gallery-placeholder]').data('gallery') is undefined. The cause of this is likely to be a class or data attribute being removed/changed. To confirm this is the case when you replicate the problem ...


6

This is not possible by default, one solution that you could use is adding an extra attribute where you define the main colors (blue, red and more) and use that attribute only in your layered navigation. The current color swatch attribute is then only used for the product selection and has the real color varian (ie ocean blue).


6

You can get swatch Image from this, $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $swatch = $objectManager->create('Magento\Swatches\Model\Swatch')->load($swatchId); $imageName=$swatch->getData('value'); if(!empty($imageName)){ $imagePath=$objectManager->create('Magento\Swatches\Helper\Media')->getSwatchMediaUrl().$...


6

<?php/***********Display Color Attribute************/?> <?php $om = \Magento\Framework\App\ObjectManager::getInstance(); $attribute = $om->get(\Magento\Catalog\Api\ProductAttributeRepositoryInterface::class)->get('color'); ?> <ul> <?php foreach ($attribute->getOptions() as $option) { $name = $option->getLabel(); $...


6

I get this using etc/view.xml file in my theme, with this configuration: <vars module="Magento_ConfigurableProduct"> <var name="gallery_switch_strategy">replace</var> </vars> The Luma Theme default value is prepend. This link brings more information.


5

This was hell of a pain from trying to find the CSS, creating a mixin for swatch-renderer.js etc. Anyway, by looking at the code I found show_swatch_tooltip in system.xml and config.xml in magento-swatches module which is set to 1 as default. This can be switched off in the admin panel... Stores ->Configuration ->Catalog ->Catalog ->Storefront ->Show ...


5

It's working fine When i tried like this. $('body').on('click', '.swatch-option', function(e) { alert("hello"); var swatchid = $('.swatch-attribute').attr('option-selected'); var swatchattributeid = $('.swatch-attribute').attr('attribute-id'); });


4

Additional way to improve performance configurable swatches when you have a lot of attribute options. For example if you have 2000 options and show 36 products in catalog list, in this case method Mage_ConfigurableSwatches_Model_Resource_Catalog_Product_Attribute_Super_Collection::_loadOptionLabels() will join to each super_attributes option labels and you ...


4

I solved this problem by calling Varien_Image::keepTransparency(true) on the before it does the resize. Unfortunately, there's no event we can observe here, so we have to extend/override Mage_ConfigurableSwatches_Helper_Productimg::_resizeSwatchImage. Maybe someone else (you?) can propose a more future-proof solution. etc/config.xml: <?xml version="1....


4

The swatch extensions I know, as well as the 1.9 core module, use images of the simple products, so there is no way around duplicating the images. But you can avoid duplicating the actual image files if you rewrite the media attribute model. Here is a module that does it, it compares the MD5 hash of uploaded images and reuses existing files: https://github....


4

You have to edit configurable product, in configurable tab (product edit page) you can view option for Edit Configurations. Click on Edit Configurations, you can see select attribute screen, go to next for step 2. In step 2 you can see your selected attributes like size and color. You can change position of your attributes by drag and drop from here. drag ...


4

I think in Magento 2 by default provides this functionality. To allow choose color via product image you have to set the "Use Product Image for Swatch if Possible" to Yes on your color attribute. check the below images. Hope it will work for you.


3

I can recommend you and alternative for the default color swatches. This free extension. it allows you to do what the color swatches do and more but without the headache of naming conventions. You can change the dropdowns to labels, colors or even simple product images. and the main image can be changed to the simple product image for all attributes not just ...


3

You can check my code in this module, which gets all images from the simple products on swatch change: https://github.com/wigman/AjaxSwatches I'm on a holiday so can't really type a lot of code here right now.. The module loads a JavaScript file that extends the swatch-change event. On this event I've put an Ajax call that gets the simple product ...


3

In order to display swatches in layered navigation, you have to use global swatch images (/media/wysiwyg/swatches) with the same name as the Color attribute label. Use all lowercase letters and replace non-alphanumeric characters with hyphens. I'm not sure if they must be png. If you have already done this, see Adding Global Swatch Images in the guide for ...


3

the javascript and functionality of the 1.9.1 color swatch features is built into the rwd/default package/theme, and not any other package/theme. Most templates are built on default/default or base/default which do not include that functionality. More Detailed http://www.magentocommerce.com/knowledge-base/entry/ee1141-ce191-configurable-swatches


3

I have investigated this issue. In file: Magento\Swatches\Helper\Media, we have this method: vendor/magento/module-swatches/Helper/Media.php /** * Merged config from view.xml * * @return array */ public function getImageConfig() { $imageConfig = []; foreach ($this->themeCollection->loadRegisteredThemes() as $theme) { $config = $...


3

Let me preface this by saying the solution below is far more invasive than I initially thought it would have needed to be. Most notably the total overwrite of Magento_Swatches/js/product-attributes. The code below was testing and functioned on Magento 2.2.4. Model/Swatch.php This class just holds the constant values for the new frontend input types <...


3

You Can get all the swatches attribute option data with below code. <?php $attributes = $_product->getTypeInstance(true)->getConfigurableAttributesAsArray($_product); foreach ($attributes as $attribute){ foreach($attribute['values'] as $data){ echo "<pre>"; print_r($data); } }


3

We had this same issue until we realized we were hiding the price of products on our category listing page. Apparently, swatch-renderer.js relies on classes on the price box to determine if it is on the product view or product listing page. After re-enabling the price box, color swatch switching started working again.


3

I found a pretty efficient way to fix this: Copy the /vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js-file to app/design/YourName/YourTheme/Magento_Swatches/web/js/swatch-renderer.js and replace the updateBaseImage() (line ~1152) with the following: updateBaseImage: function (images, context, isInProductView, eventName) { var ...


2

your solution is great but not show color swatch in category list or grid. Here I add the solution to show it, tested on magento 1.9.2.4. In : app/design/frontend/CUSTOM-THEME/template/catalog/product add followed line in list.phtml 1 - first to show in list view, check if there this, if no, update o change (aroud line 39): <?php $_imgSize = 300; ?>...


2

You should find out where and how in your "Best Friends" theme the list of categories is generated. This depends on your custom theme. So I'm not able to advise on where and how this is done. You could ask EM Themes where to look. Then add different class names to the list elements, like class="topcat", class="subcat" and class="childcat". The result ...


Only top voted, non community-wiki answers of a minimum length are eligible