Shopify: Product variant id's are outputting as literal strings, not numbers

Question

thanks in advance for taking the time to read this.

I'm currently developing a "Test Shop" through my partners account. Everything in the shop is working as expected accept for my product.liquid file. All of the variant id's for the products are outputting as literal strings, not numbers. I am using the option_selection.js file with the jQuery solution to build multiple drop downs for the product.

And of course since no ID is passed to the cart action I get the "We were not able to add this item to your shopping cart because no variant ID was passed to us." So, any thoughts on a solution or what's causing this would be much appreciated.

Below is a sample of the variant loop in place:

<form id="add-to-cart" action="/cart/add" method="post" >
   <select id="variant-select">
      <option>Product Options</option>
         {% for variant in product.variants %}
          <option value="{{ variant.id }}">{{variant.title }} for {{ variant.price | money}}</option>
           {% endfor %}
    </select>
    <input type="image" name="add" value="Purchase" id="purchase" src="{{ 'purchase.png' | asset_url}}" />
    <span id="product-price">{{ product.price | money }}</span>
</form>

And here is the XHTML output. Note: This is only the result for one of the drop downs, there are two more that have a similar output.

<div class="selector-wrapper">
   <label for="variant-select-option-0">Size</label>
   <select class="single-option-selector" id="variant-select-option-0">
     <option value="Small">Small</option>
     <option value="Medium">Medium</option>
     <option value="Large">Large</option>
     <option value="X-Large">X-Large</option>
   </select>
</div>

To add a little more context to the issue, below is a sample of the drop down output prior to using the jQuery solution to create multiple drop downs. This is still using the same variant loop from above and still produces the same error. The variant id's seem to be longer than normal...

<select id="variant-select">
   <option>Product Options</option>
   <option value="105062422">Small / Black / Men's for $19.00</option>
   <option value="105062492">Medium / Black / Men's for $19.00</option>
   <option value="105062522">Large / Black / Men's for $19.00</option>
   <option value="105062552">X-Large / Black / Men's for $19.00</option>
   <option value="105062602">Small / Blue / Men's for $19.00</option>
   <option value="105062632">Medium / Blue / Men's for $19.00</option>
   <option value="105062702">Large / Blue / Men's for $19.00</option>
   <option value="105062732">X-Large / Blue / Men's for $19.00</option>
   <option value="105062802">Small / Black / Women's for $19.00</option>
</select>

Below is the dev link and password.

http://terry-inc6406.myshopify.com/products/featured-product-1

Pass: yhc

Thanks again! and sorry for such a long first post

jonlunsford jonlunsford · Accepted Answer · 2011-07-01T19:12:26

Thanks to Caroline at Shopify. She pointed out my malformed markup, adding name="id" to the select element fixed it.

Shopify: Product variant id's are outputting as literal strings, not numbers

1 Answers