How to use Treasure Chest to make a product summary page
I noticed a few people asking for help with trying to get a multiple product listing working with TreasureChest (TC), without any clear replies, and though its my first time using it I managed to figure out a way to do this so I am documenting it here. For the record, I am using MODx v1.0.2, and TreasureChest v1.0, PHP 5.2.9, Apache, Linux, Mysql 5.0.77
This method mixes both TC placeholders and normal MODx resource fields (eg content, introtext) to produce a result, so its critical to link the modx resource with the correct TC item id. The two are linked with the TC parameter [tt][+treasure.id+][/tt]. I am also assuming you can get TC working already.
We will have :
- 1 summary product page, which uses a special template (’shop_overview’)
- many product pages, which use another special template (’shop_item’)
• Install TC as per instructions
• Create some products via TC Module
• Create a resource container, named ’Shop’ which will be the page where all products are listed
- turn the RTE off for the content area
- in the content area add the ditto call for summary of products eg
[tt][!Ditto? &id=`shop` &parents=`[*id*]` &display=`all` &tpl=`tc_shop_item_tpl` !][/tt]
- in the template for this page, be sure to add the TC snippet call for the js, so the cart functions are available eg
[tt][[TreasureChest? &service=`global`]][/tt]
• Create the product summary chunk [tt]{{tc_shop_item_tpl}}[/tt]:
[+tc_snippet_call+] <!-- important: the tvs containing TC placeholders wont work without this one! -->
<div class="shopitem clearfix">
<img src="[+shopitem_image+]" width="120" height="180" alt="[+pagetitle+] drlightbox" class="floatright">
<h2><a href="[~[+id+]~]">[+longtitle+]</a></h2>
<p>[+introtext+]</p>
<p><strong>Price:</strong> $[+tc_amount+]</p>
<p><strong>Add</strong> [+tc_add+]</p>
</div>
and attach to your product page template ’shop_item’
- Create a TV for each TC parameter you wish to display in your product summary page
eg tv name: tc_add
tv type: text
tv input: <blank>
tv default: [+treasure.add+]
- by adding the default placeholder, you won’t ever need to fill it in a tv value!
- you dont need to create a tv for every tc parameter, just the ones you want on the summary page
eg I created tc_add, tc_amount
- Also create a TV to call the TC snippet. (This is the secret to making this method work - it avoids having content output twice which would happen if you called the snippet in any document field. Also, the summary page wont work if you just had the TC snippet call in the template were supplying the TC product id by TV.)
eg tv name: tc_snippet_call
tv type: text
tv input: <blank>
tv default: [[TreasureChest? &item=`1`]
- this one you will have to update on every product page with the correct tc product id
• Create a product page template ’shop_item’
- include the tv to call TC for this item eg
[*tc_snippet_call*]
- include your normal modx tags eg
<h1>[*longtitle*]</h1>
<div class="product-image"><img src="[*shopitem_image*]" width="240" height="320" alt="Image of [+longtitle+]"></div>
[*content*]
- include any TC placeholder either directly (or use a chunk) eg
[+treasure.amount] or
{{tc_shop_item}} (containing mark-up and placeholders)
- include the cart holder eg
<div class="treasure_cart"> </div>
- dont forget to make sure you have attached the tv’s we created above to this template, so they are available to it
• Create product pages within the ’Shop’ container
- one for each product you added within TC manager earlier
- set the template to ’shop_item’
- update the tv ’tc_snippet_call’ to use the correct TC item id
• You’re done... go admire your work!
Comments or feedback welcome
