Thursday, June 24, 2010

Prestashop as Bookstore Part 3 - Tabs

I have done several modifications to make PrestaShop usable as a bookstore and I will try to sum it up in a few blog posts.

In PrestaShop, when you view a product (click on the product from e.g. the Product List, Start Page etc) you get a view like this.





















I made some changes to the text block to the right of the picture, but recently I decided to put that extra information in a tab, so now it looks like this




















There is some extra information in the "Data Sheet" tab and a new tab called "Review"

First: To change the content of a tab, edit themes folder/product.tpl and find the line
<!-- description and features -->
Thereafter, you will find two blocks of code, the first produce the tabs and the second the tab's content.
So, basically, just add whatever you want in the correct place. E.g. to add "Facts about the product" to the Data Sheet tab first find the ID for that tab:

<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>

So the ID is idTab2, find the block for idTab2 which will look something like this:

{if $features}
<ul id="idTab2" class="bullet">
<div id="short_description_block">
{if $features}
{foreach from=$features item=feature}
<li><span>{$feature.name|escape:'htmlall':'UTF-8'}:</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
{/foreach}
{/if}
</div>
</ul>
{/if}

Change it to

{if $features}
{l s='Facts about the product'}
<ul id="idTab2" class="bullet">
<div id="short_description_block">
{if $features}
{foreach from=$features item=feature}
<li><span>{$feature.name|escape:'htmlall':'UTF-8'}:</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
{/foreach}
{/if}
</div>
</ul>
{/if}

You can use html tags to make it e.g. bold and the {l s=xxx} makes it translatable from the BO.

To add a new tab, Reviews, I added the line

{if $product->location}<li><a id="review" href="#idTab100">{l s='Reviews'}</a></li>{/if}

Right before {$HOOK_PRODUCT_TAB} to make it display last (before Comments, whose code comes even further down). Note that it is the order of these lines of code that determines where the tab goes, not the name of the ID tag.

Then, somewhere below {$HOOK_PRODUCT_TAB}, within the div add

{if $product->location}
<div id="idTab100" class="rte">
...
</div>
{/if}

where ... symbolize what you want to be shown in the tab.
I use the location field to mark the item as a book, and so the if statement makes the tab only show for books, you may use something else there, whatever fits your needs.

4 comments:

  1. Hi,

    wow that was good job. I am also working on a book store. Can you share the template for book store. Or is there any other book store themes?

    thanks

    ReplyDelete
  2. Thanks!

    I use the standard template, so not much to share there ;)

    ReplyDelete
  3. Hi Mohsart,

    I would like to thank you for great job and support to community...

    I have a little request, Could you please upload the changed files as we would like to make sure the changes are done in right place..

    regards,
    kash
    alholan@gmail.com

    ReplyDelete
  4. Not sure if that will help you more, since you probably use a different version of PS, I'm still on 1.2.4.
    But sure, tell me what files and I'll send them to you

    ReplyDelete