Hi guys!
Hope you are well.
I need help. I have two text fields. Both are filled with numbers from two different CMS collections. I want to add the numbers into two separate input fields so that I can then add a script that multiplies them and send the sum to a new text field.
I’m not good with Javascript and would really appreciate it if someone can assist me in this. Pretty please.
Kind regards,
Parham
Hi @parhamshafti as you do not specify what number and with what number should be calculated here is very simple example you can take as starting point and rest you can find on internet.
In this example you get values af each inputs an than multiply each number.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<section class="first">
<p>data from cms</p>
<input type="text" value="5" />
<input type="text" value="10" />
</section>
<section class="second">
<p>user input</p>
<input type="text" value="3" />
<input type="text" value="2" />
<button onclick="calculate()">calculate</button>
</section>
<section class="third">
<p>result</p>
<h1 id="result"></h1>
</section>
<script>
var inputs = document.querySelectorAll("input");
var result = document.querySelector("#result");
function calculate() {
var a = Number(inputs[0].value);
var b = Number(inputs[1].value);
var c = Number(inputs[2].value);
var d = Number(inputs[3].value);
var sum = a * b * c * d;
result.innerText = sum;
}
</script>
</body>
</html>
Hi @Stan Sorry for the very late reply. I missed getting back when you wrote this and other tasks have been a priority until now. Appreciate your help. Could you please help me develop it slightly more?
Here is what I need to do more specifically:
I have a price that needs to be reduced by a percentage to get out a discounted price. Example:
The price is 20 euros, the discount is 20%, I need to get the price after the reduction (20*80= final price).
Here is a screenshot to show you what I mean:
Can you please help me adjust the code and guide me on how to set it up to get it right? Pretty please?
hi @parhamshafti one way how to is by this code placed in page setting.
const productCards = document.querySelectorAll('.product-card')
productCards.forEach(card =>{
// grab elements
const price = parseInt(card.querySelector('.product-price').innerHTML)
const discount = parseInt(card.querySelector('.product-sale').innerText)
const actionPrice = card.querySelector('.action-price')
// calculations
const discountAmount = price * (discount / 100)
const discountedPrice = price - discountAmount
// assign value to element
actionPrice.innerText = discountedPrice
})
To get an idea how it works here is Read-Only I will keep live for some time. data are in CMS
Thank you so much @Stan ! This solved the main challenge 
Am also wondering if you by chance have a suggestion on how I can have a strike-through on the original price once a discount is set? Here is an example:
Also, let me know if I can return the favour somehow, can help with branding and design-related questions as my primary expertise.
HI @parhamshafti strike through property is much easier than you can imagine 
just use WF UI for text decoration as on img below.
this give you strike in colour of text.
If you would like to have strike in different colour the one way is to use custom CSS to change it.
in this case you will select your element with class product-price and set different color for decorator.
<style>
.product-price{
text-decoration-color: red;
}
</style>
If there will be on page rendered mix of cards with and without discount you can write condition in JS to have this decorator applied only when discount is set etc. As I do not know exact situation and needs I can’t help more.
Thanks for offer I keep it in my mind and one day …
@Stan Sorry for not giving better context earlier. I understand I can set strike-through in WF. Just that the discount is only applied occasionally, and is added to the page from a different CMS collection than the product itself (so can’t set conditional visibility on the original product price based on if “discount” which set in the other CMS collection).
So what I need is to set the condition for the strike-through to be seen on the original price only if the discount is set.
hi @parhamshafti I have updated script with very simple condition that conditionally add line-trough when discount is bigger that 0. This mean that you have to always set value 0 to discount field for full price items as this condition doesn’t check if value exist (mean if discount field is empty).
To prevent it you can set on discount field that is required but I do not know if there is a way to set 0 or null as init value as you can do in code.
Anyway I hope that this simple solution will help
EDIT:
If you would like to hide discount per cent and discount price element on full price card. you can add none
priceEl.style.display = "none"
but this will cause design shift as elements would not be rendered in DOM
or you can add hide (is now implemented in updated script)
priceEl.style.visibility = "hidden"
in this case elements will be rendered in DOM but would not be visible. This prevent card design shift and all visible elements will stay in place. But as I have mentioned I do not know how card is designed for not discounted items is hard to suggest more advice for better UX.
@Stan I have created a separate CMS collection for Discounts where the campaign and percentage are applied to products with certain categories. The start and due date set for those campaigns are only there for helping me with conditional visibility set on the discount bubble and now the new elements that show the discounted total price. Your solution now solves the line-trough but the problem remains that the campaign is still there (active just not visible) and the Discount doesn’t get reset to 0 to remove the line-through once the campaign is over. Not sure how to handle this.
Maybe it helps to check the Read-only version? Here is the link.
And here is the published preview
hi @parhamshafti in your original request you have not mentioned that your request is related to time based campaigns that should be automated once campaign is over.
I see you have two discount fields one in item it self and one in campaign. The issue can be solved by watching and comparing eg. timestamp but it will require a good preparation for possible cases and their combinations and that will require a bit more complex code.
Just want to openly say that @Stan helped me solve the final issues of this request outside of this conversation. Thank you again Stan, you are the man 