How to Display Configurable Product Options in Category List Page in Magento 1

configurable-productmagento-1

How to check that Displaying configurable product options in category list page?

Best Answer

In order just to display all sale able options in the category go to .../app/design/frontend/[package]/[theme]/template/catalog/product/list.phtml and place within foreach ($_productCollection as $_product) something like this:

<?php if($_product->isConfigurable()): ?>
  //get attributes
  <?php $attributes = $_product->getTypeInstance(true)->getConfigurableAttributes($_product) ?>
  <?php if(count($attributes)): ?>
    <ul>
    <?php foreach($attributes as $att): ?>
      <?php $pAtt=$att->getProductAttribute();
        //get the child products
        $allProducts = $_product->getTypeInstance(true)->getUsedProducts(null, $_product);
        $frontValues =array() ?>
      <li><?php echo $pAtt->getFrontendLabel() ?>
       <ul>
       <?php foreach($allProducts as $p): ?>
         //check stock, status, ...
         //do not show unsaleable options
         <?php if(!$p->isSaleable()) continue; ?>
         <?php $out=$p->getAttributeText($pAtt->getName()); ?>
         <?php $frontValues[$out]=$out; ?>
       <?php endforeach ?>
        <li><?php echo implode('</li><li>', $frontValues) ?></li>
       </ul>
      </li>
    <?php endforeach ?>
    </ul>
  <?php endif ?>
<?php endif ?>

Perhaps you like to add some css classes to the <ul> and <li> tags.

This won't increase the performance of your shop!

inspired by this Post

http://www.magentocommerce.com/boards/viewthread/73926/#t437146

Related Solutions

Magento – Get configurable option (of a configurable product) on category page

To get the configurable attribute and their options value for specific product you can use the following code.

// In construct or fist loaded method
// Magento\ConfigurableProduct\Helper\Data $helper;
// $this->helper              = $helper;
                $options     = $this->helper->getOptions($product, $this->getAllowProducts());
                $attributes  = [];
                foreach ($product->getTypeInstance()->getConfigurableAttributes($product) as $attribute) {
                    $attributeOptionsData = $this->getAttributeOptionsData($attribute, $options);
                    if ($attributeOptionsData) {
                        $productAttribute         = $attribute->getProductAttribute();
                        $attributeId              = $productAttribute->getId();
                        $attributes[$attributeId] = [
                            'id'      => $attributeId,
                            'code'    => $productAttribute->getAttributeCode(),
                            'label'   => $productAttribute->getStoreLabel($product->getStoreId()),
                            'options' => $attributeOptionsData,
                        ];
                    }
                }
print_r($attributes); exit(); // Here you will get the all array to do it in html.

For get the products options method is called in above code

public function getAllowProducts()
{

    $skipSaleableCheck = $this->catalogProduct->getSkipSaleableCheck();

    $products = $skipSaleableCheck ?
    $this->getProduct->getTypeInstance()->getUsedProducts($this->getProduct, null) :
    $this->getProduct->getTypeInstance()->getSalableUsedProducts($this->getProduct, null);

    return $products;
}

And for last where you will get its options method called above

   protected function getAttributeOptionsData($attribute, $config)
    {
        $attributeOptionsData = [];
        foreach ($attribute->getOptions() as $attributeOption) {
            $optionId               = $attributeOption['value_index'];
            $attributeOptionsData[] = [
                'id'       => $optionId,
                'label'    => $attributeOption['label'],
                'products' => isset($config[$attribute->getAttributeId()][$optionId])
                ? $config[$attribute->getAttributeId()][$optionId]
                : [],
            ];
        }
        return $attributeOptionsData;
    }

Magento – How to display configurable product discount in percent on product list in Magento 2

You can add create saperate price file for configurable product and code within it.

catalog_product_prices.xml

add code

<?xml version="1.0"?>

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="final_price" xsi:type="array">
                        <item name="render_class" xsi:type="string">Vendor\Module\Pricing\Render\FinalPriceBox</item>
                        <item name="render_template" xsi:type="string">Vendor_Module::product/price/final_price.phtml</item>
                    </item>
                </item>
            </argument>
            <argument name="configurable" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="final_price" xsi:type="array">
                        <item name="render_class" xsi:type="string">Magento\ConfigurableProduct\Pricing\Render\FinalPriceBox</item>
                        <item name="render_template" xsi:type="string">Vendor_Module::product/price/final_price_configurable.phtml</item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

as it is configurable product not possible to check it by getFinalPrice() and getSpecialPrice() .

add below code for configurable product.

$priceModel = $block->getPriceType('regular_price');
$finalPriceModel = $block->getPriceType('final_price');

<?php if($finalPriceModel->getAmount() < $priceModel->getAmount()) : ?>
        <span class="old-price sly-old-price no-display config-old" style="text-decoration: line-through;">
            <?= $block->renderAmount($priceModel->getAmount(), [
                'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
                'price_type'        => 'oldPrice',
                'include_container' => true,
                'skip_adjustments'  => true
            ]); ?>
        </span>
        <?php 

            $array = (array)$priceModel->getAmount();
            $prefix = chr(0).'*'.chr(0);
            $price = $array[$prefix.'amount'];

            $array = (array)$finalPriceModel->getAmount();
            $prefix = chr(0).'*'.chr(0);
            $finalPrice = $array[$prefix.'amount'];

            $percentage = 100 - round(($finalPrice / $price)*100);

            echo "<span class='percent-amt'>- ".$percentage."%</span>";
        ?>
    <?php endif; ?>

Note : you can get this directly by change file app\design\frontend\Vendor\theme\Magento_Catalog\templates\product\price\final_price.phtml ,you just have to put condition for configurable product

percentage will show in listing page

Best Answer

Related Solutions

Magento – Get configurable option (of a configurable product) on category page

Magento – How to display configurable product discount in percent on product list in Magento 2

Related Topic