Add a new override for the "node/view/full.tpl" template. Make sure that the siteaccess is set to "tscm". The name of this override is: "full_view_shop_folder", and applies only to the "shop" section. Update the priority to 1, and clear the (overrides) template cache.

Open the file "design/plain/override/templates/full_view_shop_folder" in your
favorite text-editor. Type some text and safe this file. If you browse to the front-end of the shop, you will see that the just inserted text appears (instead of the products).

Because we turned the caching system off and we have an excisting override, we can rapidly change the "full_view_shop_folder" and see our changes in the shop's front-end.

The new product list page will comply with the following rules:

1. A link to the shopping basket.
2. Each product contains a button which will add the product to the basket.
3. There are no links to the detailed information.
4. The image of the product will alternate between the left side or right side of the product description.

Because we build a very small shop, which has not that much products, the detailed information page is a bit overdone. The template code which achieve these requirements is listed below:

<div class="basketlink">

   <a class="tobasket" href={"shop/basket" | ezurl}>go to basket</a>

</div>

 

<div class="pagetitle">

   {$node.name}

</div>

 

{attribute_view_gui attribute=$node.object.data_map.description}

<hr/>

 

<div class="shopproducts" align=center>

   {let childnr=0}

   {section loop=$node.children var=child}

 

       {switch match=$childnr}

           {case match=0}{node_view_gui view=line content_node=$child image_position="imageleft"}{/case}

           {case match=1}{node_view_gui view=line content_node=$child image_position="imageright"}{/case}

       {/switch}

 

       <hr/>

       {set childnr= 1 | sub($childnr)}

   {/section}

   {/let}

</div>

This code lets the variable childnr, alternate between zero and one. If the variable is zero, it should appear on the left side. In the cases that the variable is one, it should appear on the right side.

To display the products we call the line template. This template is not (yet) overriden. Therefore the images will not alternate.

The "design/tscm/stylesheets/tscm.css" stylesheet must have the following lines:

.pagetitle

{

   font-size: 170%;

   padding-bottom: 8px;

}

 

a.tobasket

{

       font-size: 150%;

}

 

.basketlink

{

   text-align:right

}

 

.shopproducts

{

   width: 90%;

}

Now we will modify the view of each product. Therefore we create a new override for the "node/view/line.tpl" template. The name for this override will be: "line_view_shop_product", and applies only to the shop section.

Insert the following code into the empty override file:

<div class="product_title">

   {attribute_view_gui attribute=$node.object.data_map.title}

</div>

 

<div class={$image_position}>

   {attribute_view_gui attribute=$node.object.data_map.image border_size=1 image_class=small}

</div>

 

<table class="product" >

   <tr> <td colspan=2> {attribute_view_gui attribute=$node.object.data_map.short_description} </td> </tr>

   <tr><td colspan=2>&nbsp</td></tr>

   <tr> <td><b>Price</b></td><td> {attribute_view_gui attribute=$node.object.data_map.price} </td> </tr>

   <tr><td colspan=2>&nbsp</td></tr>

   <tr><td colspan=2></td></tr>

<tr><td colspan=2>

 

<form method="post" action={"content/action"|ezurl}>

 <input type="submit" class="defaultbutton" name="ActionAddToBasket" value="{"Add to basket"|i18n("design/base")}" />

 <input type="hidden" name="ContentNodeID" value="{$node.node_id}" />

 <input type="hidden" name="ContentObjectID" value="{$node.object.id}" />

 <input type="hidden" name="ViewMode" value="full" />

</form>

</td>

</tr>

</table>

The variable $image_position is set by the previous template, and will place
the image either left or right. The form, which defines the "add to basket"
button, is taken from the original template.