2

I have simple and configurable products in Product Listing page. When I click on product it is open a modal and show with product related information. In modal, For configurable products I have 3 configuration attributes like : small, medium and large. All of 3 configurations have different prices. I can add products to cart using ajax in modal.

But on changing configurations product price is not getting changed.

Can anyone tell me how can I achieve this?

I have used this script but it is not working in this case

<script>
require([
    'jquery',
    'priceBox'
], function($){
    var dataPriceBoxSelector = '[data-role=priceBox]',
        dataProductIdSelector = '[data-product-id=<?php echo $block->escapeHtml($_product->getId())?>]',
        priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

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

    priceBoxes.priceBox({'priceConfig': <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>});
});

1 Answer 1

0

Please try with below code in this path : app/design/frontend/Vendor/Theme/Magento_Swatches/templates/product/listing/renderer.phtml

<?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>

hope its work for you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.