Shopping Cart Page Details

The Shopping Cart page is where the contents of the customer's shopping cart is displayed.

Overview

The Cart page is a dual-purpose page in that it can display an empty shopping cart and a shopping cart that has products. You can display both views by using the same content template, or you can use one content template to show the full cart and another to show the empty cart.

The following actions can be performed on the Cart page:

Sample Page

Cart

The Content Template code

<h1>Shopping Cart</h1>
<form action="{#cart.updateForm.tag.action}" method="post" id="update-form">
<a href="{#cart.urls.checkout}" class="checkoutLink"><img src="/layout/images/documentation/btn-checkout.gif" width="218" height="44" alt="Secure Checkout" /></a>
<p style="float: left; margin-top: 20px;"><a href="{#cart.urls.continueShopping}">Continue shopping</a></p> 
<table cellspacing="0" id="cartTbl">
   <thead>
      <tr class="headings">
         <th class="link">&nbsp;</td>
         <th class="product">Item</td>
         <th class="price">Price</td>
         <th class="quantity">Quantity</td>
         <th class="price">Total</td>
      </tr>
   </thead>
   <tbody>
   {loop items="#cart.products" value="product"}
      <tr>
         <td class="link"><label>{#product.fields.remove.tag}remove</label></td>
         <td class="product"><div class="product-img"><a href="{#product.url}">{#product.primaryImages.thumb.tag}</a></div><div class="product-name"><a href="{#product.url}">{#product.productName}</a>
            {loop items="#product.options" value="option"}
               <br />{#option.label}: {#option.value}
            {/loop}
         </td>
         <td class="price">{#product.currentPrice.value}</td>
         <td class="quantity">{#product.fields.quantity.tag}</td>
         <td class="price">{#product.totalPrice.value}</td>
      </tr>
   {/loop} 
      <tr class="totals">
         <td colspan="2"><a href="{#cart.urls.continueShopping}">Continue shopping</a></td>
         <td class="quantity-span" colspan="2">Subtotal</td>
         <td class="price">{#cart.cartTotal.value}</td>
      </tr>            
   </tbody>
</table>
<input type="image" name="submit" id="update-cart-btn" src="/layout/images/documentation/btn-update-cart.gif" />
{#cart.updateForm.tag.close}
<a href="{#cart.urls.checkout}" class="checkoutLink"><strong><img src="/layout/images/documentation/btn-checkout.gif" width="218" height="44" alt="Secure Checkout" /></strong></a>

Go Back to a Previously Viewed Page

The Continue Shopping link can be configured to link to one of the following pages:

  • last viewed category
  • last viewed product
  • store home page
  • website home page
  • a custom URL

If any of the above values cannot be set, then the Continue Shopping link will be set to the store home page.

Example

The following is how you can create a "Continue Shopping" link.

<a href="{#cart.urls.continueShopping}">Continue shopping</a>

Link to Checkout Pages

From the Cart page you can link to the Checkout pages. You do not need to submit a form post, you can simply use the {#cart.urls.checkout} tag as the "href" for a regular link.

Remove Items and Update Item Quantities

You can provide a checkbox next to each item to be used to delete the item from the cart. Use the {#product.fields.remove.tag} tag. You can also provide a text box to enable the customer to update the quantities for each product item. Use the {#product.fields.quantity.tag} tag.

See the above graphic and code sample.

The "remove item" checkboxes and the "update quantity" textboxes will need to be surrounded by the form tags for the Update form: {#cart.updateForm}, or at least have the {#cart.updateForm.tag.action} value as the form action. The form will need to have a "method" of "post".

Example:

Option 1: Use the {#cart.updateForm.tag.open} and {#cart.updateForm.tag.close} tags to output the opening and closing form tags.

Option 2: Build your own form tags:

<form action="{#cart.updateForm.tag.action}" method="post">
  CART CONTENTS HERE
</form>

Form Action

The form action is typically /store/cart/update. The only times it would be different is if you had created another instance of the Store app or modified the URL for the store app to something other than "store". (You can only do that on Pro versions of Branch).

Empty the Cart

You can also provide a way to allow the customer to empty their entire cart all at once. The above sample cart graphic doesn't show this, but below we'll give some code samples.

Code Example

The code below would be placed somewhere on the Cart page in the Shopping Cart content template.

{#cart.emptyForm.tag.open}
  <input type="submit" name="s" value="Empty Cart" />
{#cart.emptyForm.tag.close}

 The above code will output a form around a submit button like below:

Clicking the submit button would submit the form and reload the Cart page showing the "empty cart" content.

Form Action

The form action is typically /store/cart/empty. The only times it would be different is if you had created another instance of the Store app or modified the URL for the store app to something other than "store". (You can only do that on Pro versions of Branch).

AJAX Forms

The Update Form and Empty Form can both be submitted as an AJAX post.  Below is an example of some Javascript using the jQuery library to submit the Update form for the above sample.

<script type="text/javascript">
  $(function() {
    $('#update-form').submit(function() {
      $.post(this.action, null, function(data) {
        if (data.success == true) {
          alert('Cart Emptied');
        } else {
          alert('Cart NOT Emptied');
        }
      }, 'json');
    });
  });
</script>

Default Response

The AJAX post will by default return a small JSON string.

{success=true, cartUrl='/store/cart'}

Response Values

success: Whether or not the action was successful. Possible values: true or false.

cartUrl: The URL to the shopping cart.

Return the Cart API HTML Content

You can choose to return the contents of the Shopping Cart API instead of the default JSON response. To do that you would add a couple of parameters to the URL.

Parameters

response: Tells the response format for the AJAX post. Values: 'api' or 'json'.
You don't need to set a value if expecting the JSON response. You would only need to set the 'json' value if the request wouldn't be interpreted as an AJAX request, such as in a Flash application.

templateId: The numeric ID of the Shopping Cart content template used to build the HTML response.

Example

<script type="text/javascript">
  $(function() {
    $('#update-form').submit(function() {
      $.post(this.action + '?response=api&templateId=7', null, function(data) {
        $('#container').html(data);
      });
    });
  });
</script>

Updating the Cart From Another Page

You can submit the AJAX requests to update or empty the cart from a page other than the Cart page. Unless you are using the Cart API, you would need to hard-code the post URL instead of using the {#cart.emptyForm.tag.action} tag.

Below is an example of emptying the cart when a link is clicked. In this example the JSON response will be returned.

<script type="text/javascript">
  $(function() {
    $('#empty').click(function() {
      $.post('/store/cart/empty', null, function(data) {
        if (data.success == true) {
          alert('Cart Emptied');
        } else {
          alert('Cart NOT Emptied');
        }
      }, 'json');
    });
  });
</script>

<p><a href="#" id="empty">Empty Cart</a></p>

APIs

There are two APIs for the cart. One retrieves the cart contents and one empties the shopping cart.