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">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).
<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>
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 {Résultat final:
border: solid 1px;
margin-left: 5px;
margin-bottom: 5px;
}
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.
Spécialisé SEO, Alex est un autodidacte passionné.
Prestashop 1.6 - Insérer un feed Instagram par hashtag dans une
Je n'arrive pas à afficher les images par contre le titre s'affiche que puis je faire
Prestashop 1.6 - Insérer un feed Instagram par hashtag dans une
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
Prestashop 1.6 - Insérer un feed Instagram par hashtag dans une
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.
Prestashop 1.6 - Insérer un feed Instagram par hashtag dans une
Bonjour Rixou, oui c'est possible il faudrait pour cela créer un module est ce que tu veux que je fasse un tutoriel ?
Prestashop 1.6 - Insérer un feed Instagram par hashtag dans une
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?
Notice: Undefined index: customer_avatar in /home/tangence/public_html/cache/smarty/compile/0c/23/4a/0c234a9ea2459e7dbf9533a4ca298d269dd2f2e8.file.productcomments.tpl.php on line 56
Bonjour Alexandre,
Votre module est très intéressant et très bien référencer, vous ressortez sur tous les mots-clés "feed instagram fiche produit", seulement je ne voit pas de mise à jours depuis 2016, existe-t-il un version compatible avec la 1.7 de prestashop et avec la nouvelle clé API d'Instagram.
Merci de votre réponse.
Cordialement