4.8. Components
- Added new [control] and [control-set] tags to set series of Scratch- like option areas. Used for components in UI content editing.
Interchange components are portions of HTML and ITL that are included in pages within a catalog depending on options set in the Administration Tool. The default component set includes the following:
affiliate_receptor
best_horizontal
best_vertical
cart
cart_display
cart_tiny
category_vertical
cross_horizontal
cross_vertical
modular_buy
modular_update
none
promo
promo_horizontal
promo_vertical
random
random_horizontal
random_vertical
saved_carts_list_small
search_box_small
upsell
upsell_horizontal
upsell_vertical
/home/ic/catalogs/ft/templates/components:
4.8.1. affiliate_receptor
Not used in Foundation demo
4.8.2. best_horizontal
The best_horizontal component is used in the following templates:
templates/foundation/cart
templates/foundation/leftonly
templates/foundation/leftright
Not used in Foundation demo pages
4.8.3. best_vertical
The best_vertical component is used in the following template:
templates/foundation/leftright
Not used in Foundation demo pages
4.8.4. cart
The cart component is used in the following page:
pages/ord/basket.html
4.8.5. cart_display
The cart_display component creates a small shopping cart that is displayed on the search results page (pages/results.html). It is displayed after an item in a list of results from a search is added to the shopping cart. cart_display is called in results.html by the following include statement:
[include file="templates/components/cart_display"]
The cart_display component is used in the following pages:
pages/results.html
4.8.5.1. Component Walkthrough -- cart_display
The remainder of this section is best read in conjunction with the file CATROOT/templates/components/cart_display in a text editor.
Lines 1-6: Component Specification
1 [comment]
2 ui_component: cart_display
3 ui_component_group: info
4 ui_component_label: Smaller cart for display in content area
5
6 [/comment]
7
These lines control what is shown in the Edit page screen of the admin interface.
8 <!-- BEGIN COMPONENT [control component cart_display] -->
Line 8 is an HTML comment noting the start of the code for the component. (Note that this can serve as a useful debugging tool to help you locate the component in the resulting HTML generated by Interchange when you view the source of a page loaded in the browser.)
9 [if items]
Line 9 checks to see if there are items in the shopping basket. If there are, the remaining code up to the closing [/if] tag on line 64 is executed. If not, Interchanges continues executing the remaining code in results.html (the file that calls the cart_display component).
10 <center>
11 <table width="95%" border="0" cellspacing="0" cellpadding="0">
12 <TR class="contentbar2" VALIGN=TOP>
13 <td align=center class="contentbar2">Action</td>
14 <td class="contentbar2">
15 SKU
16 </td>
17 <td class="contentbar2">
18 Description
19 </td>
20 <td class="contentbar2">
21 Quantity
22 </td>
23 <td class="contentbar2">
24 Price
25 </td>
26 <td class="contentbar2">
27 Extension
28 </td>
29 </TR>
Line 10 centers the table started in line 11. Lines 12-29 create a header row in the shopping cart consisting of the header titles Action, SKU, Description, Quantity, Price, and Extension.
30 <TBODY>
31 [item-list]
32
Line 30 defines the remainder of the table as a section while the [item-list] tag on line 31 tells Interchange to execute the code up to the closing tag ([/item-list] on line 59 for each item the customer has ordered so far.
33 <tr class="[item-alternate 2]
maincontent
[else]contentbar1[/else]
[/item-alternate]">
34 <td align=center valign=top>
35 [page ord/basket]edit</A>
36 </TD>
37 <td valign=top>[item-code]</TD>
38 <td valign=top>[page [item-code]][item-description]</A>
39 </TD>
40
Line 33 begins the next row in the table. The [item-alternate] tag provided as the value of the class attribute tells Interchange to alternate between displaying the rows according to the "maincontent" and "contentbar1" styles (gray and white, respectively).
Lines 34-36 create a link to the shopping cart (basket.html) where the customer can remove or change the quantity of the item ordered.
Line 37 displays the SKU of the item. Lines 38 and 39 provide a link to the product display page (flypage.html) for the item. The [item-description] tag providing the content of the [page] tag enables the item's name to be displayed as the link to the product display page.
41 [if-item-modifier gift_cert]
42 <TD ALIGN=CENTER><small>Amount of gift:</small></TD>
43 <TD ALIGN=CENTER>[item-quantity]</TD>
44 <TD ALIGN=right>
45 [item-subtotal]
46 </TD>
47 [else]
48 <TD ALIGN=CENTER>[item-quantity]</TD>
49 <TD ALIGN=right>
50 [item-price]
51 </TD>
52 <TD ALIGN=right>
53 [item-subtotal]
54 </TD>
55 [/else]
56 [/if-item-modifier]
57 </TR>
58
Line 41 checks whether the item is a gift certificate. If it is it displays "Amount of gift:" and the [item-quantity] (number of gift certificates, in this case) under the headings "Quantity" and "Price", respectively. Otherwise, lines 48 through 50 display the quantity and price of the item ordered. Lines 45 or 53 (depending on whether the item is a gift certificate) display the item subtotal (quantity multiplied by price) for the item under the heading "Extension".
59 [/item-list]
60 </TBODY>
61 </table>
62 </FORM>
63 </center>
64 [/if]
65
66 <!-- END COMPONENT [control component cart_display] -->
Lines 59 through 64 close out the tags for the component, and line 66 indicates the end of the component code.
4.8.6. cart_tiny
The cart_tiny component is used in the following pages:
pages/account.html
pages/browse.html
pages/canceled.html
pages/customerservice.html
pages/flypage.html
pages/help.html
pages/index.html
pages/logout.html
pages/modular_modify.html
pages/new_account.html
pages/privacypolicy.html
pages/process_return.html
pages/quantity.html
pages/query/check_orders.html
pages/query/order_detail.html
pages/query/order_return.html
pages/saved_carts.html
pages/ship_addresses.html
4.8.7. category_horizontal
Not used in Foundation demo pages or templates.
4.8.8. category_vertical
The category_vertical component provides a listing of all products in the catalog, organized by prod_group (e.g., Hand Tools, Ladders). category_vertical is usually displayed in the LEFTSIDE section of the page, under the search_box_small component.
The category_vertical component is used in the following pages:
pages/aboutus.html
pages/account.html
pages/affiliate/index.html
pages/affiliate/login.html
pages/browse.html
pages/canceled.html
pages/contact.html
pages/customerservice.html
pages/flypage.html
pages/help.html
pages/index.html
pages/login.html
pages/logout.html
pages/modular_modify.html
pages/new_account.html
pages/ord/basket.html
pages/privacypolicy.html
pages/process_return.html
pages/quantity.html
pages/query/check_orders.html
pages/query/order_detail.html
pages/query/order_return.html
pages/results.html
pages/results_big.html
pages/returns.html
pages/saved_carts.html
pages/ship_addresses.html
pages/stock-alert-added.html
pages/stock-alert.html
pages/swap_results.html
4.8.8.1. Component Walkthrough -- category_vertical
The remainder of this section is best read while viewing the file CATROOT/templates/components/cart_display in a text editor.
Lines 1-6: Component Specification
1 [comment]
2 ui_component: category_vertical
3 ui_component_group: Navigation
4 ui_component_label: Vertical category list
5
6 page_class:
7 label: Page class
8 widget: select
9 lookup: which_page
10 db: area
11 help: Defines which sets of items should be displayed
12 advanced: 1
13
14 set_selector:
15 label: Page area selector
16 widget: select
17 db: area
18 lookup: sel
19 help: Defines which sets of items should be displayed
20 advanced: 1
21 [/comment]
22
These lines control what is shown in the Edit page screen of the Administration Tool.
23 <tr><td align="center" class="categorybar">
24 <br>
25 <table>
26
27 <!-- BEGIN COMPONENT [control component category_vertical] -->
Lines 23-25 set up the row and table within that row that will hold the vertical category list. Line 27 identifies the start of the code for the list.
28 [loop
29 prefix=box
30 search="
31 fi=area
32 st=db
33 tf=sort
34 ac=0
35 ac=0
36 co=yes
37
38 sf=sel
39 op=eq
40 se=[control set_selector left]
41
42 sf=which_page
43 op=rm
44 se=[control page_class all|@@MV_PAGE@@]
45 "]
46
Lines 28-45 build a list of product categories obtained through a search of the area table.
47 <tr>
48 <td valign="top" class="categorybar">
49 <b>[box-exec bar_link]area[/box-exec]</b>
50 </td>
51 </tr>
52 <tr>
53 <td valign="top" class="categorybar">
54
55 [set found_cat][/set]
56 [loop prefix=cat
57 search="
58 fi=cat
59 st=db
60 tf=sort
61 tf=name
62 rf=code,name
63 sf=sel
64 se=[box-code]
65 "
66 ]
67 [cat-exec bar_link]cat[/cat-exec]<BR>
68 [/loop]
69
70 </td>
71 </tr>
72 [/loop]
73
74 </table>
75 <br>
76 </td></tr>
77
78 <!-- END COMPONENT [control component category_vertical] -->
Lines 47-78 generate a list of links based on the products and product categories identified in the search.
4.8.9. cross_horizontal
The cross_horizontal component is used in the following pages:
pages/browse.html
pages/index.html
pages/results.html
pages/results_big.html
The cross_horizontal component is used in the following templates:
templates/foundation/cart
templates/foundation/leftonly
templates/foundation/leftright
4.8.10. cross_vertical
Not used in Foundation demo pages.
The cross_horizontal component is used in the following templates:
templates/foundation/leftright
4.8.11. modular_buy
The modular_buy component is used in the following pages:
pages/flypage.html
The modular_buy component is used in the following templates:
templates/components/modular_update
4.8.12. modular_update
The modular_update component is used in the following pages:
pages/modular_modify.html
4.8.13. promo
The promo component is used in the following pages:
pages/contact.html
pages/results_big.html
4.8.14. promo_horizontal
The promo_horizontal component is used in the following pages:
pages/aboutus.html
pages/canceled.html
The promo_horizontal component is used in the following templates:
templates/foundation/cart
templates/foundation/leftonly
templates/foundation/leftright
4.8.15. promo_vertical
Not used in Foundation demo pages.
The promo_horizontal component is used in the following templates:
templates/foundation/leftright
4.8.16. random
The random component is used in the following pages:
pages/browse.html
pages/index.html
pages/ord/basket.html
pages/privacypolicy.html
pages/process_return.html
pages/results.html
pages/swap_results.html
4.8.17. random_horizontal
Not used in Foundation demo pages.
The random_horizontal component is used in the following templates:
templates/foundation/cart
templates/foundation/leftonly
templates/foundation/leftright
4.8.18. random_vertical
Not used in Foundation demo pages.
The random_vertical component is used in the following templates:
templates/foundation/leftright
4.8.19. saved_carts_list_small
The saved_carts_list_small component is used in the following pages:
pages/ord/basket.html
4.8.20. search_box_small
The search_box_small component is used in the following pages:
pages/aboutus.html
pages/account.html
pages/affiliate/index.html
pages/affiliate/login.html
pages/browse.html
pages/canceled.html
pages/contact.html
pages/customerservice.html
pages/flypage.html
pages/help.html
pages/index.html
pages/login.html
pages/logout.html
pages/modular_modify.html
pages/new_account.html
pages/ord/basket.html
pages/privacypolicy.html
pages/process_return.html
pages/quantity.html
pages/query/check_orders.html
pages/query/order_detail.html
pages/query/order_return.html
pages/results.html
pages/results_big.html
pages/returns.html
pages/saved_carts.html
pages/ship_addresses.html
pages/stock-alert-added.html
pages/stock-alert.html
pages/swap_results.html
The search_box_small component is used in the following templates:
templates/regions/LEFTONLY_TOP
templates/regions/LEFTRIGHT_TOP
4.8.21. upsell
Not used in Foundation demo pages.
4.8.22. upsell_horizontal
The upsell_horizontal component is used in the following pages:
pages/flypage.html
The upsell_horizontal component is used in the following templates:
templates/foundation/cart
templates/foundation/leftonly
templates/foundation/leftright
4.8.23. upsell_vertical
Not used in Foundation demo pages.
The upsell_vertical component is used in the following templates:
templates/foundation/leftright