Jump to content

[TUTO] Video Youtube dans une fiche produit


Recommended Posts

Bonjour,

Je cherchai à afficher une vidéo YouTube dans la fiche produit. Pour ce faire, on va exploiter un champ disponible sur la fiche produit : la référence fournisseur.

Pour afficher la vidéo dans le descriptif du produit, nous avons besoin de la référence de la vidéo. Par exemple, une vidéo située à cette adresse

a pour référence BlvX9sHPjc4

Ensuite, nous allons saisir la référence de la vidéo dans le champ référence fournisseur.

Enregistrer la fiche produit et voilà que la vidéo s’affiche dans le descriptif du produit.

Comment faire ?
Dans les fichiers du thème graphique, éditer product.tpl qui permet l’affichage d’une fiche produit. A l’endroit ou vous souhaitez afficher la vidéo YouTube, insérer le code suivant :

{if $product->supplier_reference}
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="450" height="290" src="http://www.youtube.com/embed/{$product->supplier_reference}" frameborder="0" allowFullScreen></iframe>
{/if}



supplier_reference correspond à la référence fournisseur mais vous pouvez utiliser tout autre élément de la fiche produit.

Vous pouvez également personnaliser la taille de la vidéo affichée (width="450" height="290").

-

Traduction libre de la méthode donnée par Gabriel Crowe : Embed a #youtube video in #prestashop

:)

  • Like 1
Link to comment
Share on other sites

Bonjour, j'ai aussi vu votre article sur votre site qui est bien fait :). Savez vous ou faut-il placer ce bout de code pour afficher une vidéo en fin de description longue des produits ?

Merci d' avance de votre réponse, bonne continuation!

Link to comment
Share on other sites

Bonjour,

Merci pour la remarque sur mon blog :)

Ce bout de code doit être mis dans product.tpl du theme graphique juste après :

{if $product->description}
   <!-- full description -->
{$product->description}
{/if}



C'est-à-dire à la suite de la description longue de la fiche produit.

;)

Link to comment
Share on other sites

Bonjour, j'ai mis le bout de code au bon endroit et mis la "référence youtube" dans la partie référence fournissuer mais cel ane fonctionne pas, c'est peut-etre du à ma version de prestashop (1.4.1)? sur l'ancienne version il était possible d'jouter des video juste en mettant le lein dans la fiche de description d'un produit, pourquoi ce retour en arrière ?
Merci d' avoir répondut rapidement :)

Link to comment
Share on other sites

Bonjour,

Je ne sais pas pourquoi ce retour en arrière :)
Mais je viens de tester sur PrestaShop 1.4 : l'affichage de la vidéo YouTube se fait bien dans la fiche description de l'article.

Sur le thème livré avec l'installation de PrestaShop, le code donné dans le premier post doit être collé à la ligne 399 du fichier product.tpl, juste après :

    {if $product->description}
       <!-- full description -->
{$product->description}
   {/if}



Bonne soirée

;)

Link to comment
Share on other sites

  • 4 weeks later...

Bonjour, merci pour la méthode mais lorsque l'on affiche l'image produit en plein écran (type box) la vidéo youtube ne se met pas en arrière plan comme le reste de la page.

Peut on modifier une valeur pour regler ce problème?

Merci d'avance.

Link to comment
Share on other sites

Bonjour,
Je suis débutante sur prestashop,
j'ai essayé d'intégrer une vidéo youtube (un iframe donc) ainsi que d'autre iframe (lidoli pour un système d'évaluation multicritère à étoile) dans les pages CMS mais impossible d'y arriver, ça ne fonctionne pas.
Que dois-je faire? Pourriez vous m'expliquer ça très concrêtement parce que tout ce que je lis depuis tout à l'heure sur le forum c'est du chinois pour moi...
Merci
Alexia

Link to comment
Share on other sites

Bonjour,
Je suis débutante sur prestashop,
j'ai essayé d'intégrer une vidéo youtube (un iframe donc) ainsi que d'autre iframe (lidoli pour un système d'évaluation multicritère à étoile) dans les pages CMS mais impossible d'y arriver, ça ne fonctionne pas.
Que dois-je faire? Pourriez vous m'expliquer ça très concrêtement parce que tout ce que je lis depuis tout à l'heure sur le forum c'est du chinois pour moi...
Merci
Alexia


Bonjour,

Effectivement dans les pages CMS il n'est pas possible d'insérer du code.
C'est pour éviter tout problème de sécurité sur la boutique.
Link to comment
Share on other sites

  • 6 months later...

itsystem

Sur la partie anglaise du forum

Il existe un topic qui parle du module Youtube Ici

Autant en profiter

Cordialement,

Bonjour,

 

ce module permet d'afficher une vidéo YouTube en page d'accueil Editorial.

Ici dans ce topic, il s'agit d'afficher une vidéo YouTube dans une fiche produit.

 

@+

Link to comment
Share on other sites

Bonjour,

 

Je ne sais pas à quoi correspond la ligne 422 : est-ce le thème livré par défaut avec PrestaShop ?

 

@+

Oui tout a fait c'est le thème livré par défaut avec prestashop... et cela ne marche pas du tout pas d'affichage vidéo dans les produits...et la ligne 422 correspond au code comme ci indiqué auparavant ligne 399 full description etc....

 

voici le code : "

 

{if $product->description}

<!-- full description -->

<div id="idTab1" class="rte">{$product->description}</div>

{/if}

{if $product->supplier_reference}

<iframe width="{$product->width}" height="{$product->height}" src="http://www.youtube.com/embed/{$product->supplier_reference}" frameborder="0" allowfullscreen></iframe>

{/if}

 

{if $features}

 

""

 

:D Merci...

Link to comment
Share on other sites

Bonjour,

 

Je viens de faire es manipulations avec le thème livré par défaut pour PrestaShop 1.4.6.2 :

 

Avant modification : Ligne 421

{if $product->description}
 <!-- full description -->
 <div id="idTab1" class="rte">{$product->description}</div>
{/if}

 

Après modification : Ligne 421

{if $product->description}
 <!-- full description -->
 <div id="idTab1" class="rte">{$product->description}</div>
	{if $product->supplier_reference}
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="450" height="290" src="http://www.youtube.com/embed/{$product->supplier_reference}" frameborder="0" allowFullScreen></iframe>
{/if}
{/if}

 

La vidéo YouTube s'affiche bien dans l'onglet "En savoir plus"

post-34163-0-51640200-1326788231_thumb.jpg

Link to comment
Share on other sites

Bonjour,

 

Je viens de faire es manipulations avec le thème livré par défaut pour PrestaShop 1.4.6.2 :

 

Avant modification : Ligne 421

{if $product->description}
 <!-- full description -->
 <div id="idTab1" class="rte">{$product->description}</div>
{/if}

 

Après modification : Ligne 421

{if $product->description}
 <!-- full description -->
 <div id="idTab1" class="rte">{$product->description}</div>
	{if $product->supplier_reference}
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="450" height="290" src="http://www.youtube.com/embed/{$product->supplier_reference}" frameborder="0" allowFullScreen></iframe>
{/if}
{/if}

 

La vidéo YouTube s'affiche bien dans l'onglet "En savoir plus"

 

Ben ca marche toujours pas, et je tenais a dire que j'ai la version 1.4.3 que m'avais imposé e-clicking...l'hébergeur.. et comprends pas pourquoi ca passe pas..:(

Link to comment
Share on other sites

  • 4 months later...
  • 2 weeks later...

Bonjour, je cherche aussi à intégrer ce module sur Prestashop 1.4.8.2 avec le template PS15. Est ce que cela peut fonctionner? Ou dois-je mettre le code? car le fichier product tpl n'est pas du tout le même.

 

Merci d'avance de votre aide!

Link to comment
Share on other sites

  • 4 weeks later...
  • 4 weeks later...

Bonjour Mipou

 

Merci pour votre astuce, car elle fonctionne très bien, ne nécessite aucune modification des fichiers de prestashop, et ne s'applique que sur les produits où l'on souhaite mettre l'accent en présentant une vidéo.

 

Cordialement.

Link to comment
Share on other sites

  • 1 year later...
  • 1 year later...
  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...