I'm in the process of setting up a Magento category page that allows users to add configurable products directly from the category page, which is not the standard operation for Magento.
After putting in a lot of effort, I have almost completed the task but I'm facing some challenges with finalizing the javascript code.
I have successfully displayed all the configurable products on the page with a select dropdown for the size attribute and an 'add to cart' button for each product.
The select dropdowns are linked to the ->getAddUrl() method. So when clicking on the 'add to cart' button, I intend to use window.location(thegetAddUrlLink) to add the product to the cart.
Unfortunately, this approach isn't working as expected. Instead of adding the product to the cart, it redirects me to the individual product page asking me to select a size. Oddly enough, if I manually copy and paste the same links from the source (from the value field), it works fine when pasted into the browser.
Below is an example of the markup for one product on the page:
<form action="http://www.mysite.com/checkout/cart/add/" method="post" style="display:block; clear:both;">
<p class="shopthislookpageselectsize">Size</p>
<div class="shopthislookpageselectholder">
<select name="select-35900" id="select-35900" class="required-entry shopthislookpageselect">
<option value="http://www.mysite.com/checkout/cart/add/uenc/aHR0cDovL3d3dy5jdWx0dXJla2luZ3MuY29tLmF1L3Nob3AtdGhpcy1sb29rL2Zlc3RpdmFsLWdlYXJzLTEuaHRtbA,,/product/35895/">ONE SIZE</option>
<option value="http://www.mysite.com/checkout/cart/add/uenc/aHR0cDovL3d3dy5jdWx0dXJla2luZ3MuY29tLmF1L3Nob3AtdGhpcy1sb29rL2Zlc3RpdmFsLWdlYXJzLTEuaHRtbA,,/product/22533/">28</option>
</select>
</div>
<button class="button btn-cart" input="" type="hidden" name="product" id="button-35900" value="35900" onclick="addLookItemsToCart(this.id); return false;"><span><span>Add to Cart</span></span></button>
<script type="text/javascript">
function addLookItemsToCart(id){
var clickedId = id;
var theValue = clickedId.replace("button-", "");
var theLink = $j('#select-'+theValue).val() );
window.location = theLink;
};
</script>
</form>
To clarify once again: If I directly paste the link
http://www.mysite.com.au/checkout/cart/add/uenc/aHR0cDovL3d3dy5jdWx0dXJla2luZ3MuY29tLmF1L3Nob3AtdGhpcy1sb29rL2Zlc3RpdmFsLWdlYXJzLTEuaHRtbA,,/product/35895/