Join Joseph Lowery for an in-depth discussion in this video Styling detail pages, part of Dreamweaver CS5: Business Catalyst Integration.
Business Catalyst provides a basic layout for all of its e-commerce pages that you can modify to your heart's content. While you can do it Business Catalyst, it's even easier in Dreamweaver, using tools you are already familiar with. Now we have created our categories, but so far, we don't have a page to display them in. Let's create that page here in Dreamweaver. I will flip over to the Assets panel and right-click on our template Internal, choose New from Template. I am going to go ahead and save a page, and we will call this "catalogs.html." Now I can change the placeholder heading to Catalogs, and I am not going to need the placeholder text here, so I will go ahead and select that and then press Delete to remove it.
If you are working with just the code, these changes are on lines 33 and 34. So now, I am going to bring in the modules that show the existing catalogs. To do that, let's open up the Business Catalyst panel. And under the Catalogues Module, you will see that I have a Catalog option here. I am just going to double-click that. Dreamweaver will reach out to the Business Catalyst server, show us which catalogs have been defined. Let's choose the first one, Clothing. I will click Next and then Insert.
Now I am going to place my cursor right after that code, so that the two catalogs will appear side by side. Let's double-click the catalog again to bring in the second catalog, Gear. Clicking Next and then Insert. I will place my cursor at the end of that code, and we will repeat the process one last time. Double-click Catalog, this time choosing Media, Next, and Insert. So I have all of my code necessary for showing the catalog pages.
Let me go ahead and save the page, and then put it online. We have no dependent files, so I will click No. Now, let's switch back to the browser to take a look. I will open up a new tab, and go to my exploreca site. And now once I have the base address showing, I will enter in the remainder of the page name, catalogs.html, and there you have our three catalogs, posted one after another.
Now notice that there is a still a heading placeholder text there. That's still remaining in the Business Catalyst template we set up. Luckily, with Business Catalyst, you can make these changes at anytime. So let's go over to Business Catalyst and from the Admin page, choose the Admin menu item, and then select Manage Site-Wide Templates. We will click on our defined template Internal, and once its screen opens up, we can go in and get rid of the heading, just by selecting it and deleting it. Now I am also going to go ahead and get rid of the extra line that I have here, by pressing Delete. And now we can go down a little bit further and click Save and Publish.
Okay, let's go back over to our Catalog page and click Refresh. Now the placeholder text is gone. Now what's really amazing about Business Catalyst, I think, is that even though we've just created this one single page, Business Catalyst hooks it up to all of the other pages for your online store. So if I go and click on any of the catalog items, like Gear here, well here are all the product items that we had included in the Gear category. You notice that for each product there is a name, which is a link that takes you to a detail page; a thumbnail, which is also a link--going to the same detail page; the price; how many items are in stock; and a quantity field, for adding to the cart.
Now if I click on a thumbnail or a name, it will take me to the detail page, and here we see the larger image, the description, and other pertinent information. Now all of these pages also have other information, like the "Shopping cart is empty." But if I add an item to a cart, by clicking Add to Cart, an alert pops up indicating that an item has been added. I will click OK, and the upper-right has been updated to show how many items are in the cart, what the total is, and give me a link for viewing the cart.
Now while Business Catalyst does a good job of giving you basic layout, there is always going to be things that you want to tweak. Like, for example, let's say that I don't want this particular "In stock" line, and if we go back to the Thumbnail page, you will notice that my thumbnails are being clipped off, so I need to make an adjustment there. Luckily, you can do all of these changes very easily in Dreamweaver. Let me show you how. So we will switch back to Dreamweaver. Whenever you are changing any of the layouts, you will need to go into the Files panel. I will close the File activity complete, left over from previous thing. And to do this, I am going to expand the Files panel.
All of the designs and layouts for the online shopping pages are contained in the Layouts folder, in the OnlineShop subfolder, so let me expand that. And here you see a full range of pages that you can modify. The thumbnails are controlled by the small_prodcut.html page, so let me open that up. Now to make any modifications like this, you are going to want to go into Live view. And with my CSS Styles panel in Current mode, I will select the smallimage, and here you see that the height and width are set at 120 pixels. Our images are 150 pixels square, so let me change that value, and just press Enter, and I will do the same thing for the width.
The other thing I wanted to change was this In stock line that I want to get rid of. So for that, I will need to drop out of Live view. And with that selected, I can go to the tag selector, make sure I get all of the list item, and the press Delete. Okay, I have made changes to both my source code and the ModuleStyleSheets.css file. Let's save them both at the same time, by going to File > Save All Related Files, and we are ready to put the source code up online. So I will go ahead and click Put. And in this case, we actually did have dependent files that were changed, so let's go ahead and click Yes.
Once the files are posted, let's check them out in the browser. So now I can refresh this page, and you will notice that my thumbnails all look great now, and that line about the quantity available has been removed. As you can see, Business Catalyst gives you complete stylistic control for all your catalog and product pages.
Prerequisite: Dreamweaver CS5 Essential Training.
- Exploring the capabilities of Business Catalyst
- Modifying Business Catalyst modules and templates in Dreamweaver
- Extending to clients the ability to modify their web pages in the browser
- Managing downloadable documents with the Literature module
- Utilizing Business Catalyst's customer and content management features
- Creating email marketing campaigns
- Building a store catalog
- Setting up a payment gateway
- Customizing the checkout experience