Sitecore commerce multiple AddToCart buttons

Hello Fellow Developers,

Today i will be sharing some information about sitecore commerce component called "AddToCart", One of the basic requirement of any e-commerce site is to have an AddToCart button on any component of your choice which deals with the product you are selling.

We have had similar requirement where just like ProductList or PromotedProduct component, We were supposed to create similar component called "ProductParts" component, What it supposed to do was to show the different sellable part of the product you are visiting.

So for example if you are selling a mobile so on any specific product detail page of that mobile, there should also be one component which could show different parts or accessories which user can also buy and perform AddToCart from there itself.

One thing we observed was that existing ProductList and PromotedProducts etc. none of them are having AddToCart button on them, So visitors can see those items but to add item to cart, they have to visit the main product detail page (PDP) and add the item to cart from there

Problem

We are resolving two issues here

1) Have an AddToCart button rendering or a control which can appear on any page, Existing AddToCart rendering when you drop it on the page, it reads item from the main Product item but if i have other items for which i want to AddToCart for, It is not possible, Until i go to the main PDP and add that item to cart.

2) Existing AddToCart works on Product item only, if you have a requirement where all of your data attributes of your sellable entities are residing on a variant, OOTB button will not work

So, if you have been working with sitecore commerce, You must have observed that the whole infrastructure of sitecore commerce is based on a sellable product and not it's variant, meaning if you are selling one mobile with 5 different variant, commerce's pipeline and their repository only works on the main product, so the resolving item is always a product and not any variant, so context item will always be a product.

Similarly if you observe the AddToCart button it only reads the fields from context item we are on, so for instance if you are on "Apple Iphone 5s" mobile and now if you want use AddToCart button for the ProductPart component which is "Iphone 5s cover", it is not possible with existing button because it reads data only from context item and context item is IPhone 5 and not "Iphone 5s cover"

If you see the implementation of  AddToCart.cshtml (i am putting screenshot only for the reference of the code i want to show) 

If you see above, the AddToCart button can only add products and because it passes variantId as empty, that means even if you have managed to resolve Variant as you rendering item, when you do AddToCart, It will add the main product to cart only

Also there is no way we can add existing AddToCart on our custom component "ProductPart"

Now because of this, we decide to create our own AddToCart button which will follow the same pattern and hidden fields and same mark up as main AddToCart button, but to get the data of the variant it is on (Iphone 5s Cover), We will read this item from commerce get require data and set those hidden fields on this new AddToCart button.

Solution

To get all of these working, We created our own repository, model and cshtml, cshtml was exact copy of existing AddToCart.cshtml which ships with OOTB commerce component, Following is a summary

1) We created one respository which is basically reading the data from commerce for our variants, and because "ProductPart" component is responsible to show parts of the current product, we have had one field in commerce for every product which will have parts field populated (in biztool), so our repository can read those parts, so we can show them in our custom ProductParts view

As seen in the screenshot above, ProductPart is our model for "ProductPart" component which has one property called "CartModel" which is nothing but our custom AddToCartRenderingModel (almost the copy of existing OOTB model), and we are filling that model with required properties by reading from commerce and giving it reference to "VariantId"

2) We create our custom AddToCart.cshtml, and our custom AddToCartRenderingModel.cs so that from our repository we could easily fill this model and we can populate all those properties which existing AddToCartRenderingModel.cs is not filling for example VariantId and simply in "ProductPart.cshtml" we can render the AddToCart button by rendering our custom AddToCart.cshtml partial view like following

 End result

So after reading all parts of the product in product repository and filling AddToCartRenderingModel for all of those parts in the repository, end result looks like following, where all the parts for current product can be seen with AddToCart button in it

 

Let me know if this helps, There are so many customization you can do with Sitecore commerce, as they say "Requirement is mother of all inventions", Happy customizing Sitecore commerce !!!