Modular Merchant: Shopping Cart Software

Shopping Cart Software Service

Advanced SearchAdvanced Search RegisterRegister ProfileProfile FAQFAQ MemberlistMemberlist Log inLog in
Add Gift Wrap Options to your Products and Storefront
Post new topic   Reply to topic
Modular Merchant Forum Index -> Design: Templates & QuickCode Tags
Author Message

Mail Bag


Answering Your Questions Since... 9:30am

Joined: 28 Aug 2005
Posts: 113


PostPosted: Nov 28, 2007 05:12pm    Post subject: Add Gift Wrap Options to your Products and Storefront Reply with quote

Quote:
We would like to activate the gift wrap option for the upcoming holidays season. How would the customer choose for a product to be gift wrapped? And can it be just for an individual product? Or for an order with many products? Or maybe both? Do we have to activate some setting? Or a module for this? Please provide us a link or some information about this, thank you!

Excellent questions. A great place to find answers about the store's Gift Wrap options is right here in this forum post. Below is a tutorial on adding gift wrap options to selected products in your store.
Prerequisites:
This tutorial assumes the reader has the following:
  • A basic understanding of using the Modular Merchant store's administration area; specifically the Product Editor screen.
  • A basic understanding of editing a webpage, either by editing the HTML source code or by using an HTML editor like Dreamweaver.
A tutorial on these prerequisites is outside the scope of this guide. However, if you require instruction on these items, many free resources and tutorials are available on the Internet, and a variety of books are available in the computer section of your local bookstore.
What are the steps to adding Gift Wrap options to a product?

1. Assign gift wrap rules to selected products.
2. Update your the HTML templates for your store's shopping area to display Gift Wrap options in the customer's basket.
3. Update your the HTML templates for your store's receipt page to display any gift wrap information.

If the steps listed above sound overwhelming, don't fret! Each step is discussed in detail below to help you out...


1. Assign gift wrap rules to selected products.

In your store's administration area, select the product you would like to add gift wrap options to. Select the product on the Search Products page. (See Figure 1.)


Figure 1: Edit a product at: [Navigation Menu > Products > Search Products]

On the Search Products page, locate the desired product, and click the "edit" button to open the product in the Product Editor. The Product Editor screen has several tabs. Select the Shipping & Fees tab to load the screen that includes the gift wrap options. (See Figure 2.)


Figure 2: The Shipping & Fees tab includes the gift wrap options.

On the Shipping & Fees screen is a selection of tools for enabling gift wrap options for the product. (See Figure 3.)


Figure 3: Allow the gift wrap option for a product, and add an optional additional gift wrapping fee.

The options in this section include the Yes checkbox. If this option is selected, then the product will be eligible for gift wrapping. This will allow the customer to select a checkbox in your storefront to have this product gift wrapped. (We'll come back to this checkbox in step 2.)

There is also a field to record an optional additional charge for gift wrapping. If a value is entered in this field, then a customer that selects gift wrapping for a product will be charged this amount for every unit of the product they buy. For example, if $2.11 is entered in this field, then the customer would be charged $4.22 in gift wrapping fees if they purchased two units of the product. If this field is left blank, then the customer will not be charged any additional fees if they select to have the product gift wrapped.

Save the product to record your changes.


2. Update your the HTML templates for your store's shopping area to display Gift Wrap options in the customer's basket.

In step 1 the product was updated to enable gift wrapping as an option. The next step is to update your storefront to display the gift wrap options to your customer. This is done by adding a few QuickCode Tags to your store's HTML templates.

What's a QuickCode Tag?
A QuickCode Tag is a pseudo HTML tag developed by Modular Merchant, for use in your store templates. A QuickCode Tag is formatted like this: {SAMPLE-QUICKCODE-TAG}. When viewed in a web browser,
QuickCode Tags will be translated into the appropriate content. For example, {COMPANY-NAME} will display as your company's name. Many QuickCode Tags are available for displaying such things as product prices, customer information, the contents of the shopping basket, etc.

The QuickCode Tags used to display gift wrap options are designed to be used on any page of your storefront that displays the contents of the customer's shopping basket. These tags are:

{BASKET-GIFT-WRAP-CHECKBOX}
This QuickCode Tag will be displayed as a checkbox the customer can select to request gift wrapping for a specific product. (See item A in Figure 4.) If a product does not have gift wrap options enabled, then nothing will be displayed. In Figure 4 below, the Sixteen-Ton Paperweight product has gift wrapping options enabled, and the ZoomEx Digital Camera product does not.

{BASKET-GIFT-WRAP-INFO}
This QuickCode Tag will display information about the gift wrapping option for that product, including the per-unit price for gift wrapping. (See item B in Figure 4.) If a product does not have gift wrap options enabled, then nothing will be displayed.

{BASKET-GIFT-WRAP-FEES}
This QuickCode Tag is used to display the total gift wrapping fees for all products in the customer's basket. (See item C in Figure 4.) By default, this value will always be displayed, even if it is zero. However, advanced users can hide this content — or any other content — by placing it between to other QuickCode Tags: {BASKET-IF-GIFT-WRAP-BEGIN} and {BASKET-IF-GIFT-WRAP-END}. For example, if line C in Figure 4 below was placed between these two tags, then the entire line would only be displayed if the gift wrapping fees associated with the customer's order were greater than zero.


Figure 4: Various QuickCode Tags can be used in the "My Basket" area in your storefront to display gift wrapping fees and other information.

The use of this set of QuickCode Tags will give the customer the option to select gift wrapping for any products that have it enabled, and display any fees associated with gift wrapping.

Source Code Example:
The source HTML code for a "My Basket" table that includes gift wrap QuickCode Tags may look something like the example below. This example is a simplified derivative of the "My Basket" table from the "default" Design Package with the gift wrap QuickCode Tags added in the appropriate locations.

Code:
<table width="100%" border="0" cellpadding="3" cellspacing="1" class="mediumbox">
   <tr align="center">
      <td colspan="5" class="headline">My Basket... </td>
   </tr>
   <tr align="center" class="darkbox">
      <td width="1%" class="lighttext"><b>Quantity</b></td>
      <td width="96%" class="lighttext"><b>Product Name</b></td>
      <td width="1%" class="lighttext"><b>Unit Price </b></td>
      <td width="1%" class="lighttext"><b>Line Price </b></td>
      <td width="1%" class="lighttext"><b>Remove</b></td>
   </tr>
   {BASKET-PRODUCT-BLOCK-BEGIN}
   <tr bgcolor="#FFFFFF">
      <td align="right">{BASKET-QUANTITY-FIELD}</td>
      <td bgcolor="#FFFFFF"><p>{BASKET-PRODUCT-IMAGE}<a href="{BASKET-PRODUCT-URL}" class="darktext">{BASKET-PRODUCT-NAME}</a><br>{BASKET-PRODUCT-MODIFIERS}<br>{BASKET-SHIP-ADDRESS-MENU}<br><b>Select to have this item Gift Wrapped: </b>{BASKET-GIFT-WRAP-CHECKBOX} {BASKET-GIFT-WRAP-INFO}</p></td>
      <td align="right">{BASKET-UNIT-PRICE}</td>
      <td align="right">{BASKET-LINE-PRICE}</td>
      <td bgcolor="#FFFFFF"><a href="{BASKET-REMOVE-ITEM-URL}" class="darktext">Remove</a></td>
   </tr>
   <tr bgcolor="#FFFFFF">
      <td colspan="5" bgcolor="#FFFFFF"><hr size="1"></td>
   </tr>
   {BASKET-PRODUCT-BLOCK-END}
   {BASKET-FEES-BLOCK-BEGIN}
   <tr>
      <td colspan="3" align="right"><b>{BASKET-SUBTOTAL-TITLE}</b></td>
      <td align="right"><b>{BASKET-SUBTOTAL}</b></td>
      <td> </td>
   </tr>
   {BASKET-IF-GIFT-WRAP-BEGIN}
   <tr bgcolor="#FFFFFF">
      <td colspan="3" align="right" bgcolor="#FFFFFF">{BASKET-GIFT-WRAP-NAME}</td>
      <td align="right" bgcolor="#FFFFFF">{BASKET-GIFT-WRAP-FEES}</td>
      <td> </td>
   </tr>
   {BASKET-IF-GIFT-WRAP-END}
   <tr bgcolor="#FFFFFF">
      <td colspan="3" align="right" bgcolor="#FFFFFF"><b>Taxes: </b>{BASKET-ALL-TAX-NAME}</td>
      <td align="right" bgcolor="#FFFFFF">{BASKET-ALL-TAX-FEES}</td>
      <td> </td>
   </tr>
   {BASKET-IF-SHIPPING-BEGIN}
   <tr bgcolor="#FFFFFF">
      <td colspan="3" align="right" bgcolor="#FFFFFF">{BASKET-SHIPPING-NAME}</td>
      <td align="right" bgcolor="#FFFFFF">{BASKET-SHIPPING-FEES}</td>
      <td> </td>
   </tr>
   {BASKET-IF-SHIPPING-END}
   {BASKET-FEES-BLOCK-END}
   {BASKET-IF-COUPON-BEGIN}
   <tr bgcolor="#FFFFFF">
      <td colspan="3" align="right" bgcolor="#FFFFFF"><font color="#FF0000">{BASKET-COUPON-CODES}</font></td>
      <td align="right" bgcolor="#FFFFFF"><font color="#FF0000">{BASKET-COUPON-DISCOUNT}</font></td>
      <td></td>
   </tr>
   {BASKET-IF-COUPON-END}
   <tr bgcolor="#FFFFFF">
      <td colspan="2" bgcolor="#FFFFFF"><input></td><td align="right" class="lightbox"><b>Total:</b></td>
      <td align="right" class="lightbox"><b>{BASKET-TOTAL}</b></td>
      <td bgcolor="#FFFFFF"></td>
   </tr>
</table>


3. Update your the HTML templates for your store's receipt page to display any gift wrap information.

The last step is to add the gift wrap information to the receipt the customer receives after they have completed their order.

{RECEIPT-PRODUCT-IS-GIFT-WRAPPED}
This QuickCode Tag will be display "Yes" if gift wrapping was selected for the specified product in the receipt. Otherwise, "No" will be displayed.

{RECEIPT-GIFT-WRAP-FEES}
This QuickCode Tag is used to display the total gift wrapping fees for all products in the customer's order.

Source Code Example:
The source HTML code for the table containing the order information used on in a store's receipt web page. This example is a simplified derivative taken from the "default" Design Package with the gift wrap QuickCode Tags added in the appropriate locations.

Code:
<table width="100%" border="0" cellpadding="5" cellspacing="1">
   <tr>
      <td width="1%" align="center" class="darkbox">[color=blue]QTY[/color]</td>
      <td width="96%" align="center" class="darkbox">[color=blue]NAME[/color]</td>
      <td width="1%" align="center" class="darkbox">[color=blue]SKU[/color]</td>
      <td width="1%" align="center" class="darkbox">[color=blue]UNIT[/color]</td>
      <td width="1%" align="center" class="darkbox">[color=blue]LINE[/color]</td>
   </tr>
   {RECEIPT-PRODUCT-BLOCK-BEGIN}
   <tr>
      <td align="right" class="mediumbox">{RECEIPT-PRODUCT-QUANTITY}</td>
      <td bgcolor="#FFFFFF">{RECEIPT-PRODUCT-NAME}<BR> {RECEIPT-PRODUCT-MODS}<br>Gift Wrapped? {RECEIPT-PRODUCT-IS-GIFT-WRAPPED}</td>
      <td class="mediumbox">{RECEIPT-PRODUCT-SKU}</td>
      <td align="right" bgcolor="#FFFFFF">{RECEIPT-PRODUCT-UNIT-PRICE}</td>
      <td align="right" class="mediumbox">{RECEIPT-PRODUCT-LINE-PRICE}</td>
   </tr>
   {RECEIPT-PRODUCT-BLOCK-END}
   <tr>
      <td colspan="4" align="right" class="lightbox"><b>{RECEIPT-SHIPPING-METHOD}</b></td>
      <td align="right" bgcolor="#FFFFFF">{RECEIPT-SHIPPING-FEES}</td>
   </tr>
   <tr>
      <td colspan="4" align="right" class="lightbox"><b>Gift Wrap Fees </b></td>
      <td align="right" bgcolor="#FFFFFF">{RECEIPT-GIFT-WRAP-FEES}</td>
   </tr>
   <tr>
      <td colspan="4" align="right" class="lightbox"><b>Taxes & Fees </b></td>
      <td align="right" bgcolor="#FFFFFF">{RECEIPT-TAX-TOTAL} </td>
   </tr>
   <tr>
      <td colspan="4" align="right" class="lightbox"><b>Order Total: </b></td>
      <td align="right" bgcolor="#FFFFFF">{RECEIPT-ORDER-TOTAL}</td>
   </tr>
</table>


And there you go! These instructions will allow you to add gift wrap options to products, display this information in the customer's basket, and include it for review in their receipt.
_________________
Modular Merchant Mail Bag
Answering your questions, queries and puzzlers.
Modular Merchant shopping cart software, website hosting, and custom programming.
Display posts from previous:   
Post new topic   Reply to topic    Modular Merchant Forum Index -> Design: Templates & QuickCode Tags All times are GMT - 7 Hours
Page 1 of 1

 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group