This document explains the customization of store blocks. Store blocks are basic components of an online online storefront. They let you integrate an Internet storefront into an existing website quickly and easily. Some examples of Store Blocks are navigation bar, product info, shopping cart contents, and so on.
This document lists all of the store blocks available in Avactis Shopping Cart software. Before using this document you should review the basic concepts of Avactis tags, which are described in detail in "Understanding Avactis Shopping Cart Tags".
Breadcrumb
The Breadcrumb block links to all levels of the hierarchy above the current location. Breadcrumbs allow users to backtrack and to move up the hierarchy. View a sample Breadcrumb displayed here.
All templates of the Breadcrumb block are stored in the folder avactis-templates/catalog/breadcrumb/default/.
The Breadcrumb block consists of the following templates:
The container template (breadcrumb-container.tpl.html) is required to define the design of the overall Breadcrumb block. For example, you can define border width and border color of the block, block background color, block font, and so on.
The empty template (breadcrumb-container-empty.tpl.html) is the default block displayed when there are no categories defined in the system. This template can be left blank
The category template (breadcrumb-item.tpl.html) is required for displaying a single category. According to the Breadcrumb block logic of the, this template is used to display the very last category in the Breadcrumb chain. This is basically the current category.
The category template (breadcrumb-item-link.tpl.html) is used to display the intermediate categories in the breadcrumb chain.
The separator template (breadcrumb-separator.tpl.html) is displayed between any two categories in the Breadcrumb chain. The choice of the separator is arbitrary.
Checkout is the final stage of the ordering process. By the time a customer reaches checkout, they have already added their desired items to the shopping cart. Generally, checkout includes the following steps:
Enter information about the customer.
Enter information about the payer. The payer and the customer don't have to be the same person.
Enter information about the recipient.
Select a payment method.
Select a shipping method.
Review all entered information and revise if necessary.
Confirm order placement.
Complete the payment for the order.
The customer, the payer and the recipient specified during order placement can be different entities. For example, the customer, John Doe, can pay for an order with the credit card of his employer and then specify the shipping address as that of his contractor located in another city.
With Avactis Shopping Cart software you can customize the design of all of the checkout steps. If you want, you can also remove certain steps from the process.
The checkout process is customized through templates. All checkout templates are stored in the folder avactis-templates/checkout/checkout-sequence/default/
The navigation bar displays the list of all categories and subcategories of products, which lets customers freely navigate the online catalog. Clicking a category’s name opens the list of products and subcategories of the selected category. View a sample navigation bar displayed here.
All templates of the NavigationBar block are stored in the folder avactis-templates/catelog/navigation-bar/default/.
The NavigationBar block consists of three types of templates: a container, an empty container and category templates.
The container template (navigation-container.tpl.html) is required to define the design of the overall NavigationBar block. For example, you can define border width and border color of the block, place a block title in its upper section, and so on.
The empty template (navigation-container-empty.tpl.html) is the default block displayed when there are no categories defined in the system. You can specify an appropriate text, for instance, "No categories".
The category template is used to define the design of a single category name in the block. There can my several such templates: for the selected category, for an unselected category, and for categories of different levels. For example, you can use these templates to define the color and the font for displaying category names.
The PaginatorDropdown block defines the number of products displayed per page. Usually the PaginatorDropdown block is positioned together with the PaginatorLine block. If the number of products on a page exceeds the number specified in PaginatorDropdown, then PaginatorLine displays the navigation links for jumping to pages.
View a sample PaginatorDropdown location here.
All templates of the PaginatorDropdown block are stored in the folder avactis-templates/catalog/paginator-dropdown/default/. The PaginatorDropdown block consists of a single container template. In this template you can define the text that will appear before the drop-down list, as well as the lists’s location, color, font, and so on.
All templates of the PaginatorLine block are stored in the folder avactis-templates/catalog/paginator-line/default/.
The PaginatorLine block consists of the following templates:
The container template (paginator-line-container.tpl.html) is required to define the design of the overall PaginatorLine block. For example, you can define border width and border color of the block, block background color, etc.
The empty template (paginator-line-container-empty.tpl.html) is the default block used when all of the products in the current category fit on one page. You can specify an appropriate text, for instance, "All items are displayed" or just leave the template blank.
The page number template (paginator-line-page.tpl.html). In this template you can set the color and the font used for displaying page numbers; you can choose to put page numbers in parentheses.
The current page number template (paginator-line-page-selected.tpl.html). In this template you can set how the current page will be highlighted, for instance, by specifying a bold font.
The template for displaying the link to the next group of pages (paginator-line-next-page.tpl.html).
The template for displaying the link to the previous group of pages (paginator-line-prev-page.tpl.html).
Modifying the template is a convenient way of matching the display of product information to your design requirements. All templates of the ProductInfo block are stored in the folder avactis-templates/catalog/product-info/default/.
The ProductInfo block consists of one template. This template alone specifies the block's design. Info tags are utilized to display information about a product, such as the following:
Modifying templates is a convenient means of listing products in a category according to your design requirements. All templates of the ProductList block are stored in the folder avactis-templates/catalog/product-list/default/.
The ProductList block consists of three types of templates: a container, an empty container and common-item templates.
The container template (product-list-container.tpl.html) is used to define the design of the overall ProductList block. For example, you can define border width and border color of the block, place a block title in its upper section, etc.
The empty template (product-list-container-empty.tpl.html) is the default block used by default when the current category contains no products. You can specify an appropriate text, for instance, "There are no products in this category".
The common item template (product-list-item-general.tpl.html) is used to define the design of a group of common items in a block. There can be several such templates: for each type of product you can define a template used to display it.
By editing the corresponding templates you can easily create the design you need for a search form. All templates for the SearchForm block are located in the folder avactis-templates/catalog/search/search-form/default/.
The SearchForm block consists of a single template. The image below shows a flow-chart of the template for the SearchForm block that comes packaged with the standard edition of Avactis Shopping Cart.
By editing the corresponding templates you can create the design you need for a list of products. All templates for the SearchResult block are located in the folder avactis-templates/catalog/search/search-result/default/.
The SearchResult block includes four types of templates: a container, an empty container, single-product templates, and the "No matches found" template.
The container template (search-result-container.tpl.html) is required for defining the design of the overall SearchResult block in case one or more products matching the search criteria were found. For example, this template is used to define the width and color of the block frame, to place a title at the top of the block, and so on.
The template called "No matches found" (search-result-container-nomatch.tpl.html) is used to display the block in case no products matching the search criteria were found. The template may contain some text such as "Your request produced no matching results."
A single-product template (search-result-item-general.tpl.html) is used to define the display of a single product in the block. There may be several such templates: for each type of product you can define a corresponding single-product template.
An empty template (search-result-container-empty.tpl.html) is used in case no search was run, for instance, when rendering a visitor's first-time visit to the search page.
By modifying the templates you can match the look of the Shopping Cart to your design requirements. All templates of the ShoppingCart block are stored in the folder avactis-templates/catalog/shopping-cart/default/.
The ShoppingCart block consists of three types of templates: a container, an empty container and common-item templates.
The container template (shopping-cart-container.tpl.html) is required to define the design of the overall ShoppingCart block. For example, you can define border width and border color of the block, place a block title in its upper section, etc.
The empty template (shopping-cart-container-empty.tpl.html) is the default block used when the shopping cart contains no items. You can specify an appropriate text, for instance, "There are no items in your shopping cart".
A common item template (shopping-cart-item-general.tpl.html) is used to define the design of a a group of common items in a block. There can be several such templates: for each type of product you can define a template used to display it.
