PrestaShop propose d’afficher une page avec la liste de tous les points de vente physique dont vous disposez.
Voyons voir comment personnaliser cette page magasins dans PrestaShop.
Constat : une page magasins dans PrestaShop assez limitée
Vous avez une option dans l’administration de PrestaShop qui permet d’affiche au choix :
soit une Google map avec les points de vente,
soit une liste classique des magasins (affichage simplifié).
C’est plutôt limité, notamment si on veut avoir les deux affichages.
Tuto : personnaliser la page magasins dans PrestaShop
[edit du 05/10/2017] Voici un tuto vidéo (qualité de son médiocre, veuillez m’en excuser) pour appliquer les modifications :
On va faire en sorte que la page magasins dans PrestaShop affiche désormais la Google map ET la liste des magasins.
On va d’abord créer un override du fichier StoresController.php qu’on va placer dans le dossier www/override/controllers/front avec le contenu suivant :
class StoresController extends StoresControllerCore { /** * Assign template vars for classical stores */ protected function assignStores() { $magasins = Db::getInstance()->executeS(' SELECT s.*, cl.name 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 s.active = 1 AND cl.id_lang = '.(int)$this->context->language->id);
A cela, on va ajouter un peu de style dans le fichier global.css de votre thème :
/*STORES*/ #list_stores{font-size: 0;text-align: left;} #list_stores li{display: inline-block;vertical-align: top;width: 33.33%;padding: 0 1%;font-size: 13px;font-weight: normal;margin: 0 0 30px;} #list_stores li .title{background: #333;color: #fff;padding: 3px 5px;} #list_stores li p + p{margin-top: 5px;} @media screen and (max-width: 767px){ #list_stores li{width: 48%;} } @media screen and (max-width: 479px){ #list_stores li{width: 98%;} }
N’oubliez pas de supprimer le fichier www/cache/class_index.php pour que votre override soit bien pris en compte.
Le résultat devrait être sous cette forme avec une stores list précédée de la Google map avec les magasins :
Avec ça, vos clients trouveront plus facilement le point de vente qui leur correspond, un plus pour vos ventes !
[Edit du 13/06/2016] Voici les fichiers à télécharger directement pour ceux qui n’arriverait pas à mettre en place la personnalisation 🙂
33 commentaires sur “Tuto : personnaliser la page magasins dans PrestaShop”
Bonjour toujours pratiques vos conseils 🙂
Je cherche à faire quelque chose de simple en apparence mais bien sûr avec prestashop c’est toujours une galère …
Savez-vous s’il existe un module ou autre, projet en développement git hub etc ?? Qui permettrai au client de trouver des établissement près de chez eux.
Et de pouvoir également y sélectionner directement des produits sur la carte ( qui seront filtrés en fonction de l’établissement choisi ) ??
Bonjour Emmanuel, Tu as ce code qui affiche l’image des magasins :
[code]
{if $store.has_picture}
<div class="store-image">
<img src="{$img_store_dir}{$store.id_store}-medium_default.jpg" alt="{$store.name|escape:’html’:’UTF-8′}" width="{$mediumSize.width}" height="{$mediumSize.height}"/>
</div>
{/if}
[/code]
A bientôt 🙂
Bonjour Florian,
Je ne pense pas car il est testé sur les versions 1.6 mais la 1.7 a pas mal évolué 😉
Je peux regarder au cas par cas via une intervention si besoin, faîtes moi un e-mail.
Bonne journée.
Bonjour, et tout d’abord merci. L’affichage est correctement modifié, toutefois la fonction de recherche ne semble plus fonctionner… Suis-je le seul à rencontrer ce souci ?
Bonjour Paola,
Je viens de mettre l’article à jour avec une vidéo tuto pour modifier l’affichage des magasins. Vous le verrez, la recherche sur la carte Google Map fonctionne bien. Je pense donc que vous devez avoir une erreur dans votre page qui bloque la recherche.
Vous pouvez me faire un mail avec l’url du site pour que je regarde.
A bientôt 🙂
Hello ! Je rencontre le même soucis. L’affichage est OK mais la recherche ne fonctionne pas… Je suis en local
Bonjour Carlasdn,
Merci pour le commentaire,
Première chose, vérifiez que la carte Google Map s’affiche bien. Si non, alors vous devez prendre une licence ici : https://cloud.google.com/maps-platform/?hl=fr
Deuxième chose, vérifiez qu’il n’y a pas d’erreur dans votre page via l’outil de débug de Google Chrome ou Safari par exemple.
Si ce n’est pas le cas, vous pouvez m’envoyer le lien de votre page une fois en ligne pour que je jete un oeil 😉
Bonjour,
Ca fonctionne sous firefox en revanche pas sous chrome 🙁
Bonjour Romain, je n’ai pas testé mais c’est sympa de partager votre recherche. C’est testé sur quelle version exactement ?
hé pour ceux qui sont des quiche comme moi: ça peux aider aussi d’ajouter une variable dans la class du type
{foreach from=$magasins|@sortby:’country’ item=’magasin’ name=”countryLoop”}
{$magasin.country|escape:’html’:’UTF-8′}
Voilou 🙂
Bonjour Romain, je n’ai pas testé mais une boucle du genre devrait faire l’affaire :
[php]
<ul>
{foreach $magasin.country as $land}
{if $magasin.country == "pays 1"}
<li>contenu</li>
{/if}
{if $magasin.country == "pays 2"}
<li>contenu</li>
{/if}
{/foreach}
</ul>
[/php]
Hello merci pour la réponse un foreach du genre:
{foreach $magasins as $magasin.country}
bla bla bla
{/foreach}
Php et smarty c’est vraiment pas ma spécialité
Bonjour Romain, il existe pour $stores la variable country donc tu peux utiliser un foreach avec la condition sur le pays dans la boucle 😉
Hello,
Ah mais c’est intéressant de voir que tu as rebondi sur ce point, je profite aussi de mettre un lien vers un billet qui parle aussi de ça de mon côté : http://www.webbax.ch/2016/10/17/prestashop-de-a-a-z-bloc-magasin-ep-24/
L’approche est un peu différente, mais permet de dynamiser cette page des magasins.
Merci pour tutoriel !
Bonjour toujours pratiques vos conseils 🙂
Je cherche à faire quelque chose de simple en apparence mais bien sûr avec prestashop c’est toujours une galère …
Savez-vous s’il existe un module ou autre, projet en développement git hub etc ?? Qui permettrai au client de trouver des établissement près de chez eux.
Et de pouvoir également y sélectionner directement des produits sur la carte ( qui seront filtrés en fonction de l’établissement choisi ) ??
Merci !!
Bonjour Math,
Il existe des stores locator ou google map avec des magasins dessus.
Je n’ai pas encore vu ce système lié à des magasins.
Ca ressemble cependant à ça https://addons.prestashop.com/fr/gestion-stocks-fournisseurs/27832-stock-multiboutique.html couplé à une google map.
Bonjour,
j’aurai souhaiter affiché les images des magasins en plus de l’adresse, mais je vois pas trop comment ? un peu d’aide, en vous remerciant
Bonjour Emmanuel, Tu as ce code qui affiche l’image des magasins :
[code]
{if $store.has_picture}
<div class="store-image">
<img src="{$img_store_dir}{$store.id_store}-medium_default.jpg" alt="{$store.name|escape:’html’:’UTF-8′}" width="{$mediumSize.width}" height="{$mediumSize.height}"/>
</div>
{/if}
[/code]
A bientôt 🙂
Excellent, merci !
Ce tuto marche il sur la version 1.7.2 ?
Bonjour Florian,
Je ne pense pas car il est testé sur les versions 1.6 mais la 1.7 a pas mal évolué 😉
Je peux regarder au cas par cas via une intervention si besoin, faîtes moi un e-mail.
Bonne journée.
Bonjour, et tout d’abord merci. L’affichage est correctement modifié, toutefois la fonction de recherche ne semble plus fonctionner… Suis-je le seul à rencontrer ce souci ?
Bonjour Paola,
Je viens de mettre l’article à jour avec une vidéo tuto pour modifier l’affichage des magasins. Vous le verrez, la recherche sur la carte Google Map fonctionne bien. Je pense donc que vous devez avoir une erreur dans votre page qui bloque la recherche.
Vous pouvez me faire un mail avec l’url du site pour que je regarde.
A bientôt 🙂
Hello ! Je rencontre le même soucis. L’affichage est OK mais la recherche ne fonctionne pas… Je suis en local
Bonjour Carlasdn,
Merci pour le commentaire,
Première chose, vérifiez que la carte Google Map s’affiche bien. Si non, alors vous devez prendre une licence ici : https://cloud.google.com/maps-platform/?hl=fr
Deuxième chose, vérifiez qu’il n’y a pas d’erreur dans votre page via l’outil de débug de Google Chrome ou Safari par exemple.
Si ce n’est pas le cas, vous pouvez m’envoyer le lien de votre page une fois en ligne pour que je jete un oeil 😉
Bonjour,
Ca fonctionne sous firefox en revanche pas sous chrome 🙁
autant pour moi il suffisait de supprimer mon historique du navigateur
Bonjour Greg, effectivement toujours penser au cache 😉
Hello version 1.6.1.11 :)… Je galère encore une peu je suis designer et pas développeur…. Mais j’avance
ha ça nettoie le code 🙂
{foreach from=$magasins|@sortby:'country' item='magasin' name="countryLoop"}
{$magasin.country|escape:'html':'UTF-8'}
Bonjour Romain, je n’ai pas testé mais c’est sympa de partager votre recherche. C’est testé sur quelle version exactement ?
hé pour ceux qui sont des quiche comme moi: ça peux aider aussi d’ajouter une variable dans la class du type
{foreach from=$magasins|@sortby:’country’ item=’magasin’ name=”countryLoop”}
{$magasin.country|escape:’html’:’UTF-8′}
Voilou 🙂
Hello pour ceux que ça intéresse, d’ordonnner les magasin par pays, j’ai réussi en suivant ce tuto: http://www.reussir-mon-ecommerce.fr/2014/06/10/ajouter-des-fonctions-a-smarty-sous-prestashop-1-6/
Avec ça : {foreach $magasin.country as $land}
fonctionne pas vraiment non plus:
{foreach $magasin.country as $land}
{foreach $magasins as $magasin}
{if $magasin.country}{$magasin.country|escape:’html’:’UTF-8’|nl2br}{/if}
{$magasin.name|escape:’html’:’UTF-8′}
{assign value=$magasin.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”}
{$addresses_formated.$id_store.formated[$key|replace:’,’:”]|escape:’html’:’UTF-8′}
{/foreach}
{/foreach}
{if $magasin.phone}{l s=’Phone:’} {$magasin.phone|escape:’html’:’UTF-8′}{/if}
{if $magasin.fax}{l s=’Fax:’} {$magasin.fax|escape:’html’:’UTF-8′}{/if}
{if $magasin.email}{l s=’Email:’} {$magasin.email|escape:’html’:’UTF-8′}{/if}
{if $magasin.note}{$magasin.note|escape:’html’:’UTF-8’|nl2br}{/if}
{/foreach}
{/foreach}
Bonjour Romain, je n’ai pas testé mais une boucle du genre devrait faire l’affaire :
[php]
<ul>
{foreach $magasin.country as $land}
{if $magasin.country == "pays 1"}
<li>contenu</li>
{/if}
{if $magasin.country == "pays 2"}
<li>contenu</li>
{/if}
{/foreach}
</ul>
[/php]
Hello merci pour la réponse un foreach du genre:
{foreach $magasins as $magasin.country}
bla bla bla
{/foreach}
Php et smarty c’est vraiment pas ma spécialité
Hello serait-il possible de regrouper la liste des magasins par pays? et si oui comment?
Bonjour Romain, il existe pour $stores la variable country donc tu peux utiliser un foreach avec la condition sur le pays dans la boucle 😉
Hello,
Ah mais c’est intéressant de voir que tu as rebondi sur ce point, je profite aussi de mettre un lien vers un billet qui parle aussi de ça de mon côté : http://www.webbax.ch/2016/10/17/prestashop-de-a-a-z-bloc-magasin-ep-24/
L’approche est un peu différente, mais permet de dynamiser cette page des magasins.
Merci pour tutoriel !
Hello Germain ! Ton approche est vraiment pas mal du tout aussi, merci pour le partage 🙂
Many thanks for your code
is the only one I have find on the web (working 100%!!)
Hello ! You’re welcome 🙂
Traduire les textes n’a aucun impact sur cette personnalisation de page 😉
Bonjour James, merci de bien lire l’article car le chemin du fichier est bien indiqué 🙂
Bonjour, effectivement c’est plutôt pratique de pouvoir faire ça 😀
Bonjour Martin, j’ai ajouté les fichiers à télécharger dans l’article pour que ça soit plus simple 🙂
Merci pour ce tuto sympa mais malheureusement ne marche pas pour prestahsop 1.6.0.8