OVERVIEW
The best way to convert a customer on any e-commerce site is to take them to the checkout process immediately when they decide that they're ready to give you their money. From there, it's a good thing that Hotcakes has a single page checkout feature, because the last thing you'd want to do is lose them at this point. This article will help you add a product to the shopping cart using a simple link.
REQUIREMENTS
The following pre-requisites will be necessary to accomplish the goals of this article:
- Have one or more products added
- Familiarity with how to modify and create views
- HTML & CSS knowledge
- Familiarity with scripting methodologies or an understanding of Razor Syntax
- Visual Studio 2012 or newer (only required for intellisense)
It is highly suggested that you first review the custom viewsets documentation prior to following the steps in this article. Doing so will help you understand the steps required here better.
GETTING STARTED
Adding products using a URL should only be done for products that don't have choices. All other products that have various choices and variants should instead be added to the cart programmatically, added to the cart using the REST API, or the old-fashioned way using the product details page.
If you haven't already done so, you should have and be working with a custom viewset.
The most common place to use this feature is in the various category views. While you can do this in any view where you have product information, we'll use the category view for our example below.
URL PARAMETERS
There are several parameters that the Cart page would be looking for and might use if they're present. Those parameters are normally referred to as querystring values. The tables below describes each of those values and what they do.
Action Parameters
If AddSku or AddSkuQty contains any values, the requisite logic will be executed to add the product(s) to the cart and the customer will be redirected, per the settings in the table below. The Quick Add parameters will not be parsed.
| Key | Value Description |
| AddSku | This value should contain one or more valid product SKU's. If you wish to add multiple products at once, separate each SKU using a comma (,). If you choose to add multiple SKU's the number of SKU's and quantities must match. Otherwise an error will be thrown. SKU's can contain alpha-numeric and other URL-safe characters. However, your SKU will likely cause an error if it contains a comma. |
| AddSkuQty | This value should contain one or more valid product quantities. If you wish to add multiple quanities at once, separate each quantity using a comma (,). If you choose to add multiple quantities the number of quantities and SKU's must match. Otherwise an error will be thrown. All quantities must be in integer format. Any other type of character will throw an error. |
| ClearCart | If a "true" boolean value is found for this key, the shopping cart line items will be cleared. This will happen prior to parsing any other querystring parameters. |
| CouponCode | If present, the cart will accept your coupon code and add it to the order. The cart page and the order will parse the coupon code for validity and determine whether or not it qualifies for any benefits. If the coupon code is invalid, inactive, expired, or otherwise invalid it will still be part of the cart, but will not change the line items, totals, shipping, or anything else with the order. |
| RedirectToCheckout | If this querystring key and a "true" boolean value is found, the customer will be redirected to the checkout page of your store. Otherwise, the customer will be sent to the shopping cart page. |
Quick Add Parameters
The Quick Add parameters will be parsed, provided that AddSku and AddSkuQty are not present in the URL you've generated. Using Quick Add always redirects the customer to the cart page.
| Key | Value Description |
| Multi | This value should contain a collection of key/value pairs for each product that you wish to quickly add, separated by semi-colons (;). Each key/value pair will contain a valid SKU and a quantity, separated by a colon (:). A product will be added to the cart for each key/value pair. SKU's should not contain colons or semi-colons and quantities should only be integer values. This parameter will only be parsed if both QuickAddId and QuickAddSku are not present. |
| QuickAddId | This value should contain one valid product BVIN (product ID) for a product that you wish to add to the cart. If present, the QuickAddSku and Multi parameters will be ignored. |
| QuickAddQty | Regardless of whether you choose to add products by BVIN (ID) or SKU, this parameter will identify the quantity of the product to add. If this value is omitted, the cart will default to a value of one (1). |
| QuickAddSku | This value should contain one valid product SKU for a product that you wish to add to the cart. If present, the Multi parameter will be ignored. |
EXAMPLE URL'S
Unless the RedirectToCheckout parameter above is used, the customer will be sent to the shopping cart page of your store. If any errors or warnings are found, the customer will always be shown the shopping cart page, regardless the to redirect setting.
All of the URL's that are generated for this purpose should be pointed to the shopping cart page of your website. Otherwise, the querystring values you've added to the URL will be ignored.
Here are a few URL examples using the parameters from above. The each are using relative URL's and assume that you have a page on your site called "Cart" that has the Hotcakes Cart module added to it. As with other key pages, this may require that you ensure that the page is mapped in the store administration (go to Settings > Page Configuration to manage this).
| The following example will clear the cart of all line items (products) |
| /Cart?ClearCart=true |
| This example shows how to add a single product to the cart |
| /Cart?AddSku=SAMPLE004&AddSkuQty=1 |
| This builds on the previous example by also adding a coupon code |
| /Cart?AddSku=SAMPLE004&AddSkuQty=1&CouponCode=SPRING |
| Again, we are building off of the previous examples, but this time we are sending the customer to the checkout view |
| /Cart?AddSku=SAMPLE004&AddSkuQty=1&CouponCode=SPRING&RedirectToCheckout=true |
| In this example, we have chosen to add multiple products to the cart at the same time |
| /Cart?AddSku=SAMPLE004,SAMPLE001,SAMPLE006&AddSkuQty=1,1,1 |
| This is the first Quick Add example and it adds a product to the cart using the product's BVIN or ID |
| /Cart?QuickAddId=99c3f107-7191-4901-b7f1-4ac227e27a01&QuickAddQty=1 |
| This example does the same thing as the previous one for the same product, only using it's SKU instead |
| /Cart?QuickAddSku=SAMPLE004&QuickAddQty=1 |
| This is an example to add multiple products and will add the same products in the same way as the previous "multiple" example |
| /Cart?Multi=SAMPLE004:1;SAMPLE001:1;SAMPLE006:1 |
UPDATING THE CATEGORY VIEW
There are views for each customer-facing piece of functionality, including the Category view. The Category view is similar to others in that there is a main view and then a few smaller “partial” views that are injected into the main view named Index. In fact, the Category view has several alternatives out of the box as well. In this example, we will be updating the Index.cshtml file for the Category view.
Open the Index.cshtml partial view in your custom viewset project, found in the following location in your viewset project.
~\Portals\_default\HotcakesViews\YOURVIEWSETNAME\Views\Category\Index.cshtml
If you're familiar with Razor already, you've probably noticed at this point that the link we want to create probably should not be created here. Instead, we'll update the shared view called _RenderSingleProduct that's referenced in this view.
_RenderSingleProduct View
We will add some branching logic here that determines if the product has options. If it does, we shouldn't allow the customer to add it to the cart right away. In that case, they're sent to the product details page.
<div class="hc-recaddtocart">
@if (Model.Item.HasOptions())
{
<a href="@Model.ProductLink">More Details</a>
}
else
{
<a href="@Url.RouteHccUrl(HccRoute.Cart)?AddSku=@Model.Item.Sku&AddSkuQty=1">Add to Cart</a>
}
</div>Adding the little snippet of code will give you the result shown below (you'll of course make it look much better, I am sure).
Need More Help?
Do you need more assistance with this article? Please review your support options.