- Remote Carting with Forms #201904900

Introduction

Remote carting functionality can be used to allow the customer to configure the product to their needs and provide more flexibility in what they purchase. For example, a form can be used to allow the customer to change the quantity they want. One way of doing this would be a drop down selection form. Using the Embed Tools, the form can be generated for you and customized to display the way you want. Additionally, the form content can be constructed or extended from the output of the generator.

Using The Embed Tools

To begin, navigate to the Embed Tools (Spark Pay online stores : Catalog > Embed Tools, AmeriCart: Use the Embed Tools link in the left column navigation).
From the Embed Tools dashboard, select the form 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:
In reference to our example of a quantity drop down, notice the section labeled "Quantity". This setting gives you the option to select either a static quantity (meaning the customer cannot change it), a text box in which the customer can enter the amount, or a drop down selector with options in a changeable range.
Once you enter all of the required fields plus any other fields you wish to include, press the Get Code button.
This form can be inserted into any html page.

Extending The Form

While the generator does not contain all of the possible parameters, the form it creates can be easily extended to include the extra information. The one created in the previous steps will look similar to this:

<form action="http://yourstorename.com/store/addtocart.aspx" method="POST">
    <input name="itemid" type="hidden" value="-1"/>
    <input name="itemnr" type="hidden" value="SKU"/>
    <input name="itemname" type="hidden" value="My Awesome Product"/>

    Quantity:
    <select name="qty">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <input name="imageurl" type="hidden" value=" http://yourstorename.com /store/images/picturename.png"/>                                                                   
    <input value="Add to Cart" type="submit" />
</form>

There a few things to note about the form, so let’s break it down.

<form action="http://yourstorename.com/store/addtocart.aspx" method="POST">

When we start the form with the html <form /> element, we also supply an action attribute, and a method attribute. The action value should always point to /store/addtocart.aspx on your store. If the form is not located on your store, you will want top include the full url to your store, followed by the url of the addtocart.aspx page. For example, if your store is located at http://yourstorename.com, then the action should be http://yourstorename.com/store/addtocart.aspx as it is in the example.

<input name="itemid" type="hidden" value="-1"/>

To understand which remote carting parameter is being used, look at the value of the name attribute. This denotes the parameter. In this case itemid. The itemid parameter is used to look up an existing product in your catalog. The type attribute is set to hidden, this means it is just extra information for the store, and the customer need not see it. By looking at the value attribute, you can determine the value for the specified parameter. In this case, we are saying the itemid of the product is -1. The id of a product cannot be negative, so this must mean to create a “phantom item.” If you intend to create a phantom item, it is not required that you specify an itemid at all.

<input name="itemnr" type="hidden" value="SKU"/>

If no itemid is presented, the itemnr parameter (which references the item number field) will attempt to look up the product based on that field instead and then do 1 of 2 things: if a matching item is found, it will use that item. If no matching item is found, a phantom item will be created.

Quantity:
<select name="qty">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

This html will create a drop down box with a label that says 'Quantity'. Note that the name is in one html element (the <select> tag) while each child element (the <option> tag) has its own value. This will then take whichever dropdown option is chosen and pass it as the value for the qty (quantity) parameter.

This form example does not use all of the properties available, but does support them. For a full list of parameters read our KnowledgeCenter Article on Embedded Commerce Parameters. Using the method shown above of using the parameter name in the name attribute and passing the proper value in the value attribute, any of the parameters can be used with the form method.