Toolbar
Community MX has released several Jumpstarts that make ideal site designs for e-commerce sites, but the latest release of Minneapolis is a dedicated e-commerce design. This tutorial will discuss how Minneapolis (and other Jumpstarts) can be used with Cartweaver, a third-party shopping cart. As a member of both Community MX and the Cartweaver team, I hope I can give you a good perspective of how to implement a third-party cart like Cartweaver with a Community MX Jumpstart.
Cartweaver can be found at http://www.cartweaver.com/ and is available for ColdFusion, ASP, and PHP. I wrote the PHP version of the software. This tutorial will use the PHP version but will be equally applicable to all versions.
For the purposes of this tutorial, I will assume you have Minneapolis installed and are familiar with it. Other Jumpstart tutorials cover modifying the design of a Jumpstart for your own use much better than I could do, so I will use the stock Jumpstart design here. Tutorials on installing and using the Jumpstart can be found here:
I will also not cover basic Cartweaver installation, as that is best left to the Cartweaver manual. For this tutorial, I'll assume you either have Cartweaver installed, or simply want to see how it integrates.
Cartweaver is designed as an e-commerce system with an administrative interface for maintaining a product catalog, a shopping cart to maintain a user's list of products, and a transaction processor to pass transactions off to a dedicated gateway or payment processor. It is designed for both hand-coders and for Dreamweaver users. Because it is designed as a system of include files, it makes a great candidate for use with a pre-designed starter page like the Jumpstarts.
Cartweaver includes files that can be added in several ways:
Using the Cartweaver toolbar:
Toolbar
Using the Cartweaver menu on the main menu bar:
Menu items
Or by using the Snippet panel:
Snippets
Generally, if you are setting up Cartweaver for the first time, you might want to allow the Cartweaver setup server behavior to create all the default files for you so that you can see the cart in action before adding your design, however for this tutorial I'm going to create the files one by one using the Jumpstart. The Cartweaver Setup server behavior looks like this:
Cartweaver Setup server behavior
You should fill in the values to make the database connections, and then switch to the Presentation page of the server behavior:
Setting up the presentation files
If you uncheck the presentation page boxes, no presentation pages will be created, however your filenames should be created here. This ensures that Cartweaver knows which file does what in the site. The default filenames are fine for this sample site (index, results, details, showcart, orderform, and confirmation, each using the file extension of your chosen server model -- .asp, .cfm, or .php).
Jumpstarts are easily accessed from the New File dialog box. We'll start with the main index page. Go to File > New and choose General > CMX Jumpstarts > Minneapolis:
New Document dialog box
When you click the Create button for the first time, you'll be asked where to put the dependant files. Cartweaver keeps the dependant files in a folder called assets in the cw2 directory. You should create another directory under assets called design to place the Jumpstart image and CSS files.
Before moving on, I like to move all the main parts of the design into include files. This has many advantages over Dreamweaver templates. For one, if you change anything in the design, you don't have to update all your pages again. It's much easier making global changes to one small include file. Also, Dreamweaver templates have some inherent problems that surface from time to time. IMHO, it's easier to just avoid the troubles by not using them. For example, the branding div has navigation links in it. In a design like this I would leave the div, but put the code within the div into an include file.
Moving along, assuming you've set up the Minneapolis design the way you want it, the next step is to remove the content in the content-main div, leaving the div with the padder class in place. This is the main content section, and will be the place where we put the Cartweaver functionality:
<div class="padder">
[Cartweaver code goes here]
</div>
You will also want to set up the content-left div into an include file, so that the site links can later be added to the images (View Cart, etc).
Some of the links shown in the Jumpstart do not have corresponding features in Cartweaver; customization of Cartweaver (or Cartweaver add-ons/plug-ins) may be required to support some features shown. For example, the "Wishlist" button does not have a corresponding feature, but you could easily build one using one page, Dreamweaver, and an Insert server behavior.
Anything you want to do with the basic design would be done at this stage so that the page can be saved as a basis for other pages. This includes things like removing content into include files, changing paths and locations for css and image files, etc.
In the PHP and ASP versions of Cartweaver, you need to include the application.php or Application.asp file in each page of the site that uses Cartweaver functionality. It is best to include it on this "template" page so that it is available every time you create a new page.
With all that finished, the easiest way (in my opinion) to create new pages based on this "template" is to save it in the \Configuration\Builtin\CMX JumpStarts folder as cw.htm. After saving the file, it will show up in the New Document dialog box along with the other CMX Jumpstarts. The difference is that this one will have your modifications already applied. This will not affect the Minneapolis Jumpstart that is already there. There are many other methods of creating pages based on a page design, but for me this is simple and effective.
Note: You'll find the \Builtin\CMX JumpStarts in your local configuration folder. For a hint on where to find the local configuration folder, if you don't know where it is, check Danilo's blog entry on the subject.
After saving the file, you'll have to restart Dreamweaver, but now you'll be able to create new pages based on this pre-defined page that you created.
I put the [Cartweaver code goes here] placeholder in the page so that every time you open a new page you'll be able to select the placeholder and replace it with the appropriate Cartweaver include file. The first page we'll build will be the results page. Go to File > New and choose General > CMX Jumpstarts > cw.htm. Save the file as results.php (or results.asp, results.cfm, depending on your server model.) When prompted to save dependant files, click Cancel. Dependant files are already in place.
The Search/Results page in Dreamweaver
Select the placeholder and open the main Cartweaver menu. Choose Cartweaver 2 PHP > Search/Navigation to insert the search include file. Next, choose Cartweaver 2 PHP > Results to insert the CWIncResults include file at the insertion point. At this point you should have a working search/results page for the site.
Create a new page called details.php in the same manner. Again, select the placeholder and choose Cartweaver 2 PHP > Details to insert the CWIncDetails include file. This will create the main product page for the site. If you browse to the results page now, you will be able to click on a result and see the details page for the product.
Now that you have a details page, you need a cart page. Follow the same process for the Show Cart include. Save the page as showcart.php. Now, when you browse the results page, click through to the details page, and click an Add To Cart button, you'll see the cart with your item in it.
With the cart page in place, we now need to set up the order form so that the items in a completed cart can be purchased. Follow the same procedure and create the Order Form page. Save it as orderform.php. Now, when in the cart you can click the Checkout button to go to the order form and complete the checkout process.
There is one more file necessary to complete the checkout process -- the confirmation page. Follow the same steps again to create the confirmation include. Save the page as confirmation.php. The Cartweaver site is now functionally complete.
Cartweaver also ships with its own CSS file for the site design. The easiest way to use it is to merge the items you need into the CSS file for the site design. The styles_main.css file that comes with the Minneapolis Jumpstart has the main styles defined, but some of the extra items coming from the Cartweaver includes should be included. For example, the CWIncShowCart include file has a class used in the cart table called tabularData. You can copy/paste the code from the cartweaver.css file into the styles_main.css file as needed, or modify as needed. The cartweaver.css file is a good starting point for your own styles. After changing some of the Cartweaver classes to match more closely the color scheme of Minneapolis, you might end up with a page like this:
The Show Cart page, with styles modified
Although the cart is functionally complete, there is much more to the Cartweaver system, including an administration section for managing products. The admin section is not a good candidate for applying a site design to because it is fairly self-contained and includes its own design and menu, but you can tweak aspects of it within the css files. You can also add your own logo by changing the image file in the CWIncNav file.
Jumpstarts and Cartweaver go hand-in-hand because of their ease of use using Dreamweaver design view and other built-in features. Managing site designs in Dreamweaver is sometimes tricky because of the limited features of templates, however by managing your design before you begin to build pages by using server-side includes and some of Dreamweaver's built-in new document features, you can create sites quickly and efficiently.