How are the swatches rendered on a frontend product view?

Development Rendering

dmitry_fedyuk (Dmitrii Fediuk) March 23, 2016, 11:10pm 1

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/view/frontend/layout/catalog_product_view_type_configurable.xml#L13-L16


<referenceContainer name="product.info.options.configurable" remove="true"/>
<referenceBlock name="product.info.options.wrapper">
    <block class="Magento\Swatches\Block\Product\Renderer\Configurable" name="product.info.options.swatches" as="swatch_options" before="-" />
</referenceBlock>

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Block/Product/Renderer/Configurable.php#L367-L381


/**
 * Return HTML code
 *
 * @codeCoverageIgnore
 * @return string
 */
protected function _toHtml()
{
    $this->initIsProductHasSwatchAttribute();
    $this->setTemplate(
        $this->getRendererTemplate()
    );


    return $this->getHtmlOutput();
}

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Block/Product/Renderer/Configurable.php#L203-L210


/**
 * @codeCoverageIgnore
 * @return void
 */
protected function initIsProductHasSwatchAttribute()
{
    $this->isProductHasSwatchAttribute = $this->swatchHelper->isProductHasSwatch($this->getProduct());
}

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Helper/Data.php#L444-L453


/**
 * Check if the Product has Swatch attributes
 *
 * @param Product $product
 * @return bool
 */
public function isProductHasSwatch(Product $product)
{
    return sizeof($this->getSwatchAttributes($product));
}

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Helper/Data.php#L332-L348


/**
 * Retrieve collection of Swatch attributes
 *
 * @param Product $product
 * @return \Magento\Catalog\Model\ResourceModel\Eav\Attribute[]
 */
private function getSwatchAttributes(Product $product)
{
    $attributes = $this->getAttributesFromConfigurable($product);
    $result = [];
    foreach ($attributes as $attribute) {
        if ($this->isSwatchAttribute($attribute)) {
            $result[] = $attribute;
        }
    }
    return $result;
}

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Helper/Data.php#L455-L465


/**
 * Check if an attribute is Swatch
 *
 * @param Attribute $attribute
 * @return bool
 */
public function isSwatchAttribute(Attribute $attribute)
{
    $result = $this->isVisualSwatch($attribute) || $this->isTextSwatch($attribute);
    return $result;
}

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Helper/Data.php#L467-L479


/**
 * Is attribute Visual Swatch
 *
 * @param Attribute $attribute
 * @return bool
 */
public function isVisualSwatch(Attribute $attribute)
{
    if (!$attribute->hasData(Swatch::SWATCH_INPUT_TYPE_KEY)) {
        $this->populateAdditionalDataEavAttribute($attribute);
    }
    return $attribute->getData(Swatch::SWATCH_INPUT_TYPE_KEY) == Swatch::SWATCH_INPUT_TYPE_VISUAL;
}

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Model/Swatch.php#L19-L20


/** Swatch input type key in array to retrieve the value */
const SWATCH_INPUT_TYPE_KEY = 'swatch_input_type';

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Model/Swatch.php#L25-L26


/** Value for visual swatch input type */
const SWATCH_INPUT_TYPE_VISUAL = 'visual';

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Helper/Data.php#L481-L493


/**
 * Is attribute Textual Swatch
 *
 * @param Attribute $attribute
 * @return bool
 */
public function isTextSwatch(Attribute $attribute)
{
    if (!$attribute->hasData(Swatch::SWATCH_INPUT_TYPE_KEY)) {
        $this->populateAdditionalDataEavAttribute($attribute);
    }
    return $attribute->getData(Swatch::SWATCH_INPUT_TYPE_KEY) == Swatch::SWATCH_INPUT_TYPE_TEXT;
}

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Block/Product/Renderer/Configurable.php#L383-L391


/**
 * @codeCoverageIgnore
 * @return string
 */
protected function getRendererTemplate()
{
    return $this->isProductHasSwatchAttribute ?
        self::SWATCH_RENDERER_TEMPLATE : self::CONFIGURABLE_RENDERER_TEMPLATE;
}

github.com

magento/magento2/blob/9f081a13c6d8c6233f481dcaab975e952f95da93/app/code/Magento/Swatches/Block/Product/Renderer/Configurable.php#L30-L33


/**
 * Path to template file with Swatch renderer.
 */
const SWATCH_RENDERER_TEMPLATE = 'Magento_Swatches::product/view/renderer.phtml';

github.com

magento/magento2/blob/4c437c3/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml#L11-L24


<script type="text/x-magento-init">
{
    "[data-role=swatch-options]": {
        "Magento_Swatches/js/swatch-renderer": {
            "jsonConfig": <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
            "jsonSwatchConfig": <?php /* @escapeNotVerified */
                echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
            "mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>",
            "onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image',
                'Magento_Swatches') ?: 'false'; ?>
        }
    }
}
</script>

github.com

magento/magento2/blob/9f081a1/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php#L165-L211


/**
 * Composes configuration for js
 *
 * @return string
 */
public function getJsonConfig()
{
    $store = $this->getCurrentStore();
    $currentProduct = $this->getProduct();


    $regularPrice = $currentProduct->getPriceInfo()->getPrice('regular_price');
    $finalPrice = $currentProduct->getPriceInfo()->getPrice('final_price');


    $options = $this->helper->getOptions($currentProduct, $this->getAllowProducts());
    $attributesData = $this->configurableAttributeData->getAttributesData($currentProduct, $options);


    $config = [
        'attributes' => $attributesData['attributes'],
        'template' => str_replace('%s', '<%- data.price %>', $store->getCurrentCurrency()->getOutputFormat()),
        'optionPrices' => $this->getOptionPrices(),
        'prices' => [
            'oldPrice' => [
                'amount' => $this->_registerJsPrice($regularPrice->getAmount()->getValue()),
            ],
            'basePrice' => [
                'amount' => $this->_registerJsPrice(
                    $finalPrice->getAmount()->getBaseAmount()
                ),
            ],
            'finalPrice' => [
                'amount' => $this->_registerJsPrice($finalPrice->getAmount()->getValue()),
            ],
        ],
        'productId' => $currentProduct->getId(),
        'chooseText' => __('Choose an Option...'),
        'images' => isset($options['images']) ? $options['images'] : [],
        'index' => isset($options['index']) ? $options['index'] : [],
    ];


    if ($currentProduct->hasPreconfiguredValues() && !empty($attributesData['defaultValues'])) {
        $config['defaultValues'] = $attributesData['defaultValues'];
    }


    $config = array_merge($config, $this->_getAdditionalConfig());


    return $this->jsonEncoder->encode($config);
}

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/Block/Product/Renderer/Configurable.php#L135-L153


public function getJsonSwatchConfig()
{
    $attributesData = $this->getSwatchAttributesData();
    $allOptionIds = $this->getConfigurableOptionsIds($attributesData);
    $swatchesData = $this->swatchHelper->getSwatchesByOptionsId($allOptionIds);


    $config = [];
    foreach ($attributesData as $attributeId => $attributeDataArray) {
        if (isset($attributeDataArray['options'])) {
            $config[$attributeId] = $this->addSwatchDataForAttribute(
                $attributeDataArray['options'],
                $swatchesData,
                $attributeDataArray
            );
        }
    }


    return $this->jsonEncoder->encode($config);
}

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js#L203-L213


/**
 * @private
 */
_init: function () {
    if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
        this._RenderControls();
    } else {
        console.log('SwatchRenderer: No input data received');
    }
},

github.com

magento/magento2/blob/9f081a1/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js#L239-L252


/**
 * Render controls
 *
 * @private
 */
_RenderControls: function () {
    var $widget = this,
        container = this.element,
        classes = this.options.classes,
        chooseText = this.options.jsonConfig.chooseText;


    $widget.optionsMap = {};


    $.each(this.options.jsonConfig.attributes, function () {

dmitry_fedyuk (Dmitrii Fediuk) Split this topic October 30, 2016, 9:38pm 2

A post was split to a new topic: Why are small product images instead of colors swatches shown on my product pages and product list pages?