[ASTUCE] Intégrer une vidéo youtube sur une fiche produit

jeckyl · October 12, 2011

Bonjour,

Voici une petite astuce demandée sur le forum.

Cette astuce permet d'intégrer rapidement une vidéo youtube sur une fiche produit.

Pour ce faire vous devez intégrer le code suivant sur le fichier product.tpl de votre thème à l'endroit où vous désirez intégrer cette vidéo.

<!-- youtube video -->
{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}

et dans la fiche de création d'un produit dans votre backoffice il vous suffit de mettre le code unique de votre vidéo dans le champ référence fournisseur et définir la taille d'affichage de cette vidéo en saisissant les données dans Largeur et Hauteur du colis.

bien entendu vous pouvez adapter le code pour utiliser un autre champ.

serenseigner · October 14, 2011

Bonjour,

J'ai essayé de copier le lien video youtube dans la page product.tpl (dans le paragraphe images) et au moment de l'enregistrement, j'ai le message suivant : vous êtes en train d'enregistrer la page sous un format texte, continuer ou annuler?

Je pense que ce n'est pas la solution.

Merci de me renseigner.

jeckyl · October 14, 2011

Bonjour,

qui vous dit cela ?

nympheur · November 14, 2011

Bonjour

Un petit "up" dans ce message....Cela fonctionne ou non pour la version 1.4.5.1?

j'ai la flemme de tester alors je pose la question...

jeckyl · November 14, 2011

Bonjour,

cela fonctionne quelque soit la version de Prestashop, il faut juste le mettre au bon endroit dans le template.

nympheur · November 14, 2011

Ok merci je vais regarder ça de plus près...

hightone69 · December 30, 2011

Bonjour,

Pourquoi ne pas utiliser la méthode avec l'éditeur Tinymce pour insérer la video Youtube sur la fiche produit avec le bouton Html de l'éditeur Tinymce , quelle avantage apporte cette méthode.

Salutations

jeckyl · December 30, 2011

Bonjour,

Pourquoi ne pas utiliser la méthode avec l'éditeur Tinymce pour insérer la video Youtube sur la fiche produit avec le bouton Html de l'éditeur Tinymce , quelle avantage apporte cette méthode.

Salutations

Bonjour,

je en sais pas, avez vous essayez ce que vous dites ?

sinon l’intérêt c'est par exemple de remplacer l'affichage de l'image produit par une vidéo lorsqu'elle est disponible.

hightone69 · December 30, 2011

Oui tout à fait j'ai éssayé cette méthode tout à fait basique sur PS 1.25, et qui je le reconnais n'a strictement rien à voir avec la méthode cité sur ce topic ! l'intégration avec l'éditeur Tinymce ce fait soit sur le "block description" de la fiche produit , ou sur la page produit à l'aide de l'éditeur en collant le code Html fourni par les différentes plateformes de partage de video, et laissant l'image de la fiche produit en plus de la video intégrer.

Cordialement.

lokiiy · January 21, 2012

J'ai essayé d'intégrer les bout de code dans mon product.tpl et ensuite le code de la vidéo dans référence fournisseur

Le soucis : code de la vidéo youtube trop long ...

Est ce que j'ai bien suivi la manipulation ... Je serais intéressais d'intégrer la vidéo comme décris plus haut ...

J'ai essayé mais sans succès ...

Si quelqu'un a une solution je suis preneur

Merci Lokiiy

jeckyl · January 21, 2012

Bonjour,

si cela ne fonctionne pas c'est que vous ne l'avez pas fait comme il faut.

le code de la vidéo est la référence de la vidéo sans l'url.

lokiiy · January 22, 2012

Je ne comprend pas ce que vous apellez par référence de la vidéo sans l'url ???

jeckyl · January 22, 2012

Dans l'url des videos youtube vous avez une référence unique qui permet de les différencier.

Il suffit juste d'ouvrir les eux.

lokiiy · January 23, 2012

Pour la référence c'est bien ce que je pensais ... Cependant j'arrive vraiment pas à faire fonctionner cette astuce ... J'ai riennnnnnn .... Bon ben pas grave je suis nul ^^

RIV · November 24, 2012

Salut!

je cherche à appliquer les précieux conseils de Jeckyl pour insérer le lien dans le product.tpl mais je ne sais absolument pas où le coller?? De plus je souhaiterai diffuser les vidéos à partir d'un compte viméo... Si quelqu'un est encore dans la place et peut m'aider, je vous en remercie d'avance!

Johann · November 28, 2012

Petit exemple concret avec le code que j'utilise pour ce site :

http://www.garage-batayer.fr/ferrari/195-ferrari-f430-spider-f1.html

(la vidéo est dans l'onglet "Video")

dans le fichier product.tpl du thème (ce site est en PS 1.4.9.0 mais tu trouveras l'équivalent sur n'importe quelle version), tu recherches la partie de code gérant les onglets :

<!-- description and features -->
{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments}
<div id="more_info_block" class="clear">
   <ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
       {if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
       {if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
       {if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
       {if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
  	 {$HOOK_PRODUCT_TAB}
   </ul>

au dessus du $HOOK_PRODUCT_TAB, tu ajoutes la ligne suivante :

    {if $product->location}<li><a id="video_tab" href="#idTab12">{l s='Video'}</a></li>{/if}

Un peu plus bas dans le .tpl, tu recherches la ligne :

{$HOOK_PRODUCT_TAB_CONTENT}

et au dessus tu ajoutes le bloc :

{if $product->location}
 <div id="idTab12" class="rte">
  <iframe title="Youtube Video Player" class="youtube-player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/{$product->location}" frameborder="0" allowFullscreen></iframe>
 </div>
{/if}

Ca affichera donc une video provenant de Youtube dont le code est inséré dans le champ "emplacement" de ma fiche produit.

Si tu veux que ta video provienne de Vimeo, il te suffit de changer le début de l'URL dans le dernier bloc ajouté (je ne connais pas le format des URLs de Vimeo, mais le principe doit être similaire

Xcorpion306 · November 29, 2012

Excusez-moi, je ne sais pas où je dois mettre le code Youtube.

Pourriez-vous me montrer où s'il vous plaît?

MERCI BEAUCOUP.

Cordialement

Johann · November 29, 2012

du coup, le code de la video, on le met dans le champ "emplacement" dans la fiche produit, dans le backoffice

Xcorpion306 · November 30, 2012

Je suis désolé, il semble que je suis assez stupide pour faire ça, parce que je ne vois pas le champ "emplacement" dans la fiche produit .

Ce sont les lignes de mon tpl:

{$HOOK_PRODUCT_FOOTER}
<!-- description and features -->
{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments}
<div id="more_info_block" class="clear">
<ul id="more_info_tabs" class="idTabs idTabsShort">
 {if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
 {if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
 {if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
 {if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
 {if $product->location}<li><a id="video_tab" href="#idTab12">{l s='Video'}</a></li>{/if}
 {$HOOK_PRODUCT_TAB}

</ul>

<div id="more_info_sheets" class="sheets align_justify">
{if $product->description}
 <!-- full description -->
 <div id="idTab1" class="rte">{$product->description}</div>
{/if}
{if $features}
 <!-- product's features -->
 <ul id="idTab2" class="bullet">
 {foreach from=$features item=feature}
  <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
 {/foreach}
 </ul>
{/if}
{if $attachments}
 <ul id="idTab9" class="bullet">
 {foreach from=$attachments item=attachment}
  <li><a href="{$link->getPageLink('attachment.php', true)}?id_attachment={$attachment.id_attachment}">{$attachment.name|escape:'htmlall':'UTF-8'}</a><br />{$attachment.description|escape:'htmlall':'UTF-8'}</li>
 {/foreach}
 </ul>
{/if}
{if isset($accessories) AND $accessories}
 <!-- accessories -->
 <ul id="idTab4" class="bullet">
  <div class="block products_block accessories_block clearfix">
   <div class="block_content">
 <ul>
 {foreach from=$accessories item=accessory name=accessories_list}
  {assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
  <li class="ajax_block_product {if $smarty.foreach.accessories_list.first}first_item{elseif $smarty.foreach.accessories_list.last}last_item{else}item{/if} product_accessories_description">
   <h5><a href="{$accessoryLink|escape:'htmlall':'UTF-8'}">{$accessory.name|truncate:22:'...':true|escape:'htmlall':'UTF-8'}</a></h5>
   <div class="product_desc">
    <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{$accessory.legend|escape:'htmlall':'UTF-8'}" class="product_image"><img src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'medium')}" alt="{$accessory.legend|escape:'htmlall':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" /></a>
    <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{l s='More'}" class="product_description">{$accessory.description_short|strip_tags|truncate:70:'...'}</a>
   </div>
   <p class="product_accessories_price">
    {if $accessory.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<span class="price">{if $priceDisplay != 1}{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}{/if}</span>{/if}
    <a class="button" href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
    {if ($accessory.allow_oosp || $accessory.quantity > 0) AND $accessory.available_for_order AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}
	 <a class="exclusive button ajax_add_to_cart_button" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add" rel="ajax_id_product_{$accessory.id_product|intval}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
    {else}
	 <span class="exclusive">{l s='Add to cart'}</span>
	 <span class="availability">{if (isset($accessory.quantity_all_versions) && $accessory.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>
    {/if}
   </p>
  </li>
 {/foreach}
 </ul>
   </div>
  </div>
 </ul>
{/if}

{if $product->location}
 <div id="idTab12" class="rte">
  <iframe title="Youtube Video Player" class="youtube-player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/{$product->location}" frameborder="0" allowFullscreen></iframe>
 </div>
{/if}
{$HOOK_PRODUCT_TAB_CONTENT}

</div>
</div>
{/if}

Et il s'agit d'une capture de mon produit à backoffice.

Azureaweb · December 1, 2012

Bonjour, de mon côté, j'ai tout simplement utilisé l’éditeur wysiwyg de la description du produit en utilisant le bouton média incorporé.

Il suffit de rentrer l'url de la vidéo puis le format attendu (flash, vidéo, iframe...)

Johann · December 2, 2012

en effet, il n'y a plus le champ "emplacement" dans PS 1.5. Il existe encore dans la base de données, donc on doit pouvoir y accéder (gestion des stocks avancée ?)

tu peux par exemple remplacer par l'utilisation du code UPC :

{if $product->upc}
 <div id="idTab12" class="rte">
  <iframe title="Youtube Video Player" class="youtube-player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/{$product->upc}" frameborder="0" allowFullscreen></iframe>
 </div>
{/if}

Xcorpion306 · December 3, 2012

MERCI Beaucoup !!! ;)

deadrefused · December 4, 2012

Bonjour a tous

Super l'astuce mais le back office refuse le code UPC (code youtube YoZ7XoW92zM)

"Ce champ UPC est invalide"

Comment faire ?

Merci

Prestashop 1.5.2.0

Edited December 4, 2012 by deadrefused (see edit history)

Azureaweb · December 4, 2012

Bonjour,

J'ai posté une astuce toute bête dans le dernier post de la page 1.

Avez-vous essayé ?

Démo ici du résultat de la manip' : http://www.willyoo-tryit.com/sites/prestashop/fr/musique-ipods/1-ipod-nano.html

Temps passé pour insérer la vidéo : 10 secondes !

Edited December 4, 2012 by Azureaweb (see edit history)

deadrefused · December 4, 2012

Bonjour Azureaweb

Oui merci, je connait déja cette méthode, mais je voudrais que la vidéo soit dans un onglet a coté de description, pas dans la description

chriseyes21 · June 18, 2013

Merci beaucoup pour ce topic, cela marche parfaitement avec le code


  	 <!-- youtube video -->
           {if $product->reference}
             <div id="idTab12" class="rte">
              <iframe title="Youtube Video Player" class="youtube-player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/{$product->reference}" frameborder="0" allowFullscreen></iframe>
             </div>
           {/if}

Remarquez que j'ai chargé UPC par REFERENCE car effectivement le champ UPC n'accepte pas les différents caractères de youtube.

Merci encore

siteotop · November 14, 2013

Petit exemple concret avec le code que j'utilise pour ce site :

http://www.garage-batayer.fr/ferrari/195-ferrari-f430-spider-f1.html

(la vidéo est dans l'onglet "Video")

dans le fichier product.tpl du thème (ce site est en PS 1.4.9.0 mais tu trouveras l'équivalent sur n'importe quelle version), tu recherches la partie de code gérant les onglets :

{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments}
<div id="more_info_block" class="clear">
    <ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
        {if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
        {if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
        {if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
        {if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
   	 {$HOOK_PRODUCT_TAB}
    </ul>
au dessus du $HOOK_PRODUCT_TAB, tu ajoutes la ligne suivante :
	    {if $product->location}<li><a id="video_tab" href="#idTab12">{l s='Video'}</a></li>{/if}
Un peu plus bas dans le .tpl, tu recherches la ligne :
{$HOOK_PRODUCT_TAB_CONTENT}
et au dessus tu ajoutes le bloc :
{if $product->location}
  <div id="idTab12" class="rte">
   <iframe title="Youtube Video Player" class="youtube-player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/{$product->location}" frameborder="0" allowFullscreen></iframe>
  </div>
{/if}
Ca affichera donc une video provenant de Youtube dont le code est inséré dans le champ "emplacement" de ma fiche produit.
Si tu veux que ta video provienne de Vimeo, il te suffit de changer le début de l'URL dans le dernier bloc ajouté (je ne connais pas le format des URLs de Vimeo, mais le principe doit être similaire

Ces modifications ne fonctionnent pas pour moi qui est en PS 1.4.7

[ASTUCE] Intégrer une vidéo youtube sur une fiche produit

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites