In the second tutorial of the eCart coupon series, you will learn how to create a static coupon on your website that allows customers to apply a discount by entering a code into a text field on your shopping cart. But instead of discounting the subtotal of the purchase as shown in the first tutorial of the series, this tutorial demonstrates how to apply the discount to a specific item for sale on your website. You will also find a comparison of coupon codes to coupon links from a marketing standpoint.
You'll find a linked index including an overview of each tutorial belonging to the eCart coupon series at the bottom of this page.
- Dreamweaver CS4 or higher.
- eCart 5 or higher installed and activated in Dreamweaver.
- Site defined in Dreamweaver. For assistance, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+.
- Product and admin pages built with DataAssist. For more assistance, view tutorials: Create a product catalog I and Create a product catalog II.
- PHP page with an eCart shopping cart. If you do not have one, view these tutorials to create the eCart object, add-to-cart button, and responsive shopping cart.
eCart makes it possible to offer coupon code discounts on eCommerce websites. In this 3-step tutorial, we demonstrate how to offer a 25% discount for a particular product by applying a coupon code in your shopping cart.
- Add a text field and submit button to your shopping cart.
- Set the session value to hold the coupon code.
- Create a discount rule in the eCart object to apply the coupon code to a specific product.
In the first step, you will add a text field and submit button to your shopping cart where users will enter and submit the coupon code related to a specific product that you sell on your website.
- Open the eCart shopping cart page in Dreamweaver.
- Position the cursor in the shopping cart page where the coupon form should appear.
- Go to Insert > Forms > Text to enter a text field.
- In the Properties window, enter txtPromoCode in the name field.
- Now go to Insert > Forms > Button to add a submit button.
- Create a new button label by substituting Apply Discount (or other verbiage of your choosing) for Button in the value tag.
- Add Coupon Code: before the text field to create a label.
- Align the label, text field, and submit button as desired.
In this tutorial, the alignment was created with an inline div tag. If applicable, a class from your site's cascading style sheet (CSS) could be applied to the selection as well.
- Click OK.
- Save your shopping cart page (Ctrl or Cmd + S).
- Test the placement of the text field and submit button by first opening your product details page in your browser (File > Preview in Browser) so that you can view your shopping cart
In the second step, you will set a session variable to contain the coupon code that will be entered in the text field on the shopping cart.
- In Dreamweaver, open the Server Behaviors panel (Window > Server Behaviors) and click the plus button.
- Choose eCart > General > Set Session Value to set the text field created in the shopping cart page to both the Trigger and the Value fields.
- In the Set Session Value dialog box, click the Trigger lightning bolt.
- When the Dynamic Data dialog appears, expand the form entry.
- Select txtPromoCode.
- Click OK.
- In the Session name field, enter PromoCode.
- Click the Value lightning bolt.
- Expand the form entry.
- When the Dynamic Data dialog appears, select txtPromoCode once again.
- Click OK.
In the third and final step, you'll create a discount rule in the eCart object to apply the coupon code to a specific product. in this tutorial, the discount rule will be applied to a light cotton t-shirt made with 100% real cotton.
- In Dreamweaver, go to WebAssist > eCart > eCart Object.
- Make sure the correct cart is chosen. In this tutorial, the cart is eCart1.
- Click the pencil icon.
- When the eCart object window opens, you will be in the General tab and should see the correct cart name.
- Click the Discounts tab.
- In the Discounts tab, click the plus icon to add a promotion.
- When the eCart Merchandising Rule dialog box opens, enter 25% Discount on Cotton T-Shirts (or another name of your choosing) in the Name field.
- Click the plus button to set the triggers.
- The first condition to be added ensures that at least one item will be in the shopping cart before applying the discount.
- Select Total number of unique items in the cart from the Condition list.
- Choose the greater than symbol (>) and leave 0 in the value field.
- To add the second condition, click the plus button once again.
- Choose AND from the Separator list.
- Choose Based on session variable value from the Condition list.
- Enter PromoCode for the name of the session variable.
- Select the equals symbol (=).
- Enter Cotton in the value field.
- Now you'll set the calculations for the discount you wish to offer.
In this tutorial, we are setting the discount to 25%.
- Select Based on items with a specific value from the Calculation list.
- For Total of, choose TotalPrice.
- After where, choose ID.
- For value, choose 1, then times, and lastly, enter the percentage of the discount, 0.25.
"1" represents the ID set in the bindings for an Add To Cart button. In this tutorial, our cotton shirts are ID 1. Your ID may differ.
- Click OK.
The eCart Object can store multiple discounts. "Promotional Discount" was created during the first tutorial of the eCart coupon series to apply a 10% discount to total purchases. "25% Discount on Cotton T-Shirts" was created during this tutorial to apply a 25% discount to a cotton t-shirt.
- Click OK once more and Finish to close the eCart object window.
- Save your shopping cart page (Ctrl or Cmd + S).
- Test your coupon code by first opening your product details page in your browser (File > Preview in Browser) so that you can add the item you wish to discount into your shopping cart.
- Enter Cotton in the coupon code text field and press Apply Discount to apply the 25% discount to the cotton t-shirt.
- To further test the discount rule, add another item that you sell to your shopping cart
- Enter Cotton in the coupon code text field and press Apply Discount.
- The discount should only be applied to the cotton t-shirt, one or more.
Before we go any further, let's take a moment to discuss coupons from a marketing standpoint. As demonstrated in the first and second tutorials of the eCart coupon series, static coupon codes require customers to enter a code while in the shopping cart to receive a discount.
At the bottom of this page, you will find descriptions and links to each of the tutorials in the eCart coupon series.
To obtain the code, they will need to leave your website to preform an online search on coupon sites or wherever you submit codes. However, if customers cannot find a code, they may feel deprived of the best price. Even worse, the chance of customers becoming distracted as they browse online for coupons and never returning to your site to complete the sale is a distinct possibility. So from a marketing standpoint, offering a coupon code has an obvious downside.
Of course, this does not mean that coupon codes lack merit, as evidenced by the large number of companies that continue to use them to increase sales. But in many cases, the preferable static coupon from a marketing standpoint is a link. By placing links on web pages, emails, and newsletters, customers are led directly to a page on your website where they select a product to purchase. When the shopping cart page opens, the discount is automatically applied. This eliminates the distraction of hunting online for codes and helps retain customers on your site, potentially increasing sales.
Static eCart coupon links will be demonstrated in detail in the next tutorial.
Proceed to Static eCart Coupon Link, the next tutorial in the eCart coupon series, to learn about static coupon links that will lead customers directly to your website where the discount will be applied.
eCart coupon series: An overview of five in-depth tutorials that demonstrate how to create coupons to discount products offered for sale on your website.
Static eCart coupon code I: In the first tutorial of the coupon series, you will learn how to create a coupon on your website that allows customers to apply a discount to the total purchase by entering a code into a text field on the shopping cart.
Static eCart coupon code II: In the second tutorial of the coupon series, you will learn how to create a static coupon on your website that allows customers to apply a discount to specific items by entering a code into a text field on your shopping cart.
Static eCart coupon link: In the third tutorial of the eCart coupon series, you will learn how to offer discounts on your products by placing links on web pages, emails, and newsletters. The link will lead customers directly to your website, for example, a product detail page. Once the product is added to your shopping cart, the discount will be automatically applied.
Database-driven eCart coupon I: In the fourth tutorial of the eCart coupon series, you will learn how to create database-driven (dynamic) coupons that allow customers to apply a discount based on a specific dollar amount to a particular item or the total products they purchase on your website. (Coming soon.)
Database-driven eCart coupon II: In the fifth tutorial of the eCart coupon series, you will learn how to create database-driven (dynamic) coupons that allow customers to apply a discount based on a percentage to a particular item or the total products they purchase on your website. (Coming soon.)