Comment faire pour que votre module s'intègre bien à mon thème personnalisé ?

Vous avez configuré vos widgets et certains ne semblent pas s'afficher correctement sur votre thème?

Voici ce qu'il faut savoir sur la configuration des widgets et le choix des hooks :

1) Chaque widget de chaque réseau social est inclus dans une IFRAME lorsque le javascript du réseau social est exécuté. Prenons par exemple le bouton j'aime de Facebook :

Si nous regadons le code source, le bouton se présente sous cette forme avant que le javascript de Facebook n'ajoute l'IFRAME juste après le DIV.

<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-send="false" data-width="120" data-show-faces="false" data-href="/en/prestashop-modules-social-networks-facebook/16-facebook-ps-essentials-for-prestashop.html" data-layout="box_count" fb-xfbml-state="rendered"><span style="height: 61px; width: 46px;">

 

Voici ce que rajoute Facebook ensuite :

Ce qui est important à savoir, c'est que vos styles CSS de votre thème peuvent prendre le dessus sur ceux inclus par le widget. Problème de largeur du DIV englobant le widget, propriétés de style prioritaires sur celles du widget, etc ... . Bien que cela reste rare, cela peut tout de même arriver avec un thème personnalisé.

2) L'importance de choisir vos widgets en fonction du hook sélectionné et de la place disponible.

Prenons par exemple, le widget "like box" (boite j'aime) :

 

 Sur une version standard de Prestashop 1.5, la colone de gauche a une largeur de 202px ( 270 px pour prestahop 1.6), vous devez dans ce cas-là mettre 200px ( 268 px pour Prestashop 1.6) comme largeur dans la configuration du widget. Idem pour la hauteur, vous devrez mettre la bonne hauteur en fonction du nombre de photos que vous voulez faire afficher en tenant compte du footer du widget.

Si nous regardons les pré-requis du widget sur Facebook, la largeur minimum est de 292px mais on se rend bien compte qu'il est possible de mettre une largeur inférieure.

L'idée principale avec les widgets et les hooks :

- vous devez regarder les pré-requis de chaque widget sur le réseau social associé.

- tester les différentes options de rendu du widget.

- déterminer si le hook sélectionné correspond en terme de place pour le rendu du widget.

Au sujet des widgets Facebook, vous pouvez vous renseigner en visitant cette adresse : https://developers.facebook.com/docs/plugins/