Prestashop stores.tpl with map and also informations

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}
    
    {/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