Want to display price in configurable products each options in magento 2

Question

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.

Answer 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.