1

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?

  • Please mark whether you are using Magento2 or 1x – Phil M Nov 23 '16 at 22:37
  • Magento 1.9.2.4 – Murillo Nov 25 '16 at 12:50
0

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.

  • Yes, I have a theme. I thought that could be a Magento problem and not a theme problem. I'll try with the theme's support team. Thank you – Murillo Nov 23 '16 at 22:43
  • Do you know how to turn on template path hints? – Phil M Nov 23 '16 at 22:45
  • No, never heard about it. What is it for? – Murillo Nov 23 '16 at 22:57
  • It allows you to see what files and classes are being used to render the page. Its a very handy tool to fix errors and make modifications. – Phil M Nov 23 '16 at 22:59
  • Very good. It will help me a lot. Thank you so much – Murillo Nov 25 '16 at 13:55
0

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

  • i do above solution but price is not formatted, $ sign is remove – Nikhil Vaghela Nov 22 '17 at 4:12

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.