Prestashop stores.tpl with map and also informations

Ecrit par Boris Billy le 12 septembre 2016 dans Codage CSS HTML

Dear readers,

Today I will show you how to create a page highlighting one of your shops. This page will include a location map and some practical informations as opening times, the phone number, an e-mail address, the description (etc…).

By default, Prestashop allows you to choose between two views of your page. The first one gathers all your shops in one single Google map interface ; the second one sets your page in a traditional interface showing a list of your shops and gathering all the basic informations related to them without any Google map tool.

Most of the time, I have to create pages for shops that only possess one unique postal address. In this case, I need to create a page that would include a Google Maps tool showing the location of my store but ALSO that would include the standard informations of the shop.

So here are the modifications to apply to get this result :

1 – First you have to override the file : controllers/front/StoresController.php

Copy the file in your folder : override/controllers/front/StoresController.php

Copy and paste this code :

//start of the modification
foreach ($stores as &$store) {
            $address = new Address();
            $address->country = Country::getNameById($this->context->language->id, $store['id_country']);
            $address->address1 = $store['address1'];
            $address->address2 = $store['address2'];
            $address->postcode = $store['postcode'];
            $address->city = $store['city'];

            $addresses_formated[$store['id_store']] = AddressFormat::getFormattedLayoutData($address);

            $store['has_picture'] = file_exists(_PS_STORE_IMG_DIR_.(int)$store['id_store'].'.jpg');
			if ($working_hours = $this->renderStoreWorkingHours($store)) {
				$store['working_hours'] = $working_hours;
//end of modification

In this file we override the function assignStores(); by adding the possibility to show the same elements that in the simplified view.

2 – Modify the view of the page by editing the file : themes/your-theme/stores.tpl

Find the line where the map is show after the {else} :

    {foreach $stores as $store}


Cliquez Tapis

Tapis de sol personnalisés à Nantes

{if $store.has_picture} {$|escape:'html':'UTF-8'} {/if}

21 rue de l'atlantique
44300 Basse-Goulaine - France
Tél : +33 2 28 00 01 26
E-mail :
Url :

{if $store.note}


{/if} {if isset($store.working_hours)}{$store.working_hours}{/if} {/foreach}

In my case, I use Bootstrap to get the new area with its informations before the map for the mobile version but after the map in a right column for the desktop version. So I use class « col-sm-push » and « col-sm-pull ».

I’ve used this modification in our new website « Cliquez-Tapis ». A store where you can by and customize your own carpet with your logo or any other picture.

Here is the final view :

Boris Billy
Boris Billy

Pour aller plus loin un feu d’artifice en WordPress 4

Un feu d’artifice d’effets spéciaux pour le nouveau site web de Hubert Thezé Pyrotechnie : . Vidéo en background pour la page d’accueil, galerie multimédia mixte photo...

Simple menu animé en css3

Nous allons créer une simple animation en css3 sur l'affichage d'une liste. Cela peut être utile pour apporter un peu d'animation sur un menu vertical. Nous allons utiliser la propriété "transition" proposé par...