Product Customization: Cart Panel Template

WebStore
1

Product Customization Index
##The Default Cart Panel Template
The cart panel in an un-modified store has a default template that should look like this:

{ifThereAre basketitems} 
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    {forEach basketitem}
      {* We don't show tagalong items when customizing products *}
      {if ((pageproperty['productcustomization']) && (basketitem['type'] eq 'tagalong'))}
      {else}
      <tr>
        <td align="right" valign="top">
          <span class="text-shopping">{basketitem['amount']}&nbsp;{basketitem['product_unitofmeasure']}&nbsp;x&nbsp;</span>
        </td>
        <td valign="top" width="100%">
          <a class="text-shopping-link" href="{basketitem['product_link']}">{basketitem['product_name']}</a>
        </td>
      </tr>
      {endIf}
    {endForEach}
    </table>

    {if ((pageproperty['pageid'] ne 'checkoutstep2') && (pageproperty['pageid'] ne 'ordercomplete'))}
    <br/>
    <table cellpadding="0" cellspacing="0" border="0" align="center">
      <tr>
        <td>
          <a href="{BASE_PATH}go/checkout/" class="button-big" style="" id="update-button" onclick="_gaq.push(['_link', this.href]);"><span class="button-left"></span><span class="button-text">{getLanguageString("BTN_GO_TO_CHECKOUT")}</span><span class="button-right"></span></a>
        </td>
      </tr>
    </table>
    {endIf}
    
    {* Product Customization Code START *}
    {* Must be inserted just before the ifNone NitroScipt command *}
    {* Make product properties available to product customization js *}
      {if (pageproperty['pageid'] eq 'product')}
        {if (pageproperty['productcustomization'])}
          {forEach basketitem}
            {if (basketitem['comment'])}
              <script>aryCustomizedFields[{basketitem['product_id']}] = {basketitem['comment']};</script>
            {endIf}
          {endForEach}
        {endIf}        
      {endIf}
    {* Product Customization Code END *}

    {ifNone}
      {getLanguageString("BASKET_ITEM_COUNT",0)}
    {endIfNone}
  
  {endIfThereAre}
  </td>
</tr>

The relevant part of the code is delineated by {* Product Customization Code START | END *}.

###What the Cart Does
The cart is usually used to present a mini-basket view of the items that the shopper has added to their shopping cart. Often this is changed to simply present the number of items a shopper has in their cart.

###What the Code Does
The product customization code takes the customization information (the details the shopper has asked for) and makes it available to a javascript array called aryCustomizedFields on product pages. This means that if a shopper has already customized an item, their customization will be visible to them when they return to the product page.

The second thing done on the virgin cart panel is to not display Customization tag along products in the basket when product customization is switched on. This is because it rarely makes sense for the shopper to see 70 x Customization in their shopping cart.

###Amending an Existing Store
The large block of code delineated by {* Product Customization Code START | END *} needs to be inserted directly before the code {ifNone} {getLanguageString(“BASKET_ITEM_COUNT”,0)} {endIfNone}.

In the centre of the loop over the basket items {forEach basketitem} is and if statement. This code skips the tagalong item when product customization is enabled. This means that the shopper won’t see ‘Customization’ in their shopping cart.

1 Like