Fixing the ShoppingCartPlugin

This commit, with the participation of Lucas Melo, does: * Make action list from ShoppingCartPluginController Fault-tolerant. * Create a basic logging system and replace debug alerts. * Limit the cart size to protect against cookie limit. * Add more loading style possibilities. * Add a little fault-tolerance to the process of loading the carts items. * Force colorbox to "Shopping checkout" button. * Add L10n to Cart JS interaction.

Fixing the ShoppingCartPlugin
This commit, with the participation of Lucas Melo, does: * Make action list from ShoppingCartPluginController Fault-tolerant. * Create a basic logging system and replace debug alerts. * Limit the cart size to protect against cookie limit. * Add more loading style possibilities. * Add a little fault-tolerance to the process of loading the carts items. * Force colorbox to "Shopping checkout" button. * Add L10n to Cart JS interaction.
Aurélio A. Heckert
1 parent 415d3eec
Showing 4 changed files with 94 additions and 27 deletions Show diff stats
plugins/shopping_cart/controllers/shopping_cart_plugin_controller.rb
plugins/shopping_cart/public/cart.js
plugins/shopping_cart/views/cart.html.erb
public/javascripts/application.js
@@ -57,14 +57,24 @@ class ShoppingCartPluginController &lt; PublicController
   def list
     if validate_cart_presence
       products = self.cart[:items].collect do |id, quantity|
-        product = Product.find(id)
-        { :id => product.id,
-          :name => product.name,
-          :price => get_price(product, product.enterprise.environment),
-          :description => product.description,
-          :picture => product.default_image(:minor),
-          :quantity => quantity
-        }
+        product = Product.find_by_id(id)
+        if product
+          { :id => product.id,
+            :name => product.name,
+            :price => get_price(product, product.enterprise.environment),
+            :description => product.description,
+            :picture => product.default_image(:minor),
+            :quantity => quantity
+          }
+        else
+          { :id => id,
+            :name => _('Undefined product'),
+            :price => 0,
+            :description => _('Wrong product id'),
+            :picture => '',
+            :quantity => quantity
+          }
+        end
       end
       render :text => {
         :ok => true,
@@ -21,7 +21,7 @@ function Cart(config) {
       },
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('Visibility - HTTP '+status+': '+errorThrown);
+        log.error('Visibility - HTTP '+status, errorThrown);
       }
     });
     $(".cart-buy", this.cartElem).colorbox({ href: '/plugin/shopping_cart/buy' });
@@ -36,12 +36,12 @@ function Cart(config) {
       url: '/plugin/shopping_cart/list',
       dataType: 'json',
       success: function(data, ststus, ajax){
-        if ( !data.ok ) alert(data.error.message);
+        if ( !data.ok ) log.error(data.error);
         else me.addToList(data, true);
       },
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('List cart items - HTTP '+status+': '+errorThrown);
+        log.error('List cart items - HTTP '+status, errorThrown);
       }
     });
   }
@@ -49,6 +49,7 @@ function Cart(config) {
   Cart.prototype.addToList = function(data, clear) {
     if( clear ) this.itemsBox.empty();
     var me = this;
+    this.productsLength = data.products.length;
     for( var item,i=0; item=data.products[i]; i++ ) {
       this.items[item.id] = { price:item.price, quantity:item.quantity };
       this.updateTotal();
@@ -75,9 +76,7 @@ function Cart(config) {
       input.onchange = function() {
         me.updateQuantity(this, this.productId, this.value);
       };
-//      document.location.href = "#"+liId;
-//      document.location.href = "#"+this.cartElem.id;
-//      history.go(-2);
+      // TODO: Scroll to newest item
       var liBg = li.css("background-color");
       li[0].style.backgroundColor = "#FF0";
       li.animate({ backgroundColor: liBg }, 1000);
@@ -103,7 +102,7 @@ function Cart(config) {
       dataType: 'json',
       success: function(data, status, ajax){
         if ( !data.ok ) {
-          alert(data.error.message);
+          log.error(data.error);
           input.value = input.lastValue;
         }
         else {
@@ -114,7 +113,7 @@ function Cart(config) {
       },
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('Add item - HTTP '+status+': '+errorThrown);
+        log.error('Add item - HTTP '+status, errorThrown);
         input.value = input.lastValue;
       },
       complete: function(){
@@ -132,7 +131,14 @@ function Cart(config) {
   }
   Cart.addItem = function(itemId, link) {
+    if ( this.productsLength > 100 ) {
+      // This limit protect the user from losing data on cookie limit.
+      // This is NOT limiting to 100 products, is limiting to 100 kinds of products.
+      alert(shoppingCartPluginL10n.maxNumberOfItens);
+      return false;
+    }
     link.intervalId = setInterval(function() {
+      $(link).addClass('loading');
       steps = ['w', 'n', 'e', 's'];
       if( !link.step || link.step==3 ) link.step = 0;
       link.step++;
@@ -140,6 +146,7 @@ function Cart(config) {
     }, 100);
     var stopBtLoading = function() {
       clearInterval(link.intervalId);
+      $(link).removeClass('loading');
       $(link).button({ icons: { primary: 'ui-icon-cart'}, disable: false });
     };
     this.instance.addItem(itemId, stopBtLoading);
@@ -151,12 +158,12 @@ function Cart(config) {
       url: '/plugin/shopping_cart/add/'+ itemId,
       dataType: 'json',
       success: function(data, status, ajax){
-        if ( !data.ok ) alert(data.error.message);
+        if ( !data.ok ) log.error('Shopping cart data failure', data.error);
         else me.addToList(data);
       },
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('Add item - HTTP '+status+': '+errorThrown);
+        log.error('Add item - HTTP '+status, errorThrown);
       },
       complete: callback
     });
@@ -174,12 +181,12 @@ function Cart(config) {
       url: '/plugin/shopping_cart/remove/'+ itemId,
       dataType: 'json',
       success: function(data, status, ajax){
-        if ( !data.ok ) alert(data.error.message);
+        if ( !data.ok ) log.error(data.error);
         else me.removeFromList(data.product_id);
       },
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('Remove item - HTTP '+status+': '+errorThrown);
+        log.error('Remove item - HTTP '+status, errorThrown);
       }
     });
   }
@@ -197,7 +204,7 @@ function Cart(config) {
       dataType: 'json',
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('Show - HTTP '+status+': '+errorThrown);
+        log.error('Show - HTTP '+status, errorThrown);
       }
     });
     this.visible = true;
@@ -212,7 +219,7 @@ function Cart(config) {
       dataType: 'json',
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('Hide - HTTP '+status+': '+errorThrown);
+        log.error('Hide - HTTP '+status, errorThrown);
       }
     });
     this.visible = false;
@@ -248,7 +255,7 @@ function Cart(config) {
       url: '/plugin/shopping_cart/clean',
       dataType: 'json',
       success: function(data, status, ajax){
-        if ( !data.ok ) alert(data.error.message);
+        if ( !data.ok ) log.error(data.error);
         else{
           me.items = {};
           $(me.cartElem).slideUp(500, function() {
@@ -261,7 +268,7 @@ function Cart(config) {
       },
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('Remove item - HTTP '+status+': '+errorThrown);
+        log.error('Remove item - HTTP '+status, errorThrown);
       }
     });
   }
@@ -288,7 +295,7 @@ function Cart(config) {
       },
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('Send request - HTTP '+status+': '+errorThrown);
+        log.error('Send request - HTTP '+status, errorThrown);
       },
       complete: function() {
         $.colorbox.close();
@@ -311,7 +318,10 @@ function Cart(config) {
       },
       cache: false,
       error: function(ajax, status, errorThrown) {
-        alert('Error getting shopping cart - HTTP '+status+': '+errorThrown);
+        log.error('Error getting shopping cart - HTTP '+status, errorThrown);
+        if ( confirm(shoppingCartPluginL10n.getProblemConfirmReload) ) {
+          document.location.reload();
+        }
       }
     });
   });
@@ -7,7 +7,7 @@
       <a href="cart:clean" onclick="Cart.clean(this); return false" class="cart-clean"><%=_('Clean basket')%></a>
       <ul class="cart-items"></ul>
       <div class="cart-total"><%=_('Total:')%> <b></b></div>
-      <a href="/plugin/shopping_cart/buy" class="cart-buy"><%=_('Shopping checkout')%></a>
+      <a href="/plugin/shopping_cart/buy" class="cart-buy colorbox"><%=_('Shopping checkout')%></a>
     </div>
     <a href="#" onclick="Cart.toggle(this); return false" class="cart-toggle">
       <span class="str-show"><%=_('Show basket')%></span>
@@ -15,3 +15,15 @@
     </a>
   </div>
 </div>
+<script>
+  shoppingCartPluginL10n = {
+    getProblemConfirmReload: <%= (
+      _('Ups... I had a problem to load the basket list.') +
+      "\n" +
+      _('Did you want to reload this page?')
+    ).to_json %>,
+    maxNumberOfItens: <%= (
+      _('Sorry, you can\'t have more then 100 kinds of items on this basket.')
+    ).to_json %>
+  }
+</script>
@@ -918,6 +918,41 @@ function facet_options_toggle(id, url) {
   });
 }
+if ( !console ) console = {};
+if ( !console.log ) console.log = function(){};
+
+// Two ways to call it:
+// log(mixin1[, mixin2[, ...]]);
+// log('<type>', mixin1[, mixin2[, ...]]);
+// Where <type> may be: log, info warn, or error
+window.log = function log() {
+  var type = arguments[0];
+  var argsClone = jQuery.merge([], arguments); // cloning the read-only arguments array.
+  if ( ['info', 'warn', 'error'].indexOf(type) == -1 ) {
+    type = 'log';
+  } else {
+    argsClone.shift();
+  }
+  var method = type;
+  if ( !console[method] ) method = 'log';
+  console[method].apply( console, jQuery.merge([(new Date).toISOString()], argsClone) );
+}
+
+// Call log.info(mixin1[, mixin2[, ...]]);
+log.info = function() {
+  window.log.apply(window, jQuery.merge(['info'], arguments));
+}
+
+// Call log.warn(mixin1[, mixin2[, ...]]);
+log.warn = function() {
+  window.log.apply(window, jQuery.merge(['warn'], arguments));
+}
+
+// Call log.error(mixin1[, mixin2[, ...]]);
+log.error = function() {
+  window.log.apply(window, jQuery.merge(['error'], arguments));
+}
+
 jQuery(function($) {
   $('.colorbox').live('click', function() {
     $.fn.colorbox({
	@@ -57,14 +57,24 @@ class ShoppingCartPluginController < PublicController		@@ -57,14 +57,24 @@ class ShoppingCartPluginController < PublicController
57	def list	57	def list
58	if validate_cart_presence	58	if validate_cart_presence
59	products = self.cart[:items].collect do \|id, quantity\|	59	products = self.cart[:items].collect do \|id, quantity\|
60	- product = Product.find(id)
61	- { :id => product.id,
62	- :name => product.name,
63	- :price => get_price(product, product.enterprise.environment),
64	- :description => product.description,
65	- :picture => product.default_image(:minor),
66	- :quantity => quantity
67	- }	60	+ product = Product.find_by_id(id)
		61	+ if product
		62	+ { :id => product.id,
		63	+ :name => product.name,
		64	+ :price => get_price(product, product.enterprise.environment),
		65	+ :description => product.description,
		66	+ :picture => product.default_image(:minor),
		67	+ :quantity => quantity
		68	+ }
		69	+ else
		70	+ { :id => id,
		71	+ :name => _('Undefined product'),
		72	+ :price => 0,
		73	+ :description => _('Wrong product id'),
		74	+ :picture => '',
		75	+ :quantity => quantity
		76	+ }
		77	+ end
68	end	78	end
69	render :text => {	79	render :text => {
70	:ok => true,	80	:ok => true,
	@@ -7,7 +7,7 @@		@@ -7,7 +7,7 @@
7	<a href="cart:clean" onclick="Cart.clean(this); return false" class="cart-clean"><%=_('Clean basket')%></a>	7	<a href="cart:clean" onclick="Cart.clean(this); return false" class="cart-clean"><%=_('Clean basket')%></a>
8	<ul class="cart-items"></ul>	8	<ul class="cart-items"></ul>
9	<div class="cart-total"><%=_('Total:')%> <b></b></div>	9	<div class="cart-total"><%=_('Total:')%> <b></b></div>
10	- <a href="/plugin/shopping_cart/buy" class="cart-buy"><%=_('Shopping checkout')%></a>	10	+ <a href="/plugin/shopping_cart/buy" class="cart-buy colorbox"><%=_('Shopping checkout')%></a>
11	</div>	11	</div>
12	<a href="#" onclick="Cart.toggle(this); return false" class="cart-toggle">	12	<a href="#" onclick="Cart.toggle(this); return false" class="cart-toggle">
13	<span class="str-show"><%=_('Show basket')%></span>	13	<span class="str-show"><%=_('Show basket')%></span>
	@@ -15,3 +15,15 @@		@@ -15,3 +15,15 @@
15	</a>	15	</a>
16	</div>	16	</div>
17	</div>	17	</div>
		18	+<script>
		19	+ shoppingCartPluginL10n = {
		20	+ getProblemConfirmReload: <%= (
		21	+ _('Ups... I had a problem to load the basket list.') +
		22	+ "\n" +
		23	+ _('Did you want to reload this page?')
		24	+ ).to_json %>,
		25	+ maxNumberOfItens: <%= (
		26	+ _('Sorry, you can\'t have more then 100 kinds of items on this basket.')
		27	+ ).to_json %>
		28	+ }
		29	+</script>
	@@ -918,6 +918,41 @@ function facet_options_toggle(id, url) {		@@ -918,6 +918,41 @@ function facet_options_toggle(id, url) {
918	});	918	});
919	}	919	}
920		920
		921	+if ( !console ) console = {};
		922	+if ( !console.log ) console.log = function(){};
		923	+
		924	+// Two ways to call it:
		925	+// log(mixin1[, mixin2[, ...]]);
		926	+// log('<type>', mixin1[, mixin2[, ...]]);
		927	+// Where <type> may be: log, info warn, or error
		928	+window.log = function log() {
		929	+ var type = arguments[0];
		930	+ var argsClone = jQuery.merge([], arguments); // cloning the read-only arguments array.
		931	+ if ( ['info', 'warn', 'error'].indexOf(type) == -1 ) {
		932	+ type = 'log';
		933	+ } else {
		934	+ argsClone.shift();
		935	+ }
		936	+ var method = type;
		937	+ if ( !console[method] ) method = 'log';
		938	+ console[method].apply( console, jQuery.merge([(new Date).toISOString()], argsClone) );
		939	+}
		940	+
		941	+// Call log.info(mixin1[, mixin2[, ...]]);
		942	+log.info = function() {
		943	+ window.log.apply(window, jQuery.merge(['info'], arguments));
		944	+}
		945	+
		946	+// Call log.warn(mixin1[, mixin2[, ...]]);
		947	+log.warn = function() {
		948	+ window.log.apply(window, jQuery.merge(['warn'], arguments));
		949	+}
		950	+
		951	+// Call log.error(mixin1[, mixin2[, ...]]);
		952	+log.error = function() {
		953	+ window.log.apply(window, jQuery.merge(['error'], arguments));
		954	+}
		955	+
921	jQuery(function($) {	956	jQuery(function($) {
922	$('.colorbox').live('click', function() {	957	$('.colorbox').live('click', function() {
923	$.fn.colorbox({	958	$.fn.colorbox({