Add to Cart for Non Matrix Items from Listing Pages

WebStore
1

How can we add non-matrix Items to the Cart from the Listing Pages like Brand, Theme, Search, Department, Category etc with out actually navigating to the Product Page?

Many of the Repeat buy Customers would like a one click shopping experience.

Thanks in Advance.
KCIMART

1 Like
2

Hi Srinivas,

Adding the code for this is pretty straightforward. However, getting it to fit in with your site would require some design skills.

If you’re comfortable with it, this is the snippet for a basic button:

{if ((product['product_matrixid'] lte 0) && (productCanBeAdded(product)))}
   <div style="width:130px;"><a href="javascript:addToBasket({product['product_id']});" class="button-big" id="add-to-basket-button-listing-{product['product_id']}"><span class="button-left"></span><span class="button-text">Add to Cart</span><span class="button-right"></span></a></div>
{endIf}

It would go after this block in your Product Listing template:

<a href="{product['product_link']}" class="product-name">
  {if (product['product_matrixid'] gt 0)}
    {product['classdescription']}
  {else}
    {product['product_name']}
  {endIf}
</a>

HTH,
Regards,

Donogh

1 Like
3

Thanks Sir, for sharing this. I will try it to see if i can fit it in.

We would also need to show the Quantity and option to select the No of Items before they can add it to the cart.

How can we do that?

Thanks
Shri

4

You’re welcome!

{ns:printProductQuantity} will render the quantity (with units of measure if they’re in use).

Adding an input/select would involve a little coding. You can see the JS function addToBasket and the accompanying form are defined within the listing template as follows (if it isn’t present, you should add it!):

    <script type="text/javascript">
<!--
function addToBasket(id) {
  document.getElementById('frmAddProductHandler').prodcode.value = id;
  document.getElementById('frmAddProductHandler').submit();
}
//-->
</script>
<form name="frmAddProductHandler" method="post" id="frmAddProductHandler" action="{BASE_PATH}store.asp">
<input type="hidden" name="prodcode" value="0" />
<input type="hidden" name="action" value="add_product" />
</form>

You would need to add a quantity field to the form:

<input type='hidden' name='quantity' id='quantity' value='1'>

You would then need to modify the addToBasket function so that it takes a quantity variable and sets the hidden quantity input before submitting the form.

We can add this for you if you like, but it would involve paid implementation time so I would need to pass it on to the design team.

Regards,
Donogh

5

Thanks a lot Donogh, i made it work. I wouldn’t need to add any Quantity option. I just need the ability to add to the cart. The users can modify the quantity in the shopping cart if they need.

One last question though.

On a regular product page, when we add the item to the cart we get a pop up on the right bottom saying Product has been added to the cart.
How can we replicate that on the Product Listing page also? This is a cool feature and provides that extra confirmation to the user.

Thanks Again
Shri

6

You’re welcome Shri.

The snippet for that is:

{if ((product['product_matrixid'] lte 0) && (productCanBeAdded(product)))}
<div style="width:130px;"><a href="#" onclick="nsc.fn.addToBasket({product['product_id']}, 1); return false;" class="button-big" id="add-to-basket-button-listing-{product['product_id']}"><span class="button-left"></span><span class="button-text">{getLanguageString("BTN_ADD_TO_BASKET")}</span><span class="button-right"></span></a></div>
{endIf}

Regards,
Donogh

7

Thanks Donogh, works like a charm.
We are all set.
Shri

2 Likes
8

Hi Donogh,

Thanks for the post. How do we add this feature for all products (including items in a matrix)

Stan

9

Hi Stan,

It’s not currently possible to add matrix items from the listing page but our development team are working on a “Quick View” feature which will be released to beta in the coming weeks.

Regards,

Brian.