Shadowbox Youtube - Play videos in product list view

Last modified by Mr-Moo on Fri, June 25, 2010 11:08
Source|Old Revisions  

How to make YouTube videos play on product list view

Hey everyone,

Firstly, I want to say Magento is an amazing shopping cart. Props to them, this is the first piece of E-commerce software i’ve ever used that pushes MY limits as a business owner. This modification I decided to publish because there wasn’t anything like it. When I took on the task, it didn’t seem like TOO hard of a challenge (but then again I’m not too hot with PHP).

WHAT THIS MOD DOES

This mod was disigned to open videos in a shadowbox from the product list page, while allowing you to simply paste a URL into an add-products field. This means that customers are staying on one page, saving extra bandwidth, and creating a nice video player for your customers to review before induldging into the full product view. This can be modified in any way/shape/form as you wish, I request that you only include my name in the source code.

This tutorial will be as simple as I can make it. If I leave out details, please contact me so we can get them correccted (I just finished this script and was excited to share with everyone).

NOTE & DISCLAIMER

Please backup all your items before you begin this. I can’t stress this more! Don’t learn the hard way. THIS PRODUCT IS NOT SUPPORTED, I AM NOT A DEVELOPER .


Requirements

  • Magento ver. 1.3.2.4 (that is what I designed this tutorial from) - I cannot guarentee this will work on any other versions, sorry.
  • Moderate knowledge of Magento Software
  • Shadowbox.js (you can pick your opensource copy up at: http://www.shadowbox-js.com/ or use the API like in the below example)

Files

  • root/app/design/frontend/default/default/template/catalog/product/list.phtml
  • www/app/design/frontend/default/helloclean/template/page/html/head.phtml

Features

  • Add videos through the administrator panel
  • Paste link directly into plain-text-field and it will do the rest
  • Clean nice addition to any website
  • Must be used in “LIST” view only, not GRID.

—-

  1. Go to your Magento Administrator panel and manage your attributes (Catalog>Attributes>Manage Attributes)
  2. Add new attribute
  3. Set your attributes as they are in Figure[1] (click to enlarge).

2rq0bq9.jpg

  1. Click on “Manage Label / Options” on the left menu.
  2. Enter whatever settings you would like for “Admin” & “Default Store View”. Figure[2] below is what I have setup.

  1. Save Attribute
  2. Navigate to “Catalog>Attribute>Manage Attribute Sets”
  3. Click on “Default”. If you have a different one, please select your desired item.
  4. Drag “video_shadowbox_youtube” item in “Unassigned Attributes” to the “Groups” tree. Place “video_shadowbox_youtube” under General (Figure[3]). You can position it now which order you would like it to display in the administrator panel when adding products.

  1. Navigate to “Catalog>Manage Products”.
  2. For this example, we will be editing a product. So just select one of your items in your store that you would like to add a video to.
  3. Under the “General” part of the product, if you scroll down it should be displayed as “Youtube Video” similar to Figure[4].
  4. The portion of the YouTube URL is very important, we will only need a portion of the URL. A standard YouTube URL looks like “http://www.youtube.com/watch?v=TWaVbGGE6Yw“. What we need is the last bit after the “V=”. With that being noted, we can deduct that “TWaVbGGE6Yw” is the code.
  5. Take that code, and paste it into the “Youtube Video” field in the administrator panel.
  6. Move forward to the template edits :) - Assuming we haven’t ran into any issues.

Please review the source-code before we get into how to make any changes.

Template Edits: 1.) Open your “/www/app/design/frontend/default/helloclean/template/page/html/head.phtml” and add the below code under your <link rel”” /> tags. If you downloaded the Shadowbox.js for local use, please make sure you change the URL of the css/js files below. —

CODE:

<link rel="stylesheet" type="text/css" href="http://www.shadowbox-js.com/source/shadowbox.css"> 
<script type="text/javascript" src="http://www.shadowbox-js.com/source/shadowbox.js"></script> 
<script type="text/javascript"> 
Shadowbox.init({
    language: 'en',
    players:  ['img', 'iframe', 'qt', 'wmp', 'swf', 'flv', 'wmv']
});
</script>

I have included all the ‘player’ versions that the Shadowbox.js tool offers through its API. Browse their site to see all the capabilities of Shadowbox.js (http://www.shadowbox-js.com/).

2.) Open your “/root/app/design/frontend/default/default/template/catalog/product/list.phtml” and find where you want to add the below code. I noted the code as best as I could, please see the end for sources so you can modify it and undesrtand whats going on.

CODE:

<?php
// ALEX HESS MOD  START //

$moo = $_product->getvideo_shadowbox_youtube();

if (empty($moo))
    echo '';
else
    echo "<a href="http://www.youtube.com/v/$moo&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b;autoplay=1" rel="shadowbox;width=650;height=320">VIDEO HERE</a>n";

// ALEX HESS MOD END //
?>

I chose to place my PHP code right above the “Learn More” text. Below was what I added the shadowbox-code ABOVE.

CODE:

  1. <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->__('Learn More') ?></a>

With that known, we can see that the code should be:

CODE:

  1. <?php
  2. // ALEX HESS MOD  START //
  3. // Not sure why, but I had to set the variable "$exo" = $_product->getvideo_shadowbox_youtube() because the fucntion was not working in the if else statement.
  4. // The $_product->getvideo_shadowbox_youtube() (aka $exo) is your code that is entered in the text field attribute.
  5. $exo = $_product->getvideo_shadowbox_youtube();
  6.  
  7. // If there is no link , the echo/display nothing.
  8. if (empty($exo))
  9.     echo '';
  10.    
  11. // If there is data, echo/display below code   
  12. else
  13.     echo "<a href="http://www.youtube.com/v/$exo&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b;autoplay=1" rel="shadowbox;width=650;height=320">VIDEO HERE</a>n";
  14. // The above Youtube code can be modified however you would like. These are set to my preferences. In my sources, I cite a good HTML to PHP converter for you to convert your HTML code if you don't know syntax. Just make sure you stay within the two "".
  15. // ALEX HESS MOD END //
  16. ?>
  17. <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->__('Learn More') ?></a>

That should wrap things up, go to your homepage after uploading these files via FTP. See if things are working. If not, please review the instructions. If you find an error please contact me alex[at]ExoMagic.com . Please keep in mind, I am not a developer, so if I don’t explain things very clear in the code, or things seem ‘wrong’ or not correct syntax, I apologize. Let me know and I will fix them, time permitting.

Cheers,

Sources:

http://www.w3schools.com/php/php_if_else.asp

http://tools.devshed.com/webmaster-tools/html2php/

http://www.shadowbox-js.com/usage.html




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs