Magento 1.9 – Keep Select Box Dropdown for Configurable Swatches

magento-1.9rwd-themeswatches

Magento 1.9.1, using the rwd theme.

Is it possible to set an attribute as a configurable swatch but leave the control in the product page as a dropdown?

I can see that the JavaScript is using swatches to control the dropdown which has been given the class no-display

Removing this class and operating the select box in the browser shows this to be the case.

Ideally I really just want the 'different product image per option' part of the configurable swatches, but Magento doesn't seem to offer the ability to do one without the other.

Can configurable swatches be made to use the original dropdown?

Best Answer

Try that...

Locate your file style.css and try to add this lines:

.product-options .last .input-box .no-display {
  display: block !important;
}
.product-options .last .input-box .configurable-swatch-list {
  display: none !important;
}

I hope this helps you.

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/

Configurable Swatches – Maintain Correct Image Proportions in Magento 1.9

We ran into this and perhaps someone has a better solution, but we extended the configurable swatches productimage.php helper with our own module. Perhaps Magento intended everyone to create manual swatches for every product. That tis time consuming and we have products that does not work well for. They uses the Varien Image model which allowed them access to caching, but does not have the convenient default settings of the MAGE catalog/image model. The nice part is those functions are available.

If you don't know how to create a module would suggest making square images. "Do Not Edit The Core Files" Extend Them!

We extended the

protected function _resizeSwatchImage($filename, $tag, $width, $height)
{

below

$processor = new Varien_Image($sourceFilePath);

we added

$processor->backgroundColor(array(255, 255, 255)); 
// Set background color to white
$processor->constrainOnly(TRUE); 
//Constrain to proportions
$processor->keepAspectRatio(TRUE); 
//keep existing aspect ratio
$processor->keepFrame(TRUE);
//Kinda what it says

Best Answer

Related Solutions

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

Configurable Swatches – Maintain Correct Image Proportions in Magento 1.9

Related Topic