search

wojodesign / simplecart-js

A simple javascript shopping cart that easily integrates with your current website.
simplecartjs.org
1.79k stars 492 forks source link

selectors dont work with MooTools latest(mootools-core-1.4.5) #249

Closed pellucide closed 12 years ago

pellucide commented 12 years ago

Thanks for the awesome simpleCart. I have been trying to integrate simpleCart to enable online ordering. The issue I am facing is selectors don't work with mootools-core-1.4.5. They work nicely with jQuery. I could change to jQuery, but that entails a lot of work that has been already done with MooTools. Also I like mootools style of javascript coding . Here is a simple piece of code that shows the problem. In this code the selectors are

.simpleCart_increment .simpleCart_decrement .simpleCart_shelfItem .add_item

I would appreciate some help on this Thanks


<!DOCTYPE html>
<html>
<head>
 <title>simpleCart(js) - Test</title>
 <link href="test.css" rel="stylesheet" media="screen" type="text/css" />
</head>

<body>
   <div class="itemsview" id="shelf">
      <div class="simpleCart_shelfItem">
         <h2 class="item_name">Item1</h2>
         <select class="item_choice">
             <option value="choice1">Choice1</option>
             <option value="choice2">Choice2</option>
         </select>
         <input type="text" value="1" class="item_Quantity">
         <span class="item_price">$2.00</span><br>
         <a class="item_add" href="javascript:;"> Add to Cart </a>
      </div>
   </div>

   <div class="cartview" id="cart">
      <span class="simpleCart_quantity"></span> items <br>
      total - <span class="simpleCart_total"></span> <br>
        tax - <span class="simpleCart_tax"></span> <br>
      grandTotal - <span class="simpleCart_grandTotal"></span>
      <h2 class=""> Cart Items </h2>
      <div class="simpleCart_items"></div><br>
         <div class="checkoutEmptyLinks">
         <a href="javascript:;" class="simpleCart_empty">empty cart</a>
         <a href="javascript:;" class="simpleCart_checkout">Checkout</a>
      </div>
   </div>
   <br>
   <br>

   <script type="text/javascript"  src="http://mootools.net/download/get/mootools-core-1.4.5-full-nocompat.js"></script>
   <!--
   <script type="text/javascript"  src="http://mootools.net/download/get/mootools-core-1.4.5-full-compat.js"></script>
   <script  type="text/javascript" src="jquery.js"></script>
   -->

   <script type="text/javascript"  src="simpleCart.js"></script>
   <script type="text/javascript" >
       simpleCart({
           checkout: {
               type: "PayPal" ,
               email: "you@yours.com",
           },
           taxRate:0.075,
           currency:'USD',
           cartStyle:'table',

       });

   </script></body></html>
brettwejrowski commented 12 years ago

hey @pellucide thanks for posting the issue, I will add some tests and try to figure out why it isn't working. (we run our tests against the 3 latest major release of mootools).

brettwejrowski commented 12 years ago

hi @pellucide I have fixed this issue in the dev branch with c1a033d

let me know if you have any other issues. thanks!

pellucide commented 12 years ago

That was unexpectedly quick. Thanks a lot

pellucide commented 12 years ago

I was going through the fix. I am a newbie with javascript. what does the ":relay(" + selector + ")" do ? Its in the file simpleCart.js

brettwejrowski commented 12 years ago

Ah, yes. I actually had to look this one up (I am much better with jQuery). Basically, you can delegate event listeners to a containing element.

So lets say I have a table with a 100 rows that I am removing and adding, and I want to know when a row is clicked, it would be crazy to attach an event listener to every row added and then remember to remove it.

Instead, I can attach an event to the table and say "tell me whenever a row inside of you gets clicked," because the event will "bubble up" the DOM. This way, I can tell when any row is clicked with a single listener. The code would look like this:


document.id( "myTable" ).addEvent( 'click:relay(tr)' , function( e ) {
  console.log( "A table row was clicked!");
));

The "click:relay( selector )" tells mootools to watch for a click event on any of its children that match the selector.

I use this method with simpleCart(js) so that I don't have to attach and remove click events to elements every time the page is updated. I just add the listener to the body, and you can change the entire DOM without simpleCart(js) knowing, and it will still "catch" the click events. This method of using the body or document as the delegate is similar to jQuery's .live() method.

pellucide commented 12 years ago

This is pretty sweet. Thanks. I am starting to like java-script more than java. Its a very powerful language.