issue defining a [ID] in Javascript

Question

I am using the .change() function on my site click here which enables users to select the quantity of their product. The problem i'm having is my chart is only linking my me to the 12 pack and not the six. I've checked in firebug and i've noticed the matrix has created two buttons button that links to 6 pack is begin overlapped by the button for 12pack. In my HTML is have one button

click here

Ultimately i want the button links to change relative to the price. I've noticed my the Matrix doesn't respond to the Jquery call out, so i'm assuming there are some expression tags to do this.

What meant to happen is when you select 6 pack you click add to chart and it directs you to the shopping cart, with the price of a 6 pack. At the moment it's just picking up the 12pack. If you look at the page in inspector you'll notice one that the matrix has created two buttons, one for the 6 pack and one for 12. 12 is overlapping six bcos the button is using a class.

<div class="pricing-assets">
<h4>select a quantity</h4>
 <select id="item_select">
  <option value="1">6 pack</option>
  <option value="2">12 pack</option>
</select>

  <script type="text/javascript">
   var message = new Array();
     message[1] = "$15.00";
      message[2] = "$25.00";


      $(document).ready(function(){            
      $("#item_select").change(function(){
       var message_index
       message_index = $("#item_select").val();
        $(".price-item h3").empty();
         if (message_index > 0)
          $(".price-item h3").append(message[message_index]);
           });

           });

           </script>




    <div class="price-item right"><h3>$15.00</h3>
    {p_cartlink}
    <a href="http://store.bodyworksforme.com/ShoppingCart.asp?ProductCode={id}" class="button_atc atc_{url_title}"></a>
    {/p_cartlink}

Answer 1

Inside of your matrix loop you want to add a class/ID to the link element to match the product ID, then use that as the value of your select options, so you can toggle the links when the selects change. In detail:

First of all, in your select, generate the select items dynamically based on the contents of your matrix field (I've guessed that your option name is called {option_name}, replace if required:

<div class="pricing-assets">
<h4>select a quantity</h4>
 <select id="item_select">
  {p_cartlink}
    <option value="{id}">{option_name}</option>
  {/p_cartlink}
</select>

On your add to cart links set a class based on the ID of the option it relates to, I've namespaced that class under .add_cart_ to avoid collisions in your existing styles:

    <div class="price-item right"><h3>$15.00</h3>
    {p_cartlink}
        <a href="http://store.bodyworksforme.com/ShoppingCart.asp?ProductCode={id}" class="button_atc atc_{url_title} add_cart_{id}"></a>
    {/p_cartlink}

Now in your JS (which will need to be in the same template, create a global var that we can access from our onReady JS that points to an object containing our options, which is popualted by looping through your matrix again.

By using an object rather than an array we can use the option ID as our object key and the price string as our value, which is like a mirror image of what we did above when buildign the select.

(Aside: here someone will probably point out that JS globals are a BAD THING and should be avoided, which is generally true, but this is a valid use in my opinion - if you have suitable parent JS object for the cart interaction stuff by all means set it as an property on that rather than on window):

<script type="text/javascript">
   window.priceMessage = {};
      {p_cartlink}
        message["{id}"] ='$' + parseFloat({option_price}).toFixed(2);
      {/p_cartlink}
</script>

Now in your main app JS file or wherever do this on document ready:

    $(document).ready(function(){
      //cache some selectors to minimise DOM queries and for clarity below
      var $select = $("#item_select"),
          $priceOutput = $(".price-item h3"),
          $addToCartBtns = $(".button_atc"),
          initialVal = $("#item_select").val();

      //hide add to cart buttons except for the current valid one
      function showCartButton(value){
        $addToCartBtns.hide().filter('.add_cart_' + value).show();  
      }
      //bind to the change event
      $select.change(function(e){
        var messageVal = $(e.target).val();//get the current value of the select as of the change
        //empty the current price container
        $priceOutput.empty();
        if ( messageVal !== '')
          //append the message
          $priceOutput.append(priceMessage[messageVal]);
          //show hide add to cart
          showCartButton(messageVal);
        });
      });
      //show correct button for state of select at page load
      showCartButton(initialVal);
</script>

The key advantage of doing it like this is flexibility: this code should cope with any range of option values that have a per-option price, as the select html, add to cart buttons and priceMessage object are all dynamically generated from the same data in EE.