0

For my Magento store design the client wants the swatches (just the swatch images, not the attribute value in a separate area below the image gallery and above the content. I have created a div to contain this and on load use jQuery to move the element that contains the swatches like so in view.phtml

<div class="fabric-swatch">

</div>
<script>
    jQuery(function($){
        $(".fabric-swatch").append($('dd.swatch-attr'));
    });
</script>

<div class="product-collateral toggle-content tabs">...

This has the desired effect of moving the swatch images, and when hovered over the value next to the attribute name is updated accordingly.

enter image description here

However, when I click on the swatch, the product image does not updated and the active swatch does not get updated in the #product-options-wrapper. (Correction:the attribute value does update in the #product-options-wrapper. It's just the product image that is not updating)

As far as I can tell in swatches-product.js the onOptionClick event is getting called as expected, but the code that updates the image and the attribute value just isn't working, and I can't figure out why.

0

I've solved this by myself. The answer is to move the hidden in swatches.phtml to outside of (before in my case) the element. This doesn't break the swatch functionality, and allows the element that contains the swatch images to be moved.

//Before
<dd class="clearfix swatch-attr<?php if ($_attribute->decoratedIsLast) echo ' last'; ?>">
<div class="input-box">
    <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select no-display swatch-select">
        <option><?php echo $this->__('Choose an Option...') ?></option>
    </select>


//After
<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select no-display swatch-select">
        <option><?php echo $this->__('Choose an Option...') ?></option> 
</select>
<dd class="clearfix swatch-attr<?php if ($_attribute->decoratedIsLast) echo ' last'; ?>">
<div class="input-box">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.