Tuesday, June 29, 2010

Vacation

Off to China for a little less than a month, so plolly no blogging fol a while

Thursday, June 24, 2010

Popups

In the picture in my last post there is one thing that may need extra explanation:
The texts "About the rank suggestion" and "About the book sizes" underneath the Data Sheet Tab.
They are links to pop-up windows, like this


















This is accomplished in a pretty crude way IMHO, in [themes folder]/css/global.css I added
/* pop up */
#layer1 {
position: relative;
visibility: hidden;
width: 250px;
height: 110px;
left: 0px;
top: 0px;
background-color: #fff;
border: 1px solid #000;
padding: 10px;
}
#layer2 {
position: relative;
visibility: hidden;
width: 250px;
height: 110px;
left: 0px;
top: 0px;
background-color: #fff;
border: 1px solid #000;
padding: 10px;
}
#close {
float: right;
}
/* /pop up */
then in [themes folder]/product.tpl beneath the code to display the features
<table border="0">
<tr>
<p>
<th style="text-align: left">
<a href="javascript:setVisible('layer1',true)">{l s='About the rank suggestion'}</a>
</th></p>
<th style="text-align: left">
<a href="javascript:setVisible('layer2',true)">{l s='About the book sizes'}</a>
</th>
</tr>
<tr>
<td>
<div id="layer1">
<span id="close"><a href="javascript:setVisible('layer1')" style="text-decoration: none"><strong>{l s='Hide'}</strong></a></span>
<p><br />{l s='Rank suggestions are taken from various websites and are sometimes also based on my personal ideas.'}<br />
{l s='If you have different opinions about what rank the reader should be when reading the book, please contact me!'}
<br /></p>
</div>
</td>
<td>
<div id="layer2">
<span id="close"><a href="javascript:setVisible('layer2')" style="text-decoration: none"><strong>{l s='Hide'}</strong></a></span>
<p><br />{l s='The book sizes are approximate.'}<br />
{l s='L = close to A4, about 26-28 cm high'}</br>
{l s='M = close to A5, about 19-22 cm high'}</br>
{l s='S = In-between A5 and A6, about 17-18 cm high'}</br>
{l s='XS = close to A6, about 14 cm high'}
<br /></p>
</div>
</td>
</tr>
</table>
and in [themes folder]/header.tpl
<script type="text/javascript" src="{$content_dir}/../../pop-up/popupDiv.js"></script>
And finaly in the folder directed to in header.tpl I created the file popupDic.js with the following content
/* -----------------------------------------------
Floating layer - v.1
(c) 2006 www.haan.net
contact: jeroen@haan.net
You may use this script but please leave the credits on top intact.
Please inform us of any improvements made.
When usefull we will add your credits.
------------------------------------------------ */
x = 20;
y = 70;
function setVisible(obj)
{
obj = document.getElementById(obj);
obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
function placeIt(obj)
{
obj = document.getElementById(obj);
if (document.documentElement)
{
theLeft = document.documentElement.scrollLeft;
theTop = document.documentElement.scrollTop;
}
else if (document.body)
{
theLeft = document.body.scrollLeft;
theTop = document.body.scrollTop;
}
theLeft += x;
theTop += y;
obj.style.left = theLeft + 'px' ;
obj.style.top = theTop + 'px' ;
setTimeout("placeIt('layer1')",500);
}
window.onscroll = setTimeout("placeIt('layer1')",500);

This solution was taken from http://javascript.internet.com/miscellaneous/popup-div.html

A Book on PrestaShop

Today I recieved a new Book about how to configure and use the PrestaShop Package.

It is in .pdf format and I will try to go through it next week when I fly to China; depending on how much of a sleeping pill it is and on several other things like Internet availability in China, a revew of some sort is to be published here soon afterwards.
I may not be able to reach this Blog for a month or so, so even if I finish reading the book immediatly, the review may be a little late. Please be patient.

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.

Saturday, June 5, 2010

Prestashop as Bookstore Part 2 - Book Series & Publishers

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.

Today I'll talk a little about more information I like to have in my Bookstore, eg the Publishers of the books.

I understand if my needs are not the same as most Bookstores have, but these modifications were very valuable for my needs.
First of all, listing the Publishers, to be able to find all books from a certain Publisher is almost a must for me.
And also, lots of my books are part of a series of books, so listing all books in a series is a really good thing for me.

First off I translated Manufacturers and Distributors to Publisher and Book Series.

I then used the Location field for the ISBN number and by leaving this field empty for other items I can determine if a item is a book or not (for books without ISBN I just put "none" in the field.

I put the info in the same block as the Authors, like this
(continued from last post's chunk of code, in themes/product.tpl)

{if $product->manufacturer_name}
<div id="short_description_content" class="rte align_justify">
{if $product->location}
{l s='Publisher'}:
<a href="{$link->getmanufacturerLink($product->id_manufacturer, $product->link_rewrite)|escape:'htmlall':'UTF-8'}" title="{l s='List books from'} {$product->manufacturer_name|escape:'htmlall':'UTF-8'}">{$product->manufacturer_name|escape:'htmlall':'UTF-8'}</a>
{else}
{l s='Manufacturer'}:
<a href="{$link->getmanufacture
rLink($product->id_manufacturer, $product->link_rewrite)|escape:'htmlall':'UTF-8'}" title="{l s='List items made by'} {$product->manufacturer_name|escape:'htmlall':'UTF-8'}">{$product->manufacturer_name|escape:'htmlall':'UTF-8'}</a>
{/if}
</div>
{/if}

As you may see in the code above, I later realized that I could use Manufacturers for their "real" use when not dealing with books.

{if $product->supplier_name}
<div id="short_description_content" class="rte align_justify">
{l s='Supplier'}:
<a href="{$link->getsupplierLink($product->id_supplier, $product->link_rewrite)|escape:'htmlall':'UTF-8'}" title="{l s='List books in the series'} {$product->supplier_name|escape:'htmlall':'UTF-8'}">
{$product->supplier_name|escape:'htmlall':'UTF-8'}</a>
</div>
{/if}
{if $product->location != ''}
<div id="short_description_content"
class="rte align_justify">
{l s='ISBN'}: {$product->location}
</div>
{/if}
{if $product->ean13 != ''}
<div id="short_description_content" class="rte align_justify">
{l s='EAN'}: {$product->ean13}
</div>
{/if}
</div>
</p>

And last in the block I put the ISBN and/or EAN, which tends to be the same thing for most books (but not always) so I just figured why not. More information than one needs is better than less information than one wants...

Then I modified the settings in the Manufacturers and Distributors Blocks in the Admin part of Prestashop to not use plain text but a drop-down list.

I also did some more translations so it says "Select Series" etc.



In the future I'd like to split up the Distributors Block in two so that one is for Publishers and one for Manufacturors, but right now they are mixed together.

This is how the product view looks for a book after the modifications.









and this is how it looks for a non-book.





Wednesday, June 2, 2010

Prestashop as Bookstore Part 1 - Authors

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.

First off I'll try to explain how I handled authors.

Some others have used eg Manufacturers for this job, renaming Manufacturers to Authors kind of does the job, but there are a couple of issues with this solution. Most important for me was that the authors of the books that I sell often work together with others, and several authors have written many books.
Basically, what I needed was a one to many relationship, ie if I chose a author I'd like to see all books that s/he has written, as a sole author as well as those together with others.
Manufacturers and Distributors don't work like this so I had to look for another solution.

I decided to use Tags. This is not optimal, but for my purposes it works quite good.

First thing to do is translate Tags to Authors (and the equivalent for other languages that you use), using Tools, Translations in the Back Office.

Then I wanted the Tags Block to look like eg the Manufacturers Block.
By looking at the code in modules/blocktags and modules/blockmanufacturer I came up with this for modules/blocktags/blocktags.tpl

<!-- Block tags module -->
<div id="tags_block_left" class="block blockmanufacturer">
<h4>{l s='Tags' mod='blocktags'}</h4>
<div class="block_content">
{if $tags}
<form action="{$smarty.server.SCRIPT_NAME}" method="get">
<p>
<select id="tags_list" onchange="autoUrl('tags_list', '');">
<option value="0">{l s='All tags' mod='blocktags'}</option>
{foreach from=$tags item=tag}
<option value="{$base_dir}search.php?tag={$tag.name|urlencode}">{$tag.name}</option>
{/foreach}
</select>
</p>
</form>
{else}
{l s='No tags specified yet' mod='blocktags'}
{/if}
</div>
</div>
<!-- /Block tags module -->

Then I wanted the author(s) to show when I view the product, in themes/prestashop (or whatever themes folder name you have)/product.tpl
After

<div id="pb-left-column">

add

<div id="short_description_block">

(This is to create a separate block where authors and other information will go, it will show right above the short description block.)

{if $product->tags}
<div id="short_description_content" class="rte align_justify">{l s='Tags'}:
{if $lang_iso == se} {assign var='lng' value=4}
{else} {assign var='lng' value=1}
{/if}
{assign var='tag1' value=$product->tags[$lng]}
{foreach from=$tag1 item=author}
<a href="{$base_dir}search.php?tag={$author}" title="{l s='List books by'} {$author}">{$author}</a>
{/foreach}
</div>
{/if}
</div>

(The last line is of course to end the block, more will be added in this block later.)

All texts inside {l s='...'} can and should be traslated in the BO.

I didn't find what variable contains the numeric code for the language, and it seems to be a great secret because nobody at the PS Forum seems to know either, so I did the ugly workaround using the if statement above.

Now I just added the authors as tags on each book.
Note that it has to be done for each language you use.

The modifications described above were made about six months ago, so I may have forgotten something in the description. Please feel free to ask if something is unclear!

Default Country - Bug in IE 6-8

It seems I never wrote about this strange bug before, so here goes...

Problem description
If a customer use the Swedish Internet Explorer 6, 7, or 8 PrestaShop thinks they are located in El Salvador.

This is because of a bug in IE. IE sends the Language Code (SV for Sweden) intead of the Country Code (SE for Sweden, SV for El Salvador) to the server.
Since the bug appeared as early as in ver 6 of IE, one would think that the bug would be solved by now, but I guess it's not regarded severe enough.

Client side workaround
One workaround would be to add .se as suffix in IE (Verktyg, Internetalternativ, Språk), but since that only fix the problem for that single client it's not really a solution.

Solution
The way I solved it was to hardcode it in the PrestaShop code, like this:
In themes/prestashop (or whatever your themes folder is called)/authentication.tpl change $sl_country to the number that represents Sweden in your installation of PrestaShop (in mine it's 18 but could be something else for you)

I.e. change

{foreach from=$countries item=v}
<option value="{$v.id_country}" {if ($sl_country == $v.id_country)} selected="selected"{/if}>{$v.name|escape:'htmlall':'UTF-8'}</option>
{/foreach}

to

{foreach from=$countries item=v}
<option value="{$v.id_country}" {if (18 == $v.id_country)} selected="selected"{/if}>{$v.name|escape:'htmlall':'UTF-8'}</option>
{/foreach}


PS Note to self: use this to include code in blog posts

Monday, March 8, 2010

A small bug(?) in product.tpl

I found that if I created a product that was allowed to be ordered when it is out of stock and it has combinations, or attributes, when I look on the product (product.tpl) the text about entering an email address to be "notified when the item is in stock" appears.
This is only if there are combinations added, so a little strange.

While debugging the code I found that by inserting
{if !$allow_oosp}
...
{/if}

around the $HOOK_PRODUCT_OOS paragraph, right after < ! - - Out of stock hook - - >, the behaviour returns to normal.
(spaces added so as the code won't be interpreted as code...)

Monday, February 15, 2010

Toolkit

http://esdev.net/ultimate-prestashop-toolkit-50-resources
Haven't had the time to check it out yet

Moving a block

If you want to move it inside the same panel
  • Go to Modules and click Positions
  • Now you can move the block up or down inside the panel where it is located

If you want to move it to a different panel
  • Click Transplant a module
  • Select the Module/block that you want to move and where you want it
  • Remove it from where it used to be

Translations

If you want to translate something in PrestaShop, don't edit any files!

This is the way to do it

  • In the Back Office, go to Tools and Translations
  • Select where the translation is to be made, usually in a Module or the Front Office, and click the flag of the country whose language you want to translate to
  • Click Expand all fieldsets and search for the phrase you want to translate
  • Enter the translation and click Update Translations
Simple as that
What this does is add the translated phrase(s) to a file called xx.php where xx is the ISO-Code of the country (where it is located depends on what you have translated).
It is also (I guess) possible to edit that file directly but I wouldn't recommend it.

OK, that's not too hard, but what if I want to add some text and translate that?

Lets say we want to add the text "This is a test shop, please do not order anything" to all product pages.

  • Go to the themes directory (themes/prestashop by default) and edit the file product.tpl
  • Enter this where you want the text to appear {l s='This is a test shop, please do not order anything'}
  • Then follow the steps above and you will see that the phrase has popped up to be translated in the Back Office
Note that if the phrase is located in a module the xxx.tpl file is located in modules/xxx where xxx is the name of the module, and that you need to add the module name in the code, ie
{l s='This is a text to be shown in a module' mod='xxx'}
If you forget about the mod='xxx', the phrase will show up to be translated in the Back Office, but the translated phrase will never show up in the shop.

If you want to change a text, I'd advise you not to change it in the code but instead use the translation tool and translate from English to English.