1

I'm using CE 1.9.1 with the rwd theme and am enjoying the power of switching images by clicking on the color swatches. I'm attempting to do something different though.

I have a product available in multiple colors. Aside from that, some colors also come in a striped pattern. (Not all colors come in striped.)

The default product image should show a collection of all the child products. There would be two sets of swatches. Colored, and Text with "solid" and "striped" as choices. When swatch blue is clicked the blue solid image should display and when striped is then clicked, the blue striped image should show. I cannot get this to work.

When I label the images for all the solid as the color name i.e. blue, black, red, They all display as soon as the color swatch is clicked. However, what can I do to get the striped versions to work?

I tried setting an image for the blue striped simple product but this does nothing. If I label this image striped then it will display when the striped swatch is clicked - provided no color swatch was clicked. Once a color swatch is clicked and its solid color is displayed, a click on striped will not change the image. When solid gets clicked though, there is a reaction. The image reverts to the product default.

What is recommended for configurable product images using multiple attributes?

EDIT: The real scenario involves more attributes than just colors. Say size, or even handle type will require different product images.

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 colors.
Full description of the extension can be found here

  • I've been looking into that. I hope to get the extension working soon and will post here if it works for multiple attributes. – tzvi May 14 '15 at 17:12
  • Nice extension @Marius. It does work as promised - I needed to set the Change images on setting to 'Color'. It isn't as smooth as the default Configurable Swatches. Off the bat, I noticed the 'hover' mode gives no reaction, and the attribute value text doesn't display, even after clicking the swatch, . – tzvi Jul 27 '15 at 20:25
  • @tzvi. the behavior of the media section is different from theme to theme. That's why I cannot make one extension to fit all themes. But there is something that overcomes this. In the configuration settings of the extension there are 2 fields that allow you to fill in some js code to be executed after the image changes or the whole media block is changed. You can reinitialize the zoom functionality or carousel, or what ever you use in your theme, but adding code in these fields. Read the documentation for a cleaner explanation. – Marius Jul 28 '15 at 6:38
1

Maybe this can help you out.

As far as I can tell, you just have one choice to set swatches for. You could add the variants as colors, that would help you out of the box.

So, blue, blue striped, red, red striped.

  • Thank you for your answer. It will not work in my situation which involves more attributes than just colors. – tzvi Mar 25 '15 at 17:44
  • Hi, take a look at Mage_ConfigurableSwatches_Helper_Mediafallback->attachConfigurableProductChildrenAttributeMapping here the mapping is defined, so maybe tweaking a bit in here will help you out. – Jeroen Mar 25 '15 at 20:36
  • And you also need to look at the js file which looks which image applies, so you would create combinations like black-striped and striped-black for both combinations. – Jeroen Mar 25 '15 at 20:42
0

Step 1:Create a module :{your_module_name}

Step 2: /app/code/local/D1m/{your_module_name}/etc/system.xml

<config>
<sections>
    <configswatches translate="label" module="configurableswatches">
        <groups>
            <general translate="label" module="configurableswatches">
                <label>General Settings</label>
                <sort_order>10</sort_order>
                <show_in_default>1</show_in_default>
                <show_in_website>1</show_in_website>
                <show_in_store>1</show_in_store>
                <fields>
                    <product_list_attribute translate="label">
                        <label>Product Attribute to Use for Swatches in Product Listing</label>
                        <frontend_type>multiselect</frontend_type>
                        <source_model>configurableswatches/system_config_source_catalog_product_configattribute_select</source_model>
                        <sort_order>30</sort_order>
                        <show_in_default>1</show_in_default>
                        <show_in_website>1</show_in_website>
                        <show_in_store>1</show_in_store>
                    </product_list_attribute>
                </fields>
            </general>
        </groups>
    </configswatches>
</sections>

Step 3: /app/code/local/D1m/{your_module_name}/etc/config.xml update your xml...

<helpers><configurableswatches></configurableswatches></helpers><models><configurableswatches><rewrite><observer>D1m_{your_module_name}_Model_ConfigurableSwatches_Observer</observer>

Step 4:/app/code/local/D1m/{your_module_name}/Helper/ConfigurableSwatches/Productlist.php class D1m_{your_module_name}_Helper_ConfigurableSwatches_Productlist extends Mage_ConfigurableSwatches_Helper_Productlist { protected $_swatchAttributeIds;

protected $_swatchAttributes;

/**
 * Get ID of the attribute that should be used for swatches on product listing
 *
 * @return string
 */
public function getSwatchAttributeIds()
{
    if (is_null($this->_swatchAttributeIds)) {
        $this->_swatchAttributeIds =
            Mage::getStoreConfig(Mage_ConfigurableSwatches_Helper_Data::CONFIG_PATH_LIST_SWATCH_ATTRIBUTE);
    }
    return $this->_swatchAttributeIds;
}

/**
 * Get model of attribute that should be used for swatches on product listing
 */
public function getSwatchAttributes()
{
    $attributeIds = explode(',',$this->getSwatchAttributeIds());
    $attributeCode = array();
    foreach ( $attributeIds as $attributeId ) {
        $attributeCode[] = Mage::getModel('eav/entity_attribute')
            ->load($attributeId)->getAttributeCode();
    }
    return $attributeCode;
}

}

Step 5:/app/code/local/D1m/{your_module_name}/Helper/ConfigurableSwatches/Mediafallback.php class D1m_{your_module_name}_Helper_ConfigurableSwatches_Mediafallback extends Mage_ConfigurableSwatches_Helper_Mediafallback {

/**
 * Set child_attribute_label_mapping on products with attribute label -> product mapping
 * Depends on following product data:
 * - product must have children products attached
 *
 * @param array $parentProducts
 * @param $storeId
 * @return void
 */
public function attachConfigurableProductChildrenAttributeMapping(array $parentProducts, $storeId)
{
    $listSwatchAttr = Mage::helper('d1m_productoptionsimage/configurableSwatches_productlist')
        ->getSwatchAttributeIds();
    $listSwatchAttr = explode(',',$listSwatchAttr);

    $parentProductIds = array();
    /* @var $parentProduct Mage_Catalog_Model_Product */
    foreach ($parentProducts as $parentProduct) {
        $parentProductIds[] = $parentProduct->getId();
    }

    $configAttributes = Mage::getResourceModel('configurableswatches/catalog_product_attribute_super_collection')
                            ->addParentProductsFilter($parentProductIds)
                            ->attachEavAttributes()
                            ->setStoreId($storeId)
    ;

    $optionLabels = array();
    foreach ($configAttributes as $attribute) {
        $optionLabels += $attribute->getOptionLabels();
    }

    foreach ($parentProducts as $parentProduct) {
        $mapping = array();
        $listSwatchValues = array();

        /* @var $attribute Mage_Catalog_Model_Product_Type_Configurable_Attribute */
        foreach ($configAttributes as $attribute) {
            /* @var $childProduct Mage_Catalog_Model_Product */
            if (!is_array($parentProduct->getChildrenProducts())) {
                continue;
            }

            foreach ($parentProduct->getChildrenProducts() as $childProduct) {
                // product has no value for attribute, we can't process it
                if (!$childProduct->hasData($attribute->getAttributeCode())) {
                    continue;
                }
                $optionId = $childProduct->getData($attribute->getAttributeCode());

                // if we don't have a default label, skip it
                if (!isset($optionLabels[$optionId][0])) {
                    continue;
                }

                // normalize to all lower case before we start using them
                $optionLabels = array_map(function ($value) {
                    return array_map('Mage_ConfigurableSwatches_Helper_Data::normalizeKey', $value);
                }, $optionLabels);

                // using default value as key unless store-specific label is present
                $optionLabel = $optionLabels[$optionId][0];
                if (isset($optionLabels[$optionId][$storeId])) {
                    $optionLabel = $optionLabels[$optionId][$storeId];
                }

                // initialize arrays if not present
                if (!isset($mapping[$optionLabel])) {
                    $mapping[$optionLabel] = array(
                        'product_ids' => array(),
                    );
                }
                $mapping[$optionLabel]['product_ids'][] = $childProduct->getId();
                $mapping[$optionLabel]['label'] = $optionLabel;
                $mapping[$optionLabel]['default_label'] = $optionLabels[$optionId][0];
                $mapping[$optionLabel]['labels'] = $optionLabels[$optionId];
                if (in_array($attribute->getAttributeId(),$listSwatchAttr)
                    && !in_array($mapping[$optionLabel]['label'], $listSwatchValues)
                ) {
                    $listSwatchValues[$optionId] = $mapping[$optionLabel]['label'];
                }
            } // end looping child products
        } // end looping attributes


        foreach ($mapping as $key => $value) {
            $mapping[$key]['product_ids'] = array_unique($mapping[$key]['product_ids']);
        }

        $parentProduct->setChildAttributeLabelMapping($mapping)
                      ->setListSwatchAttrValues($listSwatchValues);
    } // end looping parent products
}

/**
 * Determines which product attributes should be selected
 * when children products are attached to parent products
 *
 * @return array
 */
protected function _getChildrenProductsAttributes()
{
    $color_size_attribute = Mage::helper('d1m_productoptionsimage/configurableSwatches_productlist')
        ->getSwatchAttributes();
    $default_attribute = array(
        'small_image',
        'image',
        'image_label',
        'small_image_label',
    );
    return array_merge($color_size_attribute,$default_attribute);
}

/**
 * Attaches children product to each product via
 * ->setChildrenProducts()
 *
 * @param array $products
 * @param int $storeId
 * @return void
 */
public function attachChildrenProducts(array $products, $storeId)
{
    $productIds = array();
    /* @var $product Mage_Catalog_Model_Product */
    foreach ($products as $product) {
        $productIds[] = $product->getId();
    }

    $collection = Mage::getResourceModel(
        'configurableswatches/catalog_product_type_configurable_product_collection');

    $collection->setFlag('product_children', true)
               ->addStoreFilter($storeId)
               ->addAttributeToSelect($this->_getChildrenProductsAttributes());
    $collection->addProductSetFilter($productIds);
    $collection->load();

    $mapping = array();
    /* @var $childProduct Mage_Catalog_Model_Product */
    foreach ($collection as $childProduct) {
        foreach ($childProduct->getParentIds() as $parentId) {
            if (!isset($mapping[$parentId])) {
                $mapping[$parentId] = array();
            }
            $mapping[$parentId][] = $childProduct;
        }
    }

    foreach ($mapping as $parentId => $childrenProducts) {
        $products[$parentId]->setChildrenProducts($childrenProducts);
    }
}

}

Step 6:/app/code/local/D1m/{your_module_name}/Model/ConfigurableSwatches/Observer.php class D1m_{your_module_name}_Model_ConfigurableSwatches_Observer extends Mage_ConfigurableSwatches_Model_Observer {

/**
 * Attach children products after product list load
 * Observes: catalog_block_product_list_collection
 *
 * @param Varien_Event_Observer $observer
 */
public function productListCollectionLoadAfter(Varien_Event_Observer $observer)
{
    if (!Mage::helper('configurableswatches')->isEnabled()) { // check if functionality disabled
        return; // exit without loading swatch functionality
    }

    /* @var $helper Mage_ConfigurableSwatches_Helper_Mediafallback */
    $helper = Mage::helper('{your_module_name}/configurableSwatches_mediafallback');

    /* @var $collection Mage_Catalog_Model_Resource_Product_Collection */
    $collection = $observer->getCollection();

    if ($collection
        instanceof Mage_ConfigurableSwatches_Model_Resource_Catalog_Product_Type_Configurable_Product_Collection) {
        // avoid recursion
        return;
    }

    $products = $collection->getItems();

    $helper->attachChildrenProducts($products, $collection->getStoreId());

    $helper->attachConfigurableProductChildrenAttributeMapping($products, $collection->getStoreId());

    $helper->attachGallerySetToCollection($products, $collection->getStoreId());

    /* @var $product Mage_Catalog_Model_Product */
    foreach ($products as $product) {
        $helper->groupMediaGalleryImages($product);
        Mage::helper('configurableswatches/productimg')
            ->indexProductImages($product, $product->getListSwatchAttrValues());
    }

}

}

Enjoy!

Configurable Swatches on Listing Page: Show Multiple Color Attributes

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.