Agence web créative 44


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 :


class StoresController extends StoresControllerCore
    public $php_self = 'stores';

     * Assign template vars for classical stores
    protected function assignStores()
        $this->context->smarty->assign('hasStoreIcon', file_exists(_PS_IMG_DIR_.Configuration::get('PS_STORES_ICON')));

        $stores = Db::getInstance()->executeS('
		SELECT s.*, country, st.iso_code state
		FROM '._DB_PREFIX_.'store s
		'.Shop::addSqlAssociation('store', 's').'
		LEFT JOIN '._DB_PREFIX_.'country_lang cl ON (cl.id_country = s.id_country)
		LEFT JOIN '._DB_PREFIX_.'state st ON (st.id_state = s.id_state)
		WHERE = 1 AND cl.id_lang = '.(int)$this->context->language->id);

        $distance_unit = Configuration::get('PS_DISTANCE_UNIT');
        if (!in_array($distance_unit, array('km', 'mi'))) {
            $distance_unit = 'km';

		//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;
		//en of modification
            'distance_unit' => $distance_unit,
            'simplifiedStoresDiplay' => false,
			'addresses_formated' => $addresses_formated, // modification
            'stores' => $stores, // 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} :

<div id="map"></div>

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”.

<!-- start informations column -->
<div class="col-sm-4 col-sm-push-8">
    {foreach $stores as $store}


    {if $store.has_picture}
    <img src="{$img_store_dir}{$store.id_store}.jpg" alt="{$|escape:'html':'UTF-8'}" width="180" height="110"/>

	{assign value=$store.id_store var="id_store"}
	{foreach from=$addresses_formated.$id_store.ordered name=adr_loop item=pattern}
	  {assign var=addressKey value=" "|explode:$pattern}
	  {foreach from=$addressKey item=key name="word_loop"}
		<span {if isset($addresses_style[$key])} class="{$addresses_style[$key]}"{/if}>
	{if $}<br/>{l s='Phone:'} {$|escape:'html':'UTF-8'}{/if}
	{if $store.fax}<br/>{l s='Fax:'} {$store.fax|escape:'html':'UTF-8'}{/if}
	{if $}<br/>{l s='Email:'} {$|escape:'html':'UTF-8'}{/if}
	{if $store.note}<p>{$store.note|escape:'html':'UTF-8'|nl2br}</p>{/if}

        {if isset($store.working_hours)}{$store.working_hours}{/if}
<!-- end informations column -->
<!-- start map column -->
<div class="col-sm-8 col-sm-pull-4">
	<div id="map"></div>
	<p class="store-title">
		<strong class="dark">
			{l s='Enter a location (e.g. zip/postal code, address, city or country) in order to find the nearest stores.'}
    <div class="store-content">
        <div class="address-input">
            <label for="addressInput">{l s='Your location:'}</label>
            <input class="form-control grey" type="text" name="location" id="addressInput" value="{l s='Address, zip / postal code, city, state or country'}" />
        <div class="radius-input">
            <label for="radiusSelect">{l s='Radius:'}</label>
            <select name="radius" id="radiusSelect" class="form-control">
                <option value="15">15</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            <img src="{$img_ps_dir}loader.gif" class="middle" alt="" id="stores_loader" />
            <button name="search_locations" class="button btn btn-default button-small">
            		{l s='Search'}<i class="icon-chevron-right right"></i>
    <div class="store-content-select selector3">
    	<select id="locationSelect" class="form-control">

	<table id="stores-table" class="table table-bordered">
                <th class="num">#</th>
                <th>{l s='Store'}</th>
                <th>{l s='Address'}</th>
                <th>{l s='Distance'}</th>
<!-- end map column -->

{addJsDef map=''}
{addJsDef markers=array()}
{addJsDef infoWindow=''}
{addJsDef locationSelect=''}
{addJsDef defaultLat=$defaultLat}
{addJsDef defaultLong=$defaultLong}
{addJsDef hasStoreIcon=$hasStoreIcon}
{addJsDef distance_unit=$distance_unit}
{addJsDef img_store_dir=$img_store_dir}
{addJsDef img_ps_dir=$img_ps_dir}
{addJsDef searchUrl=$searchUrl}
{addJsDef logo_store=$logo_store}
{addJsDefL name=translation_1}{l s='No stores were found. Please try selecting a wider radius.' js=1}{/addJsDefL}
{addJsDefL name=translation_2}{l s='store found -- see details:' js=1}{/addJsDefL}
{addJsDefL name=translation_3}{l s='stores found -- view all results:' js=1}{/addJsDefL}
{addJsDefL name=translation_4}{l s='Phone:' js=1}{/addJsDefL}
{addJsDefL name=translation_5}{l s='Get directions' js=1}{/addJsDefL}
{addJsDefL name=translation_6}{l s='Not found' js=1}{/addJsDefL}
View of the new stores.tpl

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 :


Laissez un commentaire