2.3.4 BS EDGE auto-update quantity in shopping_cart.php

[azpro]

Hi all!

 

I see a lot of customers on shopping_cart.php changing the quantity of the product they want to order but do not click the refresh  button ... They tend to click the Checkout button and are redirected to checkout_shipping.php (if logged on) or to login.php (if not logged on). In this way the updated quantity is lost. This is annoying for customers.

 

There is quite a simple way to "auto-update" the quantity regardless if customers click Refresh or Checkout. this is based on:

auto-update cart http://addons.oscommerce.com/info/5598

 

Make the following changes:

 

In shopping_cart.php find (based on 2.3.4 BS EDGE):

tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'fa fa-angle-right', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'primary', NULL, 'btn-success');

and replace / modify to :

tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'fa fa-angle-right', NULL, 'primary', array('params' => 'name="checkoutsubmit" value="checkoutbutton"'), 'btn-success');

Now in application_top.php find:

      // customer wants to update the product quantity in their shopping cart
      case 'update_product' : $n=sizeof($HTTP_POST_VARS['products_id']);
                              for ($i=0; $i<$n; $i++) {
                                if (in_array($HTTP_POST_VARS['products_id'][$i], (is_array($HTTP_POST_VARS['cart_delete']) ? $HTTP_POST_VARS['cart_delete'] : array()))) {
                                  $cart->remove($HTTP_POST_VARS['products_id'][$i]);
                                  $messageStack->add_session('product_action', sprintf(PRODUCT_REMOVED, tep_get_products_name($HTTP_POST_VARS['products_id'][$i])), 'warning');
                                } else {
                                  $attributes = ($HTTP_POST_VARS['id'][$HTTP_POST_VARS['products_id'][$i]]) ? $HTTP_POST_VARS['id'][$HTTP_POST_VARS['products_id'][$i]] : '';
                                  $cart->add_cart($HTTP_POST_VARS['products_id'][$i], $HTTP_POST_VARS['cart_quantity'][$i], $attributes, false);
                                }
                              }
                              tep_redirect(tep_href_link($goto, tep_get_all_get_params($parameters)));
                              break;

Before

tep_redirect(tep_href_link($goto, tep_get_all_get_params($parameters)));

Put in

// auto-update cart http://addons.oscommerce.com/info/5598
// if trying to check out, we want the qty to update, and then go to shipping or login page
if ($_POST['checkoutsubmit']) {
   tep_redirect(tep_href_link(FILENAME_CHECKOUT_SHIPPING, tep_get_all_get_params($parameters)));
   break;
}

Hope this is usefull!

 

And if others can make this cleaner or have different methods - please feel free to reply!

 

Regards!

 

[burt]

I was working on something for the 29DoC, but gave it up as I couldn't find a way to do it without core changes...but here is how far I got;

 

shopping_cart.php

 

Find:

$products_name .= '<br>' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 65px;" min="0"', 'number') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'fa fa-refresh', NULL, NULL, NULL, 'btn-info btn-xs') . ' ' . tep_draw_button(NULL, 'fa fa-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs');

Change To:

$products_name .= '<br>' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'class="inputNumber" data-id="' . $products[$i]['id'] . '" style="width: 65px;" min="1"', 'number') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'fa fa-refresh', NULL, NULL, NULL, 'btn-info btn-xs') . ' ' . tep_draw_button(NULL, 'fa fa-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs');

Add at bottom of same file (for testing, in a module this would be header_tag):

 

<script>
    $('.inputNumber').change(function() {
      var whichProduct = $(this).attr("data-id");
      var newAmount = $(this).val();
      var session = <?php echo $_SESSION['sessiontoken']; ?>;
      
      alert( "New Amount for " + whichProduct + " is " + newAmount + " in Session " + session + "" );
    });  
  </script>

So far, so good. What this does is pops up an alert telling the new amount for the relevant product, and the relevant session.

 

This is where I gave up...

 

The next part of the jigsaw:

1. jquery .post to the script in #2 (below) for an instant update...

2. a processing script in /ext/ somewhere that updates the session appropriately...

 

Hope it gives you some idea?

[azpro]

@@burt Gives me an idea ... but I prefer not to use obstrusive javascript for things that can be done easily with php ... I learned from you to keep it simple ;-)

 

In this case I will accept a core-change. That is one change in application_top.php ... My shopping_cart.php is modularized anyway so that doesn't really count as core-change IMHO.

 

To avoid this core-change I think all shopping_cart actions should/could be moved out of application_top.php to kind of hook ... But that is out of my scope at his moment.

 

Regards!

[burt]

Simplicity is key, that is true. I always advocate that the simplest solution is usually the best...

Something for you to think about;

Scenario (assume a standard-ish 234bs install):

1. person puts a bunch of things in cart.
2. Changes the quantities. So far so good...

 

Now they do not press refresh or checkout, but instead they click on (say) a link in the category box, or (say) the navbar link to specials.php (or any other link)...

 

Now they decide they don't want to buy that special offer...and instead press "checkout" in the navbar.

 

At this point, they are in the checkout, likely on checkout_shipping.php

Then checkout_payment

Then checkout_confirmation <=== at this point they see stuff in the cart that they *thought* they had changed quantities of ...

 

Does it makes sense ?  Is the scenario valid?

[azpro]

In standard install ... yes valid scenario ..

 

But I "ditched" the Checkout link in navbar.... Customers need to click my header cart and will always be redirected to the shopping_cart.php ... I think that does make sense .. give customers always an overview of the products in cart before going to checkout_shipping.php

[♥14steve14]

Gary

 

I also changed the button at the top right of my test store to go to shopping cart rather than the checkout shipping page, because it seems silly to not show the cart contents before starting to checking out.

[burt]

Absolut...I understand.  But the same issue arises...

 

1. Customer adds stuff to cart.

2. Presses checkout -> goes to cart page.

3. Changes some quantities and crucially, does not press refresh, then thinks...what's on special offer...

4. Hits special offer link.

5. Looks at specials, maybe adds to cart, maybe not.

6. Presses checkout -> back at cart page

 

Now they look at quantities and think "this shop is broken, I already changed these quantities" ...

 

Do you see what I'm pointing out ?

 

For this reason, some type of updater that is immediate on changing quantity would be good, in my opinion.  I got so far with testing as you can see above...it just needs a couple more pieces of the jigsaw...and the whole "problem" is forever solved...

[MrPhil]

Let's step back and look at it from the customer's perspective. It is indeed annoying to make changes to quantities (or even delete cart items), and having failed to press some button, have these changes ignored. BTW, "refresh" is probably a bad term... it's too much like "reset" ("Undo my changes", which I would expect to undo my changes on this form). "Update cart" is probably a better label. But still, it seems silly to have to press even that button, even though developers understand about form submissions and such. Let's bend the program's behavior to be as expected by most users.

 

Is it reasonable to use JS to set a global flag whenever any field gets changed, and upon any exit from the page by any route, either go ahead and submit the updated form, or else ask the user if they want to keep the changes? (if yes, submit the form) Even automatically submitting the form when a single field is changed is probably acceptable, as it's likely unusual to make mass changes at this point. Remember that a customer may want to make changes right up to the point of OK'ing the final purchase amount, when they realize they're over their budget or whatever (need another scarf for Uncle Phred's present). Don't forget to update shipping costs, quantity discounts, etc. even if the cart is changed at the last second. A uniform approach on all forms is needed.

[douglaswalker]

Hi there,

I used this mod on a 2.2 shop and it worked very well maybe some ideas in there.

 

http://addons.oscommerce.com/info/4209

 

Doug

[♥Tsimi]

Just curious, why not use AJAX for the whole shopping cart page? For change quantity, updating subtotal or total on the fly, for removing single products, for empting the whole cart.

[PiLLaO]

Hi!

 

Two days ago I create a post with jquery auto update shopping_cart with only one core file changed

 

The post is here: 2.3.4 BS - Fast Update Shopping_cart

[azpro]

@@burt and others

 

Did some research and testing on different sites ... IMHO most preferred at this moment would be a pull-down with submit form on change of the quantity via javascript.

 

Something to think about would be the range of the numbers ... We rarely have orders with higher quantities than 10 but that could very well be different for other shops.

 

Regards!

[douglaswalker]

@@PiLLaO

 

I tested out the mod above and it all worked as suggested... looks nice too and it requires a very small change to shopping_cart.php

 

and a ht module for the <script in the footer.>

 

The only issue I can see with it is that it only updates if the plus or minus buttons are pressed.

 

So if someone inputs numbers using a keyboard then we still need the update button.

[PiLLaO]

This are very easy to change, with the input or with a dropdown

[frankl]

I use a very simple change which works extremely well at automatically updating shopping cart quantities, but requires a page refresh (no big deal for me)

 

Change

$products_name .= '<br>' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 65px;" min="0"', 'number') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'fa fa-refresh', NULL, NULL, NULL, 'btn-info btn-xs') . '' . tep_draw_button(NULL, 'fa fa-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs');
	

to

$products_name .= '<br>' . tep_draw_pull_down_menu('cart_quantity[]', $qty_array, $products[$i]['quantity'], 'onchange="this.form.submit()" style="width: 70px"').tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . '<noscript> ' . tep_draw_button(NULL, 'fa fa-refresh', NULL, NULL, NULL, 'btn-info btn-xs') . '</noscript> ' . tep_draw_button(NULL, 'fa fa-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs');

then add the following below the line $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_SHOPPING_CART));

		//options for pull down quantity
		for ($i=0; $i<25; $i++) {
		$qty_array[] = array('id' => $i+1, 'text' => $i+1);
		}

Change the 25 in the code above to whatever you would like the range of the drop down to be. When the quantity is changed the page auto refreshes.

 

 

 

 

[douglaswalker]

Have a look at this too

 

http://www.oscommerce.com/forums/topic/409142-234-bs-fast-update-shopping-cart/#entry1740120

[burt]

A page refresh is ok, but make me feel dirty. 

 

It is better done in the background using ajax.  

[PiLLaO]

I think that ajax is better, but I don't know how to make it :(

[♥Tsimi]

I did something with AJAX a long time ago. Using an old addon from DrRolex and I got it almost working.

I could update quantity, all totals and removing products using AJAX. There were a couple bugs I never got to fix. For example adding products from the products page (product_info.php) didn't work and I think I needed to use tables but I guess spending a bit time with and I should be able to get it to work with DIV stuff.

[burt]

shopping_cart.php

 

Find:

<?php
  }

  require(DIR_WS_INCLUDES . 'template_bottom.php');
  require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

Change to:

 

<?php
  }
  ?>
  
<script type="text/javascript">
$('input[name="cart_quantity[]"]').change(function() {
  var f = $('form[name="cart_quantity"]');
  $.ajax({url : $(f).attr('action'), type: 'POST', data: $(f).serialize()});
});
</script>

 <?php
  require(DIR_WS_INCLUDES . 'template_bottom.php');
  require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

Now, you can update the quantities without a page refresh.

On the next page (eg after clicking "specials.php") the cart shows correct.

 

 

Note: not for production use, this is hacked together code done quickly and ugly

[douglaswalker]

Hi Gary,

does this need any other code other than the above

I have been testing it and isn't currently working for me.

hmm 

[PiLLaO]

Hi Gary,

does this need any other code other than the above

I have been testing it and isn't currently working for me.

hmm 

 

The items in shopping cart navigation doesn't update, all of them works perfectly

[douglaswalker]

I must be missing something it won't work for me

[PiLLaO]

I mean that the items in shopping cart doesn't update without refresh page or move to another page

[douglaswalker]

Yes I know it should work after navigating away but my cart won't update

very puzzling

Doug