RSS

Knowledge base/Tips & Tricks

Create a new showcase

Technical Support
posted this on Feb 01 14:34

Before starting, let me give you an advise, take few minutes to get familiar with TW's architecture through this brief introduction: http://support.touristway.com/attachments/token/123737946163cb42c6a...

Each showcase has own settings, the most important are:

  • catalogue: type of product that will be listed, can be 'accommodation','package','rental','guide'
  • exposure: each product can be bound to a showcase from the administration area. The tab "showcases" in the profile menu of any product allows you to bind or more showcases to the product. Each showcase has a numeric code you can use in this attribute to filter only the products that belong to a specific showcase. Code are usually numbers like 1,2,3
  • itemsperpage: you can limit the number of products retrieved using this attribute. Value can be any integer number (1,10,18,etc.)
  • usetemplate: this is a file path to the template that will be used to "skin" the results. Use TW variables to make it easier: %-system.lngtemplatepath-%hlib/comm/showcase1.html
  • renderto: once the records has been retrieved and "dressed" with the selected template, the output will be available in the page through a placeholder: a variable whose name has to be stated here. If you write something like 'myshowcaseoutput' then you will be able to stamp the output of this showcase anywhere in the page through the variable %-myshowcaseoutput-%
  • alias: this statement basically create a shortcut that you can use inside the template to get to the data you need without having to repeat the whole  address of a variable. For example, instead of %-components.myshowcase.results[0].name-% you could just use %-results.thefirstrecord.name-% by creating this alias: <alias id="thefirstrecord">components.myshowcase.results[0]</alias>

Time to write some code. We will reuse an existing template to make things smoother, however you know changing it is as easy as replacing the file name in 'usetemplate' attribute.

Let's clear the field from any conflict by creating a new type of showcase we can use for this example:

  1. go to LISTS menu
  2. select 'showcases'
  3. click (+) to add a new record
  4. Give it a name (i.e. "Box on top left")
  5. Give it a code, for our example we'll use the number 9

 

showcases_0.png

 

showcases_1.png

We'll do this example with a bunch of travel guides. Please create 3 or 4 travel guides from the administration area and link them to the showcase n.9 you just created (you will find it in the list on the left with the name you assigned it before)

Run your TW workbench ('templates' menu) and locate the page where you want to add your new showcase. Then click on the 'page: edit' link in the workbench box on top

showcases_2.png

Now enter this code to instance your new showcase using the amonymous component 'showcase'.

<component id="myshowcase" class="showcase">
    <catalogue>guide</catalogue>
    <itemsperpage>3</itemsperpage>
    <exposure>9</exposure>
    <usetemplate>%-system.lngtemplatepath-%hlib/comm/showcase3.html</usetemplate>
    <renderto>myshowcaseoutput</renderto>
    <datasetalias>
        <alias id="results">components.myshowcase.results</alias>
    </datasetalias>
</component>

Scroll down and locate the point where you want to place your new showcase, then just type the placeholder name as per <renderto> attribute:

%-myshowcaseoutput-%


Publish your changes and reload the page. You should see your new showcase listing 3 of the guides.
Depending on where you placed the placeholder it may not look exactly as you expected. You can adjust the look by editing the template, it's just HTML with few variables to represent dynamic content.
Note that TW workbench gives you handy shortcuts to open the template of each component in the page to do your changes.

showcases_3.png

 

 

 

NOTE: Some showcases are shared among all templates so their configuration is centralized at /fwlib/viewportinner.xml
You can download and edit this file from the FILES menu
In the file you will find the same kind of code described above.

 
Topic is closed for comments