prestashop17 Let Customers to Input a fixed product quantity in quantity box using a button or radio button in the product page

[averma82]

Dear All, Greetings of the Day!

I need to have the condition on the product page where we can  let our customers to input a fixed product quantity in quantity box using a button or radio button in the product page along with the default functionalities with the add to cart mechanism.

Why I need this is because I am using product volume discount list on the product page and i want the customer to select the quantity directly from the mentioned list.

Pls, find the screenshot attached for reference.

Customer can select the quantity directly from red rectangle shown in image through button/radio/link click.

Hope somebody will help me out with this for which I would be greatly obliged.

Thanks.

 

[knacky]

What is your programming knowledge?
What is the Prestashop version?
Will the rule apply to all products? 

Is it a default template or a purchased one?

Edited March 28, 2022 by knacky (see edit history)

[averma82]

Dear @knacky

Thanks for showing interest in my query.

• I don't have much programming knowledge except the basic level in HTML/CSS/JS.
• Prestashop Version : 1.7.8.5
• Yes the rule will apply to all the products but the quantity selection may differ as per requirements in the volume discount list block.
• We are using a purchased template and not the default one. Template Name: "Nursery Plant & Tools" from "TemplateTrip"

Website: https://krishnanursery.in/

Pls let me know if anything else is required.

Thanks & Regards.

[knacky]

Thank you for the additional information.
It's not complicated, but an adjustment will be needed

./themes/your theme/templates/catalog/_partials/product-discounts.tpl

and adding JavaScript that writes quantity to the quantity field when the radio button is clicked.

It's nothing complicated for a programmer.

It's nothing complicated for a programmer who understands Prestashop.

Estimated adjustment time max. Half an hour 😉

[knacky]

1.

./themes/your theme/templates/catalog/_partials/product-discounts.tpl

find

<td>{$quantity_discount.quantity}</td>

replace to

<td>
	<input type="radio" id="custom-quantity-radio-button-{$quantity_discount.id_specific_price}" value="{$quantity_discount.quantity}" name="custom-quantity-radio-button" style="float: left; margin-top: 5px;" onclick="addQuantityToWanted('{$quantity_discount.quantity}')">
              {$quantity_discount.quantity}
</td>

 

find end section

</section>

add after

<script>
  function addQuantityToWanted(quantity)
  {
    document.getElementById('quantity_wanted').value = quantity;  
  }
  document.addEventListener("DOMContentLoaded", function(event) { 
    var getSelectedValue = document.querySelector( 'input[name="custom-quantity-radio-button"]:checked'); 
      if(getSelectedValue === null) { 
        document.getElementsByName('custom-quantity-radio-button')[0].click();  
      } 
  });
</script>

 

2.

./themes/your theme/templates/catalog/_partials/product-add-to-cart.tpl

find

id="quantity_wanted"

add after

readonly="readonly"

 

find

<span class="input-group-btn-vertical">

 

add display style

<span class="input-group-btn-vertical" style="display:none">

 

[knacky]

The codes in the other cart templates still need to be adjusted so that the quantity cannot be changed.

[averma82]

Dear @knacky

Thanks for your help and support. I really appreciate it.

I will get back to you soon after implementing the steps guided by you on my Prestashop Store.

[knacky]

Of course, it could also be done with a module and it would be clearer.

[averma82]

Dear @knacky 

First of all, you are really awesome. You literally saved my life.

I tried all the steps that you mentioned above and successfully achieved what I wanted. But, I observed an issue that I am mentioning below.

• When I am selecting the radio button the objective is getting fulfilled and calculations and billing part with discount applied are okay but the unit base rate displayed on the top of the product page is not getting changed automatically according to the volume discount applied. 
• When manually editing the quantity input box, and providing the quantity manually from the volume discount list, the displayed  rate is getting changed and reflected according to the volume discount.

The calculation and billing  part is working perfectly file as expected in both the conditions.

Sample URL: https://stagingserver.krishnanursery.in/winter-seasonal-plants/dahlia-plant-orange-flower

 

Thanks & Regards.

[knacky]

So add javascript to click() in the quantity input.

https://www.w3schools.com/jsref/met_html_click.asp

[averma82]

Sir, I am not able to get your point. Please be more precise in which file i need to do the change and what?