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} {$store.name|escape:'html':'UTF-8'} {/if}

21 rue de l'atlantique
44300 Basse-Goulaine - France
Tél : +33 2 28 00 01 26
E-mail : contact@cliquez-tapis.com
Url : www.cliquez-tapis.com

{if $store.note}

{$store.note|escape:'html':'UTF-8'|nl2br}

{/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 : https://www.cliquez-tapis.com/magasins

page-contact-cliquez-tapis
Boris Billy
Boris Billy

Pour aller plus loin

Optimisation de votre site WordPress

Vous avez un site internet Wordpress et votre agence de stratégie digitale vous demande d’intégrer ses recommandations lexicales et ses recommandations techniques. Votre agence de développement web actuelle ne peut pas ou...

Refonte WordPress pour Atout Plastic

Un nouveau site web La nouvelle version du site internet d’Atout Plastic est en ligne. Nous remercions monsieur et madame Masson...