Magento – How to disable swaping of images in Magento 1.9.1.0 – swatches

ce-1.9.1.0productproduct-imagesswatches

I've created size swatches for products in Magento 1.9.1.0. Is it possible to disable images swapping for selection of size options. I don't have images for my simple products so after click on size swatch Magento display blank images. I just want to have images from my configurable products to which my simple products are associated.

Best Answer

if you are using ce-1.9.1.0 ee-1.14.1. or higher, the feature is already built in, with the so-called Configurable Swatches which allow "Product Image Swap".

You can enable this feature in System > Configuration > CATALOG > Configurable Swatches

enter image description here

Swap Images Defined by Option Label

One way to configure swap images is to upload images to a configurable product with labels exactly matching the specific option labels (for example, Royal Blue).

Here is an example of a configurable product image gallery images that contains images for three colors:

enter image description here

Swap Images Defined by Base Image

Another way to configure swap images is to upload base images to each child product of the configurable product.

Here is an example of a Royal Blue child product with an attached base image: enter image description here

Source and full documentation: http://www.magentocommerce.com/knowledge-base/entry/ee1141-ce191-configurable-swatches

Related Solutions

Magento 1.9.1.0 – How to Use Configurable Swatches in Default or Custom Theme

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

app/design/frontend/DEFAULT/default/template/catalog/product/view/type/options/

(or your package template folder)

Copy the file

app/design/frontend/RWD/default/template/catalog/product/view/media.phtml

app/design/frontend/DEFAULT/default/template/catalog/product/view/

(or your package template folder)

Copy the folders

skin/frontend/RWD/default/js/configurableswatches/
skin/frontend/RWD/default/js/lib/

and their content to

skin/frontend/DEFAULT/default/js/

(or your package skin folder)

Copy the files

skin/frontend/RWD/default/js/app.js
skin/frontend/RWD/default/js/minicart.js
skin/frontend/RWD/default/js/slideshow.js

skin/frontend/DEFAULT/default/js/

(or your package skin folder)

Copy the file

app/design/frontend/RWD/default/layout/configurableswatches.xml

app/design/frontend/DEFAULT/default/layout/

(or your package layout folder)

Create the file

app/design/frontend/DEFAULT/default/layout/local.xml

If your package layout folder already contains a local.xml file, then do not overwrite it. Have a look at the changes in the next step and copy them to your version of the local.xml file.

Open up local.xml and add the following code:

<?xml version="1.0"?>
<layout>

    <default>

        <reference name="head">

                <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
                <action method="addJs"><script>lib/jquery/noconflict.js</script></action>

                <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>

        </reference>

    </default>

    <catalog_product_view>

        <reference name="head">

            <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>

        </reference>

        <reference name="product.info.media">

            <block type="core/text_list" name="product.info.media.after" as="after" />

        </reference>

    </catalog_product_view>

    <PRODUCT_TYPE_configurable>

        <reference name="product.info.options.configurable">

            <block type="core/text_list" name="product.info.options.configurable.renderers" as="attr_renderers">
                        <block type="configurableswatches/catalog_product_view_type_configurable_swatches" template="configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml" />
            </block>
            <block type="core/text_list" name="product.info.options.configurable.after" as="after">
            <block type="core/template" template="configurableswatches/catalog/product/view/type/configurable/swatch-js.phtml" />
            </block>

        </reference>

    </PRODUCT_TYPE_configurable>

</layout>

Add the following css to your styles.css file:

/* ============================================ *
 * Configurable Swatches
 * ============================================ */
/* Clears */
.clearfix:after,
.configurable-swatch-list:after,
.product-view .product-options .swatch-attr:after {
  content: '';
  display: table;
  clear: both;
}

/* General Swatch Styling */
.swatch-link,
.swatch-label {
  display: block;
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
  color: #636363;
  text-decoration: none;
  box-sizing: content-box;
}

.swatch-link {
  border: 1px solid #cccccc;
  margin: 0 0 3px;
}
.swatch-link img {
  border-radius: 2px;
}
.swatch-link:hover {
  cursor: pointer;
  text-decoration: none;
}
.swatch-link .x {
  display: none;
  text-indent: -999em;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url(../images/bg_x.png) center no-repeat transparent;
  z-index: 10;
}
.swatch-link.has-image .swatch-label {
  position: relative;
}
.swatch-link.has-image img {
  position: absolute;
  top: 0;
  left: 0;
}

.swatch-label {
  border: 1px solid #fff;
  margin: 0;
  white-space: nowrap;
  background: #f4f4f4;
}

.configurable-swatch-list {
  margin-left: -3px;
  zoom: 1;
  clear: both;
  -webkit-transform: translateZ(0px);
}
.configurable-swatch-list li {
  float: left;
  zoom: 1;
  margin: 0 0 0 3px;
}
.products-grid .configurable-swatch-list li {
  display: inline-block;
  float: none;
  margin: 0;
  vertical-align: top;
}
.configurable-swatch-list .not-available .x {
  display: block;
}
.configurable-swatch-list .not-available .swatch-link {
  border-color: #ededed;
  position: relative;
}
.configurable-swatch-list .not-available .swatch-link.has-image img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.configurable-swatch-list .not-available .swatch-label {
  color: #aaa;
  background: #fff;
}
.configurable-swatch-list .wide-swatch .swatch-label {
  padding: 0 6px;
}
.configurable-swatch-list .not-available a:focus {
  outline: 0;
}

#narrow-by-list dd .configurable-swatch-list li {
  margin: 0 0 0 3px;
  width: 47%;
}
#narrow-by-list dd .swatch-link {
  border: none;
  line-height: 25px;
  margin-right: 2px;
  text-align: left;
}
#narrow-by-list dd .swatch-link.has-image {
  line-height: inherit;
}
#narrow-by-list dd .swatch-link:hover .swatch-label {
  border-color: #3399cc;
}
#narrow-by-list dd .swatch-label {
  background: #f4f4f4;
  border: 1px solid #cccccc;
  border-radius: 3px;
  display: block;
  float: left;
  line-height: 1.5em;
  margin: 0 5px 0 0;
  padding: 1px 5px;
  white-space: nowrap;
}
#narrow-by-list dd .swatch-label img {
  border: 1px solid #fff;
  border-radius: 3px;
  box-sizing: content-box;
}
#narrow-by-list dd .has-image .swatch-label {
  padding: 0;
}

@media only screen and (max-width: 770px) {
  #narrow-by-list dd .configurable-swatch-list li:nth-child(odd) {
    clear: left;
  }
}
.currently .swatch-current {
  position: relative;
}
.currently .swatch-current .btn-remove {
  margin-top: -10px;
  position: absolute;
  right: 0;
  top: 50%;
}
.currently .swatch-current span {
  display: block;
  float: left;
}
.currently .swatch-link {
  display: inline-block;
  margin: 0 0 0 3px;
}
.currently .swatch-link:hover {
  border-color: #cccccc;
  cursor: default;
}

/* Other Swatch States */
.configurable-swatch-list .hover .swatch-link,
.configurable-swatch-list .selected .swatch-link,
.swatch-link:hover {
  border-color: #3399cc;
}

.configurable-swatch-box {
  background: none !important;
}
.configurable-swatch-box select.swatch-select {
  display: none;
}
.configurable-swatch-box .validation-advice {
  margin: 0 0 5px;
  background: #df280a;
  padding: 2px 5px !important;
  font-weight: bold;
  color: #fff !important;
  float: left;
  display: block;
  border-radius: 3px;
}
.product-view .product-img-box .product-image img {
    max-width: 100%;
    max-height: 750px;
    margin: 0px auto;
}
.product-view .product-img-box .product-image-zoom {
    z-index: 0;
}
.product-view .product-image-thumbs img {
    max-width: 100%;
    max-height: 100%;
}

Copy the file

skin/frontend/RWD/default/images/bg_x.png

skin/frontend/DEFAULT/default/images/

Magento – Magento 1.9.1 swatches don’t swap images

I am working on the same problem, if you go to the rwd folder in both app/skin, copy that over to your theme folder, it will work. what I am fuss about is how many library it need for this to work.

Best Answer

Related Solutions

Magento 1.9.1.0 – How to Use Configurable Swatches in Default or Custom Theme

Magento – Magento 1.9.1 swatches don’t swap images

Related Topic