Automatically Alternate Between Solid Color and Pattern Swatches

Last modified by rsskga on Thu, June 24, 2010 16:44
Source|Old Revisions  

Building on http://www.magentocommerce.com/wiki/adding_colour_swatches_to_configurable_products and http://www.magentocommerce.com/wiki/how-to/color_swatches_without_creating_pallete_images, I am successfully using the following code to have solid colors automatically populate via hex code with the option to use patterned swatch files for products that are available with prints in addition to solid colors.

Put this is app/design/frontend/default/my_theme_name/catalog/product/view/type/options/configurable.phtml

I’m not an advanced programmer... this is a fairly minor change to other contributor’s code samples, so hopefully I’m not opening any security holes or otherwise sharing badly formed code.

  1. <?php
  2. $_product    = $this->getProduct();
  3. $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
  4. ?>
  5. <?php if ($_product->isSaleable() && count($_attributes)):?>
  6.     <dl>
  7.     <?php foreach($_attributes as $_attribute): ?>
  8.         <dt><label><?php echo $_attribute->getLabel() ?><span class="required">&nbsp;*</span></label></dt>
  9.         <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
  10.           <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
  11.             <option><?php echo $this->__('Choose an Option...') ?></option>
  12.           </select>
  13.         </dd>
  14.        
  15.     <?php
  16.         $_productAttribute = $_attribute->getProductAttribute();
  17.         $_option_vals = array();
  18.        
  19.         //
  20.         // The following is an array of attribute codes.
  21.         // List here all attributes that will potentially
  22.         // have associated color codes
  23.         //
  24.         $color_attributes = array('color');
  25.         if ( in_array($_productAttribute->getAttributeCode(), $color_attributes) ) {
  26.                         echo '<div><ul>';
  27.                          $_colors = array();
  28.                         //
  29.                         // Pull in all potential options for this attribute
  30.                         //
  31.                         $_collection = Mage::getResourceModel('eav/entity_attribute_option_collection')
  32.                                               ->setStoreFilter(0)
  33.                                                   ->setAttributeFilter($_productAttribute->getId())
  34.                                                     ->load();
  35.                         foreach( $_collection->toOptionArray() as $_cur_option ) {
  36.                                $_option_vals[$_cur_option['value']] = array('id' => $_cur_option['value'], 'internal_label' => $_cur_option['label']);
  37.                            }
  38.                         //
  39.                         // Get associated products
  40.                         //
  41.                         $tempnew Mage_Catalog_Block_Product_View_Type_Configurable();
  42.                         $_assProducts = Mage::helper('core')->decorateArray($temp->getAllowProducts());
  43.                         foreach($_assProducts as $_assProduct){
  44.                                 $_tempProduct = Mage::getModel('catalog/product');
  45.                                 $_tempProduct->load($_assProduct->getId());
  46.                                 $_option_id = $_tempProduct->getData($_productAttribute->getAttributeCode());
  47.                                 //
  48.                                 // Keep track of the admin/backend label for this option id
  49.                                 //
  50.                                 if ( isset($_option_vals[$_option_id]['internal_label']) ) {
  51.                                     $_option_vals[$_option_id]['label'] = $_tempProduct->getAttributeText($_productAttribute->getAttributeCode());
  52.                                      array_push($_colors, $_option_id);
  53.                                 }
  54.                         }
  55.                         $_color_swatch = array_unique($_colors);
  56.                         foreach($_color_swatch as $_inner_option_id){
  57.                                  preg_match_all('/((#?[A-Za-z0-9]+))/', $_option_vals[$_inner_option_id]['internal_label'], $matches);
  58.                                 if ( count($matches[0]) > 0 ) {
  59.                                     //
  60.                                     // Found a color definition in the admin label
  61.                                     //
  62.                                     $color_value = $matches[1][count($matches[0])-1];
  63.                                     echo '<li><div onclick="set_attribute_selected_value('.$_attribute->getAttributeId().', '.$_inner_option_id.');" style="cursor:pointer; float:left; margin-left: 8px; height: 32px; width: 32px; background-color: '.$color_value.';">';
  64.                                     if (file_exists($_SERVER{'DOCUMENT_ROOT'}.'/media/catalog/colours/'.$color_value.'.jpg')) {
  65.                                         //echo 'true';
  66.                                         echo '<img src="' . $this->getUrl() .'/media/catalog/colours/'.$color_value.'.jpg" alt="'.$color_value.'" width="32" height="32" title="'.$color_value.'" />';
  67.                                     } else {
  68.                                         //echo 'false';
  69.                                         //echo $this->getUrl() .'media/catalog/colours/'.$color_value.'.jpg';
  70.                                     }
  71.                                     echo '</div></li>';
  72.                                 }
  73.                         }       
  74.                         echo '</ul></div><div class="clear"></div>';           
  75.         }
  76.         endforeach;
  77.     ?>
  78.     </dl>
  79.    <script type="text/javascript">
  80.         var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
  81.         function set_attribute_selected_value( attribute_id, val ) {
  82.             dropdown = document.getElementById('attribute' + attribute_id);
  83.             for ( var i = 0; i < dropdown.options.length; i++ ) {
  84.                 if ( dropdown.options[i].value == val ) {
  85.                     dropdown.selectedIndex = i;
  86.                     break;
  87.                 }
  88.             }
  89.             spConfig.configureElement($('attribute' + attribute_id));
  90.         }
  91.     </script>
  92. <?php endif;?>



 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs