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

Question

I want to callout my configurable options of a configurable product on category page. Respectively these are the attribute values of the simple products included within its configurable product.

Standard use case:

Callout configurable options e.g. as a simple string (or advanced as fieldset) to have a teaser for the customer which options he can then choose on product page.

On product page configurable options appear automatically as "select fieldset":

 <div class="field configurable required">
        <label class="label" for="attribute154">
            <span>Größe/Gebinde</span>
        </label>
        <div class="control">
            <select name="super_attribute[154]"
                    data-selector="super_attribute[154]"
                    data-validate="{required:true}"
                    id="attribute154"
                    class="super-attribute-select">
                                <option value="">Option auswählen...</option>
                                <option value="52" selected="selected">2.5</option>
                                <option value="53">5</option>
                                <option value="56">10</option>
                                <option value="58">15</option>
            </select>
        </div>
    </div>

How to get configurable options on product page (!) using jQuery:

            $(".super-attribute-select option:eq(1)").attr('selected', true);
            initial_size = $(".super-attribute-select option:eq(1)").text();

My question: How to get configurable options on CATEGORY PAGE?

Is there any attempt to get those configurable options elsewhere than on product page?

Within my special use case I want to take for example the first option content –

<option value="52" selected="selected">2.5</option>

– and do a simple calculation with my product price.

My Status right now:

I know how to callout product attributes (like color, size,..) if values have been entered in e.g. admin but NOT if product attributes have been used for configurable options.

Further comments:

• I am using Magento 2.1.3

Answer 1

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