Add to Cart button on "SC Category Page" widget like SC Catalog Item

[Community Alums]

Hi All,

Below is OOTB add to cart option on sc_cat_item page. If i use the $sp.getCatalogItem(data.sys_id, true);   method on SC Category Page, how i can get the catalog data. Currently my Add to Cart is not behaving like OOTB one.

I want the same button functionality on sc_category page

I referred the function return on   SC Catalog Item widget and mimicked the same but couldn't achieve. Any help please..

  ctomasi, b-rad, larstange, nathanfirth, snehabinani26

[deepakgarg]

Hi Karthik,

Why do you want to implement "Add to Cart" button on the 'sc_category' page. That's possible but items also contains variables, attachments etc. for which, its better to visit Catalog Item page and fill in all the required variables and then Add to cart. Still if you want to do that, you can simply avoid g_form actions and add the item directly to cart.

[Community Alums]

Thanks much Deepak for the response. We don't have any variables defined for any items and the reason behind the button addition on category page is to minimize the number of clicks.

Please clarify on removing g_form actions, is it from SC Catalog Item widget and adding the other functions to SC Category Page widget?

[deepakgarg]

If you are sure that you dont have variables on any item & you still want to do this. You can do something like this:

var t   = $scope.data.sc_cat_item;         //         $scope.data.sc_cat_item contains details of the item.

t.item_action = "add_to_cart";

$http.post(spUtil.getURL('sc_cat_item'), t).success(function(response){spUtil.addInfoMessage('Added to Cart.')}).error(function(response){console.log(response);})

I guess, this will work. Try and lemme know.

[Community Alums]

Deepak,

server side, "data.sc_cat_item = $sp.getCatalogItem(data.sys_id, true)"   is not getting value? i put the code that you provided in client script within triggerAddToCart function but not working..

If i hardcode the sys_id to data.sys_id,   then its working..

$scope.triggerAddToCart = function() {

var t   = $scope.data.sc_cat_item;         //         $scope.data.sc_cat_item contains details of the item.

t.item_action = "add_to_cart";

$http.post(spUtil.getURL('sc_cat_item'), t).success(function(response){spUtil.addInfoMessage('Added to Cart.')}).error(function(response){console.log(response);})}