Magento2: Swatches / Layered Navigation does not update configurable product price on catalog page

[tigerx7]

When clicking on a swatch in the catalog page, it does not update the price of the product. Like so, if also filtering by the layered navigation "Shopping Options", the rendered items are not displaying the selected attribute price for configurable products.

When tracing the issue, found a mention of this in commit https://github.com/magento/magento2/commit/b35b3b274f4f7b77f2198b2b7b36bd1135a88c78

However, instead of implementing the functionality, the update was to just check if we were on a product page and if so then update the price and if not, then don't do anything.

From a visitor experience perspective, I think it's very important that visitors are shown the price of the option they've selected from layered navigation or via the swatch on the catalog page without having to click on the item and view it individually. At best it's an inconvenience, at worst it's misleading; especially if they never view the product page and just add to cart from the catalog page.

[tigerx7]

I don't know if "feature request" is really the right label for this. It's leaning more towards a bug than anything. Based on layered navigation, we're already updating the thumbnail in the catalog page. The customer is seeing the new thumbnail image with a price right below it. With the ability to add to cart straight from the catalog page, a customer will easily assume that that's the price of the option given that the swatch is selected right below it and the thumbnail image updated. They would not see the higher price until they view their cart and wonder why the price is different, especially if it's significantly higher than the lowest price. They could easily assume that it was a "bait and switch" tactic.

Looking at the commit notes, it looks like this had been brought up as a bug internally prior to 2.0.0 release regarding updating prices on catalog pages when swatch options were selected. Instead of it being fixed though in the commit, the UpdatePrice() just gets skipped on catalog pages.

[ktomk]

@tigerx7: Indeed this sounds like somebody did let it pass unnoticed which would qualify as a bug as not even intended. Should it make even easier to full-fill the feature request, as the functionality is generally in.an over-loo

From a visitors perspective, I'm totally with you. For many users the price is one of the most noticed and inspected information available on a product page.

[justindocanto]

Anybody have any suggestions for a temporary fix for this, until it's fixed?

Maybe I can work on a solution if somebody points me in the right direction?

[piotrekkaminski]

internal issue MAGETWO-54358

[AmrinRajani92]

Hi guys, any update on this issue?

[teyogofy]

Using Magento 2.1 and the issue is still there, any news for a fix release?
Thank you

[neilrd]

@teyogofy @AmrinRajani92 @vkorotun. Anyone had any luck with this. I'm struggling with the same problem. It is a huge drawback to the shopping experience.

[teyogofy]

@neilrd just tried a fresh install of 2.1.1 CE and the issue is still there!
@tigerx7 @ktomk @justindocanto @rgoncharuk @vkorotun
@piotrekkaminski can you help with a patch or fix? any future release information?

Our go-live date is getting closer and closer and this issue is a no go for our customer!!!

Thanks for helping

[justindocanto]

@teyogofy i know the current 2.X versions are being released as public versions but, in my opinion, i would treat Magento 2.X like beta software for the time being and not run it on a production site.

Why? There are so many show stopping bugs, issues, etc. that are a part of core functionality that it would be a disservice to yourself and your client to use it in production. I'd stick with the latest 1.9.X until major issues with the core are no longer a problem (or at least, aren't staying open for 9+ months with no fix in sight)

[murillobv]

Hello. Anyone have found a solution for it?

[thomas-kl1]

Hi, any updates ? Or maybe a temporary fix?

[bericonsulting]

Totally agreed that this should not be a feature request. the current way is so confusing and misleading, which make people think the prices are the same for swatchers when they are not. Anyone found a temporary solution to this?

[johnny-longneck]

Having the same problem right now. I am days before going in production and the many bugs I found just at the end was frustrating. I am looking for a solution for the swatches, and try my best to get it done myself, as well. Fingers crossed. Heads banged

Update:

Good news: I got it working somehow. After maybe 10 hours of debugging (thanks magento).

I found that on the category product list page the pricebox is not being initialized.
It work on the product detail page because the initialization happens here:
app/code/Magento/Catalog/view/frontend/templates/product/view/form.phtml

I could not find anything equal on the product listing page so I tried to get it inside somehow. I changed
app/design/CUSTOM/THEME/Magento_Swatches/templates/product/listing/renderer.phtml

from:

require(["jquery", "jquery/ui", "Magento_Swatches/js/swatch-renderer"], function ($) {         
        $('.swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
            selectorProduct: '.product-item-details',
            onlySwatches: true,
            enableControlLabel: false,
            numberToShow: <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
            jsonConfig: <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
        });
    }); 

to this:

    require(["jquery", "jquery/ui","priceBox", "Magento_Swatches/js/swatch-renderer"], function ($) {
         var dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?php echo $block->getProduct()->getId()?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

        priceBoxes = priceBoxes.filter(function(index, elem){
            return !$(elem).find('.price-from').length;
        });

        priceBoxes.priceBox();
        $('.swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
            selectorProduct: '.product-item-details',
            onlySwatches: true,
            enableControlLabel: false,
            numberToShow: <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
            jsonConfig: <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
        });
    });

Unfortunatly the currency and format is missing.
The priceBox initialization needs some json data from the product view block

[qbo-tech]

Your solutions works @johnny-longneck. For the price format this is what I did:

Instead of initializing the priceBox object on template file like:

priceBoxes.priceBox();

Pass the priceBox object as a parameter for SwatchRenderer

priceBox: priceBoxes

Then add the option to yout swatch-render.js constructor:

priceBox: false,

And then just initialize the priceBox at the beginning of the _UpdatePrice method:

var $widget = this;
$widget.options.priceBox.priceBox();

Hope it helps to someone !!

[Nundra]

Hello @qbo-tech

I'm new to magento, i do the @johnny-longneck method, and i would like to apply your code to make price have the good format. Cand you show exactly the change with files path ?

[DeadElle]

It's unbelivable that this bug reported 1 year and half ago has a user solution and code is STILL not merged with the repo...

[DeadElle]

@qbo-tech got @johnny-longneck code working but I can't manage yours

renderer.phtml
priceBoxes.priceBox(); to priceBox: priceBoxes

swatch-render.js added

        // pricebox
        priceBox: false,

and

    /**
     * Update total price
     *
     * @private
     */
    _UpdatePrice: function () {
        var $widget = this;
            $widget.options.priceBox.priceBox();
            $product = $widget.element.parents($widget.options.selectorProduct),

what am I missing?

[devgoku]

@magento-team when you are going to test and merge to master. Its 15 days

[mcretien]

Same here, @johnny-longneck solution works but number_format/currency are missing. Tried @qbo-tech code but same issue.

[magento-engcom-team]

@tigerx7, thank you for your report.
The issue is already fixed in develop branch, 2.2.0

[magento-engcom-team]

@tigerx7, thank you for your report.
We've created internal ticket(s) MAGETWO-82144 to track progress on the issue.

[hemendraajmera]

Hi can you please check the URL,
http://www.thehouseofthings.com/thotstaging/gramercy-zebra-rug.html
when clicking on any size it will not be changing price I am using 2.1.8.
Can you please check and replay ASAP. my client going live by this week.
I am using swatches

[guvra]

Does anyone know the reference of the commit that fixes this bug?

[nalinsavaliya]

@johnny-longneck I have applied your solution but as you mentioned currency and formatting is missing from price.
So I have done some changes in vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml file as below. Now it's working for me in Magento 2.1.6

<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$jsonEncoder = $objectManager->create('\Magento\Framework\Json\EncoderInterface');
$localeFormat = $objectManager->create('\Magento\Framework\Locale\FormatInterface');
$priceCurrency = $objectManager->create('\Magento\Framework\Pricing\PriceCurrencyInterface');

$product = $block->getProduct();

if ($product->getTypeInstance()->hasOptions($product)) {
    $config = [
        'productId' => $product->getId(),
        'priceFormat' => $localeFormat->getPriceFormat()
        ];
    $priceConfig = $jsonEncoder->encode($config);
} else {
    $tierPrices = [];
    $tierPricesList = $product->getPriceInfo()->getPrice('tier_price')->getTierPriceList();
    foreach ($tierPricesList as $tierPrice) {
        $tierPrices[] = $priceCurrency->convert($tierPrice['price']->getValue());
    }
    $config = [
        'productId' => $product->getId(),
        'priceFormat' => $localeFormat->getPriceFormat(),
        'prices' => [
            'oldPrice' => [
                'amount' => $priceCurrency->convert(
                    $product->getPriceInfo()->getPrice('regular_price')->getAmount()->getValue()
                ),
                'adjustments' => []
            ],
            'basePrice' => [
                'amount' => $priceCurrency->convert(
                    $product->getPriceInfo()->getPrice('final_price')->getAmount()->getBaseAmount()
                ),
                'adjustments' => []
            ],
            'finalPrice' => [
                'amount' => $priceCurrency->convert(
                    $product->getPriceInfo()->getPrice('final_price')->getAmount()->getValue()
                ),
                'adjustments' => []
            ]
        ],
        'idSuffix' => '_clone',
        'tierPrices' => $tierPrices
    ];

    $priceConfig = $jsonEncoder->encode($config);
}

?>
<div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
<script>
    require(["jquery", "jquery/ui","priceBox", "Magento_Swatches/js/swatch-renderer"], function ($) {
         var dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?php echo $block->getProduct()->getId()?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

        priceBoxes = priceBoxes.filter(function(index, elem){
            return !$(elem).find('.price-from').length;
        });

        priceBoxes.priceBox({'priceConfig': <?php echo $priceConfig; ?>});

        $('.swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
            selectorProduct: '.product-item-details',
            onlySwatches: true,
            enableControlLabel: false,
            numberToShow: <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
            jsonConfig: <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
        });
    });
</script>

[magento-engcom-team]

Closing this ticket now, as it seems like its fixed in 2.2.x
Please reopen if the issue persists.

[prdptom]

Im still facing this issue on 2.2.4 Magento version and Im struggling to find the status of the issue. Here it shows closed , Can anyone please point me to the hotfix branch or a starting point from where I can start addressing this issue.

Thank You

[maierb]

bump