Techniques to Show product options in product list

Techniques to Show product options in product list

Displaying product options like colors, sizes, price… in the product list gives an incentive to the customer to select and purchase a product. It is likely not possible to achieve these options by installing default Magento alone. In this article, we will recommend some effective methods to show options for the configurable and product options in product list. Check them out!

Latest Update: We’ve just released the version 2.0 of Claue Multipurpose Magento 2 Theme, with with a bunch of performance improvements and exclusive features. Check this theme out now: Claue Magento Theme  2. 0 

claue2_edited (1)

Live Demo 

Claue – Clean, Minimal Magento 2&1 Theme is an excellent template for a modern and clean eCommerce store with 40+ homepage layouts and tons of options for shop, blog, portfolio, store locator layouts and other useful pages. Claue version 2. 0  comes with a bunch of  exclusive features including:

  • Being based on Luma theme.
  • Meet all standards of Magento Theme
  • Significant performance improvement
  • Compatible with most third-party extensions.
  • Fully compatible with Magento 2.4.x

This second advanced version completely differentiates from its previous one. Thus, if you are using Claue version 1 and want to update to Claue version 2, you can only rebuild a new website no rather than updating from the old version. Now, let’s get back the main topic.

Showing options for Configurable products

Reality: You can both show all options for the product and add and customize price to each of the options. Just follow these steps:
1. Create Acatalog module with AHT namespace (app/local/AHT/Acatalog)
2.Create a file named app/etc/modules/AHT_Acatalog.xml to activate the module:

<config>
  <modules>
    <AHT_Acatalog>
      <active>true</active>
      <codePool>local</codePool>
    </AHT_Acatalog>
  </modules>
</config>

3. Create a file named app/local/AHT/Acatalog/ect/config.xml with the following content

<?xml version="1.0"?>
<config>
    <modules>
        <AHT_Acatalog>
            <version>1.0.0</version>
        </AHT_Acatalog>
    </modules>
    <frontend>
        <layout>
            <updates>
                <acatalog>
                    <file>aht_acatalog.xml</file>
                </acatalog>
            </updates>
        </layout>
    </frontend>
    <global>
        <blocks>
            <catalog>
                <rewrite>
                    <product_list>AHT_Acatalog_Block_Product_List</product_list>
                </rewrite>
            </catalog>
        </blocks>
    </global>
</config>

4. Create a file named app/local/AHT/Acatalog/Block/Product/List.php to overwrite the block of Mage_Catalog_Block_Product_List with the following content:

<?php

class AHT_Acatalog_Block_Product_List extends Mage_Catalog_Block_Product_List {

    public function getPriceJsonConfig($product) {
        $config = array();
        if (!$product->getTypeInstance(true)->hasOptions($product)) {
            return Mage::helper('core')->jsonEncode($config);
        }
        $_request = Mage::getSingleton('tax/calculation')->getDefaultRateRequest();
        $_request->setProductClassId($product->getTaxClassId());
        $defaultTax = Mage::getSingleton('tax/calculation')->getRate($_request);
        $_request = Mage::getSingleton('tax/calculation')->getRateRequest();
        $_request->setProductClassId($product->getTaxClassId());
        $currentTax = Mage::getSingleton('tax/calculation')->getRate($_request);
        $_regularPrice = $product->getPrice();
        $_finalPrice = $product->getFinalPrice();
        if ($product->getTypeId() == Mage_Catalog_Model_Product_Type::TYPE_BUNDLE) {
            $_priceInclTax = Mage::helper('tax')->getPrice($product, $_finalPrice, true, null, null, null, null, null, false);
            $_priceExclTax = Mage::helper('tax')->getPrice($product, $_finalPrice, false, null, null, null, null, null, false);
        } else {
            $_priceInclTax = Mage::helper('tax')->getPrice($product, $_finalPrice, true);
            $_priceExclTax = Mage::helper('tax')->getPrice($product, $_finalPrice);
        }
        $_tierPrices = array();
        $_tierPricesInclTax = array();
        foreach ($product->getTierPrice() as $tierPrice) {
            $_tierPrices[] = Mage::helper('core')->currency(
                    Mage::helper('tax')->getPrice($product, (float) $tierPrice['website_price'], false) - $_priceExclTax
                    , false, false);
            $_tierPricesInclTax[] = Mage::helper('core')->currency(
                    Mage::helper('tax')->getPrice($product, (float) $tierPrice['website_price'], true) - $_priceInclTax
                    , false, false);
        }
        $config = array(
            'productId' => $product->getId(),
            'priceFormat' => Mage::app()->getLocale()->getJsPriceFormat(),
            'includeTax' => Mage::helper('tax')->priceIncludesTax() ? 'true' : 'false',
            'showIncludeTax' => Mage::helper('tax')->displayPriceIncludingTax(),
            'showBothPrices' => Mage::helper('tax')->displayBothPrices(),
            'productPrice' => Mage::helper('core')->currency($_finalPrice, false, false),
            'productOldPrice' => Mage::helper('core')->currency($_regularPrice, false, false),
            'priceInclTax' => Mage::helper('core')->currency($_priceInclTax, false, false),
            'priceExclTax' => Mage::helper('core')->currency($_priceExclTax, false, false),
            /**
             * @varskipCalculate
             * @deprecated after 1.5.1.0
             */
            'skipCalculate' => ($_priceExclTax != $_priceInclTax ? 0 : 1),
            'defaultTax' => $defaultTax,
            'currentTax' => $currentTax,
            'idSuffix' => '_clone',
            'oldPlusDisposition' => 0,
            'plusDisposition' => 0,
            'plusDispositionTax' => 0,
            'oldMinusDisposition' => 0,
            'minusDisposition' => 0,
            'tierPrices' => $_tierPrices,
            'tierPricesInclTax' => $_tierPricesInclTax,
        );
        $responseObject = new Varien_Object();
        Mage::dispatchEvent('catalog_product_view_config', array('response_object' => $responseObject));
        if (is_array($responseObject->getAdditionalOptions())) {
            foreach ($responseObject->getAdditionalOptions() as $option => $value) {
                $config[$option] = $value;
            }
        }
        return Mage::helper('core')->jsonEncode($config);
    }

    public function getViewTypeConfigurableBlock($product) {
        $block = new Mage_Catalog_Block_Product_View_Type_Configurable();
        $block->setData('product', $product);
        return $block;
    }
}
?>

5. Create 2 javascript files named js/AHT/product.js and js/AHT/configurable.js

(See attached). Create a file named

app/design/frontend/default/default/layout/aht_acatalog.xml to add the javascript:

<?xml version = "1.0"?>
<layout version="0.1.0">
    <catalog_category_default>
        <reference name="head">
            <action method="addJs"><script>AHT/product.js</script></action>
            <action method="addJs"><script>AHT/configurable.js</script></action>
        </reference>
    </catalog_category_default>
    <catalog_category_layered>
        <reference name="head">
            <action method="addJs"><script>AHT/product.js</script></action>
            <action method="addJs"><script>AHT/configurable.js</script></action>
        </reference>
    </catalog_category_layered>
</layout>

6. Copy list.phtml from the folder app/design/frontend/base/default/template/catalog/product/ to the folder app/design/frontend/default/default/acatalog/product/ and find the line:

<?php echo $this->getPriceHtml($_product, true) ?>

and place the following code below that line:

<?php
if ($_product->isSaleable() && $_product->getTypeId() == 'configurable') {
    $product = Mage::getModel('catalog/product')->load($_product->getId());
    $block = $this->getViewTypeConfigurableBlock($product);
    $_attributes = Mage::helper('core')->decorateArray($block->getAllowAttributes());
    ?>
    <?php if (count($_attributes)): ?>
        <dl>
            <?php foreach ($_attributes as $_attribute): ?>
                <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
                <dd<?php if ($_attribute->decoratedIsLast) { ?> class="last"<?php } ?>>
                    <div class="input-box">
                        <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select-<?php echo $_product->getId() ?>">
                            <option><?php echo $this->__('Choose an Option…') ?></option>
                        </select>
                    </div>
                </dd>
            <?php endforeach; ?>
        </dl>
        <script type="text/javascript">
            varspConfig_<?php echo $_product->getId() ?> = new Product.Config(<?php echo $block->getJsonConfig() ?>, <?php echo $_product->getId() ?>, new Product.OptionsPrice(<?php echo $this->getPriceJsonConfig($product) ?>));
        </script>[/code]
    <?php endif; ?>
<?php } ?>

7.See result:

Picture1

Display options for Simple products

Reality:  You can show all available options for the product on the product listing page.
In the template:

app/design/frontend/base/default/template/catalog/product/list.phtml, place the following code:

<?php

$html = '';
$product = Mage::getModel('catalog/product')->load($_product->getId());
$options = $product->getOptions();
if (count($options)) {
    foreach ($options as $_option) {
        if (count($_option)) {
            $html .= '<select name="options[' . $_option->getId() . ']">';
            foreach ($_option->getValues() as $_value) {
                $html .= '<option value="' . $_value->getId() . '">' . $_value->getTitle() . '</option>';
            }
            $html .= '</select>';
        }
    }
}
echo $html;
?>

to any position below the line of:

<?php $i = 0; foreach ($_productCollection as $_product): ?>

See result:

Picture2

We hope our suggestion is useful enough for you to solve the product options issue. We highly appreciate your comment and continuous contribution to this techniques library.

You can download full source here AHT_product_list_option

Thanks for reading and sharing!

12349 Total Views 1 Views Today