Magento 2.3: Show custom attribute value for configurable products

magento.stackexchange https://magento.stackexchange.com/questions/296738

Question


Is there a way to show the value of a custom attribute that changes for every child product?
I mean something like: user selects "blue" color for shirt and, under the swatches a text appears (like, say, "you selected blue").
I did this (catalog_product_view.xml): 

<?xml version="1.0"?>
    <body>
        <referenceContainer name="product.info.main">
            <block class="Frostmage\Attrishow\Block\Product\View\Extra1"
                name="product.view.extra1"
                template="Frostmage_Attrishow::product/view/extra1.phtml"
                before="product.price.tier">
            </block>
        </referenceContainer>
    </body>

and this (extra1.phtml):

    <?php $_product = $block->getProduct() ?>
    <h3 style="font-size: 1em; color: black;">
    <?php 

        $ciao = $_product->getData('entitacanone');

        echo 'Canone Mensile: <span style="font-size: 2em; color: #FF8A00;">'.$ciao.'€</span>'; 
        echo '<span>/mese</span>';


    ?></h3>

But, obviously, it doesn't change the frontend text based on the product variation, it only shows the value of the parent product, if it has one. I assume there is some kind of js to add, but I don't know how or what...
Any clue? Thanks :)

Was it helpful?

Solution

You need to override 'swatch-renderer.js' under

app/design/frontend/Vendor/Theme/Magento_Swatches/web/js/swatch-renderer.js

_OnClick: function ($this, $widget) {
    var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
        $wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
        $label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
        attributeId = $parent.attr('attribute-id'),
        $input = $parent.find('.' + $widget.options.classes.attributeInput);

    if ($widget.inProductList) {
        $input = $widget.productForm.find(
            '.' + $widget.options.classes.attributeInput + '[name="super_attribute[' + attributeId + ']"]'
        );
    }

    if ($this.hasClass('disabled')) {
        return;
    }

    if ($this.hasClass('selected')) {
        $parent.removeAttr('option-selected').find('.selected').removeClass('selected');
        $input.val('');
        $label.text('');
        $this.attr('aria-checked', false);
    } else {
        $parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
        $label.text($this.attr('option-label'));
        $input.val($this.attr('option-id'));
        $input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
        $this.addClass('selected');
        $widget._toggleCheckedAttributes($this, $wrapper);
    }

    $widget._Rebuild();

    if ($widget.element.parents($widget.options.selectorProduct)
            .find(this.options.selectorProductPrice).is(':data(mage-priceBox)')
    ) {
        $widget._UpdatePrice();
    }

    $widget._loadSelectedOptionLabel($this.attr('option-label'));
    $widget._loadMedia();
    $input.trigger('change');
},
_loadSelectedOptionLabel: function (label) {
    $('.selected-option-label').html("You selected " + label);
},

Replace _OnClick function and add _loadSelectedOptionLabel function and put your class instead of $('.selected-option-label') in _loadSelectedOptionLabel function where you want to display 'You selected Red' message.

Hope this will help you!

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top