CMSCart Manual

CMSCart Manual

Content Producer

The Content Producer is where almost all content is done. There are some exceptions such as background images which are in template, row and column properties. The Content Producer uses filters on page and page area. When accessing it from template design these filters are automatically set.

Adding Elements

Content is made up of a series of elements here. Each element has a type such as image, body or ordered list. Many times a template cell will have only one content element, however, several elements can be within one content area if wanted. In order to do that just add one element after another while in the Content Producer and filtered for the page and page area. When adding multiple elements within a single page area it is important to understand that they will be presented in ascending order by their respective sequence number. Sequence is entered by the user when creating an element. It is suggest to count by thousands as in 1000, 2000, 3000, etc. In this way, inserting a new element is easy. For instance inserting an element between 1000 and 2000 just means using, say, 1500 for its sequence. Elements are produced inline, one after the other. If you want them to appear vertical, one above the other, use the LineBreak element to add desired spacing between elements.

Once the sequence and element type have been selected fill in the appropriate selections for that particular element type and then click on Save. If you have selected an incorrect element type and want to change your selection, just click the cancel button and you will be able to alter your selection.

Freeflow text, such as in the body element, must be entered properly if you wish to display HTML tags and entities. For instance, if you want to display Bolded Content, you must enter the text as Bolded Content. If you want to display Bolded Content, you must enter Bolded Content. A table of Common HTML Entities is provided at the bottom of the Content Producer.

Editing Elements

All the elements that are currently in the selected content area, and for the page filter selected, will display in a list near the bottom of the Content Producer. To edit an existing element find it in the list and click on its Edit link. Its information will be copied to its selections and you can edit it then click on Save. In the list, clicking on the Delete of an element will delete it.

Element Properties

Several elements have what we call element properties, most of which are based on inline CSS properties. These are the various display options for the element you are working with.

Background Color: sets the background color for a table, column, row, or cell. Setting this at Master Template Global level will make this color the background of your browser window.
Color: sets the font color to be used in the area. Setting this in a template, column, row, or cell will cascade downward until something else is set further down.
Margins: defines the space around a particular element, such as a cell. You can set top, bottom, left, and right margins seperately.
Padding: defines the space between the element border and the element content. You can set top, bottom, left, and right padding properties seperately.
Text Align: aligns the content horizontally within an element.
Font Properties: included in almost every element. This set of elements controls the font display options for various types of text, including size, weight, font family, text-decoration etc.
Hover Properties: defines the hover color or hover background color for a link. Note that due to the limitations of inline CSS, you can only set a hover background color or a hover color - you can't set both successfully.
Vertical Align: aligns the content vertically within an element.
Borders: defines the border style for an element. You can set top, bottom, left, and right border properties seperately.
Background-repeat: sets if/how a background image will be repeated, horizontally or vertically
Background Image: sets the background image for an element

In several elements, combinations of these properties are grouped together to define header, cell, button, and link properties. Header properties will apply to the top of the table (usually the headings). Cell properties will apply to the inner cells of the element. Button properties apply to the buttons that are available with the element. Link properties apply to the links that are available within the element.

As well as CSS properties, element properties also encompasses some element-specific settings. One of these is the To Display columns. These are available in elements such as Cart Display and Items, and are available so that the you can choose which columns are relevant to display in an element. For instance, if your items have no images associated with them, you can choose not to display the Image column. Please see the section on Elements to learn which elements implement these properties.

Elements

Following is a list of elements available in the Content Producer. It is suggested that you read through the Element Properties section first, as some elements refer to Element Properties information.

Body

Body is an element that allows you to type free-flow text (paragraphs, sentences, titles, etc). This element implements all the Font properties defined in Element Properties.

Buy Display

The Buy Display element displays a form for users to enter their contact information and item information to send to the company when they are interested in purchasing an item. This element implements header, cell, and button properties. As well, it has entries for 2 To Emails which it will send the Buy request to, and a From Email which will display as the sender of the email (i.e. buy@mywebstore.com). These requests are sent through email to the emails specified here or the default emails set in Template Global Properties.

To operate properly, the Buy Display element must be placed on the predefined Buy page (see the section on Adding and Selecting Pages).

Buy Process

The Buy Process element allows you to specify a message to display to the customer when the Buy request is sent. This element implements the font properties defined in Element Properties. To operate properly, the Buy Process element must be placed on the predefined Buy Process page (see the section on Adding and Selecting Pages).

Cart Display

The Cart Display element will display the customer's current items they have added to their cart, and also allows the customer to delete items from their cart. From the Cart Display element, the customer can either return to the items they were browsing, or continue to Cart Checkout to start the process of their order completion.

As well as implementing the header, cell, and button properties defined in Element Properties, the Cart Display element includes a few settings specific to it. The Title Properties are a group of font properties used to define the style of the Cart Display title which displays above the items added. The Message Properties are a group of font properties used to define the style of the Cart Display messages that appear when the customer performs an action on the cart items (i.e. "Product has been added to your cart" or "Product has been deleted from your cart"). The Cart Display element has properties which allow you to choose certain columns to display to the user. The columns which you can choose from are Item Code, Short Description, Description, Industry Code, and Price. By default, all are checked to display, but you can check or uncheck any combination of columns.

To operate properly, the Cart Display element must be placed on the predefined Cart page (see the section on Adding and Selecting Pages).

Cart Checkout

The Cart Checkout element will display a form that the customer can enter their contact information in to send their order to the company. After filling in all required fields, the customer can then move on to Cart Confirm.

As well as implementing the header, cell, and button properties defined in Element Properties, the Cart Checkout element includes Title Properties, a group of font properties used to define the style of the Cart Checkout title which displays at the top of the form.

To operate properly, the Cart Checkout element must be placed on the predefined Cart Checkout page (see the section on Adding and Selecting Pages).

Cart Confirm

The Cart Confirm element will allow the customer to confirm their order before processing. From the Cart Display element, the customer can either to return to the items they were browsing, or continue to Cart Process which will complete their order.

As well as implementing the header, cell, and button properties defined in Element Properties, the Cart Confirm element includes a few settings specific to it. The Title Properties are a group of font properties used to define the style of the Cart Display title which displays above the items added. The Cart Confirm element also has properties which allow you to choose certain columns to display to the user. The columns which you can choose from are Item Code, Short Description, Description, Industry Code, and Price. By default, all are checked to display, but you can check or uncheck any combination of columns.

To operate properly, the Cart Confirm element must be placed on the predefined Cart Confirm page (see the section on Adding and Selecting Pages).

Cart Process

The Cart Process element displays a message to the customer when their order has been sent successfully. This element includes a text area in which you can enter the message you want to show, as well as the message's font properties. This element has entries for 2 emails which it will send the order request to, and a From Email which will display as the sender of the email (i.e. orders@mywebstore.com). If you do not set these emails, the order will be sent to the default email addresses (see the section on Template Global Properties for information about default emails).

To opertate properly, the Cart Process element must be placed on the predefined Cart Process page (see the section on Adding and Selecting Pages).

Cart View

The Cart View element is a button that sends the user to the Cart page to view their current cart items. The Cart View Name entry allows you to specify what wording you want in the button (for example, "Go to Cart" or "My Shopping Cart"). There is also a group of button properties to set the style of the button. The Cart View element can be placed on any page.

Cart Info

The Cart Info element displays the current number of items in the user's cart in the format "N item(s) in cart" (where N is the number of items), or "No items in cart" if their cart is empty. You can use the Show Subtotal property to select whether you want to show the subtotal before shipping and taxes in the element. There are font properties to set the style of the font within the element, and a setting for the Subtotal Line Width, which you set in pixels to specify the width of the line that displays between the number of items and the subtotal. The Cart Info element can be placed on any page.

Embedded Media

The Embedded Media element allows you to embedd media files right into your site. There are several properties unique to this element:

External Media Source: specify an absolute path to a media file. For example, http://www.mywebsite.com/mymusic/song.mp3"
New Local Media Source: upload your own media file, and it will be included and referenced within the site.
Existing Local Media Source: choose a file that has already been uploaded into the site
Display in Windows Media Player: select Yes to display a link to open the file with Windows Media Player. Select the option button to make it the default player.
Display in Realplayer: select Yes to display a link to open the file with Realplayer. Select the option button to make it the default player.
Display in Quicktime: select Yes to display a link to open the file with Quicktime. Select the option button to make it the default player.
AutoStart: setting this property to Yes will cause the media file to begin as soon as the page loads. Setting it to No will cause the user to have to manually start the file
Show Controls: setting this property to Yes will cause the controls for volume, play, pause, etc to be available for the user. Setting it to No will hide these properties
Loop: setting this property to Yes will cause the media to loop continuously. Setting to No will play the media once and the stop
Alignment: If the media does not take up the full width of the player window, the align will horizontally align the media. Only applicable for video media
Width: set the width in pixels of the player window
Height: set the height in pixels of the player window
Stretch to Fit: when set to Yes, video media will stretch to fit the available width and height of the player window
Windowless Video: when set to Yes, renders the video without a surrounding window
Mute: when set to Yes, the media will default muted until the user adjusts the volume

Flash

The Flash element allows you to embed a Flash file directly into your page. Browse for the Flash file, set the width and height you want it rendered at, and it will display on the page.

Image

The Image element allows you to embed an image into your page. After browsing for an image file, or selecting one that already exists in the site, you can set the Alt attribute for it using the Alt Name entry, as well as the Heading property, which will display a title for the image. You are also able to include a Hover Image, which the image will switch to when the user hovers their mouse over (to have an Image Link, see the Link section). There are properties available to define a height and width for the display of the image, as well as top, bottom, left, and right borders.

Item Display

The Item Display element display information for a single selected item chosen for viewing. This page is accessed through either the Sales List Items element or the Search List element. This element contains properties for the header, cell, and button defined in the Element Properties section. There is also a setting for the width of the item's image. The available columns to choose to display are Image, Item Code, Short Description, Description, Industry Code, Qty. In Stock, Price, Documents, Thumbnails, and Price Breaks. The display of the item information is the Item Code, Short Description, and Industry Code displayed in the header. The image (if displayed) on the left, and the Qty. In Stock, Price/Price Breaks, Quantity, and Add button on the left. The Description, Thumbnails, and Documents display on the bottom.

To operate properly, the Item Display element must be placed on the predefined Item Display page (see the section on Adding and Selecting Pages).

Line Break

The Line Break element allows you to specify 1 to 10
line break tags. You can use this to space out elements vertically in a content area.

Link

There are two types of link locations that can be entered. The first is a 'local' link. These are meant to link the pages of the site together. To add this type of link, start with "index.php?MenuLevel=" and fill in which page you want the link to go to. For example, you link to the Contact Us page, you would type "index.php?MenuLevel1=Contact Us". The second type of link is an external link, which link to websites outside of your own. This type of link must be in the format "http://www.sitename.com", where sitename is the name of the site you want to link to. It is important to remember the full "http://www." or else the link will try to go somewhere in your own site. Use the Open in New Window selection to specifiy how you want the link to open.

If you want the link to display as text, fill out the Text entry on the left and the corresponding link properties (or leave blank if using Global Link Properties... see Template Global Properties section). If you want to produce an image link, browse for the image and optional hover image on the right hand side.

Navigation

The navigation element will display where you are in the site. For instance, if you are viewing a specific item on the ItemDisplay page, the navigation may look something like

Navigation: Home > Items > ItemDisplay

The symbol that appears between each level can be changed by typing in the desired character in the separator. The "Navigation:" heading can be altered by typing in the desired heading. The heading has available font properties, and the links have the complete link properties.

Newsletter

The Newsletter element displays a facility for visitors to the site to subscribe or unsubscribe to the company newsletter. The element displays a text entry for the email address, as well as a subscribe and unsubscribe button. There are available font properties for the text in the element, and button properties for the 2 buttons. This element does not need to placed on any specific page.

Ordered List

An ordered list will display text preceded by a number corresponding the spot in the list. Notice the Combine With Next property: this is to tell the system which list items belong together. If you want to add another element to the list after the one you are currently entering, you must set the Combine With Next property to Y. You must keep setting the list elements to Combine With Next = Y until the last list element, when you set it to N. This concludes the list, and the rest of the elements you add will be seperate from the list. There are font properties you can set to define the style for each list element.

Sales List

The SalesList Element should be set with a text that relates to the ERP sales system code of the sales system that you are looking to connect to. The sales list has all the Link properties. There are several properties specific to the Sales List element:

Number of Columns: This property tells the Sales List how many columns to display in. This comes in handy in certain designs. For instance, if you have a very long sales list, you may not want to have the user scroll all the way down the page to find a category. Splitting the list up into 3 or 4 shorter columns may be more desirable.
Items Per Page: You can set the Items Per Page property to tell the system to implement paging after the number of items hits the property. If the property is left blank, no paging will be implemented no matter how long the sales list is.
Open Category Indicator: You can set the indicator for the Sales List category currently selected to either an image or a character. For instance, you can upload an image to display beside the category name, or enter string of characters such as >>.
Show number of items per category: This will display each category with the number of items contained in that category beside it.
Display as dropdown: This will display the top level categories in a dropdown instead of the list of links. It will instead fill a dropdown with the category names, and provide a button that they can click to go the the selected category.

There are also header, cell, button, and link properties available.

Sales List Items

The Sales List Items element should be set with the same ERP sales system code that the corresponding Sales List is set to, and the Sales List Items element should be on the predefined Items page. This element will list all the items contained in the selected category. The following are the special properties available for the Sales List Items element:

Items Per Page: You can set the Items Per Page property to tell the system to implement paging after the number of items hits the property. If the property is left blank, no paging will be implemented no matter how long the sales list items is.
Columns to Display: Here you can choose which columns to display or hide in order to customize the display of the list.
Number of Columns and Display Style
- If Number of Columns is 1 and Display Style is Columns, the Sales List Items will list columnar, with each value below the individual headers.
- If Number of Columns is 1 and Display Style is List, the Sales List Items will display with each row as an item, with the image on the left and the various Columns to Display listed beside it.
- If Number of Columns is 2 or more, the Sales List Items will display as "tiles" in however many columns you set. The image will be on top, with the various Columns to Display below it.
Show Category Image: if this is set to Yes, the image for the category will display above the Sales List Items. There are also Category Image properties for the size, borders, and padding of the category image.
Show Category Link: if this is set to Yes, a text link for the currently selected category will display above the Sales List Items
Start Category: set this property if you want to display items at a specific category level. This can be used to show featured products, new products, etc, by specifying a top-level category. For example, if you have a top-level category called "Features" and you specify the start category as "Features", all the items under "Features" will be displayed.

Search

This is the actual search bar, complete with the heading and button. The heading implements the font properties, and will appear to the left of the search bar. The button appears to the right of the search bar, and has available all the Button properties. It will send the user to the Search predefined page with the search results.

Search List

This is the list of search results produced by the Search element. This element must be placed on the predefined Search page. It uses the same ERP sales system code as the Sales List and Sales List Items, and displays in the same way that the Sales List Items does when Number of Columns is 1 and Display Style is Columns. It has available the selections for Columns to Display, as well as Items per Page, so that paging will be implemented after the Items per Page number is reached. The Search List has header, cell, button, and link properties.

Sell Display

The Sell Display element displays a form for users to enter their contact information and item information to send to the company when they are interested in selling an item. This element implements header, cell, and button properties. As well, it has entries for 2 To Emails which it will send the Buy request to, and a From Email which will display as the sender of the email (i.e. sell@mywebstore.com).

To operate properly, the Sell Display element must be placed on the predefined Sell page (see the section on Adding and Selecting Pages).

Sell Process

The Sell Process element allows you to specify a message to display to the customer when the Sell request is sent. This element implements the font properties defined in Element Properties. To operate properly, the Sell Process element must be placed on the predefined Sell Process page (see the section on Adding and Selecting Pages).

Showroom

This displays selected images in a showroom style, with one main image and the ability for the user to click through multiple images to see larger versions of them. Before you begin uploading images to the showroom element, it is important to specify a showroom code and the width and height. The showroom code is used to connect the uploaded showroom images with the showroom element, so it must be a unique code within the site. The maximum thumbnail width and height must be set before uploading images so that all the images retain a consistent size. Once these 3 properties are set, they should not be changed when adding new images. You can browse for an image file, set it's name (which will appear in the Alt attribute of the image) and the description for the image, and click upload. You can add as many images as you like to the showroom, and delete them at any time by clicking the Delete link beside each image.

The showroom also has properties for the main area, where the large image displays, and the row which contains all the thumbnails. The Selected Thumbnail Properties refer to the style of the cell which contains the current image selected. You can set the cell to highlight with a different color and border when selected.

Site Map

This produces a map of the site for display on the front end. Each element of the list will display as a link to that area of the site, and will use the Global Link Properties (see the section on Template Global Properties).

Unordered List

An unordered list will display text preceded by a black bullet. Notice the Combine With Next property: this is to tell the system which list items belong together. If you want to add another element to the list after the one you are currently entering, you must set the Combine With Next property to Y. You must keep setting the list elements to Combine With Next = Y until the last list element, when you set it to N. This concludes the list, and the rest of the elements you add will be seperate from the list. There are font properties you can set to define the style for each list element