Module - Facebook PS Connect Date : 07 Janvier 2014 Service Business Tech : Installation & Personnalisation Si vous avez besoin d une assistance, nous pouvons vous fournir une installation complète que vous pourrez acheter sur notre boutique d Addons : http://prestashop-modules.businesstech.fr/fr/installation-service/14-installationand-configuration-service.html IMPORTANT : N oubliez pas de sélectionner le bon nom de module dans le menu déroulant. Page 1 / 26
Table des matières Objet du Module 2 Description Technique 2 Pré-requis serveur 2 Installation du module 2 Configuration du module 2 Créer une application Facebook 2 Créer une application Twitter 2 Créer une application Google 2 Créer une application Paypal 2 Paramètres de base 2 Proposer l'association de compte Facebook / Prestashop au login Standard : 2 Afficher le bloc login client : 2 Gérer les connecteurs 2 Gérer les Hooks 2 Etat de santé du système 2 Visualisation du Module 2 Note aux Développeurs 2 Astuces 2 Fonctionnelles 2 Techniques 2 Page 2 / 26
Objet du Module Un système complet d authentification sur votre boutique via les principaux réseaux sociaux : Facebook, Twitter, Google + Paypal. En plus de vous connecter via un réseau social, il vous permet aussi d associer le compte Prestashop existant de vos clients à leur compte Facebook. Le gros avantage de ce module est aussi de récolter les informations relatives à vos produits selon les envies de vos clients, que cela soit d aimer ou de vouloir un produit. Le Module «Facebook PS Connect» vous permettra de configurer tous vos boutons de connexion: - à partir d une interface intuitive et complète. - d ordonner vos boutons de connexion par «Hook». - avec une intégration idéale des boutons de connexion dans les zones d affichage stratégiques de votre boutique. Ainsi, il permettra à vos clients une authentification rapide sur votre boutique, en plus d enregistrer le comportement social de vos clients. Description Technique Version : 1.3.0 Date de dernière à jour : 22/11/2013 Développement : Business Tech http://www.businesstech.fr/fr/contactez-nous Démo : http://prestashop-demo.businesstech.fr/admin-demo/index.php E-mail : demo-fr@businesstech.fr Mot de passe : demodemo Pré-requis serveur Version minimale : Prestashop 1.2. Serveur Web : doit renseigner 2 clés dans la variable «$_SERVER» : - HTTP_HOST - REQUEST_URI Installation du module Comme pour tout autre module, décompressez le.zip et chargez le dossier «facebookpsconnect» dans le répertoire «modules» de votre serveur via FTP. Installez le module via le back-office comme d habitude Page 3 / 26
Configuration du module Au préalable, vous devez avoir créé un compte personnel sur chaque réseau que vous voudrez ajouter. En plus d un compte, il va vous falloir créer une application pour chaque réseau utilisé. Créer une application Facebook Pour créer une application sur Facebook, vous devez absolument être connecté avec un compte personnel Facebook et non avec un compte page Fan. Ensuite rendez-vous à l adresse suivante : https://developers.facebook.com/apps/ La procédure qui suit utilise l ancien visuel de la plateforme developers.facebook.com, si vous souhaitez suivre la procédure de création d app Facebook avec le nouveau visuel, suivez ce lien : http://faq.businesstech.fr/faq.php?id=71&lg=fr Cliquez sur «créer une nouvelle application» Saisissez le nom technique de votre application : Page 4 / 26
Ensuite, veuillez renseigner le nom de domaine de votre boutique et l URL du site (website with facebook login) : ATTENTION : n oubliez surtout pas de désactiver le mode bac à sable Sauvegardez et votre application est prête à être utilisée. Vous aurez besoin de l app ID et du app secret pour la configuration du connecteur. Page 5 / 26
Créer une application Twitter Pour créer une application sur Twitter, vous devez absolument être connecté avec un compte personnel Twitter. Ensuite rendez-vous à l adresse suivante : https://dev.twitter.com/apps/ Cliquez sur «créer une nouvelle application» Saisissez le nom technique et le nom de domaine de votre boutique pour votre application : callback : http://www.monsite.com/modules/facebookpsconnect/twitter-callback.php Page 6 / 26
Cliquez sur «settings» après créé l application afin de renseigner les informations nécessaires : callback : http://www.monsite.com/modules/facebookpsconnect/twitter-callback.php Après avoir sauvegardé, retournez sur l onglet «details» et cliquez sur le bouton «create my access token»: Page 7 / 26
Vous obtiendrez ceci : Ces informations seront à renseigner dans la configuration du connecteur dans le backoffice du module. Vous aurez besoin du consumer key et du consumer secret pour la configuration du connecteur. Page 8 / 26
Créer une application Google Pour créer une application (project) sur Google, vous devez absolument être connecté avec un compte personnel Google. Ensuite rendez-vous à l adresse suivante : https://code.google.com/apis/console/ Si vous souhaitez utiliser l ancienne console Google API, suivre les recommandations de l image ci-dessous : Page 9 / 26
Une fois que vous arrivez à cet écran, cliquez sur «API Project» en haut à gauche, puis dans le menu déroulant sur «Create». Après avoir créé l application, créez votre OAuth client Id : Renseignez les informations liées à votre boutique : Page 10 / 26
Page 11 / 26
Ensuite vous obtiendrez cet écran : Cliquez sur «edit settings» à droite de votre écran pour obtenir ceci et changer l URL de callback : Page 12 / 26
callback : http://www.monsite.com/modules/facebookpsconnect/google-callback.php Mettez à jour les informations ci-dessus. Vous aurez besoin du «project number», du client ID et du client secret pour la configuration du connecteur. Créer une application Paypal Page 13 / 26
Pour créer une application sur Paypal, vous devez absolument être connecté avec un compte personnel Paypal. Ensuite rendez-vous à l adresse suivante : https://developer.paypal.com/webapps/developer/applications Premier écran de création de compte : Page 14 / 26
callback : http://www.monsite.com/modules/facebookpsconnect/paypal-callback.php Deuxième écran : Page 15 / 26
Veuillez sélectionner les droits demandés par l application tels qu ils sont sélectionnés cidessus. Une fois l application créée vous obtiendrez ceci : Page 16 / 26
Vous aurez besoin du client ID et client secret pour la configuration du connecteur. Paramètres de base Page 17 / 26
Proposer l'association de compte Facebook / Prestashop au login Standard : Si vous activez cette option, au moment de la connexion classique sur votre boutique, vos clients se verront proposer une petite fenêtre leur offrant la possibilité d associer le compte Facebook à leur compte Prestashop. Afficher le bloc login client : Si vous activez cette option, vous verrez apparaître un bloc login client dans l une des 2 colonnes si vous avez configuré les hooks colonne gauche et droite. Tout est expliqué dans le texte à côté de l option. Gérer les connecteurs Par défaut, vous aurez cet écran : Cela vous indique la liste des connecteurs utilisables dans le module avec leur état de configuration (le connecteur lui-même + les hooks dans lesquels il a été ajouté). En cliquant sur le bouton «Editer», vous pourrez configurer tous vos connecteurs. Chaque formulaire apparaitra dans une pop-up comme suit : Page 18 / 26
Vous devrez récupérer l app ID et secret via l URL que vous avez saisie préalablement pour la création de votre application Facebook. Idem pour chaque bouton de réseau. Cliquez sur «Mettre à jour» après avoir rempli les champs souhaités. Votre connecteur sera mis à jour ainsi que son état dans la liste des connecteurs. Gérer les Hooks Page 19 / 26
Par défaut, vous aurez cet écran : Cela vous indique la liste des hooks utilisables dans le module avec leur état de configuration (le hook lui-même + les connecteurs qui lui ont été ajoutés). En cliquant sur le bouton «Editer», vous pourrez configurer tous les Hooks de la liste. Chaque formulaire apparaitra dans une pop-up comme suit : Vous pouvez déplacer les connecteurs avec le «drag & drop». Une fois ajoutés dans la liste «connecteurs actifs», vous pouvez les classer de haut en bas avec le «drag & drop». Cliquez sur «Mettre à jour» après avoir ajouté les connecteurs souhaités. Page 20 / 26
Votre Hook sera mis à jour ainsi que son état dans la liste des Hooks. Etat de santé du système Le module Facebook PS Connect vous permet de récupérer les informations relatives à un produit lorsqu un client clique sur le bouton «j aime» d un produit. Ainsi nous avons besoin de vérifier si vous avez bien les dernières versions de nos 2 autres modules Page 21 / 26
Facebook PS Essentials & Facebook PS Shop Tab car elles comportent les dernières modifications utiles à la collecte des données sur les boutons «j aime» et «je veux». Vous avez une légende sous les visuels qui vous explique quelle version des modules vous avez et si vous avez besoin de les acheter ou de les mettre à jour. Page 22 / 26
Visualisation du Module Page 23 / 26
Page 24 / 26
Note aux Développeurs Page 25 / 26
Astuces Fonctionnelles Utilisez à bon escient l affichage des boutons sur votre boutique pour équilibrer le visuel des boutons. Techniques Chaque classe métier utilisée dans lib/admin ou lib/hook doit retourner un tableau associatif : tpl => nom du template à utiliser assign valeurs assignées à smarty Ainsi, la fonction d affichage displaymodule() centralise l affichage. Page 26 / 26