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.