Products Component Layout
Overview
The product templates include a multitude of ecommerce-enhanced features and should be used in instances where an add-to-cart action is needed.
Some of the differences you will find between the component layouts:
- Some offer the ability to purchase from the product list page
- Add to cart messaging
- Product detail layout
It is important to understand how the product cells are put together, both for styling and functionality.
- In most instances, you should be able to make layout changes to the product cell through css. The default .item styling is included in mm-framework.css and in mm-assets/_skins/default/stylesheet-skin.css (which you should be copying for your stylesheet-local.css)
- The various components of the product cell are using an equalizer script so each product cell with be the same height. This allows the rows to flow correctly. The calls for the equalizer are located on the main_template
Default Product Fields
All of the following fields are included in the products templates
| Order | Field | Label |
|---|---|---|
| 1 | hide | |
| 2 | list_order | |
| 3 | product_name | Product Name |
| 3.1 | page_name | web-page-address |
| 4 | catalog_id | Catalog Id |
| 4.1 | sale_category | Sale Category |
| 5 | price | Current Price |
| 5.2 | sale_price | Sale Price |
| 5.3 | minimum_price | Minimum Price |
| 6 | product_flag1 | Sidebar Featured |
| 7 | weight | Weight |
| 8 | shipping_charge | Shipping Charge |
| 8.1 | shipping_charge_type | Shipping Charge Type |
| 8.2 | package_specs | Package Specs |
| 9 | short_description | Short Description |
| 9.1 | blurb1 | Description |
| 10 | product_image1 | Image 1 |
| 10.1 | product_image2 | Image 2 (optional) |
| 10.2 | product_image3 | Image 3 (optional) |
| 40 | qty_on_hand | Qty on Hand(a) |
| 41 | main_cat_id | Main Category |
| 60 | use_price_options | Use Price Options(b) |
- (a) qty_on_hand is important if the site has inventory control
- (b) use_price_options displays the options table on the product edit page
If the site has wholesale, you'll also need
| Order | Field | Label |
|---|---|---|
| 5 | price | Current Retail Price |
| 5.1 | wholesale_price | Retail Price |
| 15 | show_only | Show Only |
If the site has options that can be added using a multiadd cart (a product can only have one type of option group), add
| Order | Field | Label |
|---|---|---|
| 5.4 | retail_multiadd | Retail Multiadd |
| 5.5 | wholesale_multiadd | Wholesale Multiadd |
products/default
- Uses its own columns.html
- Has its own set of category, product, and option templates, plus addtocart.html
- Product cell is not set up with addtocart action
Key for page specifics
1. Image zoom
The thumbnail images include product_image1, product_image2, product_image3, and any unhidden option that has an image. (Currently uses an insert|data; one drawback to this is that it doesn't include shared option images. In order to include shared option images, you will want to use ; however, you need to make sure the option_detail_cell.html has the correct tags for doing the optionswitch with the options menu.)
2. Success message
The success message displays when the add to cart button is clicked. (With the latest code, the message fades after approx. 4-5 seconds.) Tip: If you would like to set the add to cart action to go directly to the view cart page, remove the “goto:samepage” hidden input on addtocart.html.
3. “New” tag
This tag is activated when an item has been created within the past 30 days. You can adjust the amount of days in the config.php file by adding $new_days = «# of days»;
4. Sale messaging and price display
Based on price fields and any applied sales.
5. short_description through stock messaging
These appear if active.
6. Add to cart layout
If multiadd flags are off, the regular addtocart.html is inserted.
If multiadd flags are on, subpage?stpl=_mulitadd is inserted. This allows the customer to order multiple options from a single group of option at once. IMPORTANT: Multiadd should only be used if the product has a single group of options (e.g., size OR color).
7. Facet
This tag comes into play if the site is set up for a faceted search.
8. Sidebar navigation header
This is currently hard-codes as “Categories” for retail and “Wholesale Categories” if logged in as wholesale. The sidebar is contained in products/default/columns.html.
9. Specs blurb
This only displays if blurb2 is filled in. The “Specs” heading is hard-coded.
11. Recent Items Carousel
The carousel inserts the following: 4 items in the same category, 3 related items from “groups”, unlimited number of recently viewed items. The recent items carousel is being inserted as a page with stpl=_recentcarousel. This allows the product detail page to be cached, while allowing the carousel to display updated information.
addtocart.html
- inserted where is included
- tag inserts select menus from the option #1, options #2, and option #3 fields. These are not used on newer sites, but you may need them when rebuilding an older site.
- tag inserts select menus from the options table.
multiadd layout
- Inserted from a subpage using stpl=_multiadd that uses the tag (inserts options with show details set to menus only or both).
- Allows a customer to purchase multiple options from a single group of options at once. Should only be used if a product has a single group of options (e.g., size OR color)
products/quickorder_3up
- Allows for ordering from the product list page
- Includes a mini-cart
- Has its own columns.html, product templates, and addtocart.html
- columns.html has a blank right column where the mini-cart is loaded after someone adds an item to their cart
- Use the products/default set of category templates
- Product detail page is set up the same as default
products/listaddtocart
- Allows for ordering from the product list page
- No mini-cart
- Uses columns.html and category templates from products/default
- Has its own product templates and addtocart
- Product detail page is set up same as default
- Product cell is the same as products/quickorder_3up
products/tabs
- Uses all templates from products/default, except has its own product_detail.html
- Product detail page is set up same as default, but blurb1 and reviews are in tabs
products/paymentform
- The custom payment form is a special product that allows customers to enter a dollar amount and add that to their cart. Often it's used to pay shipping charges when the customer's original order required a shipping quote.
- Has its own columns.html, addtocart.html and product_detail.html; otherwise uses products/default templates
This is an add-on at additional charge (There is some debate going on about this, so check!)
Category is set to template “products” and component layout “paymentform”. Lock the category and items!
Item Fields
| Order | Field | Label |
|---|---|---|
| 1 | locked | |
| 1 | hide | |
| 2 | list_order | |
| 3 | product_name | Title |
| 4 | page_name | web-page-address |
| 5 | blurb1 | Instructions |
| 6 | ship_charge_type | (set this to “Always Free”) |
| 7 | allow_price_override | (set this to Y) |
| 8 | mm_item_type | (If the site uses inventory control, set this to “Non-Inventory Item”) |
products/paymentform2
- Uses the same fields and component identifiers as paymentform
- Has its own columns.html, product_detail.html, and addtocart.html; otherwise uses the products/default templates
- The addtocart form action is “purchaseitem”. When the item is added to the cart, the customer is taken directly to collect_payment.html (i.e., they bypass view cart and billing/shipping pages).
- Useful for custom payments where no shipping information is required.
products/full-width-title-nonav
- Has its own columns.html, most category templates, product templates, and addtocart.html
- Uses the products/default category_cell.html
- Product list and product cell are set up similar to products/listaddtocart
products/landing
- Not sure what this is supposed to be for, so I would not recommend using it.
- Has it's own columns.html, otherwise uses products/default
- columns.html is similar to search templates, with sort by menu in left sidebar
products/jumbotron
- This was set up for a biz site as a way to have the alt_cat_id1 title (), , and images-mm/cleardot.gif display full-width above the page content
- The jumbotron container is added to the main_template (see skins/bizjumbotron)
- Has its own category_list.html and product_list.html
- I'm not sure this is on any live sites, so use with caution
- To use this, you would need to enable alt_cat_id1 and label it “Jumbotron to Use”