Introduction
Using Add To Cart links are very useful in remote carting. The url can be used virtually anywhere — a static site, a blog, or even Facebook or Twitter. This makes it easy to get an item in to a customer’s cart to purchase from your checkout. Additionally, the link url can be constructed or extended from the output of the generator to encompass other parameters found in our KnowledgeCenter Article on Embedded Commerce Parameters.
Using The Embed Tools
- To begin, navigate to the Embed Tools (Spark Pay online stores : Catalog > Embed Tools)
- From the Embed Tools dashboard, select the link method of adding items to the cart.
- You can search for an existing product or you can build a Phantom Item. A Phantom Item is one that is created in real time when the item is added to the cart. It is not stored in your product catalog, just on the customer's cart/order.
- Building an item will allow you to enter product information while searching for them will pre-fill the information which you can change. Both options take you to this screen:
- Once you enter all of the required fields plus any other fields you wish to include, press the Get Code button.
- This link can be used virtually anywhere, either as html in an
<a /> tag or as a url to post on social media sites or share with your customers directly.
Extending The Link
While the generator does not contain all of the possible parameters, the link it creates can be easily extended to include the extra information. The one created in the previous steps will look similar to this:
<a href="http://ryantest.mysparkpay.com/store/addtocart.aspx?itemid=-1&itemname=My+Awesome+Product&itemnr=SKU&qty=1&imageurl=ryantest.mysparkpay.com&price=34.99&itemurl=">Add to Cart</a>
If you are not familiar with how query strings in urls work, let's break this down.
<a href="...">Add To Cart</a>
This most basic step here is to create a link, which is done using an <a/> tag. The hrefattribute is used to tell the browser where to go once the link is clicked. The text between the opening and closing <a/> tags is what is shown to the user.
http://ryantest.mysparkpay.com/store/addtocart.aspx
In our example above, this is the base url to which the user goes when they click the link. You would replace ryantest.mysparkpay.com with your actual domain, but leave the /store/addtocart.aspx
itemname=My+Awesome+Product&itemnr=SKU&qty=1&imageurl=ryantest.mysparkpay.com&price=34.99&itemurl="
If you are unfamiliar, this is called a query string. It is appended to a url in order to give that page certain options and are built using Key-Value pairs. This means that for each option you pass to the url, you also pass the value of that options. The query string is always started with a ? and each Key-Value pair is separated by a &. So when we break this apart, we can see that we are passing three options, more often called parameters. The first is itemid, the second is itemname, the third is itemnr, the fourth is qty, and the final is imageurl . The value of each parameter is denoted after the equal sign in the query string. So we are telling the addtocart.aspx page that the item's id is -1, the quantity is 5, and the product's name is "My Awesome Product". (For more information on what each parameter is and how to use it, visit our KnowledgeCenter Article on Embedded Commerce Parameters).
While this may not be the most practical item to add (considering there is no item number, no price, or any other pertinent information), this would be enough to add a free item with a name to the user's cart and is just about the minimum. The main field of concern here is the itemid field. When this information is passed, the system assumes you are looking for an existing product. If no item id is provided, or is -1, the system will attempt to create what is called a phantom item.