Display a number depending on the Quantity number of 1 product

Marionlesso
Excursionist
21 0 8

Hi there, 

I'm working on a complex situation, but also so simple. 
I would like to be able to display a field with a number that varies on the quantity the users enter. 
This field is just informative and is a simple calculation of the Qty entered x 0.70

Does anyone know if it's easy to implement with code? 
Here is how it would look like:

 Screen Shot 2021-07-19 at 1.06.15 PM.png

 

Website: https://partnerprogram.zeiss.ca/

0 Likes
Bunty
Tourist
73 16 29

You can do somthing like this

https://jsfiddle.net/fiddler2021/gw65tyxz/5/

<form>
   <input type="text" id="number" value="0"/>
   <input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
<div id="mul"/>
function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
    document.getElementById('mul').innerHTML = (value*0.7).toFixed(2);
}
0 Likes
Marionlesso
Excursionist
21 0 8

Thanks, I will try this out. 
Where should I inject the code? Under Template -> Product.liquid?
Also, can I apply it to only one specific product?

0 Likes
Bunty
Tourist
73 16 29

I suggest start the easy way to test it out, you can try adding it on the product.liquid or the section or snippet, wherever the details currently are and then refine. You should be able to conditionally add the code based on product.

0 Likes
Marionlesso
Excursionist
21 0 8

Thanks for your help, Unfortunately, it doesn't work. 
It says it doesn't recognize the tag {% endschema %}

Not sure I know where to put the code .. 

0 Likes
Bunty
Tourist
73 16 29

Ok, that was just a JavaScript example to set you in a direction, you can't paste that exact thing in the liquid. Here's a more concrete example on Debut theme

I have product.liquid that looks like this

{% section 'product-template' %}
{% section 'product-recommendations' %}

which means the product template contains the details of what displays on the product page

In my product-template.liquid section, I locate this

{% if section.settings.show_quantity_selector %}
              <div class="product-form__item product-form__item--quantity">
                <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*" data-quantity-input onchange="increment(this.value);">
              </div>
 {% endif %}

and change to this

{% if section.settings.show_quantity_selector %}
        	  <script type="text/javascript">
                function increment(x){
                	document.getElementById('mul').innerHTML = (x*0.7).toFixed(2);
                }
              </script>
              <div class="product-form__item product-form__item--quantity">
                <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*" data-quantity-input onchange="increment(this.value);">
              </div>
         	  <div id="mul">
 {% endif %}

 

Summary:

  • add a JavaScript function that accepts a value, computes and dumps the output in a static DIV
  • added a DIV with id "mul" where the computed value could be dumped
  • added an "onchange" trigger on the input, so when it changes, it calls the Javascript function passing its current value

 

Hope this helps

0 Likes
Marionlesso
Excursionist
21 0 8

Hi, 

That's impressive, you definitely know a lot about coding. 
Unfortunately, the website is with turbo and I can't find any line mentioning Quantity. 

I feel that I'm very close, it is very frustrating. 

Thanks a lot already for sharing your knowledge.

0 Likes