Images inside Dropdown Option Vmod - price is not updating

Ive created a VMOD by using a third party script, which allows to have images displayed on dropdown inpit options, so clients can see when selecting from the dropdwon boxes, little images that helps them understand what they are buying.
In my case, on my website is very important as I have many product options.

All works nicely, only issue is that if it has a price addition liek if you select an option and is +$5, doesnt update the main price.
I tried several other similar scripts, and dug into the javascripts but I couldnt find why the price update part doesnt work.

I attached 2 screenshots for you can see what Im talking about and in a ZIP file the Vmod.
I work on LC 2.6.1.

If anyone has more understanding to it, you can eighter propose me a price for finding this issue and and update the VMOD accordingly, or you can also use this addon if this helps your project.

Did you make any changes to box_product.inc.php? If you moved .pricewrapper out of .buy_now that might be the reason.

<div class="price-wrapper"> is still there...

Iif I disable the Vmod, it work, if I enable it it doesnt.
The Vmod brings in a css and a javascript file, to includes/templates/default.catalog/layouts/default.inc.php
also some changes to the pages/product.inc.php file

I think is something to do with the javascript the vmod uses, as soon as I disable the Javascript. ot works.

If I refresh the page would show the updated price, but it doesnt updates the price when VMOD is on.

I recommend you use the attachment file upload for big dumps.

oh.. sorry I should have done that.
i will next time

looks like with this I managed to make the price update to work:

    document.addEventListener("DOMContentLoaded", function () {
        let form = document.querySelector("form[name='buy_now_form']");
        let allDropdowns = document.querySelectorAll("select[is='ms-dropdown']");

        if (form && allDropdowns.length > 0) {
            allDropdowns.forEach(dropdown => {
                dropdown.addEventListener("change", function () {
                    form.dispatchEvent(new Event("input", { bubbles: true }));
                });
            });
        }
    });

And jQuery style:

let $form = $("form[name='buy_now_form']");
let $allDropdowns = $("select[is='ms-dropdown']");

if ($form.length > 0 && $allDropdowns.length) {
    $allDropdowns.on("change",  () =>  $form.trigger("input"));
}

Thanks Tim, yours works too - I changed it to yours as:

• Uses jQuery selectors ($("selector")) instead of document.querySelector.
• Uses .on("change", function) instead of addEventListener("change", function).
• Uses trigger("input") instead of dispatchEvent(new Event("input")).
• Shorter and simpler if jQuery is already loaded.

The industry has been discouraging the use of jQuery. But the whole reason why this is one of those dependencies LiteCart hasn't abandoned is because it makes JS code shorter and minimalistic. :) And during the years the footprint of jQuery itself has been getting smaller.

This part of the form works ok, however the Quantity field, by adding different numbers, in the front, doesnt change the price - and I just cant figurie it out why
(could be the price matrix addon ..)

Quantities does not change the unit price on the product page unless you are using the Quantity Prices add-on.

Thanks Tim, but Quantity Prices add-on is not what I wanted.

I created the below:

1. added this code just below the current price on the box_product.inc.php

<div id="qty-price-tas" class="qty-price-tas" ></div>

2. added this javascript just befoe the </body>

<script>
document.addEventListener("DOMContentLoaded", function () {
    console.log("Script Loaded!");

    function updateTotalPrice() {
        let priceElement = document.querySelector(".price");
        let quantityInput = document.querySelector("input[name='quantity']");
        let totalPriceDiv = document.querySelector("#qty-price-tas");

        if (!priceElement || !quantityInput || !totalPriceDiv) {
            console.warn("Missing required elements! Check your selectors.");
            return;
        }

        let basePrice = parseFloat(priceElement.textContent.replace(/[^\d.]/g, '')) || 0;
        let quantity = parseInt(quantityInput.value) || 1;
        let totalPrice = basePrice * quantity;

        let formattedTotalPrice = totalPrice.toLocaleString('en-GB', { style: 'currency', currency: 'GBP' });

        console.log(`Base Price: ${basePrice}, Quantity: ${quantity}, Total Price: ${formattedTotalPrice}`);

        totalPriceDiv.textContent = `Total Price: ${formattedTotalPrice}`;
    }

    // Trigger update when quantity changes
    document.querySelector("input[name='quantity']").addEventListener("input", function () {
        console.log("🛒 Quantity changed to:", this.value);
        updateTotalPrice();
    });

    // Mutation Observer to detect when the price inside <strong class="price"> changes dynamically
    let priceElement = document.querySelector(".price");
    if (priceElement) {
        new MutationObserver(() => {
            console.log("Price changed dynamically!");
            updateTotalPrice();
        }).observe(priceElement, { childList: true, subtree: true });
    }

    // Initial update on page load
    updateTotalPrice();
});
</script>

Now it calculates dinamically the price when quantity number is changed the in the Quantity field without adding the product to cart.

In my case I need this so customers type in different quantities they can see how much it costs if they by multipe of the same product.