Introduction to Adobe Business Catalyst – Part 2

In part one of this series, we set up a simple online store and populated it with Catalogs and Products. Business Catalyst lets you dig down within the templates to customize the way your products are presented—from the pages’ look and feel, to the data elements. There’s also a fully integrated shopping cart solution lurking under the hood. So let’s customize the different workflow components of the shopping cart, checkout, and fulfillment to round out our online store.

This is probably obvious for you, but just to be sure we’re on the same page, the purpose of a shopping cart is to allow customers to select multiple items to purchase over the course of a visit to an online store, and to complete purchasing all of those items in one checkout process when they’re finished. The Business Catalyst shopping cart follows strong conventions in that it’s session-based—meaning the data in the cart only exists through the current session—and it uses Ajax to let the customer add items to the cart while staying on the current page to continue shopping. The products were added to pages, and the shopping cart contents module was added to the template, so that it’s persistent through the site (see part one for more information).

On the shopping page, the items are listed with a name, price, quantity, and an Add to Cart button. When the customer clicks on the button, the product is added to the cart and they are prompted with an alert, as Figure 1, “Adding an item to the shopping cart” shows. (If you’re feeling adventurous, use a little bit of Ajax to capture that event and display the message inline!)

As soon as the item is added, the View Cart module is updated to reflect the total number of items in the cart, and their total cost. When you click on the View Cart link, you can see the detailed contents of the cart. Like most of the Business Catalyst tools, the default design is simple and completely functional—but it may not gel with your site’s design. As you work through your design, you can determine which elements need to be modified and you can choose which functional and data elements fit into your client’s online store. Let’s look at the default design, which is shown in Figure 2, “Viewing the cart”.

For starters, I want to remove the breadcrumb navigation and update the styles used for the headers. I’ll log in to the Admin section of the site in Business Catalyst and click on eCommerce to bring up the tools I use to manage the online store. I want to edit the templates that are used for the shopping cart, so I clicked on the View Customization Options link in the right-hand navigation. As you’ll remember from Part 1, this the same area where we accessed the templates to customize the Product and Catalog pages. You’ll find the shopping cart templates in the lower section. Click on Shopping Cart to bring up the editing screen shown in Figure 3, “Customizing online shop layouts”.

Once again, the default mode is Design view, which lets you see the elements of the page. Also, Business Catalyst gives you access to all of the data elements available for the layout, as Figure 4, “Editing the shopping cart page” shows. If you wanted to add more data elements, you could insert them using the Tag insert drop-down menu.

In this case, I’m going to be updating some styles and trimming the contents of this page. I’ll want detailed control over this process, so I toggle over to HTML mode, which Figure 5, “Editing the shopping cart in HTML mode” shows.

I remove the div that contains the breadcrumb navigation, and change the style attribute and the title of the page. Also, there are some elements that don’t fit with our current design, but which are important for the future growth of the site: Gift Vouchers and Discounts are great ways to encourage repeat business and are easy to include as part of product set up. For the moment, since we don’t have those programs in place, let’s remove them from the Shopping Cart screen. In addition, our client doesn’t want to allow customers to request a quote, so I removed that HTML and toggle back over to Design view; the result is shown in Figure 6, “The modified shopping cart layout”. That’s pretty simple—there are no requirements to write up, and there’s no haggling with a developer. You’re all set.

After saving my changes, I can refresh the shopping cart page. Once again, my design—shown in Figure 7, “The updated shopping cart page”—won’t win any awards, but I hope it shows you the level of control that you have available to customize your store.

Let’s keep moving through the templates. Business Catalyst makes it easy to ensure you’ve customized everything in the checkout workflow. Take a closer look at the online shop layouts page—the templates are arranged in order, so you can step through each one to make sure it fits your client’s needs. The first thing a customer will do is add an item to cart, and once they’re finished shopping, they will need to view the contents of the cart. Next, they’ll need to enter their billing information, and finally, they’ll see a confirmation screen. In Business Catalyst, everything’s all set up and ready for you to apply your touch to the checkout experience, as Figure 8, “Customizing each step of the checkout process” shows.

Once we make our changes to the Shopping Cart details page, we have two more steps in the checkout process to customize: payment and confirmation. Let’s see what the payment page looks like right now by clicking Check Out on the shopping cart page. The payment page—shown in Figure 9, “The default checkout page”—is really the main data entry step in completing the purchase: the customer enters their name, address, billing, and credit card information, and submits the form for processing.

Again, the default layout is completely functional and quite simple but it needs some updating and customization to meet our business and design goals. In this case, we’re not just going to change the page’s look and feel: we’re going to customize some of the options in the drop-down menus and payment options. That template is called Registration – Buy. Click on it to edit it.

In the HTML view, I scroll down and modify the country list to remove countries in which we won’t be doing business, update the list of accepted credit cards and expiration dates, and modify the payment methods we’re going to accept. The updated page is shown in Figure 10, “The modified checkout page”.

As an alternative (and to get much more control at the field level), I could go to the Modules section, click on Webforms, and select the Online Shop Purchase Form. In the form editor you can add and remove fields that you want to have on, or leave off, your Purchase form, as Figure 11, “Editing the Online Shop Purchase Form Module” shows.

With a minor edit in the CSS, the form block is now left-aligned, and after making some minor text edits, we have something that’s a little closer to our design. As with all elements in the store, you can continue to fine-tune and hone the user experience to create a design that’s right for your client. The payment processing will be handled in the back-end—we’ll take a look at that next—but the validation of data entered into the mandatory fields is handled in JavaScript. You could add some Ajax to the page to perform some inline validation and improve the user experience even more. If you want to edit the wording in the messages, you can do that right in the JavaScript file called ValidationFunctions_EN.js—it’s all accessible and under your control.

The last step is to customize the payment confirmation page. Back on the Online Shop Layouts page, click on Receipt – Buy to edit the template. If you want to add any customer service messages or contact information, you can add it here.

Before you can accept credit card payments, you’ll need to configure your Payment Gateways. Go to eCommerce > Payment Gateways and select the proper gateways for your client, as shown in Figure 12, “Configuring Payment Gateways”. Note that credit card processing does require an upgraded, paid account.

You’ll need to get the appropriate merchant information from your client to set up the gateway, as well as PayPal information if they want to receive payments through PayPal as well, as shown in Figure 13, “PayPal”.

You’ll want to work with your client to configure this part of the site, but as you can see, making updates to it is just as easy as any other part of the online store. Other details in the ecommerce section are just as straightforward to customize—shipping options, tax codes, and even QuickBooks integration are all pre-built and ready to use.