0

I want to display configurable products associated simple product price in configurable product option.

I am attaching image as price display below the option value. If some one has did this task then help me.

enter image description here

  • Follow this step and get the value from the swatch phtml magento.stackexchange.com/questions/261246/… – Prathap Gunasekaran Feb 19 at 13:35
  • I have tried to make changes in swatch.phtml file but from console I found config product option data update using Magento_Swatches/js/swatch-renderer.js file. So, I need to make change in swatch-renderer.js Thanks for you response :) – Darsh modi Feb 19 at 13:54
1

Finally displayed price with configurable product option!!

I have debug the code and found configurable product swatch options come from below file.

vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

So, I have overwrite "swatch-renderer.js" file into my custom theme. So, custom them path would be.

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

Please change name "Vendor" and "default" as per your theme name.

Now, I have debug the code of swatch-renderer.js file and found options value generate using "_RenderSwatchOptions" function. So, I have made below changes.

Change #1: "_RenderSwatchOptions" do not get data of $widget veriable. So, I have make below change.

Befor:

_RenderSwatchOptions: function (config, controlId)

After my change:

_RenderSwatchOptions: function (config, controlId, $widget)

Change #2: search with "_RenderSwatchOptions" and change argument from where this function call from "swatch-renderer.js" file

Before:

options = $widget._RenderSwatchOptions(item, controlLabelId),

After my change:

options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

Change #3: Now I can get the value of $widget object in to "_RenderSwatchOptions" function but not abel to get price value of options.

So, to add option id wise price please add below code below the line change which applied in #2.

Before:

var item = this,
controlLabelId = 'option-label-' + item.code + '-' + item.id,
options = $widget._RenderSwatchOptions(item, controlLabelId),

After my change:

var item = this;

$widget.optionsMap[item.id] = {};

// Aggregate options array to hash (key => value)
$.each(item.options, function () {
    if (this.products.length > 0) {
        $widget.optionsMap[item.id][this.id] = {
            price: parseInt(
                $widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount,
                10
            ),
            products: this.products
        };
    }
});

 var controlLabelId = 'option-label-' + item.code + '-' + item.id,
 options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

Change #4: Add price div into "_RenderSwatchOptions" function.

My attribute is swatch options with type = text. So, I made below changes.

Before:

if (type === 0) {
    // Text
    html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +    
        '</div>';
}

After my change:

if (type === 0) {
    // Text
    html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +
    '<div class="custom-option-price">' + $widget.optionsMap[config.id][id]['price'] + '</div>'+
        '</div>';
}

Might be my post help someone who want to make change in configurable products options.

Thanks.

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.