2.3.4 BS - Fast Update Shopping_cart

[PiLLaO 35]

Hello!!

 

I'm trying to make to work this, like this older contribution: Fast Update to Shopping Cart Quabtity

 

To show plus and minus button find in shopping_cart.php

      $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');

and replace with this:

      $products_name .= '<br>' .  tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], '', 'text') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-plus', NULL, NULL, NULL, 'btn-success btn-xs') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-minus', NULL, NULL, NULL, 'btn-warning btn-xs') . '  ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs');

Now, add in template_bottom.php

    $("a").click(function(){var url=$(this).attr("href");var mensj='';if(url.indexOf('clear_cart')!=-1){var mensj='<?php echo DELETE_CART_CONFIRM ?>';}else if(url.indexOf('remove_product')!=-1){var mensj='<?php echo DELETE_CART_CONFIRM_PRODUCT ?>';}if(mensj!=''){return confirm(mensj)}});

    $("form[name='cart_quantity'] .btn.btn-xs").click(function() {

      var value = $(this).parent().find("input").filter(':visible:first').val();
      var clase = $(this).attr('class').split(' ');

      if (clase[1] == 'btn-success') {
        value = parseFloat(value) + 1;
      } else if (clase[1] == 'btn-warning') {
        value = parseFloat(value) - 1;

        if (value == 0) {
          c = confirm('<?php echo DELETE_CART_CONFIRM_PRODUCT ?>');
          if (c == false) {
            return false
          };
        }
      }

      if (value != 0 || c == true) {$(this).parent().find("input[name^='cart_quantity']").val(value).submit();
    }
    }); 

This increase and decrease in one the products, and show a "DELETE_CART_CONFIRM_PRODUCT" when you press the minus button and have 1 unit only or you press remove button.

 

Don't do: when you press minus button on a product that only have 1 unit, the product is removed but don't show the messageStack alert.

 

What like to do: Can update all cart without refresh, but I don't have enough knowledge about Jquery

 

Any help will be welcome.

 

Thanks!!!

[PiLLaO 35]

To auto submit on change input, add this to template_bottom.php

    $("input[name^='cart_quantity']").change(function(){
        $("form[name^='cart_quantity']").submit();
    });

I know this will be in a file to upload like a module, but I newbie on Boostrap version and I don't know jet how to make it

[douglaswalker 66]

Hi there

could you let me know what

"var mensj"

means?

Warm regards

Doug

[PiLLaO 35]

Hi there

could you let me know what

"var mensj"

means?

Warm regards

Doug

 

"var mensj" it's a variable to store the text that the confirmation dialog show. Originally this mod was installed with "clear cart" and if buyer want to delete one product show one message different that if the buyer want to clear the cart.

 

This work on all side of the web, like consolidated shopping cart in header.

 

Regards :)

[douglaswalker 66]

@@PiLLaO

 

 

Hi there

I have turned the code into a header_tag module for the <script> but would love to find away to avoid a core change even though it is only a very small one.

Removes one button and adds two.

I have changed design of the above code (see pic) makes it easier for fat fingers

 

The plus and minus buttons refresh/ reloadf the page to increase and decrease qty

manual input in box also increases decreases qty

Get to 0 and an alert warns you that you are about to delete an item.

 

 

This is the code change in shopping_cart.php

$products_name .= '<br>' . tep_draw_button(NULL, 'fa fa-minus', NULL, NULL, NULL, 'btn-warning btn-circle btn-xs'). ' ' .  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-plus', NULL, NULL, NULL, 'btn-success     btn-circle btn-xs') . '<br><br>' . tep_draw_button('Remove', 'fa fa-trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs'); 

If you want to try it out on a test server you could temporarily add the below script code to template bottom and give it all a test drive

<script>
$("a").click(function(){var url=$(this).attr("href");var mensj='';if(url.indexOf('clear_cart')!=-1){var mensj='<?php echo DELETE_CART_CONFIRM ?>';}else if(url.indexOf('remove_product')!=-1){var mensj='<?php echo DELETE_CART_CONFIRM_PRODUCT ?>';}if(mensj!=''){return confirm(mensj)}});

    $("form[name='cart_quantity'] .btn.btn-xs").click(function() {

      var value = $(this).parent().find("input").filter(':visible:first').val();
      var clase = $(this).attr('class').split(' ');

      if (clase[1] == 'btn-success') {
        value = parseFloat(value) + 1;
      } else if (clase[1] == 'btn-warning') {
        value = parseFloat(value) - 1;

        if (value == 0) {
          c = confirm('<?php echo DELETE_CART_CONFIRM_PRODUCT ?>');
          if (c == false) {
            return false
          };
        }
      }

      if (value != 0 || c == true) {$(this).parent().find("input[name^='cart_quantity']").val(value).submit();
    }
    }); 
$("input[name^='cart_quantity']").change(function(){
$("form[name^='cart_quantity']").submit();
}); 
</script>

I need to test it on different devices but I am unsure about putting it as an addon as it makes core changes and it is not my code.

 

Let me know what you think.

 

Doug

[PiLLaO 35]

You forgot to add this DELETE_CART_CONFIRM and this DELETE_CART_CONFIRM_PRODUCT to a lang file :thumbsup:

[douglaswalker 66]

yep  doh!

I hard coded it in mine

sorry

[douglaswalker 66]

@@PiLLaO

 

The only way i could get the message DELETE_CART_CONFIRM_PRODUCT to work was to hard code it otherwise the whole <?php echo DELETE_CART_CONFIRM_PRODUCT ?> shows up.

 

Also I think the clear cart part is not needed as there is only clear product necessary.

 

Also wondered how to activate the message for

 

$("input[name^=cart_quantity]").change(function(){

$("form[name^=cart_quantity]").submit();
});

 

As an alert does not show before deletion of product when manual entry is used.

 

Doug

[PiLLaO 35]

To add confirm dialog, replace with this:

    $("input[name^='cart_quantity']").change(function(){
        if ($(this).val() == 0) {
          c = confirm('<?php echo DELETE_CART_CONFIRM_PRODUCT ?>');
          if (c == false) {
            $(this).val(1);
            return false
          };
        }
        $("form[name^='cart_quantity']").submit();
    });

If you put 0 and cancel delete product, input will be 1.

[♥raiwa 1,420]

Hola Gustavo @@PiLLaO,

 

I gave your update scripts a try and applied the following modifications:

 

- changed button class references to unused classes "btn-plus-quantity" and "btn-minus-quantity" instead of the standard style classes.

  this makes it more stable and allows to use any button style.

- for the same reason I removed "btn-xs" reference.

- I added a script to show a spinner next to the plus minus button icons to give the user a feedback that something happens during update.

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

- I removed the delete product confirmation message, couldn't get it to work. Can you please post the complete script with the changes of your last post.

 

Still to do:

Add a spinner to the input field if a number is introduced and the page updates.

 

Here my files and changes:

 

shopping_cart.php:

			$products_name .= '<br>' . tep_draw_button(NULL, 'fa fa-minus', NULL, NULL, array('params' => 'data-spinner="left"'), 'btn-default btn-minus-quantity btn-xs has-spinner'). ' ' .  tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 45px; text-align: right" min="0"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'fa fa-plus', NULL, NULL, array('params' => 'data-spinner="right"'), ' btn-default btn-plus-quantity btn-xs has-spinner') . '    ' . tep_draw_button('Remove', 'fa fa-trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, array('params' => 'data-spinner="left"'), 'btn-danger btn-xs has-spinner'); 

I created a header tag module which contains the script and style:

ht_shopping_cart_qty.php:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2016 osCommerce

  Released under the GNU General Public License
*/

  class ht_shopping_cart_qty {
    var $code = 'ht_shopping_cart_qty';
    var $group = 'footer_scripts';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function ht_shopping_cart_qty() {
      $this->title = MODULE_HEADER_TAGS_SHOPPING_CART_QTY_TITLE;
      $this->description = MODULE_HEADER_TAGS_SHOPPING_CART_QTY_DESCRIPTION;

      if ( defined('MODULE_HEADER_TAGS_SHOPPING_CART_QTY_STATUS') ) {
        $this->sort_order = MODULE_HEADER_TAGS_SHOPPING_CART_QTY_SORT_ORDER;
        $this->enabled = (MODULE_HEADER_TAGS_SHOPPING_CART_QTY_STATUS == 'True');
      }
    }

    function execute() {
      global $PHP_SELF, $oscTemplate;
      if (basename($PHP_SELF) == 'shopping_cart.php') {
$output = '
<style>
.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

.has-spinner.active {
  cursor:progress;
}

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}
</style>

<script>
    $("form[name=\'cart_quantity\'] .btn").click(function() {

      var value = $(this).parent().find("input").filter(\':visible:first\').val();
      var clase = $(this).attr(\'class\').split(\' \');

      if (clase[1] == \'btn-plus-quantity\') {
        value = parseFloat(value) + 1;
      } else if (clase[1] == \'btn-minus-quantity\') {
        value = parseFloat(value) - 1;
      }

      if (value != 0 || c == true) {
      $(this).parent().find("input[name^=\'cart_quantity\']").append(\'<i class="fa fa-cog fa-spin fa-lg" style="margin-top:10px;"> </i>\');
      $(this).parent().find("input[name^=\'cart_quantity\']").val(value).submit();
    }
    }); 
$("input[name^=\'cart_quantity\']").change(function(){
$("form[name^=\'cart_quantity\']").submit();
});

$(function(){
   
    var spinnerHTML = "<span class=\'spinner\' style=\'margin:-2px\'><i class=\'fa fa-refresh fa-spin\'></i></span>",
        spinnerObjects = $(".has-spinner");

    spinnerObjects.filter("[data-spinner=left]").prepend(spinnerHTML)
    spinnerObjects.filter("[data-spinner=right]").append(spinnerHTML)
    spinnerObjects.click(function() {
        $(this).toggleClass(\'active\');
    });
});

</script>
';

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

function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_HEADER_TAGS_SHOPPING_CART_QTY_STATUS');
    }

    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Shopping Cart Qty', 'MODULE_HEADER_TAGS_SHOPPING_CART_QTY_STATUS', 'True', 'Do you want to enable the system to auto update shopping cart qty when customer changes quantity or clicks remove button?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_SHOPPING_CART_QTY_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_HEADER_TAGS_SHOPPING_CART_QTY_STATUS', 'MODULE_HEADER_TAGS_SHOPPING_CART_QTY_SORT_ORDER');
    }
  }
?>

language file:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2016 osCommerce

  Released under the GNU General Public License
*/

  define('MODULE_HEADER_TAGS_SHOPPING_CART_QTY_TITLE', 'Shopping Cart Qty');
  define('MODULE_HEADER_TAGS_SHOPPING_CART_QTY_DESCRIPTION', 'Enable the system to auto update shopping cart quantity.');
?>

best regards

Rainer

[PiLLaO 35]

I think that I use an older version os oscommerce bootstrap, I don't see class .fa in my website, I must to look for a newer version.

 

The spinner is a great idea :)

 

Thanks for all :)

[♥raiwa 1,420]

@@PiLLaO,

 

Just add this to template_top.php:

<!-- font awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

[PiLLaO 35]

This is the same line that I have.

 

But I don't have any class .fa in my website, I think I use a older osCommerce Bootstrap version

 

Thanks!!

[♥raiwa 1,420]

It doesn't matter, with this line you can use fa fa... icons, but the old glyphicon icons still work. No problem to mix them.

[PiLLaO 35]

Yes, I look that fa icons works :thumbsup:

 

offtopic: where I can download the version which contains fa classes?

[♥raiwa 1,420]

@@PiLLaO

 

Burts Master branch

 

https://github.com/gburton/Responsive-osCommerce

[grandpaj 25]

@@raiwa

 

Hi

 

Just installed this great idea however found that if I amended the shopping cart.php from

   $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_button(NULL, 'fa fa-minus', NULL, NULL, array('params' => 'data-spinner="left"'), 'btn-default btn-minus-quantity btn-xs has-spinner'). ' ' .  tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 45px; text-align: right" min="0"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'fa fa-plus', NULL, NULL, array('params' => 'data-spinner="right"'), ' btn-default btn-plus-quantity btn-xs has-spinner') . '    ' . tep_draw_button('Remove', 'fa fa-trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, array('params' => 'data-spinner="left"'), 'btn-danger btn-xs has-spinner'); 

then all appeared OK on the shopping_cart.php page, but the - + didn't seem to work, so I removed the above line of code and replaced with the original code  and all seems to work fine, except the updated buttons don't show, on the shopping_cart.php page, just returns to the normal look, or maybe Ive missed something.

 

Cheers

 

Grandpa

[♥raiwa 1,420]

@@grandpaj,

 

Yes, sorry, I found that error also. The class order is important, btn-minus-quantity and btn-plus-quantity must be first:

			$products_name .= '<br>' . tep_draw_button(NULL, 'fa fa-minus', NULL, NULL, array('params' => 'data-spinner="left"'), 'btn-minus-quantity btn-xs btn-default has-spinner'). ' ' .  tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 45px; text-align: right" min="0"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'fa fa-plus', NULL, NULL, array('params' => 'data-spinner="right"'), 'btn-plus-quantity btn-xs btn-default has-spinner') . '    ' . tep_draw_button('Remove', 'fa fa-trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs'); 

[PiLLaO 35]

If I add a column to show unit price, when I go to mobile doesn't fit in width

 

Anybody can say me what class must I write?

 

Thanks!!

[grandpaj 25]

@@raiwa

 

Hi Rainer

 

All good, many thanks.

 

Cheers

 

Grandpa

[grandpaj 25]

@@raiwa

 

Hi Rainer

 

Just reporting back.

 

I changed the code as suggested, but have changed it back to the original code, as when viewed in XS the buttons don't seem to sit properlly. (Using FF responsive design view)

Also I tried removeing the module via the admin>header Tags, but doesnt seem to remove the module as it still shows on web page even after a couple of refreshes. Maybe Ive done something wrong, but I don't know what.

 

Cheers

 

Grandpa

[♥raiwa 1,420]

@@douglaswalker, @@PiLLaO, @@Tsimi, @@grandpaj,


Yes John, you are right, unstable solution for mobile view.

I thought about and decided to back to the roots, remove styled buttons and use the native browser up-down arrows like in core.
Script is much reduced and I could add a loading spinner on the same place for all events. (plus-minus click, direct number input and remove.
Layout is now stable in all view sizes.

Here is the code for shopping_cart.php, it is also possible to create a content module, but as the shopping cart is not modularized, it seems to make not too much sense for that bit of changes.

shopping_cart.php replace this line:

      $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');

with:

      $products_name .= '<br>' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 65px;" min="0"', 'number', true, 'class="form-control text-center" id="inp' . $products[$i]['id'] . '"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . 
      									' <span id="sp' . $products[$i]['id'] . '"><i class="fa fa-refresh fa-spin" style="color:transparent;"></i></span> ' . tep_draw_button('Remove', 'fa fa-trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs btn' . $products[$i]['id']) . 
'<script>
function update' . $products[$i]['id'] . '() {
	$("form[name^=\'cart_quantity\']").submit();
	$("#sp' . $products[$i]['id'] . ' i").css(\'color\', \'\');
};
$("input[id^=\'inp' . $products[$i]['id'] . '\']").change(update' . $products[$i]['id'] . ');
$("form[name=\'cart_quantity\'] .btn' . $products[$i]['id'] . '").click(update' . $products[$i]['id'] . ');
</script>';

Don't forget to remove all previous changes, ht module etc.

For those who prefer the styled plus minus buttons, it should be possible to combine the before solution with this minimalistic aproach.

Please give it a try and test.

regards

Rainer

[♥raiwa 1,420]

Fix for products with attributes:

 

shopping_cart.php:

      $update_id = str_replace(array('{', '}'), '_', $products[$i]['id']);
      $products_name .= '<br>' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 65px;" min="0"', 'number', true, 'class="form-control text-center" id="inp' . $update_id . '"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . 
      									' <span id="sp' . $update_id . '"><i class="fa fa-refresh fa-spin" style="color:transparent;"></i></span> ' . tep_draw_button('Remove', 'fa fa-trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs btn' . $update_id) . 
'<script>
function update' . $update_id . '() {
	$("form[name^=\'cart_quantity\']").submit();
	$("#sp' . $update_id . ' i").css(\'color\', \'\');
};
$("input[id^=\'inp' . $update_id . '\']").change(update' . $update_id . ');
$("form[name=\'cart_quantity\'] .btn' . $update_id . '").click(update' . $update_id . ');
</script>';

[grandpaj 25]

@@raiwa

 

Hi Rainer

 

All appears good, havent tried products with attributes,

just wondering, would it be better if the continue button returned to the index page, or maybe an option.

 

Hope this makes sense.

 

Cheers

 

Grandpa

[♥raiwa 1,420]

@@grandpaj,

 

Sorry, which continue button, you mixed up something from another thread or do I miss something :)