0


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 :)

2

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!

| improve this answer | |

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.