Magento 2 how to get product attribute options on checkout cart

Question

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:

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

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

Answer 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);
    } 
}

3. 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);
       }
   }
   

4. 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>

5. 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 } ?>