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

[chadlly2003]

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>

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

From what I see of the above code, it looks like this script is pushed to the browser for each product that is in the cart (not exactly the best way to handle the potential data, but it gets the point across). It may also be easier to help to see the page in question. I am providing the following guidance based on a bit of an attempt to understand and *without* using any type of online tester...

From what I see of reviewing the quantity field code and what appears to be an explanation of how this is to work it appears that the addInput variable should contain something specific to the target. Of the data pushed to the quantity field, that something is in the class of the quantity field, although an appropriate id would be more appropriate as a properly formatted page would have only one object with that id. Instead, it appears that every store object has a unique class identifier beginning with: cart_input_ with then the products "id" to follow. But to reference the class in jQuery need to preface that with a period. Note also that the product's ID can be of the type: "111:feadeaf123afed1234129874" basically an integer followed by a colon followed by the md5 hash of the attributes and associated settings/value.

It would seem that n should start out with the quantity of product that are actually in the cart rather than 1 as otherwise everytime the cart is visited then as you said, the value will reset to 1 on screen when in fact it could be some other number. Let's not yet get into increments by units, min/max values, etc...

So, I might recommend that for each "loop" of displaying the script that it be something like the following:

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

[chadlly2003]

Hmm I tried your suggestion but the script does not seem to work. Any other ideas or recommendations would be greatly appreciated

[mc12345678]

Hmm I tried your suggestion but the script does not seem to work. Any other ideas or recommendations would be greatly appreciated

Possible to get a link to where this is being "displayed"?

I have a lot of ideas, but being asked to resolve a problem and currently have little information other than it seems that it doesn't act/respond the way desired/expected.

[chadlly2003]

mc12345678,

I sent you a pm with the url of my site. Hopefully you can assist me in this issue

[chadlly2003]

Just to be clear. On the shopping cart page index.php?main_page=shopping_cart.

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.
I tried the suggestions on post #2 but it does not seem to work.

What information from me do you need to try and make this a little bit clearer.

[mc12345678]

mc12345678,

I sent you a pm with the url of my site. Hopefully you can assist me in this issue

Not seeing evidence of the script when reviewing the shopping cart page...

[chadlly2003]

it not working so i could not keep it on my live site

[mc12345678]

it not working so i could not keep it on my live site

Can you put it there but hide the +/- with css and still see normal operation?

Issue is that I could go and do something on my site that works, but the javascript/jquery is having an issue on your site. Unfortunately, of all the things that can be modified and perhaps I'm wrong, but of all the things that can be edited "live" on a webpage, the addition of executable javascript that also executes as desired is not something I've seen able to be done. If the script is there, I can "run" through it, see what is happening, change variables that have been set or made available, but I haven't seen where I can just type in the script, attach it to the DOM and carry through the page as if it were there the entire time...

Otherwise, having a reachable development site where this is attempted would help... There already is something on the product information page that "does" this, though it seems to do it a different way that I've stopped searching on...

[chadlly2003]

Can you put it there but hide the +/- with css and still see normal operation?

Issue is that I could go and do something on my site that works, but the javascript/jquery is having an issue on your site. Unfortunately, of all the things that can be modified and perhaps I'm wrong, but of all the things that can be edited "live" on a webpage, the addition of executable javascript that also executes as desired is not something I've seen able to be done. If the script is there, I can "run" through it, see what is happening, change variables that have been set or made available, but I haven't seen where I can just type in the script, attach it to the DOM and carry through the page as if it were there the entire time...

Otherwise, having a reachable development site where this is attempted would help... There already is something on the product information page that "does" this, though it seems to do it a different way that I've stopped searching on...

Okay it live on the site