Product List - Configurable swatchs don't update price

Question

I have a configurable product with a size attribute that I am showing in the products list and in the product page and depending on the size of the product, the image and the price is changed.

But I am facing two problems

In the product page, everything is working OK, the price is changing and the image is changing.

1 problem) However in the products list/grid just the image change when I select the product size in the swatch. The price don't update.

2 problem) Still in the products list/grid when I press the button 'Buy' in a product with this size attribute, a modal window appear to select the size but the price in this window doesn't change either.

Anybody can help?

Thanks in advance

Update:

I contact the theme support and they fix the second problem

"2 problem) Still in the products list/grid when I press the button 'Buy' in a product with this size attribute, a modal window appear to select the size but the price in this window doesn't change either."

But the first problem looks like Magento don't update this price in the product list page, so this is not a theme problem.

How can I implement this price update?

Answer 1

Obviously there is a customization in place, and that customization does not account for changes in price based on configurable options. Figure out what that customization is.

If its a commercial module, then find out if an update is released that fixes this issue... if not then report the issue to their support team.

If its your own custom development, then there is a lot of work required in order to support this. Magento product.js includes a lot of the pricing adjustments that you see on the Product View page, but that is not loaded on the category pages -- and in fact, it cannot be loaded because it is designed as a singleton style object that assumes only a single product loaded per page.

Commercial extensions such as Belvg Quick View or Amasty Ajax Shopping Cart resolve the problem above by loading the configurable product in a lightbox and only a single instance of the product.js object is active at a time.

Answer 2

I found a little solution for this bug.

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

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() ?>'
    });
});