Magento – get configurable swatches in homepage product list (Custom product list)

color-swatchesmagento-1.9swatches

I have populated bestselling products on homepage. It's populating list of products as desired. Now i have enabled configurable swatches & have enabled on product listing(i'm using rwd theme).

I can see color swatches on product lists in my product listing page. Now i want those swatches on my custom product list at homepagepage.

What i tried:

<?php echo $this->getLayout()->createBlock('core/template')->setTemplate('configurableswatches/catalog/product/list/swatches.phtml')->toHtml(); ?>

This above prints nothing.

And i get all the code from rwd/default/theme/configurableswatches/catalog/product/list/swatches.phtml inside products populating loop. And it worked and shows the swatches, but now clicking on swatches has no effect to image ? (Image doesn't changes as like it does on product listing for same product even after i added all configurableswatches js under skin/frontend/rwd/default/js/configurableswatches/*.js).

What is the best way to achieve configurable swatches on custom product list on homepage ?

Best Answer

To show configurable swatch on Home Page in Feature Products List, follow the below steps -

1- Make your own list.phtml file for custom products list 2- in your list.phtml file select place where you want to show configurable swatches, and paste below code -

$_nameAfterChild = $this->getLayout()->getBlock('product_list.swatches');
$_nameAfterChild->setProduct($_product);
echo $_nameAfterChild->toHtml();

3- Include this file in Home Page in CMS using below code -

{{block type="catalog/product_list" column_count="5" category_id="21" template="catalog/product/homepage-list.phtml"}}

4- In local.xml file in your theme paste below code -

    <cms_index_index>
         <update handle="product_list"/>
    </cms_index_index>

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 – Link configurable swatches to appropriate simple product

The swatches on the list page are in this template: configurableswatches/catalog/product/list/swatches.phtml

Replace javascript:void(0) with the URL for the simple product.

For the question how to link to a configured product with preselected simple product, there is already a good answer here: Is it possible to link to a configurable product with pre-selected values?

Best Answer

Related Solutions

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

Magento – Link configurable swatches to appropriate simple product

Related Topic