Customizing WebCommerce: Adding WebCommerce to Existing Pages

One of the best features of WebCommerce is that it automatically creates store pages from the product information you've entered in the Back Office. These pages take no effort to create, but limit the look and structure of your store. You can easily change the look of your store by using templates, but templates can not change the structure of your store. For example, no template you design will change the fact that each product has its own page, and each page has only one product.

WebCommerce does not require you to use the convenient store builder function. If you choose, instead of (or in addition to) using automatically created pages, you can manually create your own custom pages, or add shopping cart buttons (Add-to-Cart, View-Cart and Check-Out buttons) to existing store pages. This gives you the flexibility to design stores the the automatic store builder is not currently capable of building.

Important! Before you begin to create custom store pages, be aware of the following caveats:

• In order to successfully create custom pages, you must have solid knowledge of HTML. Designing custom pages requires HTML. If you rely on FrontPage, Composer, or other WYSIWYG editors for HTML, you will find designing custom pages extremely difficult, or even impossible.
• Custom pages need to be maintained. If you use the store builder to create your pages, updating them is easy. If you change your store motto, you can change it in properties, rebuild your store, and all your product pages will be updated. If your pages are custom created, you will have to manually update you product pages any time you make changes to your store. This convenience that the store builder offers is a very good reason to not use custom pages.

Getting Started

Creating a custom designed store is, for the most part, the same as creating any other store. Use the Back Office to input all your store and product information, just as you normally would. When you have done all this, do not use the Build feature to create your store. Instead, use the information in this web page to place shopping cart buttons on your own product pages.

Adding Shopping Cart Buttons (Button Basics)

Shopping cart functions (Adding to Cart, Viewing Cart, Checking Out) are all done using links to the WebCommerce Server. A simple anchor tag (<a href="URL">label<\a>) is used to pass information to the WebCommerce Server, telling it what to do. Information to be passed to the WebCommerce Server is contained in the URL in the query string.

(Note that the label does not have any bearing on the functionality of the link! It does not matter if the label of your link is a button image like the ones that the WebCommerce store builder uses, or simply text. Furthermore it doesn't matter what the image looks like or what the text says. For example, instead of "Add to Cart" you could use "Buy me now!" as the label. In this documentation we will use plain text labels for simplicity.)

All shopping cart links have three things in common -- a common URL, and two pieces of information that are always passed in the query string, and that are always the same (and required!). Look at the sample URL below:

<A HREF = "https://webcommerce.webcom.com/~webcom:443/iiop/cart/cart/Contents.po?domainName=store.yourdomain.com&preview=false"> label</a>

In the above example, you see the required URL, https://webcommerce.webcom.com/~webcom:443/iiop/cart/cart/Contents.po?. This is the URL of WebCommerce, and is the same in every shopping cart button. The https (instead of http) means that the information is sent securely through the secure server, and the question mark indicates the begins the query string. Two pieces of information are passed in the query string of the URL: the identity ("domainName") of the store, and whether or not it is a "preview" store. In the place of store.yourdomain.com you need to substitute the hostname of your store. This is the subdomain/domain that you selected as the location of your store when your store was created. Most likely it is "store.yourcompany.com". As for the preview part, leave it the same as in the example, unless your store is just a preview store, in which case replace "false" with "true".

It is important to note that there are no spaces in the URL, and the contents of the query string are case sensitive.

The above example will not work to do anything because it lacks an action such as View Cart, Check Out, or Add to Cart. In the documentation below you will find instructions for adding the correct action for each kind of shopping cart button.

View Cart Button

To add a "View Cart" link or button to a page, use the basic button URL explained above, with the simple addition of an action to the query string. See the example below:

<A HREF = "https://webcommerce.webcom.com/~webcom:443/iiop/cart/cart/Contents.po?domainName=store.yourdomain.com&preview=false&action=View_Cart"> label</a>

In the example above, the addition of   &action=View_Cart   tells WebCommerce what to do. When WebCommerce is contacted with this information in the query string, it knows to show the contents of the cart. The sample a below demonstrates a view cart button/link which references a sample store created specifically for this documentation. You can view the source of this web page to see the code used for this example.

View your shopping cart

Check Out Button

To add a "Check Out" link or button to a page, use the basic button URL explained above, with the simple addition of an action to the query string. See the example below:

<A HREF = "https://webcommerce.webcom.com/~webcom:443/iiop/cart/cart/Contents.po?domainName=store.yourdomain.com&preview=false&action=Check_Out"> label</a>

In the example above, the addition of   &action=Check_Out   tells WebCommerce what to do. When WebCommerce it contacted with this information in the query string, it knows to take the shopper to the checkout screen The sample a below demonstrates a check out button/link which references a sample store created specifically for this documentation. You can view the source of this web page to see the code used for this example.

Go to make your purchase! (checkout stand)

In the example above, the addition of   &action=Add_to_Cart   tells WebCommerce what to do. The addition of   &sku=00000000 tells WebCommerce which product (using the SKU to add to the shopping cart. When you use an Add to Cart link, you will need to substitute "00000000" with the SKU that you defined for the product in the Back Office. When WebCommerce it contacted with this information in the query string, it knows to add the product with the given SKU to the shopping cart. The samples below demonstrate add to cart buttons/links which reference a sample store (and sample products) created specifically for this documentation. You can view the source of this web page to see the code used for this example.

Add "Yamaca Sauce" to shopping cart!

Add "Land" to shopping cart!

Options and Add to Cart Buttons

Using options in Add to Cart links simply means adding more information to the query string of the basic Add to Cart link which is described above. The information that is added is the name of the option, preceded by "opt_" and the value selected for that option. (Options and values must already be created and then added to products in the Back Office.) A link can indicate only one value for each option in this kind of link. In the example below, the option available for the product is "Color" and the value selected is "blue".

<A HREF = "https://webcommerce.webcom.com/~webcom:443/iiop/cart/cart/Contents.po?domainName=store.yourdomain.com&preview=false&action=Add_to_Cart&sku=00000000&opt_Color=blue"> label</a>

Once again, keep in mind that everything in the query string is case sensitive. The samples below demonstrate add to cart buttons/links using the same product with different options. You can view the source of this web page to see the code used for this example:

Add "Non-Sealing Stem Bolts" to shopping cart!

Add "Self-Sealing Stem Bolts" to shopping cart!

Add to Cart Button (with dropdown options)

Creating your own Add to Cart Buttons that work with drop-down lists of options are substantially more complicated and very different than using no options, or pre-selected options as described above. Because of this, we have a separate page for this information. Click here for information on how to create custom Add to Cart buttons with drops down lists of options.