I work on the dawn theme and I had to make a price in the buy button, I did it, on the product page, there is also a quantity input, and when you change the quantity of the product, the price should change, for example, if the user wants to buy 2 products, then the price it will be like for 2 products, I did it, but for some reason when I add several product options, the price stops changing, I don't understand how to fix it
Code buy button:
{%- if show_dynamic_checkout -%}
<button type="button" class="shopify-payment-button__button shopify-payment-button__button--unbranded" id="shopify-payment-button" onclick="document.querySelector('[data-testid]').click();">
{% if request.path contains "/uk" %}
Купити за
{% else %}
Buy for
{% endif %}
<div class="no-js-hidden" id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price',
use_variant: true,
show_badges: true,
-%}
</div>
</button>
<div style="display:none;">
{{ form | payment_button }}
</div>
{%- endif -%}
Js file responsible for dynamic price changes:
const inputElement = document.getElementById("Quantity-template--19689005220114__main");
const Button_Minus = document.getElementById("Button_Minus");
const Button_Plus = document.getElementById("Button_Plus");
const PayButton = document.getElementById("shopify-payment-button__button");
const radioInputs = document.querySelectorAll('.product-form__input input[type="radio"]');
const Add_To_Cart_Button = document.getElementById("ProductSubmitButton-template--19689005220114__main");
var input_quantity_num = parseInt(inputElement.value);
var priceItem = document.getElementById("price-item--regular");
var price_main_const = priceItem.textContent.trim();
var price_number = price_main_const.match(/\d+/g).join("");
var price_currency = price_main_const.replace(/\d+/g, "");
radioInputs.forEach((input) => {
input.addEventListener("click", function () {
input_quantity_num = 1;
processPrice(input_quantity_num);
});
});
Add_To_Cart_Button.addEventListener("click", () => {
input_quantity_num = 1;
processPrice(input_quantity_num);
});
function checkAndReplaceNaN(value) {
return isNaN(value) ? 1 : value;
}
inputElement.addEventListener("input", () => {
input_quantity_num = parseInt(inputElement.value);
input_quantity_num = checkAndReplaceNaN(input_quantity_num);
processPrice(input_quantity_num);
});
Button_Minus.addEventListener("click", () => {
if (!Button_Minus.classList.contains("disabled")) {
input_quantity_num -= 1;
input_quantity_num = checkAndReplaceNaN(input_quantity_num);
processPrice(input_quantity_num);
}
});
Button_Plus.addEventListener("click", () => {
input_quantity_num += 1;
input_quantity_num = checkAndReplaceNaN(input_quantity_num);
processPrice(input_quantity_num);
});
function processPrice(input_quantity_num) {
var result = price_number * input_quantity_num;
var price_new_smart = result + price_currency;
priceItem.textContent = price_new_smart;
}
