Transformer les tabs de la page d’accueil en bloc | Astuce Prestashop 1.6

Ce tutorial va vous permettre de transformer les tabs « Populaire », « Meilleurs ventes », « Nouveaux Produits » et « Promotions » de la page d’accueil en bloc

Cette astuce Prestashop a été testée sur la version 1.6.1

Attention, cette astuce est conseillée pour les personnes qui connaissent un minimum Prestashop, html et css.

A)  Bloc Populaire

1)  Aller dans Modules > Positions.

1.1 ) Dégreffer le module « Produits mis en avant sur la page d’accueil » du hook displayHomeTab & displayHomeTabContent

Block Populaire

1.2) Greffer le même module sur le hook « Display Home »

Block Populaire

1.3) Si vous désirez, vous pouvez modifier la position  du module « Produits mis en avant sur la page d’accueil »

Capture d’écran 2015-10-19 à 17.39.37

2) Si vous retournez sur votre boutique, vous verrez que l’onglet « Populaire »  forme maintenant un bloc. Mais le nom a disparu. Pour cela, allez dans votre thème > modules > homefeatured > homefeatured.tpl

Remplacer

Par

Résultat

Block Poulaire

B)   Bloc Meilleurs Ventes 

Nous allons overrider le fichier « blockbestsellers.php ». En effet si par exemple vous désirez mettre à jour le module,  les modifications ne seront pas supprimées. Il est possible d’overrider un module qu’à partir de 1.6.014

    1. Aller dans override > modules.
    2. Créer un dossier qui se nommera : blockbestsellers
    3. A l’intérieur du dossier, créer un fichier  qui se nommera :  blockbestsellers.php et insérer le code suivant

—————————————

4) Dans le back office de Prestashop, allez dans Modules > Positions

4.1 ) Dégreffer le module « Bloc meilleures ventes » du hook displayHomeTab & displayHomeTabContent

Block Meilleurs Ventes

4.2) Greffer le module « Bloc meilleures ventes » sur le hook displayHome

Block Meilleurs Ventes

4.3) Si vous désirez, vous pouvez modifier la position du module « Bloc meilleures ventes »

Capture d’écran 2015-10-19 à 17.39.37

———————-

5) Nous allons donner un nom au block.  Pour cela, ouvrir le fichier blockbestsellers-home.tpl (selon la version de prestashop, le fichier n’est pas pas au même endroit dans le module » par exemple sur la version 1.6.09, il est à la racine mais sur la version 1.6.014 il se situe dans le fichier « views »).

Remplacer

Par

————————————

Résultat :

Capture d’écran 2015-10-19 à 18.04.46

C)   Bloc Nouveauté

Nous allons overrider le fichier « blocknewproducts.php ». En effet si par exemple vous désirez mettre à jour le module,  les modifications ne seront pas supprimées. Il est possible d’overrider un module qu’à partir de 1.6.014

  1. Aller dans override > modules.
  2. Créer un dossier qui se nommera : blocknewproducts
  3. A l’intérieur du dossier, créer un fichier  qui se nommera : blocknewproducts.php et insérer le code suivant

——————————————–

4) Dans le back office de Prestashop, allez dans Modules > Positions

4.1 ) Dégreffer le module « Bloc nouveaux produits » du hook displayHomeTab & displayHomeTabContent

Bloc Nouveaux Produits - Prestashop

4.2) Greffer le le module « Bloc nouveaux produits » sur le hook displayHome

Bloc Nouveaux Produits - Prestashop

4.3) Si vous désirez, vous pouvez modifier la position du module « Bloc nouveaux produits »

Capture d’écran 2015-10-19 à 17.56.01

——————————

5) Nous allons donner un nom au block.  Pour cela, ouvrir le fichierblocknewproducts_home.tpl (selon la version de prestashop, le fichier n’est pas pas au même endroit dans le module » par exemple sur la version 1.6.09, il est à la racine mais sur la version 1.6.014 il se situe dans le fichier « views »).

Remplacer

Par

————————————

Résultat :

Capture d’écran 2015-10-19 à 18.04.01

D)   Bloc Promotion

Nous allons overrider le fichier « blockspecials.php ». En effet si par exemple vous désirez mettre à jour le module,  les modifications ne seront pas supprimées. Il est possible d’overrider un module qu’à partir de 1.6.014

  1. Aller dans override > modules.
  2. Créer un dossier qui se nommera : blockspecials
  3. A l’intérieur du dossier, créer un fichier  qui se nommera : blockspecials.php et insérer le code suivant

——————————————–

4) Dans le back office de Prestashop, allez dans Modules > Positions

4.1 ) Dégreffer le module « Bloc promotions » du hook displayHomeTab & displayHomeTabContent

Capture d’écran 2015-10-19 à 20.12.29

4.2) Greffer le le module « Bloc promotions » sur le hook displayHome

Capture d’écran 2015-10-19 à 20.13.44

4.3) Si vous désirez, vous pouvez modifier la position du module « Bloc promotions »

Capture d’écran 2015-10-19 à 20.14.48

——————————

5) Nous allons donner un nom au block.  Pour cela, ouvrir le fichier blockspecials-home.tpl (selon la version de prestashop, le fichier n’est pas pas au même endroit dans le module » par exemple sur la version 1.6.09, il est à la racine mais sur la version 1.6.014 il se situe dans le fichier « views »).

Remplacer

Par

————————————

Résultat :

Capture d’écran 2015-10-19 à 20.16.32

Et voila. Il faudra un peu de css pour harmoniser tout cela mais maintenant vous avez vos blocs

 

Articles similaires

Petit aperçu du thème Classic de prestashop 1.7
views 7612
Prestashop vient de sortir la version  1.7.0.0 RC0. A noter, par rapport à la version Prestashop 1.6, le thème a été totalement repensé afin d'être plus minimaliste, fonctionnel et ergonomique. Il faut savoir aussi que la migration de Prestashop 1.6, 1.5....  vers  PrestaShop 1.7 sera impossible. D'un point de vue perso : - je ne suis pas fan des couleurs en particulier le gris (je l...
Créer un thème enfant avec PrestaShop 1.7
views 4132
Qu’est ce qu’un thème enfant ? Un thème Prestashop est un ensemble de fichiers qui permet de gérer les fonctionnalités et le visuel d ‘un site PrestaShop. Si vous apportez des modifications à votre thème, la mise à jour vers de nouvelles versions peut les écraser. C’est dans ce contexte qu’entre la notion  de thème enfant. Un thème enfant hérite des fonctionnalités et du visuel du thème pare...
Insérer une page cms sur une page produit | Astuce Prestashop 1.6
views 3763
Je vais vous montrer comment insérer une page cms sur une page produit. Astuce Prestashop 1.6 1) Si on désire que le contenu soit affiché sur toutes les pages produits  Pour cela on va ouvrir le fichier product.tpl qui se situe dans /themes/lenomdevotrethème/product.tpl Insérer le code suivant à l'endroit où vous désirez que le contenu de votre page cms apparaisse. Ici le "1" corres...
Afficher le champ adresse sur plusieurs lignes | Bloc contact infos – Astuce Presta...
views 1090
Cette astuce Prestashop est valable pour la version 1.6 Vous l'avez sûrement remarqué, en bas de page, l'adresse de votre magasin est sur une seule ligne. Ce rapide tutoriel va vous permettre d'afficher le champ adresse sur plusieurs lignes Valable pour Prestashop 1.6 et 1.5 ----------------------------------- 1) Pour insérer les informations de votre boutique, il faut aller...
Astuce : Centrer votre menu dans Prestashop 1.6
views 4043
Voici un petit tuto qui va vous permettre de centrer votre menu dans prestashop Cette astuce Prestashop est valable pour la version 1.6 Comment centrer le menu sur ma boutique Prestashop ?  Il y a q'un seul fichier à modifier : superfish-modified.css  qui appartient au module blocktopmenu 1) Dans .sf-menu, ajouter text-align:center 2) Dans .sf-menu > li, remplacer float:lef...

5 réponses à “Transformer les tabs de la page d’accueil en bloc | Astuce Prestashop 1.6”

  1. Amélie dit :

    Mille merci, je cherchais cette solution depuis très longtemps !
    Vous m’avez beaucoup aidée.

  2. Gilles dit :

    Bonjour ,

    Je suis « tombé » sur votre site fort intéréssant , en cherchant le moyen d’insérer une page de capture d’email sur la page d’accueil lorsque les clients arrivent sur celle-ci , mais je n’ai pas trouvé .

    Avez vous une astuce à ce sujet ?

    à l’avance merci
    Gilles

  3. c_majory dit :

    Bonjour,

    Il faut acheter un module pour avoir cette fonctionnalité: http://addons.prestashop.com/fr/recherche?id_category=0&search_query=newsletter+

  4. manu dit :

    bonjour, très bien ce tuto!
    j’ai modifié le block populaire et promotion, comment faire pour centrer les mots?
    car je cherche dans le css, mais je ne trouve pas.
    merci pour votre aide

  5. c_majory dit :

    Bonjour,

    Tu pourrais me donner l’url de ton site ?

    Merci

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *