3

How I can get the configurable products attribute options in front end checkout cart page? I have tried with the below answer but can't get any success.

Magento 2 - How to get attribute options value of eav entity?

When I have print the echo "<pre>"; print_r($block->getOptionList()); die;, I am getting the below array result with the label and value but not getting the color code to show as per my custom design.

Array
(
    [0] => Array
        (
            [label] => Color
            [value] => Green
        )

    [1] => Array
        (
            [label] => Size
            [value] => S
        )

)

Also, I have go through the admin settings like below:

Stores > Configutation > Sales > Checkout > Shopping Cart > Configurable Product Image set as Product Thumbnail Itself

It's also not working in the magento 2.

Please see the attached screenshot what I want: enter image description here

Display this color code value in the frontend like the below image: enter image description here

Please suggest how I can get the color code? Thanks!!!

1
  1. Create a module

  2. Override the configurable model in

VENDOR/MODULENAME/Model/Product/Type/Configurable.php

namespace VENDOR\MODULENAME\Model\Product\Type;
use Magento\ConfigurableProduct\Model\Product\Type\Configurable as ConfigurableProduct;

class Configurable extends \Magento\ConfigurableProduct\Model\Product\Type\Configurable
{   
    public function getUsedConfigurableProductAttributes($product)
    {       
        if (!$product->hasData($this->usedProductAttributes)) {
            $usedProductAttributes = [];
            $usedAttributes = [];
            foreach ($this->getConfigurableAttributes($product) as $attribute) {
                if ($attribute->getProductAttribute() !== null) {
                    $id = $attribute->getProductAttribute()->getId();
                    $usedProductAttributes[$id] = $attribute->getProductAttribute();
                    $usedAttributes[$id] = $attribute;
                }
            }
            $product->setData($this->_usedAttributes, $usedAttributes);
            $product->setData($this->usedProductAttributes, $usedProductAttributes);
        }
        return $product->getData($this->_usedAttributes);
    } 
}
  1. Override the Getoptions block using plugin

    namespace VENDOR\MODULENAME\Plugin\Product;
    use Magento\Swatches\Helper\Data as SwatchData;
    use Magento\Swatches\Helper\Media;
    use VENDOR\MODULENAME\Model\Product\Type\Configurable as ConfigModel;
    
    class Options
    {
        protected $swatchHelper;    
        protected $swatchMediaHelper;    
        protected $configModel;
    
        public function __construct(
            SwatchData $swatchHelper,
            Media $swatchMediaHelper,
            ConfigModel $configModel
        )
        {
            $this->swatchHelper = $swatchHelper;
            $this->swatchMediaHelper = $swatchMediaHelper;
            $this->configModel = $configModel;        
        }
    
        public function aroundGetOptions(
            \Magento\Catalog\Helper\Product\Configuration $subject,
            $proceed,
            \Magento\Catalog\Model\Product\Configuration\Item\ItemInterface $item
        ) {     
            $product = $item->getProduct();
            $typeId = $product->getTypeId();
    
            if ($typeId == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE) {
                if($attributesOption = $product->getCustomOption('attributes')) {
                    $data = unserialize($attributesOption->getValue());  
    
                    $usedAttributes = $this->configModel->getUsedConfigurableProductAttributes($product);
                    $mediaUrl = $this->swatchMediaHelper->getSwatchMediaUrl();
    
                    foreach ($data as $attributeId => $attributeValue) {
                        if (isset($usedAttributes[$attributeId])) {
                            /** @var \Magento\Catalog\Model\ResourceModel\Eav\Attribute $attribute */
                            $attribute = $usedAttributes[$attributeId]->getProductAttribute();
                            $label = $attribute->getStoreLabel();
                            $value = $attribute;
                            if ($value->getSourceModel()) {
                                $value = $value->getSource()->getOptionText($attributeValue);
                            } else {
                                $value = '';
                            }
    
                            $swatchesData = $this->swatchHelper->getSwatchesByOptionsId(array($attributeValue));
                            $swatchValue = $swatchesData[$attributeValue]['value'];
                            $visualSwatch = $this->swatchHelper->isVisualSwatch($attribute);
                            $swatch_value_formatted = '';
    
                            if($visualSwatch) {
                                if ($swatchValue[0] == '#') {
                                    $swatch_value_formatted = 'background: '.$swatchValue;
                                } elseif ($swatchValue[0] == '/') {
                                    $swatch_value_formatted = 'background: url('.$mediaUrl.$swatchValue.'); background-size: cover;';
                                }
                            }
    
                            $attributes[] = ['label' => $label, 'value' => $value, 'swatch_value' =>  $swatchValue, 'option_id' =>  $swatchesData[$attributeValue]['option_id'] , 'visual_swatch' => $visualSwatch , 'swatch_value_formatted' => $swatch_value_formatted  ];      
                        }
                    }
                }            
                return $attributes + $proceed($item);
            }        
            return $proceed($item);
        }
    }
    
  2. Define the plugin and overriding model in di.xml


<preference for="Magento\ConfigurableProduct\Model\Product\Type\Configurable" type="VENDOR\MODULENAME\Model\Product\Type\Configurable"/>
<type name="Magento\Catalog\Helper\Product\Configuration">
<plugin name="My_product_options" type="\VENDOR\MODULENAME\Plugin\Product\Options" sortOrder="1"/>
</type>
  1. In the checkout cart template you can use the following to find out the swatch is visual or not. The following values also available in the template file swatch_value, visual_swatch, swatch_value_formatted

<?php if (isset($_option['visual_swatch']) && $_option['visual_swatch']) { ?>
        <?php echo '<div class="swatch-option" style="'.$_option['swatch_value_formatted'].'"></div>'; ?>
    <?php } ?> 
  • Many Thanks lavanya, I will try it and will accept your answer. I have done it by custom query right now. – mageDev0688 Jun 30 '17 at 13:21
  • Great solution. Thanks for your help @lavanya very appreciated. – mageDev0688 Jul 14 '17 at 10:16
  • how to show dropdown value not swatch. – Sarvesh Tiwari Nov 30 '17 at 12:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.