title: Add to Cart - Chrome Extension Experiment
body: <p>I currently just got into making Chrome Extensions using mainly JQuery to run all my functions besides the manifest file.  I decided to try to make an active extension that would add a product to cart off of the store.nike.com to see what I could accomplish.  </p>
  
  <p>I came a long ways and, for the most part have everything working besides the actual <code>'add to cart'</code> feature.  </p>
  
  <p>How it works:</p>
  
  <p>Person enters a shoe size in my popup.html, from their once the user lands on a page for a nike shoe, it will grab local stored shoe size and place into a value that gets submitted to the nike site's form.  Then using a <code>trigger('click')</code> event, submits.  Here is the issue, it tells me <code>"Select a Shoe Size"</code></p>
  
  <p>Check it out:</p>
  
  <p><a href="http://store.nike.com/us/en_us/pd/lunarglide-5-running-shoe/pid-726047/pgid-726952" rel="nofollow">http://store.nike.com/us/en_us/pd/lunarglide-5-running-shoe/pid-726047/pgid-726952</a> this is the product I am testing this out on.</p>
  
  <p>Background Script that runs upon load of this page:</p>
  
  <pre><code>$(document).ready(function(){   
  
      checkForData();
  
      $('.add-to-cart').trigger('click');
  });
  function checkForData()
  {
      $('ul.footwear li').removeClass("selectBox-selected");
      chrome.storage.local.get('value', function (results) {
          a[rel$="\:'+results.value+'"]').html());
          $('ul.footwear').find('a').filter(function(idx, el){
              return $.trim($(this).text()) == $.trim(results.value);
          }).closest('li').addClass('selectBox-selected');
          $("a.footwear span.selectBox-label").text("(" + results.value +")");
      });
  }
  </code></pre>
  
  <p>Here is what happens:  in the <code>ul.footwear</code> it removes the default <code>selectedBox-selected</code> - this if the default shoe size which is none. Next I run through chrome storage for local var and filter it through sites list of shoe sizes for the proper one.  Once found(or returned true) it will give it the <code>selectBox-selected</code> class as if someone clicked that associated shoe size.  From their I display it on the div which contains <code>Size</code>.  Finally I run a click event on the <code>add to cart</code>.  </p>
  
  <p>Unfortunately, it just wont work that way.  I get the error <code>"Select a Size"</code>.  Something else is up and I was hoping someone could give me insight on maybe what this might be, or point me in the right direction.</p>
  
  <p>This is only an educational experiment.   </p>