Prestashop 1.6 - Insérer un feed Instagram par hashtag dans une fiche produit

Vous pouvez allez voir le rendu final de ce tutoriel ici.
Nous allons tout d'abord télécharger le script instafeed.min.js afin de rendre cette fonctionnalité disponible. On upload le fichier via ftp dans le dossier js de notre thème actif prestashop mon_theme/js/instafeed.min.js.

On ouvre ensuite le header.tpl de notre thème.
Rechercher:

{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri|escape:'html':'UTF-8'}"></script>
{/foreach}
{/if}

Ajouter en dessous:

{if $page_name =='product' and $product->tag}
<script type="text/javascript" src="{$js_dir}instafeed.min.js"></script>
{/if}

On notera ici l'utilisation d'une condition smarty afin que l'appel au js ne se produise que lorsque l'on se trouve dans une fiche produit qui comporte un hashtag.

Ajouter dans cette condition:

<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: '{$product->tag}',
clientId: 'VOTRE_ID_INSTAGRAM'
});
feed.run();
</script>

Ce qui nous donne au final:

{if $page_name =='product'and $product->tag}
<script type="text/javascript" src="/js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed(
{get: 'tagged',tagName: '{$product->tag}',clientId: 'VOTRE_ID_INSTAGRAM'});
feed.run();
</script>
{/if}

Remplacer VOTRE_ID_INSTAGRAM par votre CLIENT ID. Pour trouver votre CLIENT ID il vous suffit de vous connecter sur votre compte Instagram est de suivre ce lien.
On note l'utilisation de la variable "$product->tag" que nous allons créer dans la suite de ce tutoriel, elle permettra d'appeller le hastag lié à la fiche produit.

Ajout du champ "tag" dans la base de données

Nous allons désormais faire un tour dans la base de donnée via phpmyadmin, chercher la table PREFIX_product_lang.
Dans "structure" on ajoute un nouveau champ nommé "tag" de type TEXT.

Override de la classe Product

Nous allons ensuite lié le nouveau champ de la base à notre classe Product en créant un override. Dans /override/classes/ placer un nouveau fichier Product.php contenant ce code:

<?php

class Product extends ProductCore
{
public $tag;

public function __construct($id_product = null, $full = false, $id_lang = null, $id_shop = null, Context $context = null)
{
Product::$definition['fields']['tag'] = array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isString');
parent::__construct($id_product, $full, $id_lang, $id_shop, $context);
}

}

Mise en place du nouveau champ "tag" dans l'éditeur de fiche produit du backoffice

On copie le fichier informations.tpl /themes/default/template/controllers/products/informations.tpl
On le place dans /override/controllers/admin/templates/products/
On ajoute ligne 362 en dessous du champ description:

<div class="form-group">
<div class="col-lg-1"><span class="pull-right">{include file="controllers/products/multishop/checkbox.tpl"
field="tag" type="tinymce" multilang="true"}</span></div>
<label class="control-label col-lg-2" for="tag_{$id_lang}">
<span class="label-tooltip" data-toggle="tooltip"
title="{l s='Hashtag lié au produit'}">
{l s='Instagram Hashtag'}
</span>
</label>
<div class="col-lg-9">
{include
file="controllers/products/input_text_lang.tpl"
languages=$languages input_name='tag'
input_value=$product->$product->tag}
</div>
</div>
On vide le cache du navigateur et celui de prestashop, dans le backoffice Paramètres avancés / Performance, dans la toolbar: Vider le cache (en haut à droite).

On obtiens:


Mise en place de l'affichage dans le tpl product

On ouvre le product.tpl du thème pour placer ce code en dessous de la description longue, vers la ligne 485:

{if $product->tag}
<!-- Instagram -->
<section class="page-product-box">
<h3 class="page-product-heading">{l s='Instagram'} #{$product->tag}</h3>{/if}
<div id="instafeed"></div>
</section>
<!-- Instagram -->
{/if}

CSS des miniatures Instagram

On édite le product.css du thème afin de créer des marges pour les images miniatures. On ajoute à la fin du fichier:

#instafeed img {
border: solid 1px;
margin-left: 5px;
margin-bottom: 5px;
}
Résultat final:

J'espère que vous avez apprécié ce tutoriel et qu'il vous aura surtout rendu service. N'hésitez pas à me poser des questions ou à écrire un avis.

Téléchargements

Auteur de l'article

Alexandre Webmaster

Alexandre Webmaster

Spécialisé SEO, Alex est un autodidacte passionné.

Commentaires


Notice: Undefined index: customer_avatar in /home/tangence/public_html/cache/smarty/compile/0c/23/4a/0c234a9ea2459e7dbf9533a4ca298d269dd2f2e8.file.productcomments.tpl.php on line 56
le 23/02/2016 01:59:12

Je n'arrive pas à afficher les images par contre le titre s'affiche que puis je faire


Notice: Undefined index: customer_avatar in /home/tangence/public_html/cache/smarty/compile/0c/23/4a/0c234a9ea2459e7dbf9533a4ca298d269dd2f2e8.file.productcomments.tpl.php on line 56
le 30/11/2015 14:44:56

Bonjour,
j'aimerai installer un module Instagram sur mon pretashop cloud 1.6.1 mais je n'y arrive pas on me demande un acess token je ne sais pas ce que c'est


Notice: Undefined index: customer_avatar in /home/tangence/public_html/cache/smarty/compile/0c/23/4a/0c234a9ea2459e7dbf9533a4ca298d269dd2f2e8.file.productcomments.tpl.php on line 56
le 04/02/2015 23:45:11

Salut, je suis en train d'installer ce module et il est top. En revanche, il y a quelques coquilles dans ton tuto. Je n'arrive pas à les poster ici mais je peux te les envoyer par email ou autre.
Merci encore.


Notice: Undefined index: customer_avatar in /home/tangence/public_html/cache/smarty/compile/0c/23/4a/0c234a9ea2459e7dbf9533a4ca298d269dd2f2e8.file.productcomments.tpl.php on line 56
le 23/01/2015 11:06:17

Bonjour Rixou, oui c'est possible il faudrait pour cela créer un module est ce que tu veux que je fasse un tutoriel ?


Notice: Undefined index: customer_avatar in /home/tangence/public_html/cache/smarty/compile/0c/23/4a/0c234a9ea2459e7dbf9533a4ca298d269dd2f2e8.file.productcomments.tpl.php on line 56
le 19/01/2015 06:06:01

Est ce que c'est possible d'afficher seulement le feed que tu sur la homepage dans un block que l'on peux hook un peu n'importe ou?