KnowledgeCenter/AmeriCommerce/Embedded Ecommerce/Remote Carting

Remote Carting with Forms

Support Agent
posted this on September 05, 2012 18:23

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

  1. To begin, navigate to the Embed Tools (AmeriCommerce: Catalog > Embed Tools, AmeriCart: Use the Embed Tools link in the left column navigation).
  2. From the Embed Tools dashboard, select the form method of adding items to the cart.

    Embed_Tools_Form_Option.png
  3. 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. 

    Embed_Tools_Product_Type.png
  4. 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:

    Embed_Tools_Product_Info.png
  5. 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.

    Embed_Tools_Qty_Select.png
  6. Once you enter all of the required fields plus any other fields you wish to include, press the Get Code button.

    Embed_Tools_Get_Code.png
  7. This form can be inserted into any html page.

    Embed_Tools_Code_Output.png
 

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.

Check out these other Articles on Remote Carting:

 

Comments

User photo
Blake Petersen
Meyer

We're working on a Single Sign On function and wanted to know if we could re-purpose this to direct to the user to specific page after logging in via the return attribute. Like, posting to the login.aspx instead of addtocart.aspx. 

We currently have the script set to grab the Customer SSO Key and redirect the user to that page but, unfortunately, this takes the user to the shopping cart details page, as opposed to the page where they signed in. We are looking for a way to log the user in but then redirect them back to the origin page.

Thanks!

October 04, 2012 17:35
User photo
Michal Robin
AmeriCommerce

Unfortunately, this would not work by posting any values to the login.aspx page. However, the login page does have support for the 'r' parameter in the querystring. The r parameter is used to direct a customer to a certain page after they submit the form on the page, in this case the login form. If you direct your customers to login.aspx?r=%2fstore%2fDefault.aspx it will redirect them to the home page after they log in. The value for the parameter can be changed to a relative or absolute path. (Note, you will want to encode the path for use in the url such as in the example I gave. This way /store/Default.aspx becomes %2fstore%2fDefault.aspx)

October 19, 2012 10:37