2.3.4 BS EDGE auto-update quantity in shopping_cart.php

[♥14steve14 628]

There is a lot of talk here about finding a solution that has no core code changes. Surely if the solution is a compromise then best way is to alter the core code. What is best for this version of oscommerce needs to be considered also.

[azpro 144]

@@Tsimi

 

Tnx! I see what you mean .. needs some work :) ... If I find time I will ditch in and recode with Gary's approach ...

 

Don't hold your breath ... but I will post if/when I make progression ...

 

Regards!

[douglaswalker 66]

@@azpro good luck  :thumbsup:

 

@@burt

 

Could we wind back a bit.... I have tested the code of Gary on different devices etc and added it as a module @@marcello thanks Marcello

 

Has anyone else had a play with it and do you think it is safe fro production. it appears to work in all the environments I have tried it in

mobile,ipad chrome safari ie etc

 

[♥raiwa 1,419]

@@Tsimi,

 

I gave it a try and found that adding from product_info.php works in my store.

 

I have a mod which lets add any quantity form the product page:

 

product_info.php

 

instead of:

      	echo tep_draw_hidden_field('cart_quantity', '1');

use:

      	echo tep_draw_input_field('cart_quantity', '1', 'aria-describedby="quantity_text" min="1" max="' . $product_info['products_quantity'] . '"', 'number');

application_top.php within case: add product

                                $cart->add_cart($HTTP_POST_VARS['products_id'], $cart->get_quantity(tep_get_uprid($HTTP_POST_VARS['products_id'], $attributes))+$HTTP_POST_VARS['cart_quantity'], $attributes);

passing product quantity solves the bug

 

 

To avoid the removing of products when a number is direct input, the input field could be disabled:

shopping_cart.php:

												'<input type="text" name="cart_quantity[]" class="form-control text-center qty-input" disabled="disabled" id="pl' . $products[$i]['id'] . '" value="' . $products[$i]['quantity'] . '">' . tep_draw_hidden_field('products_id[]', $products[$i]['id']) .

Not good for flexibility if a store needs the option to order 1000 units of the same product, but....

 

Will have a deeper look soon.

 

regards

Rainer

[♥raiwa 1,419]

Forget for disabling the input field, doesn't work.

 

Needs to be readonly="readonly"

												'<input type="text" name="cart_quantity[]" class="form-control text-center qty-input" readonly="readonly" id="pl' . $products[$i]['id'] . '" value="' . $products[$i]['quantity'] . '">' . tep_draw_hidden_field('products_id[]', $products[$i]['id']) .

[douglaswalker 66]

Hi there 

could you let me know what.the below  is for in this context 

'aria-describedby="quantity_text" 

sorry if it is a really stupid question

 

Warm regards

Doug

[♥raiwa 1,419]

@@douglaswalker,

 

Not stupid at all. I didn't remember neither where for it is, maybe I copied the snippet from somewhere else. :)

However here is the info:

https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html

 

regards

Rainer

[a.forever 12]

Arjan,

 

If all you want is to change quantity automatically within catalog/shopping_cart.php then wouldn't this workaround be just as functional?

 

      $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_input_field('cart_quantity[]', $products[$i]['quantity'], 'onfocusout="cart_quantity.submit();" 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');

 

[♥raiwa 1,419]

@@Tsimi,

 

I found a nice script which allows to add spinner icon during update to the plus-minus buttons..

It's based on bootstrap buttons active state and should work for ajax too.

http://jsfiddle.net/codyschouten/QKefn/2/

 

Like this the user has feedback that something happens during Ajax refresh.

 

I applied it to Pillao's update script which works with page reload:

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

 

regards

Rainer

[♥Tsimi 525]

@@raiwa

 

Thx Rainer. I have installed something like that in my admin BS test shop for the currency update button. While it is loading the currencies it shows a spinning refresh icon. Once I am back at home I'll post the code for it.

[♥Tsimi 525]

@@raiwa

 

This is what I used inside the currencies.php (Bootstrap Admin)

<div class="col-md-6">

 <?php if (CURRENCY_SERVER_PRIMARY) { ?>
  <a class="btn btn-info" id="btnStartUploads" href="<?php echo tep_href_link(FILENAME_CURRENCIES, 'page=' . $HTTP_GET_VARS['page'] . '&cID=' . $cInfo->currencies_id . '&action=update'); ?>" data-loading-text="<i class='fa fa-refresh fa-spin'></i> Updating..." role="button"><?php echo '<i class="fa fa-refresh"></i> ' . IMAGE_UPDATE_CURRENCIES; ?></a>
 <?php } ?>

<script>
// button state
$("#btnStartUploads").click(function(){
$("#btnStartUploads").button('loading');
});
</script>

</div>

[PiLLaO 35]

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.

 

https://www. youtube .com/watch?v=JIx-_Ajk1WU&feature=youtu.be

 

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

 

 

@@burt the code that you post works perfectly but looking into firefox console I see that this code reload all entire page in background and shows this: 302 Moved Temporarily 198ms.

 

What will be the better solution to change this? I think that I could create a file thats require application_top.php and I think this will be faster and don't show the 302 in console, but really I don't have idea.

 

Thanks in advance :thumbsup:

[PiLLaO 35]

Ok, the "302 Moved Temporarily" it's a results of tep_redirect in:

 

    switch ($HTTP_GET_VARS['action']) {

 

of application_top.php, if the tep_redirect are commented works and not show this error (and the second load of the page)

[MrPhil 648]

A "302" code is not an error code. Your system is configured to tell the world that the resource has been temporarily moved, and to use another URL to fetch the page. It is an extra round trip to the server, but the first time should transfer only the message and new URL, not the entire page content. Still, it is wasted time.

 

A 302 status is the default for certain URL rewriting operations, especially if you want the changed URL to show in the browser address line. It is possible that your SEO code needs to explicitly give a 200 status code [R=200] to silently change the URL.

[tgely 262]

Following jQuery scripts could be enough without code change between footer scripts ht_ modules as @@raiwa mentioned here:

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

    function execute() {
      global $PHP_SELF, $oscTemplate;
      if (basename($PHP_SELF) == 'shopping_cart.php') {

        $output = <<<EOD
<script>
$(function() {
  $("button, input[type='submit']").replaceWith('<span class="spinner_icon"><i class="fa fa-refresh fa-spin" style="color:transparent;"></i></span>');
});

function update() {
  $("form[name^='cart_quantity']").submit();
  $(this).parent().find(".spinner_icon i").css('color', '');
};

$("input[name^='cart_quantity']").change(update);
</script>
EOD;

        $oscTemplate->addBlock($output, $this->group);
      }
    }

build it and see.