How to change price for configurable products in Product Listing in a modal

Question

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

Answer 1

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