Product Customization. Basket Panel

WebStore
1

Product Customization Index
###What the Basket Panel Template is for
The basket panel is used when the shopper views their cart. It is this panel which displays the items in the cart, how many of them have been added to the cart, their cost, tax, shipping and total that the shopper will be paying for the cart as a whole.

When product customization is active and a product has been customized, the shopper will also see any customization they have made to a product in a shortened text version.

The cost of any product customization is displayed as a total for all the customization of a product. This is not broken down.

###What a shopper can do on the Basket Panel Template
As well as displaying this information to the user, the cart page allows the shopper to modify the number of items in their cart or remove an item from their cart.

When a shopper buys more than one of an item, we allow them to modify the amount of that item using a drop down menu on the basket page.

When the item is customized we cannot do this on the basket page, we require the shopper to do this on the product page. To enable this we replace the drop-down menu with a static number (of the quantity of this item the shopper has customized) and a link back to the product page where they can modify their customization.

We also display a shortened version of the customization the shopper has made to their items.

###Sample Basket Panel

###Amending an Existing Store
Two separate parts of the template need modified:

  • The first part is where we loop over the basketItem. Here, the usual drop down menu with quantity, is replaced with a static quanity and 2 links, the modify item link and the delete item link.
  • This is the new code, replace the existing
    <td class="basketlist-col3" align="right">{ns:printProductQuantity}</td>
    with the following:
  {* Section Necessary for Product Customization *}
  {if (basketitem['product_customized'])}
    <td class="basketlist-col3" align="middle">
      <table>
        <tr>
          <td align="middle">{basketitem['amount']}</td>
        </tr>
        <tr>
          <td align="middle">
            <a href="{basketitem['product_link']}" class="button-big">
              <span class="button-left"></span>
              <span class="button-text">Modify item</span>
              <span class="button-right"></span>
            </a>
          </td>
        </tr>
        <tr>
          <td align="middle">
            <a href="javascript:createForm('{basketitem['product_id']}');submitForm('Update Basket');" class="button-big" id="removeItemButton">
              <span class="button-left"></span>
              <span class="button-text">Remove item</span>
              <span class="button-right"></span>
            </a>
          </td>
        </tr>
      </table>
    </td>
  {else}
    <td class="basketlist-col3" align="right">{ns:printProductQuantity}</td>
  {endIf}
  • The second part is in the {nsIf:hasTagAlongItem} section where we display information pertaining to the customization. This part of the code displays a shortened version of the customization for the customer to be able to check their product customization.
  • This is new version of the {nsIf:hasTagAlongItem} section:

{nsIf:hasTagAlongItem}
{forevery 2}

{else}

{endForEvery}

{if (pageproperty['listsenabled'] || pageproperty['registriesenabled'])}
    <td class="basketlist-col0" nowrap="nowrap">&nbsp;</td>
{endIf}

    <td nowrap="nowrap" class="basketlist-col1">&nbsp;</td>

{* Section Necessary for Product Customization *}
{if (basketitem['product_customized'])}
    <td class="basketlist-col2">
      <p class="small-text">
        {tagalongitem['product_name']}
        {basketitem['comment']}
      </p>
    </td>
    <td class="basketlist-col3" align="middle"></td>
    <td class="basketlist-col4" align="right" nowrap="nowrap"></td>
    <td class="basketlist-col5" align="right" nowrap="nowrap">{formatPrice(tagalongitem['total'])}</td>
{else}
    <td class="basketlist-col2">
      <p class="small-text">
        {tagalongitem['product_name']}
      </p>
    </td>
    <td class="basketlist-col3">{tagalongitem['amount']}</td>
    <td class="basketlist-col4" align="right" nowrap="nowrap">{getProductPrice(tagalongitem)}</td>
    <td class="basketlist-col5" align="right" nowrap="nowrap">{formatPrice(tagalongitem['total'])}</td>
{endIf}
  </tr>

{/nsIf:hasTagAlongItem}