Cart Quantity plus and minus buttons on the shopping cart default page.

[chadlly2003]

I got a little lost there in your previous post. Tomorrow if you have time to assist and resolve this issue that would be great. For now I have taken the code off. I can easily put it back up... thank for your help

[chadlly2003]

Forgot how will you be able to look at it if I take it off. I put it back up just hide it using css. Hopefully we can solve this issue. Thanks again for your help

[mc12345678]

Cart Quantity plus and minus buttons on the shopping cart default page. Is this possible?

I am trying to add a basic jquery script that will add a plus and minus to the quantity box on the cart page. For some reason I cant get it to work correctly. The input value always go back to 1 as indicated var n = 1; //n is equal to 1. How would I get that to make it so it put the correct value in there.

includes\modules\pages\shopping_cart\header_php.php. This is the piece of code i edited... If someone can assist me or lead me in the right direction I would greatly appreciate it.

    $quantityField = '<span class="plus button">+' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.$products[$i]['id'].' "'). '<span class="min button">-
</span>';

Simple jquery script

        <script>jQuery(function(){

  var j = jQuery; //Just a variable for using jQuery without conflicts
  var addInput = '$products[$i]['quantity']'; //This is the id of the input you are changing
  var n = 1; //n is equal to 1

  //Set default value to n (n = 1)
  j(addInput).val(n);

  //On click add 1 to n
  j('.plus').on('click', function(){
    j(addInput).val(++n);
  })

  j('.min').on('click', function(){
    //If n is bigger or equal to 1 subtract 1 from n
    if (n >= 1) {
      j(addInput).val(--n);
    } else {
      //Otherwise do nothing
    }
  });
});</script>

Didn't misunderstand my request, though I didn't/don't know the status of the code being within or outside of an existing php code section...

If this area of code is all html just before this area and just after, then the above code should be encompassed with an opening php statement:
<?php
and followed by a closing php statement (unless this code is the last thing in the file):
?>

So might be like this:

<?php
     for ($i=0, $n=sizeof($products); $i<$n; $i++) {
?>
        <script>jQuery(function(){
  var j = jQuery; //Just a variable for using jQuery without conflicts
  var addInput = '.cart_input_<?php echo $products[$i]['id']; ?>'; //This is the unique class identified by product's id of the input you are changing
  var n = <?php echo (empty($products[$i]['quantity']) ? '0' : $products[$i]['quantity']); ?>; //n is equal to the quantity in the cart

  //Set default value to n (n = cart quantity)
  j(addInput).val(n);

  //On click add 1 to n
  j('.plus').on('click', function(){
    j(addInput).val(++n);
  })

  j('.min').on('click', function(){
    //If n is bigger or equal to 1 subtract 1 from n
    if (n >= 1) {
      j(addInput).val(--n);
    } else {
      //Otherwise do nothing
    }
  });
});</script>
<?php
}
?>

When the php is left off of the opening statement (<?) then that is a short tag which depending on the php version may be disallowed and cause the page to go blank from that point onwards and an error log to be generated...

I got a little lost there in your previous post. Tomorrow if you have time to assist and resolve this issue that would be great. For now I have taken the code off. I can easily put it back up... thank for your help

So, here's where things stand currently. The product quantity information box is generated by the following:

    $quantityField = '<span class="plus button">+' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.$products[$i]['id'].' "'). '<span class="min button">-
</span>';

The remaining operations are performed by this:

<?php
     for ($i=0, $n=sizeof($products); $i<$n; $i++) {
?>
        <script>jQuery(function(){
  var j = jQuery; //Just a variable for using jQuery without conflicts
  var addInput = '.cart_input_<?php echo $products[$i]['id']; ?>'; //This is the unique class identified by product's id of the input you are changing
  var n = <?php echo (empty($products[$i]['quantity']) ? '0' : $products[$i]['quantity']); ?>; //n is equal to the quantity in the cart

  //Set default value to n (n = cart quantity)
  j(addInput).val(n);

  //On click add 1 to n
  j('.plus').on('click', function(){
    j(addInput).val(++n);
  })

  j('.min').on('click', function(){
    //If n is bigger or equal to 1 subtract 1 from n
    if (n >= 1) {
      j(addInput).val(--n);
    } else {
      //Otherwise do nothing
    }
  });
});</script>
<?php
}

?>

Note that in the processing portion, an onclick event is attached to any class that is identified as 'min' and an event is attached to a class that is identified as 'plus'...

In the creation of the plus and minus boxes around the quantity, each box is assigned a class of 'plus' or 'min' respectively... That means all onclick events associated with the 'plus' class occur when the plus object is clicked and all onclick events associated with the 'min' class occur when the min object is clicked... Based on how the above is written, that means that all product in the cart will increase or decrease by one for each click...

Therefore, if keeping this method of presenting the script then need to make the class associated with each plus/minus to be unique so that only the quantity associated with the product to modify is executed.

This can be done by making the following four changes highlighted in red:

    $quantityField = '<span class="plus_' . $products[$i]['id'] . ' button">+' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.$products[$i]['id'].' "'). '<span class="min_' . $products[$i]['id'] . ' button">-</span>';

<?php
     for ($i=0, $n=sizeof($products); $i<$n; $i++) {
?>
        <script>jQuery(function(){
  var j = jQuery; //Just a variable for using jQuery without conflicts
  var addInput = '.cart_input_<?php echo $products[$i]['id']; ?>'; //This is the unique class identified by product's id of the input you are changing
  var n = <?php echo (empty($products[$i]['quantity']) ? '0' : $products[$i]['quantity']); ?>; //n is equal to the quantity in the cart

  //Set default value to n (n = cart quantity)
  j(addInput).val(n);

  //On click add 1 to n
  j('.plus_<?php echo $products[$i]['id']; ?>').on('click', function(){

    j(addInput).val(++n);
  })

  j('.min_<?php echo $products[$i]['id']; ?>').on('click', function(){

    //If n is bigger or equal to 1 subtract 1 from n
    if (n >= 1) {
      j(addInput).val(--n);
    } else {
      //Otherwise do nothing
    }
  });
});</script>
<?php
}
?>

Ideally, what would be "better" would be for the script to "identify" from where it was executed (in a way), identify where the "owner" of the data is, then update the data for just that one object. This would simplify the code (as you can imagine on the client side if there are 10 unique items in the cart then the above script is shown 10 times) to output the instruction only once and to update just the section(s) to be updated...

[chadlly2003]

for some I am getting errors when i paste it. Must be something i am missing

$quantityField = '<span class="plus button">+' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.$products[$i]['id'].' "'). '<span class="min button">-</span>';

replace with

_' . 
$products[$i]['id'] . 
'
 button">+' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.$products[$i]['id'].' "'). '<span class="min
_' . $products[$i]['id'] . '
 button">-
</span>';

[chadlly2003]

i did it this way but getting errors.

$quantityField = '<span class="plus _' . $products[$i]['id'] . ' button">+' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.$products[$i]['id'].' "'). '<span class="min
_' . $products[$i]['id'] . '
 button">-
</span>';

I uploaded it to the site so you can see it....

[chadlly2003]

nope it works thank you

[chadlly2003]

the only issue now is when there is an attribute the plus and minus do not work. Other than that all seems good. Just this one small issue left.

[mc12345678]

So, here's where things stand currently. The product quantity information box is generated by the following:

    $quantityField = '<span class="plus button">+' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.$products[$i]['id'].' "'). '<span class="min button">-
</span>';

The remaining operations are performed by this:

<?php
     for ($i=0, $n=sizeof($products); $i<$n; $i++) {
?>
        <script>jQuery(function(){
  var j = jQuery; //Just a variable for using jQuery without conflicts
  var addInput = '.cart_input_<?php echo $products[$i]['id']; ?>'; //This is the unique class identified by product's id of the input you are changing
  var n = <?php echo (empty($products[$i]['quantity']) ? '0' : $products[$i]['quantity']); ?>; //n is equal to the quantity in the cart

  //Set default value to n (n = cart quantity)
  j(addInput).val(n);

  //On click add 1 to n
  j('.plus').on('click', function(){
    j(addInput).val(++n);
  })

  j('.min').on('click', function(){
    //If n is bigger or equal to 1 subtract 1 from n
    if (n >= 1) {
      j(addInput).val(--n);
    } else {
      //Otherwise do nothing
    }
  });
});</script>
<?php
}

?>

Note that in the processing portion, an onclick event is attached to any class that is identified as 'min' and an event is attached to a class that is identified as 'plus'...

In the creation of the plus and minus boxes around the quantity, each box is assigned a class of 'plus' or 'min' respectively... That means all onclick events associated with the 'plus' class occur when the plus object is clicked and all onclick events associated with the 'min' class occur when the min object is clicked... Based on how the above is written, that means that all product in the cart will increase or decrease by one for each click...

Therefore, if keeping this method of presenting the script then need to make the class associated with each plus/minus to be unique so that only the quantity associated with the product to modify is executed.

This can be done by making the following four changes highlighted in red:

    $quantityField = '<span class="plus_' . $products[$i]['id'] . ' button">+' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.$products[$i]['id'].' "'). '<span class="min_' . $products[$i]['id'] . ' button">-</span>';

<?php
     for ($i=0, $n=sizeof($products); $i<$n; $i++) {
?>
        <script>jQuery(function(){
  var j = jQuery; //Just a variable for using jQuery without conflicts
  var addInput = '.cart_input_<?php echo $products[$i]['id']; ?>'; //This is the unique class identified by product's id of the input you are changing
  var n = <?php echo (empty($products[$i]['quantity']) ? '0' : $products[$i]['quantity']); ?>; //n is equal to the quantity in the cart

  //Set default value to n (n = cart quantity)
  j(addInput).val(n);

  //On click add 1 to n
  j('.plus_<?php echo $products[$i]['id']; ?>').on('click', function(){

    j(addInput).val(++n);
  })

  j('.min_<?php echo $products[$i]['id']; ?>').on('click', function(){

    //If n is bigger or equal to 1 subtract 1 from n
    if (n >= 1) {
      j(addInput).val(--n);
    } else {
      //Otherwise do nothing
    }
  });
});</script>
<?php
}
?>

Ideally, what would be "better" would be for the script to "identify" from where it was executed (in a way), identify where the "owner" of the data is, then update the data for just that one object. This would simplify the code (as you can imagine on the client side if there are 10 unique items in the cart then the above script is shown 10 times) to output the instruction only once and to update just the section(s) to be updated...

It is possible (because I have not gone and confirmed) that the presence of the colon (:) is causing an issue as a potential not recognized/accepted character... To get around that then would want to replace the colon by removal... So anywhere in this script code that you see:

$products[$i]['id']

to replace it with:

str_replace(':', '', $products[$i]['id'])

This would make the code like this:

    $quantityField = '<span class="plus_' . str_replace(':', '', $products[$i]['id']) . ' button">+' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.str_replace(':', '', $products[$i]['id']).' "'). '<span class="min_' . str_replace(':', '', $products[$i]['id']) . ' button">-</span>';

<?php
     for ($i=0, $n=sizeof($products); $i<$n; $i++) {
?>
        <script>jQuery(function(){
  var j = jQuery; //Just a variable for using jQuery without conflicts
  var addInput = '.cart_input_<?php echo str_replace(':', '', $products[$i]['id']); ?>'; //This is the unique class identified by product's id of the input you are changing
  var n = <?php echo (empty($products[$i]['quantity']) ? '0' : $products[$i]['quantity']); ?>; //n is equal to the quantity in the cart

  //Set default value to n (n = cart quantity)
  j(addInput).val(n);

  //On click add 1 to n
  j('.plus_<?php echo str_replace(':', '', $products[$i]['id']); ?>').on('click', function(){

    j(addInput).val(++n);
  })

  j('.min_<?php echo str_replace(':', '', $products[$i]['id']); ?>').on('click', function(){

    //If n is bigger or equal to 1 subtract 1 from n
    if (n >= 1) {
      j(addInput).val(--n);
    } else {
      //Otherwise do nothing
    }
  });
});</script>
<?php
}
?>

Ohh yeah, another "help" thing might be to limit the maximum amount to be added to the quantity in stock assuming the store doesn't support overselling... Just some other things to consider as you flush out this script... Also if a product does support units smaller than 1, then when doing the minus action, may want to consider what it would take to make the value go to 0. Say if the units are 0.5, but the quantity in the cart is initially 1.2, then the first minus should result in 0.7, the second 0.2, but then potentially would need to make the next subtraction go to 0 instead of -0.3... Again, more detail for you to possibly come back to as you refine this or someone else picks it up for their own use...

[chadlly2003]

The How to "Cart Quantity plus and minus buttons on the shopping cart default page." thanks to mc12345678

I put the script in

includes\templates\theme871\templates\tpl_shopping_cart_default.php

<!-- script for min max -->	
 
<?php
     for ($i=0, $n=sizeof($products); $i<$n; $i++) {
?>
        <script>jQuery(function(){
  var j = jQuery; //Just a variable for using jQuery without conflicts
  var addInput = '.cart_input_<?php echo str_replace(':', '', $products[$i]['id']); ?>'; //This is the unique class identified by product's id of the input you are changing
  var n = <?php echo (empty($products[$i]['quantity']) ? '0' : $products[$i]['quantity']); ?>; //n is equal to the quantity in the cart

  //Set default value to n (n = cart quantity)
  j(addInput).val(n);

  //On click add 1 to n
  j('.plus_<?php echo str_replace(':', '', $products[$i]['id']); ?>').on('click', function(){

    j(addInput).val(++n);
  })

  j('.min_<?php echo str_replace(':', '', $products[$i]['id']); ?>').on('click', function(){

    //If n is bigger or equal to 1 subtract 1 from n
    if (n >= 1) {
      j(addInput).val(--n);
    } else {
      //Otherwise do nothing
    }
  });
});</script>
<?php
}
?>
	
<!-- eof script for max -->

includes\modules\pages\shopping_cart\header_php.php
find this

 $quantityField = zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" class="cart_input_'.$products[$i]['id'].'"');

and replace with

$quantityField = '<span class="min_' . str_replace(':', '', $products[$i]['id']) . ' button">-' .'</span>' . zen_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" name="qty" id="qty"  class="cart_input_'.str_replace(':', '', $products[$i]['id']).' "'). '<span class="plus_' . str_replace(':', '', $products[$i]['id']) . ' button">+</span>';

This has been tested with attribute values and seems to work well.

[chadlly2003]

here is the css to get you going

.button {
padding:5px; cursorointer; background:grey; color:white; width:25px; height:15px; text-align:center; display:inline-block;
}

.button:hover {
background:black;
}