www.webdeveloper.com
Results 1 to 1 of 1

Thread: Techniques to Show product options in product list

  1. #1
    Join Date
    Aug 2014
    Posts
    1

    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!


    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:
    Code:
    <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
    Code:
    <?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:
    Code:
    <?php
    classAHT_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',
     'showdIncludeTax' => 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:
    Code:
    <?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:
    Last edited by jedaisoul; 08-16-2014 at 02:01 PM. Reason: code tags added

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles