PrestaShop includes WordPress

Vous retrouvez ici le tutorial complet pour inclure votre site marchand PrestaShop sur votre blog WordPress.

Pour commencer, voici quelques URLs où ce module est déjà en action :

Pour ce tutorial, il est nécessaire de posséder un site marchand PrestaShop et un blog WordPress. Vous aurez aussi besoin de télécharger 2 modules (un gratuit et un payant), les URLs vers ces derniers seront indiqués dans la suite…
Bonne lecture !

PrestaShop et WordPress installés !

Pour ce tutorial, nous utiliserons les dernières versions de ces 2 superbes solutions open source, à l’heure actuelle (lundi 18 janvier 2010 à 13:35 GMT+4h) il s’agit de WordPress 2.9.1 et de PrestaShop 1.2.5.

Installation de PrestaShopPour ce tutorial, j’ai installé une version 1.2.5 de PrestaShop toute vierge.

Repertoire BLOGJ’ai ensuite crée un sous-repertoire « blog » parmi les fichiers de prestashop contenant l’ensemble de la solution WordPress.

WordPress installation successfullEnfin, j’ai installé une version toute neuve de WordPress 2.9.1.

Voici une capture d’écran après l’installation des 2 solutions. Pour ce tutorial, nous travaillerons avec le thème par défaut des 2 solutions.
prestashop et wordpress interface

Installation du module WordPress pour PrestaShop

Un module PrestaShop est nécessaire pour la suite de ce tutorial; il est téléchargeable sur ma boutique : http://prestashop.joelgaujard.info/product.php?id_product=17

Repertoire module prestashopUne fois le module téléchargé, veuillez le dézipper (et l’uploader si nécessaire) dans le répertoire « module » de votre projet PrestaShop.

PrestaShop installation module WordPress
Accédez à votre interface de gestion de vos modules PrestaShop dans la console administration de votre boutique. Puis installez le !

Position des modules PrestaShop
Lors de l’installation du module, deux nouveaux hooks (crochets) ont été crée dynamiquement et ils contiennent l’ensemble des modules déjà présent dans le hook « top » (celui contenant l’entête) et ceux présents dans le hook « footer » (celui contenant le pied de page).
L’intérêt de ces 2 hooks est de pouvoir « personnaliser » ce qui sera afficher sur le blog; par exemple, le changement de monnaies peut être retirer vu qu’il n’y a pas d’intérêt à ce qu’il apparaisse ou encore le module contenant le changement de langue car WordPress n’a pas le multi-langue dans ses fonctionnalités de base.

Configuration du module WordPress pour PrestaShop
Vous devez impérativement configurer l’URL ou le dossier ou se trouve votre blog. Il est conseillé d’utiliser une URL de type « http://www.mon-site-marchand.com/blog/ » plutot que d’utiliser un nom de dossier de type « blog ».

Installation de l’extension pour WordPress

Maintenant que la partie PrestaShop est finie (ce qui était relativement simple et rapide) passons à la partie WordPress qui est plus complexe. Pour ceci, il est nécessaire de télécharger gratuitement l’extension disponible ici : http://wordpress.org/extend/plugins/wp-prestashop

Répertoire du plugin PrestaShop pour WordPress
Il faut tout d’abord installer le module soit en le décompressant (et uploader si necessaire) soit en utilisant le fabuleux outil d’installation d’extension dans la console d’administration de WordPress.

Plugin wp-prestashop installé
L’extension est désormais accessible dans l’espace de gestion de ceux-ci dans la console d’administration de votre blog. Il ne reste plus qu’a l’activer.

Configuration du plugin prestashop pour wordpressUne fois l’extension installé, il faut le configurer ! Il suffit de saisir l’URL complète vers votre site marchand, du type : http://www.mon-site-marchand.com/
Un paramètre optionnel est présent afin d’appliquer les feuilles de style et les scripts en javascript sur votre blog. Pour ceci, il suffit de préciser le nom de votre thème PrestaShop. Si vous trouvez que votre thème WordPress est « cassé », laissez ce champ optionnel vide.

Édition de fichiers de votre thème WordPress

Pour activer des fonctionnalités nécessaires à cette extension sur votre thème WordPress, vous devez insérer quelques lignes dans 3 fichiers. Pour ceci, vous pouvez soit utiliser votre éditeur préféré ou utilisez l’outil d’édition de fichier disponible dans la console d’administration de WordPress.

Edition du fichier functions.php de votre thème

Afin d’insérer les 2 widgets de l’extension, il est nécessaire de créer 2 nouveaux espaces. Vous devez insérer les lignes suivantes dans le fichier « functions.php » de votre thème (n’importe où dans le fichier) :

if ( function_exists('register_sidebar') )
  register_sidebar(array(
    'name' => 'PrestaShop Header iframe',
    'id' => 'header_iframe'
  ));
if ( function_exists('register_sidebar') )
  register_sidebar(array(
    'name' => 'PrestaShop Footer iframe',
    'id' => 'footer_iframe'
  ));

Edition du fichier header.php dans WordPress

Dans le fichier « header.php » de votre thème, vous devez insérer la ligne suivante , elle permet d’activer un des espaces pour le widget (je vous conseille vivement d’insérer cette ligne juste en-dessous de la balise <body>) :

<?php if ( get_header('prestashop') ) get_header('prestashop'); ?>

Edition du fichier footer.php du thème WordPress

Dans le fichier « footer.php », vous devez y insérer la ligne suivante qui permet aussi la création de l’espace pour le widget (je vous conseille vivement de la mettre juste avant la balise </body>) :

<?php if ( get_footer('prestashop') ) get_footer('prestashop'); ?>

Copie de 2 fichiers de l’extension dans le répertoire de votre thème

Wordpress copie de fichiers dans le thème
Pour activer l’execution de ces 2 espaces, il vous faut copier les 2 fichiers ( »header-prestashop.php » et « footer-prestashop.php ») du dossier de l’extension dans le répertoire de votre thème.

Insertion de 2 widgets contenant chacun l’entête et le pied de page de votre site marchand

Nous voici bientôt à la fin de ce tutorial, maintenant que tout est prêt coté WordPress, il ne reste plus qu’à insérer les 2 widgets de l’extension…

Nouveaux espaces pour widgets WordPress

Désormais lorsque vous accédez à la page de configuration des widgets dans la console d’aministration de votre blog WordPress, 2 nouveaux espaces sont présents ( »PrestaShop Footer iframe » et « PrestaShop Header iframe »).
Vous remarquez aussi qu’il existe 2 nouveaux widgets ( »PrestaShop Header » et « PrestaShop Footer »), ceux ci sont disponibles grâce à l’extension installé. Vous devez glisser et déposer ces 2 widgets dans leur espace correspondant.

Configuration des widgets PrestaShop pour WordPress

Lors de l’insertion d’un widget dans l’espace reservé, il vous sera demandé de le configurer afin d’insérer une hauteur et largeur. Sur l’image d’illustration, ces données sont à titre d’exemple, vous devez les personnaliser pour votre thème.

Le rendu final

Blog WordPress contenant des données PrestaShop
Nous voici arrivé à la fin de ce tutorial.

Merci de noter et/ou commenter ce tutorial afin de l’améliorer… Et merci pour votre attention !

VN:F [1.9.6_1107]
Rating: 7.3/10 (55 votes cast)
VN:F [1.9.6_1107]
Rating: 0 (from 18 votes)
Tutorial : inclure votre site marchand PrestaShop sur votre blog WordPress, 7.3 out of 10 based on 55 ratings
Partager :
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • email
  • LinkedIn
  • Live
  • MySpace
  • Netvibes
  • PDF
  • Reddit
  • RSS
  • Scoopeo
  • StumbleUpon
  • Technorati
  • Twitter
  • Wikio FR
  • Yahoo! Bookmarks