Macromedia DRUMBEAT 2000 ECOMMERCE EDITION User Manual
ma cromedia
DRUMBEAT™2000
eCOMMERCE
EDITION
Users Guide
®
Trademarks
Macromedia, the Macromedia logo, the Made With Macromedia logo, Authorware, Backstage, Director, Extreme 3D, and Fontographer
are registered trademarks, and Afterburner, AppletAce, Authorware Interactive Studio, Backstage, Backstage Designer, Backstage Desktop
Studio, Backstage Enterprise Studio, Backstage Internet Studio, DECK II, Director Multimedia Studio, Doc Around the Clock,
Drumbeat, Extreme 3D, Flash, FreeHand, FreeHand Graphics Studio, Lingo, Macromedia xRes, MAGIC, Power Applets, Priority
Access, SoundEdit, ShockRave, Shockmachine, Shockwave, Showcase, Tools to Power Your Ideas and Xtra are trademarks of
Macromedia, Inc. Other product names, logos, designs, titles, words or phrases mentioned within this publication may be trademarks,
servicemarks, or tradenames of Macromedia, Inc. or other entities and may be registered in certain jurisdictions.
Apple Disclaimer
APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE ENCLOSED
COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE.
THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES. THE ABOVE EXCLUSION MAY
NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC LEGAL RIGHTS. THERE MAY BE OTHER
RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO STATE.
Copyright © 1999 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or
converted to any electronic or machine-readable form in whole or in part without prior written approval of Macromedia, Inc.
Part Number ZBD10ES100
Acknowledgments
Writing: Natalie Calkins, Gayle Kidder, John Darwell, John Keller
First Edition: August 1999
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
2
CONTENTS
INTRODUCTION
Developing an e-Commerce Site. . . . . . . . . . . . . . . . . 7
Paths to e-Commerce Development . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
A Typical e-Commerce Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Up and Running Fast with eStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Secure Transactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
How to Use This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
System Requirements for eStore Builder . . . . . . . . . . . . . . . . . . . . . . . .10
Installing Drumbeat 2000 eStore Builder . . . . . . . . . . . . . . . . . . . . . . .11
Drumbeat Support Center . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
CHAPTER 1
Quick Store Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
What You Need to Complete Quick Store. . . . . . . . . . . . . . . . . . . . . . .13
Getting Familiar with Quick Store Starting Point . . . . . . . . . . . . . . . . .14
Step 1: Adding A Shopping Cart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
Managing the Cart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Step 2: Setting Up Login and Checkout . . . . . . . . . . . . . . . . . . . . . . . .47
Logging In . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47
Checking Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54
Step 3: Confirming the Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
CHAPTER 2
Setting Up Product Pages . . . . . . . . . . . . . . . . . . . . . . 79
Setting Site Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80
Setting Publishing Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80
Setting up a Data Source Name to the Products Database . . . . . . . . . . .81
Creating a Query. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
Creating Product Pages with DataForm Wizard . . . . . . . . . . . . . . . . . .83
3
CHAPTER 3
Adding and Updating the Shopping Cart . . . . . . . . 91
Configuring the Shopping Cart’s Content. . . . . . . . . . . . . . . . . . . . . . .92
Customizing the Data-Map. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .93
Adding the Shopping Cart SmartElement. . . . . . . . . . . . . . . . . . . . . .100
Adding an Add-to-Cart Button on the Shopping Page . . . . . . . . . . . .102
Displaying Shopping Cart Items on a Page . . . . . . . . . . . . . . . . . . . . .103
Updating the Shopping Cart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107
Testing and Trouble Shooting the Shopping Cart . . . . . . . . . . . . . . . .109
CHAPTER 4
Creating Checkout Pages . . . . . . . . . . . . . . . . . . . . . . 111
Creating Login Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Creating New and Update User Pages . . . . . . . . . . . . . . . . . . . . . . . . .115
Creating the Check Out Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
CHAPTER 5
Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121
Linking Using HTTPS Protocol . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122
Security and Databases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122
Authentication and Log In . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
ASP Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
Payment Processing SET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
4
CHAPTER 6
Payment Processing . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Recommended Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126
Online Transactions with CyberCash . . . . . . . . . . . . . . . . . . . . . . . . .126
Setting up CyberCash Test Account . . . . . . . . . . . . . . . . . . . . . . . . . .127
Adding the CyberCash SmartElement. . . . . . . . . . . . . . . . . . . . . . . . .128
Passing the OrderID to the CyberCash Object . . . . . . . . . . . . . . . . . .129
Setting Customer Credit Card Properties . . . . . . . . . . . . . . . . . . . . . .130
Submitting to CyberCash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .131
Storing the Transaction Results in Session Object . . . . . . . . . . . . . . . .132
Storing the Transaction Results in the Orders Recordset . . . . . . . . . . .133
Setting Up Offline Transactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134
Contents
CHAPTER 7
Merchandising . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Setting Up Shopping Cart Adjustments . . . . . . . . . . . . . . . . . . . . . . .136
Setting Up Adjustments for Total Weight, Quantity or Purchase. . . . .137
Ordering Page Interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
Adjustment Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140
CHAPTER 8
Customizing Quick Store . . . . . . . . . . . . . . . . . . . . . . 143
Customizing Templates and Media Assets . . . . . . . . . . . . . . . . . . . . . .144
Customizing the Quick Store Content . . . . . . . . . . . . . . . . . . . . . . . .148
CHAPTER 9
Shopping Cart Reference . . . . . . . . . . . . . . . . . . . . . 153
Shopping Cart SmartElement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153
Shopping Cart Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156
Shopping Cart Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162
Configuring Shopping Cart Content: The Data Map . . . . . . . . . . . . .163
Modifying the Data Map Content Table . . . . . . . . . . . . . . . . . . . . . . .165
Specifying Shopping Cart Column Order. . . . . . . . . . . . . . . . . . . . . .166
Shopping Cart Display SmartElement. . . . . . . . . . . . . . . . . . . . . . . . .166
Shopping Cart Interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169
Shopping Cart Miscellaneous Interactions. . . . . . . . . . . . . . . . . . . . . .187
Shopping Cart Adjustments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193
Shopping Cart Contracts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194
Inventory Control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .209
CHAPTER 10
CyberCash SmartElement Reference . . . . . . . . . . 215
CyberCash Features Supported . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216
Contracts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218
Shipping Calculations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221
Version 2.0 Contracts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222
Version 1.0 Contracts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228
Known Issues With Using UPS Shipping Contracts . . . . . . . . . . . . . .232
Sales Tax Interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
INDEX
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Contents
5
6
Contents
INTRODUCTION
Developing an e-Commerce Site
.............................................................................................................
The development cycle for each e-Commerce project is unique. If your
e-Commerce site has been completely thought out and documented in
specifications, you will be applying those requirements and figuring out how
you will meet them using DrumbeatTM. If you come with ideas and notions of an
e-Commerce site, you will, most likely, be investigating how the features of eStore
fit in with your vision. No matter what your starting point is, one aspect of
developing a site, any site, holds true. This aspect is that the more work and
time you spend on the project, the more intricate your site will become. The
natural progression is to start simple and then add more complex functionality
and usability.
Studies found that the most significant business goals in the decision to deploy eCommerce applications are to create or maintain a competitive edge, and to
improve customer satisfaction.
To create a competitive edge, the site must be functionally sophisticated, and to
improve customer satisfaction the site must be very user friendly. Luckily, these
two goals go hand and hand. As the complexity increases, the site developer, or
team, watches and carefully plans out the user experience.
If you are working with a corporate site, you most likely have guidelines that
include a corporate identity, conventions, and deployment systems. You are
probably working with a project team that includes a mix of people with different
talents. Together you complete the project using your knowledge and expertise,
ranging from Information Technology, writing, and graphic art skills.
On the other hand, you could be the cowboy out there all alone, trying to be
cross-functional and develop the site completely on your own. You might have
knowledge in some or all of the areas that are required to develop an e-Commerce
site, or you may want to out source the skills you lack.
No matter where you fit into this spectrum, eStore will help you complete the
project rapidly.
7
Paths to e-Commerce Development
For clarity’s sake, think of the development path as having four main aspects:
Identity
Delivery
Development
Maintenance
Identity defines the theme, colors, and conventions. Delivery defines the target
browser, server platform, security requirements, and, specifically for e-Commerce,
the payment method. Maintenance is the upkeep of the site. Of course, never
forget your audience. These are the people you want to visit and use the site. The
target audience is a parameter which affects every aspect of the path.
How you satisfy each aspect varies depending on the environment in which you
are working. For example, if you are developing a site in a corporate environment,
you probably already have the Identity, Delivery, and Maintenance requirements
laid out for you. Plus, if you are really lucky, you might even have the necessary
resources in place. On the other side of the spectrum, if you are building a
storefront for a small mom-and-pop company, you might need to consult with
your clients and work out these issues.
The document “Navigating an e-Commerce Site” contains a discussion of the
delivery and maintenance aspects of developing an e-Commerce site, with a rundown of questions you should answer before developing your site in Drumbeat.
The document is located in the Documents folder in the Drumbeat program files
directory. If you installed Drumbeat in the default location, you’ll find it at:
C:\Program Files\Drumbeat 2000\eStore Builder\Navigating.doc
There is so much to think about and do but so little time. So we want to give
you some advice on how to get up and running quickly with Drumbeat 2000
eStore Builder.
If you have never built a site in Drumbeat before, we strongly recommend that
you go through the Quick Start tutorial to become familiar with Drumbeat itself
first before attempting to build your e-Commerce site in Drumbeat.
Once you become familiar with Drumbeat, we recommend that you also go
through the Quick Store tutorial in the first section of this book. (This tutorial is
much shorter than Quick Start).
8
Introduction
A Typical e-Commerce Flow
The Quick Store tutorial and eStore instructional media, such as DrumNotes and
Starting Points follow this very typical e-commerce flow. However, you can create
any flow you want. As e-commerce matures, there will be better flows discovered
and planned. Bear in mind that eStore is as flexible as you make it.
The site visitor enters the site and browses or searches for product items.
1
The shopper sees a desired product and adds the item to the shopping cart.
2
When finished browsing and shopping, the customer decides to proceed to the
3
check-out pages. The check-out pages are on a secure server that uses Secure
Sockets Layer (SSL) protocol.
On one of the check-out pages, the shopper is given the opportunity to change
4
the shopping cart contents and then confirms the order.
5
Returning shoppers enter their user ID and password to retrieve their account
information: billing and shipping address, credit card numbers, email address,
etc. First-time customers are taken to a page where account information is
captured in an orders database.
The order is processed using an online or offline payment mechanism. The
6
order detail is entered into the database. At this point, the product items can be
deducted from inventory.
The customer is taken to a thank-you page which includes the order details and
7
delivery information.
Up and Running Fast with eStore
The easiest way to build an e-commerce site following this e-commerce flow and
one that is advisable if you are starting a new site from scratch, is to base the site
on the QuickStoreComplete Starting Point (pre-built site file). You can read how
to do this in the User’s Guide section of this book under Customizing the Quick
Store Starting Point. When you follow the Quick Store tutorial from beginning to
end, it guides you through the mechanics of the site and the set up of secure
transactions and other functions tailored to your unique development. No matter
if you are building a site from scratch or adding e-commerce capability to an
existing site and integrating it with an existing database schema, we recommend
going through Chapter 2 Adding and Updating the Shopping Cart where you
learn how to customize the Data-Map.
Secure Transactions
Security is very important to e-business. There are several ways you can ensure a
secure application.
Developing an e-Commerce Site
9
Encryption: Save the check-out pages on a secure server using Secure Sockets
Layer (SSL).
Database: Make sure the database is not saved in the wwwroot directory on the
server. Add a user name and password to the database.
Authentication: Protect individual files and folders on Windows NT servers
using the Challenge Response authentication.
ASP Security: Learn about the difference between server-side and client-side
code.
To learn about each of these points, see “Security” on page 121.
How to Use This Book
The Quick Store Tutorial (Chapter 1) is designed to be a basic starter guide for
new users of Drumbeat and eStore. Users who have never built a site in Drumbeat
before are strongly advised to complete the Drumbeat Quick Start tutorial first to
familiarize themselves with Drumbeat before starting this tutorial and attempting
to build an eStore site.
Chapters 2 through 8 assume you are already familiar with Drumbeat and the
basics of database-driven site design. It is assumed that you have completed the
tutorial or already built a simple eStore site on your own. These chapters include
goal-oriented instructions for using and adapting each eStore feature to your
particular project.
Chapters 9 and 10 are both a technical reference for experienced users or
programmers, and a quick reference for all users to the components in eStore.
These chapters explain how the components and contracts work together to create
e-Commerce functionality.
10
Introduction
System Requirements for eStore Builder
The recommended system for eStore development machines:
200MHz Pentium
60MB free disk space
64MB RAM
Microsoft Windows 95/98 or NT 4.0
The recommended system for deploying eStore applications:
Microsoft Internet Information Server (IIS) 4.0 for Windows NT, or Chili!ASP
by Chili!Soft or other ASP interpretive software for other servers to deploy
applications. IIS is included in Windows NT Server.
Minimum: 166Mhz; 128 Megs RAM
ASP Enabled
SA or MS PostingAcceptor Installed
ODBC DSN Creation/Update Methodology
Installing Drumbeat 2000 eStore Builder
To install StoreBuilder from the CD:
Insert the Drumbeat 2000 with eStore Builder, or the eStore Builder CD. The
1
installation program starts automatically, and you will see the eStore Builder
Installation screen.
From the selections available, choose Install eStore Builder.
2
Note:
If you are not installing a bundled licensed copy of eStore, you will need to
complete the licensing procedure before installing the package.
Follow the instructions on the Installation screen.
3
To install eStore Builder from the Drumbeat Web Site:
Download the eStore Builder self-extracting file from the Drumbeat web site.
1
In the WinZip Self Extractor, select a folder in which to unzip the eStore
Builder installation file. Click Unzip.
Click OK. Then close the WinZip Self-Extractor.
2
3
In Windows Explorer, navigate to the folder you extracted the installation file
to. Double click the Setup.exe.
Follow the instructions on the Installation screen.
4
The installer will add the eStore Builder files to your copy of Drumbeat, including
the Starting Point for Quick Store and the sample database. The DSN for the
database will automatically be created on your system. You will need to set up the
database and the DSN on the IIS server to which you will be publishing.
Drumbeat Support Center
The Drumbeat Support Center Web site is updated regularly with the latest
information on Drumbeat, plus advice from expert users, advanced topics,
examples, tips, and updates. Check the Web site often for the latest news on
Drumbeat and how to get the most out of the program at www.macromedia.com/
support/drumbeat.
Developing an e-Commerce Site
11
12
Introduction
CHAPTER 1
Quick Store Tutorial
.............................................................................................................
The Quick Store tutorial walks you through the process of building an online
store using the eStore Builder components. In this tutorial, you will be building a
sample eStore site for an online computer book warehouse using the basic eStore
components. You will learn how to set up a shopping cart, capture customer
details, and calculate tax and shipping costs from tables in a database.
Once you build your online store you can customize it with additional features
available in the eStore package. The eStore User’s Guide following the tutorial
includes documentation for the features available for customizing your eStore.
On the Drumbeat web site you can find DrumNotes demonstrating how to add
various features to your eStore, such as order fulfillment and Store Manager
features. References to DrumNotes are found throughout this guide. To find these
samples, go to drumnotes.drumbeat.com. eStore specific DrumNotes are in the
500 series.
If you have never used Drumbeat before, it is strongly recommended that you go
through the Quick Start tutorial first to familiarize yourself with Drumbeat and
its many features for building database-driven web sites.
To preview the application built in the Quick Store tutorial, go to
quickstore.drumbeat.com.
1
What You Need to Complete Quick Store
To complete the Quick Store tutorial, you must have access to an ASP
compatible server.
Access Microsoft Internet Information Server 3.0 or above for Windows NT, or
Chili!ASP by Chili!Soft or other ASP compatible software on your network.
13
Getting Familiar with Quick Store
Starting Point
A Drumbeat Starting Point is a project file that has all or part of a site already
developed. The Quick Store Starting Point has all the pages for the storefront as
well as most of the functionality set up. You will add the Shopping Cart and set up
the Login and Checkout areas.
Open the Quick Store Starting Point
To base a new site on the Quick Store Starting Point:
Launch Drumbeat from the Start menu.
1
2
From the Drumbeat Start-up dialog, select Create a New Site.
Uncheck the Use Wizard checkbox. Then, click OK.
In the New Site dialog, name the site QuickStore.
3
4
In the Site Origin field, select the Based on Starting Point radio button.
From the dropdown list, scroll down and select the QuickStoreStart file. Then
click OK.
Drumbeat will open with a new site based on the Quick Store Starting Point.
14
Chapter 1
Site Structure
In the Site tab you can see the site organization. Expand the site tree to expose all
the pages in the site.
The Home page is designed to present visitors with rotating book specials. If
a special catches their eye, they can order it immediately by clicking an order
button. Otherwise, visitors can choose to go to one of the three main areas of
the site.
The three links at the top of the page correspond to the three areas of the site as
shown by the main pages in the site tree:
Search and Browse Books: Initiate a search by various criteria, including
keyword, title, author and category. The Search For Books page in the site tree
is the main page in this section.
Checkout: Enter billing and shipping information and get an order summary.
The CheckoutArea page in the site tree is the main page in this section.
View Shopping Cart: Check the current contents of their shopping cart, to see
the books they have ordered already and the total. The Shopping Cart page in
the site tree is the main page in this section.
For information about the Site tab in Site Management Center, check the index of
the Drumbeat User’s Guide or Help for the words in bold.
Quick Store Tutorial
15
Templates
Templates speed up the development time by reducing repetitive design tasks.
Click the Templates tab and you’ll see that the site has three templates: a Master
Template and two section templates:
Master Template: This template contains only the link style information for the
site. (Select the Master Template in the site tree and then click the Attributes
tab to see the names of the assigned link styles.) All pages in the site inherit
these styles.
16
Chapter 1
Books Template: This template is used for the pages that display book search
and detail information. The template contains a background, a logo, and four
linked images for navigation. All of the pages shown under this template in the
Templates tab site tree inherit these elements.
Commerce Template: This template is used for the shopping cart and checkout
pages. It contains a background, logo and two linked images for navigation. All
of the pages shown under this template in the Templates tab site tree inherit
these elements.
For more information about templates check the index of the Drumbeat User’s
Guide or Help for the words in bold.
Content Tables
Content Tables organize media as well as give you a visual representation of
databases. Expose the Content Center (click the Content Center button). Click
the dropdown arrow and you’ll see that a number of Content Tables have already
been set up in the site.
All of these Content Tables, with one exception, are ODBC-driven, with the
content coming from queries to the database that drives the site. The exception is
the Shopping Cart Data-Map. This table, whose initial content comes from a
CSV file, provides a bridge to the database so that user selections can be retrieved
from and passed to the server-side shopping cart.
When using database content in Drumbeat, you must first create a query to the
database (using the Query Manager). Then you create an ODBC Content Table
based on that query. The ODBC Content Table provides a visual representation of
the database content so it can be used in design. To use the data on a page, a
Recordset is added to the page, which is then bound to the appropriate Content
Table. If you are new to Drumbeat, you can find an explanation of the process of
creating queries and ODBC Content Tables and using recordsets in Chapter 15 of
the Drumbeat User’s Guide.
Note:
Not all of the databases have content, such as the Customers and Orders databases.
They are used to provide field references that are used when adding customer information
and placing orders when the site is deployed.
Quick Store Tutorial
17
The Recordsets used in the Quick Store tutorial have also been created for you.
You can view them by querying the Asset Center for site-level elements. Click the
Locate Assets button and choose Site Elements > Show all site-level elements.
The site-level elements on this site also include the DataForm and Cookies that
are used. Notice that each Recordset matches a Content Table in the Content
Center (although the names of the Recordsets may differ slightly from the
Content Table names).
You will see the recordsets used in the basement of the data-driven pages in the
Quick Store Starting Point.
18
Chapter 1
The description and purpose of each recordset is explained in the following table.
Recordset Name Content Table Description
BookQuery BookQuery Used in the search, results, and details
CardTypes CreditCardTypes Used on the NewUser and Update User pages
Customers Customers Used to capture customer details.
CustOrderDetails CustOrderDetails Used to capture the order details and
Keywords Keywords Used for keyword search functionality.
OrderDetails OrderDetails Used for capturing shipping and freight
Orders Orders Used for capturing customer-ordering
OrderTotals OrderTotals Use for displaying order totals on the
SalesTax SalesTax Used for adding the different sales tax
Specials Specials Used for searching on books by publisher.
product pages. From the detail page, the
product items are inserted into the Orders
table and then carried by the Orders detail
and Orders recordsets to the CheckOut pages.
to populate the Credit Cards supported.
customer ID. The customer ID links the
CustOrderDetails table to the Customer details
table.
details.
information.
Checkout page.
percentages to total cost.
For answers about database-related questions, check the index of the Drumbeat
User’s Guide or Help for the words in bold.
eStore Builder SmartElements
In Drumbeat, a SmartElement is any type of element you put on a page, such as
text, images, video, etc. They include Applets, ActiveX objects, COM objects,
Scriptlets and a variety of custom elements. You drag and drop SmartElements
from the toolbar and/or Asset Center.
The eStore Builder package includes three custom eStore SmartElements, two
of which you will be using in this tutorial. The eStore SmartElements were
added to your Element Library collection when you installed eStore. They should
also appear on your SmartElements Toolbar. The CyberCash SmartElement,
which is not used in this tutorial, is discussed in the User’s Guide and Reference
Guide following.
Quick Store Tutorial
19
The custom eStore SmartElements are:
Shopping Cart: This component is a server-side object which holds user
selections as they shop the store. It manages the data in an online shopping
session until they are ready for checkout.
Shopping Cart Display: This component is used to display the data contained
in the shopping cart, so that users can check the contents of their cart.
If the Shopping Cart and Shopping Cart Display elements are not on your
SmartElements toolbar, you should add them for this exercise. Click the Element
Library icon on the SmartElements toolbar and select the Custom tab. Place a
check next to each element, then close the Element Library and they will appear
on the toolbar.
20
Technical documentation on these Custom SmartElements can be found in the
Shopping Cart section of the Reference guide in this book, or see the following
documents in the Drumbeat 2000/eStore Builder directory:
ShoppingCartV2.doc
ShoppingCartAPIV2.doc
ShoppingCartDisplayV2.doc
For information about SmartElements, check the index of the Drumbeat User’s
Guide or Help for the words in bold.
Chapter 1
eStore Interactions
An Interaction is a pre-written JavaScript or VBScript function that can be
applied to SmartElements. By selecting SmartElements, you create a contextsensitive list of interactions, from which you can choose the one(s) you want
to use.
A number of eStore-specific interactions are included in the eStore package. These
are added to the Interactions available to you in the Interactions Center and will
appear when the appropriate participants are selected.
eStore Interactions are available in the following categories:
eStore Adjustments
eStore CyberCash
eStore Inventory
eStore Shipping
eStore Shopping Cart
eStore Shopping Cart Misc.
eStore Tax
You can view these suites of interactions in the Contract Manager (Tools >
Contracts). You can sort the interactions by category to see what’s available.
Quick Store Tutorial 21
Not all of the eStore interactions are used in this tutorial, so be sure to check for
what’s available when you develop your own online store and want to customize it
with advanced features. Also, check the DrumNotes for examples of how to use
many of these interactions.
If you are new to Drumbeat, you can quickly familiarize yourself with the way
interactions are used in the Quick Start Tutorial. For more detailed information,
see Chapter 17 in the Drumbeat User’s Guide.
Note: The eStore Builder contracts are not exportable like other contracts in Drumbeat.
For information about Interactions, check the index of the Drumbeat User’s
Guide or Help for the words in bold.
Moving Forward
The typical flow of an e-commerce site consists of searching, browsing, adding
items to a shopping cart and checking out. Typically a search page leads to a
results page with links to product details. From the detail page shoppers can add
items to the Shopping Cart. They can then choose to continue shopping (return
to searching or browsing) or check out.
Shoppers also need the flexibility to add items to the cart, remove items, or change
the order (such as change the quantity). In the final phase of checkout, the items
are inserted into an orders database.
The processes you will go through in building the Quick Store are:
Add the Shopping Cart to the product pages
Configure the Shopping Cart management (add to, update and clear cart
functions)
Calculate the order totals and insert order into the database
Create secure login and checkout pages
Set up the order confirmation page
Chapter 122
Step 1: Adding A Shopping Cart
You will add the heart of the shopping experience by adding and setting up these
components:
The Shopping Cart server element (referred to as ‘basement element’ in
Drumbeat)
The Shopping Cart Display element (can also be referred to as ‘page element’
in Drumbeat)
The Data-Map which binds the Shopping Cart server and display elements to
product, customer, and billing information.
Configure the Shopping Cart
The Shopping is configured using the Shopping Cart Data-Map, which is a static
Content Table in Drumbeat generated from a CSV file. For this tutorial, the CSV
file has been imported for you.
Take a look at the Data-Map in Drumbeat:
1
In the Content Center, select Shopping Cart Data-Map from the
dropdown list.
2 Drag the splitter bar down to expand the Content Center so you can view the
rows in the table, as shown in the following figure.
The Data-Map provides information needed by the shopping cart for:
Obtaining information from the Product database when product items are
added to the shopping cart.
Storing information in the OrderDetails database when a site shopper decides
to check out and order products.
Calculating totals for price, weight, and/or discounts.
Determining which information in the shopping cart is displayed on the page.
The Data-Map can be customized to integrate any existing database schema with
the Shopping Cart elements. The User’s Guide section after this tutorial explains
how to customize the Data-Map to meet your requirements.
Quick Store Tutorial 23
Add the Shopping Cart SmartElement
In Site Manager, expand the Search For Books node, and click the Book Detail
icon to make its layout active.
1 From the SmartElements Toolbar, select the Shopping Cart SmartElement and
drop it on the page. The Basement opens (if not already) and the element
appears in the Basement. This element represents the Shopping Cart on the
server. Ensure that the element is on the far right side. If it was added to the left
of the Form element, drag and drop it to the right side.
Chapter 124
2
Right click the Cart1 SmartElement in the basement and select Attributes. In
the Attributes Sheet, set the attributes as shown in the table.
Attribute Description Set to:
Content Sets the content of the element to
Cookie Expiration
(days)
Name Names the ASP object for scripting
Store As Cookie Stores the shopping cart data in a
the Shopping Cart Data-Map
Content Table.
Stores the shopping cart data in
a cookie file on the client for the
designated amount of time
in days.
and Point-and-Click Interactions.
cookie file on the client so that the
site shopper can continue from
session to session.
Select Static Content.
Click the ellipsis button, and
choose Shopping Cart
Data-Map
30
ShoppingCartObject
Checked
. Show all columns.
Each time you use the Shopping Cart SmartElement on a page, the content must
be set to the Shopping Cart Data-Map Content Table. Since you will use the same
Shopping Cart element on several pages, you can speed up this process by creating
a reusable Element Collection. Element Collections retain all element attributes,
interactions, and links.
Once you have set all the attributes correctly, create an Element Collection so that
you can reuse the component on another page easily.
Quick Store Tutorial 25
To create an Element Collection for the ShoppingCart Object:
1
Right click the ShoppingCartObject element in the basement and choose Add
to SmartElement Library. Name the element BookstoreCart and click OK.
2 From the Element Toolbar open the Element Library by clicking the
Element Library button. Click the Element Collections tab and check the
box next to the BookstoreCart name. Doing this will add the element to the
Element Toolbar.
Chapter 126
3
Choose an icon to use to represent the collection on the SmartElements
toolbar. Uncheck the Use Wizard checkbox, if it is not already unchecked.
Click the Edit button and then click the Appearance tab. Click Change Icon.
Scroll to the far right for the next to last icon and you’ll find the icon created
especially for this element, as shown in the margin. Click OK, OK again, and
then Done.
Setting up an Element Collection is a time-saving technique that ensures that the
content attribute for the server element is bound to the Shopping Cart Data-Map
on every page. Next time you add the server-side Shopping Cart SmartElement to
a page, drag the Element Collection, named BookStoreCart, from the Element
Toolbar and the settings in the Attributes Sheet will already be made for you.
Insert Product Items Into the Shopping Cart
Continuing on the Book Detail page, we will now use an Image Button on the
Book Detail page that submits the product information to the Shopping Cart.
When you use an Image Button as a submit button (rather than a standard
form button), you must apply the Activation to submit the form when the
button is clicked.
Quick Store Tutorial 27
To add a Shopping Cart button:
1
Drag an Image Button from the SmartElements Toolbar to the upper right side
of the layout (under the ‘Number of Copies’ text).
2 In the Attributes tab, name the button ShoppingCartButton.
3 From Asset Center query for images. Locate and drag the btn-AddToCart2 and
btn-AddToCart1 images to the Image Button element.
4 Right click the Image Button element and choose Possible Activations. From
the list of Activations, scroll down to the Forms Submit category and double
click the interaction that says: ShoppingCartButton: Submit the Form when
[ShoppingCartButton] is clicked.
5 In the Parameters dialog, uncheck Validate Form and leave the edit box blank,
as shown in the accompanying figure and table, and then click OK.
Parameter Description Set to:
Validate Form Validates that every form field has data. Unchecked
Replace Action With Overrides the action of the form. Leave blank
See DrumNote 28 for an explanation of using images as submit actions.
Chapter 128
6
Shift select the following elements:
Add to Shopping Cart button (on page)
Dropdown list for number of copies (on page)
ShoppingCartObject (in Basement)
BookQuery Recordset (in Basement)
Right click and choose Possible Interactions.
In Interactions Center, double click the interaction in the eStore Shopping Cart
category that says:
Add item from [BookQuery] to [ShoppingCartObject] when
[ShoppingCartButton] is clicked using quantity from [Quantity]
Quick Store Tutorial 29
7
Set the parameters according to the following table, then click OK.
Parameter Description Set to:
Redirect after adding Redirect the shopper to
Redirect if already in
Cart:
AlreadyInCartRedirect Specifies the target page for
NewItemRedirect: Specifies the target page for
8 Click OK and OK again. Then, close Interactions Center.
confirmation page.
Redirect the shopper to a message
page if the selected item is already
in the cart.
redirecting if an item is already in
the cart
redirecting after an item is
successfully added to the cart
Checked
Checked
Expand the tree node
and select the Already In
Cart page (under the
Shopping Cart page)
Expand the tree node
and select the Shopping
Cart page.
Chapter 130
Loading...