Display a number depending on the Quantity number of 1 product

Store Design
1

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
Screen Shot 2021-07-19 at 1.06.15 PM.png2828×1422 237 KB

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

2

You can do somthing like this

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



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);
}
3

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?

4

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.

5

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 ..

6

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 %}
              
                
                
              

 {% endif %}

and change to this

{% if section.settings.show_quantity_selector %}
        	  
              

                
                
              

         	  
 {% 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

7

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.