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

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, privacy policy and cookie policy

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