Working Out The JavaScript Needed To Get A Plus + And Minus - Button Working

Have added a plus + and minus - button to the products page on our website, by changing the following line of code to:

$the_button = '<div class="max-qty">' . 
zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . 
'</div>
<span class="qty-text">' . PRODUCTS_ORDER_QTY_TEXT . '</span>
<input type="text" name="cart_quantity" value="' . 
$products_get_buy_now_qty . 
'" maxlength="6" size="4" aria-label="' . ARIA_QTY_ADD_TO_CART . '">
<button type="button" class="minus" >-</button>
<button type="button" class="plus" >+</button>';

The full php code is:

<?php
if (CUSTOMERS_APPROVAL == 3 and 
TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') 
{
// do nothing
} else {
?>
<?php
$display_qty = (($flag_show_product_info_in_cart_qty == 1 
and $_SESSION['cart']->in_cart($_GET['products_id'])) 
? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . 
$_SESSION['cart']->get_quantity($_GET['products_id']) . 
'</p>' 
: '');
if ($products_qty_box_status == 0 or 
$products_quantity_order_max== 1) 
{
// hide the quantity box and default to 1
$the_button = '<input type="hidden" name="cart_quantity" value="1">';
} else {
// show the quantity box
$the_button = '<div class="max-qty">' . 
zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . 
'</div>
<span class="qty-text">' . PRODUCTS_ORDER_QTY_TEXT . '</span>
<input type="text" name="cart_quantity" value="' . 
$products_get_buy_now_qty . 
'" maxlength="6" size="4" aria-label="' . ARIA_QTY_ADD_TO_CART . '">
<button type="button" class="minus" >-</button>
<button type="button" class="plus" >+</button>';
}
$the_button .= zen_draw_hidden_field('products_id', (int)$_GET['products_id']);
$the_button .= zen_image_submit(BUTTON_IMAGE_IN_CART, 
BUTTON_IN_CART_ALT, 
' id="addToCartButton"');
$display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
?>
<?php 
if ($display_qty != '' or $display_button != '') { 
?>
<div id="cartAdd">
<?php
echo $display_qty;
echo $display_button;
?>
</div>
<?php   
} // display qty and button ?>
<?php 
} // CUSTOMERS_APPROVAL == 3 
?>
<!--eof Add to Cart Box-->
</div>
</div>

Still learning php, and haven't touched on any JavaScript yet. Could do with some help, if anyone knows a way of adding some JavaScript so that the plus + and minus - buttons, if pressed, will increase the default quantity of 1, or decrease, depending on which button is pressed.

Here, add it to your website, it is vanilla JS (can be a separate file and then you need this https://www.w3schools.com/tags/att_script_src.asp):

<script type="text/javascript">
window.onload = function() {
document.querySelector('.plus').addEventListener('click', function() {
var qtyInput = document.querySelector('input[name="cart_quantity"]');
qtyInput.value = parseInt(qtyInput.value, 10) + 1;
});
document.querySelector('.minus').addEventListener('click', function() {
var qtyInput = document.querySelector('input[name="cart_quantity"]');
qtyInput.value = parseInt(qtyInput.value, 10) - 1;
});
}
</script>

EDIT: Some explanation of what is happening:

• window.onload - this makes your code run when your page has finished loading everything,
• document.querySelector - this is a pointer towards an element, in here we are pointing at the element class plus. I would recommend using id instead however as classes are most commonly used for styling. When you have a concrete, one element in mind, id's are the best. More here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector.
• addEventListener - JS works on events, you can add various events like onclick, onfocus, onmouseover (https://www.w3schools.com/js/js_events.asp). First argument is the event name, second is the function to be called when event triggers.
• qtyInput - we assign a pointer to an element to be used in the next line,
• we either decrease or increase the input element value. Call to parseInt is optional, it just ensures that what is stored is an integer and not a string.

On the side note I would also recommend separating your PHP code from HTML and JS for readability - it will help you in the future. Meaning assign results of the functions like get_quantity() to a variable at the beginning of a file, and then just embed the variable in your HTML.

LAter when you are more confident I would suggest that you have your HTML files completely separate - elements should have their ids like `<div id=some_id"> then add to it JS file that works with those ids and manipulates them separately. This javascript ideally would talk to php to get data and then it updates your HTML with it. Finally once you learn more definitely consider learning how to use modern frameworks like Symfony or Laravel on the backend side and Vue/React/Angular on the frontend side.