In the first 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 to their total purchase by entering a code into a text field on your shopping cart. Various options are presented such as discount rules that limit the dates of promotions and/or minimum purchase amounts to obtain the discount.
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 10% discount for all items in the shopping cart by applying a coupon code based on various discount rules.
- 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 the total purchase.
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.
- 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 the total purchase amount.
- In Dreamweaver, go to WebAssist > eCart > eCart Object.
- In the eCart object window, make sure it is open to the correct shopping cart.
- Click the pencil icon to begin editing.
- Open the Discounts tab and click the plus icon.
- When the eCart Merchandising Rule dialog box opens, enter Promotional Discount (or another name of your choosing) in the Name field.
- Click the plus button to create the first of two conditions. The first condition makes sure there is at least one item in the shopping cart.
- 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 WebAssist in the value field.
- Now you'll set the calculation for the discount you wish to offer.
In this tutorial, we are setting the discount to 10% of the subtotal.
- Select Based on the cart subtotal from the Calculation list,
- Choose times from the Cart subtotal list and enter 0.10 in the value field.
- Click OK.
- Click OK once more and Finish to close the eCart Object window.
- Save your shopping cart page (Ctrl or Cmd + S).
- Prepare to test your coupon code by opening your product details page in your browser (File > Preview in Browser) and adding items to your shopping cart.
- On your shopping cart page, enter WebAssist in the coupon code text field and press Apply Discount to apply the 10% discount.
In addition to the two basic discount rules that we just created, there are other conditions that can be applied depending on your intent for the coupon being offered to your customer. Let's assume you do not want to offer the discount to your customers before they have reached a $200 minimum purchase threshold.
- To add this triggering condition, click the plus button once again.
- Choose AND from the Separator list.
- Choose Subtotal for the entire cart contents from the Condition list.
- Select the greater than or equals symbol (> =).
- Enter 200.00 in the value field.
- From the Calculation list, select Based on the cart subtotal.
- Choose times from the Cart subtotal list and enter 0.10 in the value field.
- Click OK, OK, and Finish.
- 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 items to your shopping cart.
- Enter WebAssist in the coupon code text field.
- Now the shopping cart will reflect the 10% discount once the $200 minimum required purchase is met.
Here's another scenario. If the coupon is to be offered during a holiday, you can pre-set the date for the coupon availability. For example, let's say the promotion is related to New Years but you do not want it launched until after Thanksgiving.
- To add this triggering condition, click the plus button once again.
- Choose AND from the Separator list.
- Choose If today is after a certain day from the Condition list.
- Enter the desired date in the text field.
You can also apply an ending date to your discount by choosing "If today is before a certain day" from the Condition list and entering the desired date in the text field.
- From the Calculation list, select Based on the cart subtotal.
- Choose times from the Cart subtotal list and enter 0.10 in the value field.
- Click OK, OK, and Finish.
- 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 items to your shopping cart.
- Enter WebAssist in the coupon code text field.
- If the coupon code is submitted on or before November 27, 2014, no discount will be applied to the purchase.
Proceed to Static eCart coupon code II, the next tutorial in the eCart coupon series, to learn about static coupon codes to be applied to individual items that you sell.
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.)