YouTube Button

A YouTube play button, which opens up with a video demonstrating the item.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
• The code snippet in this tweak doc uses Bootstrap 3, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1. Add the custom product field

1) Go to Setup & Tools > All settings & tools > Custom Product Fields and click the "Add New" button to add a new custom product field. Take note of the number that appears in the "Custom Field" dropdown - for example, "6" in Misc6 - as the code will require this number later.

2) Add "YouTube Video ID" in the "field name" field, and "The ID of the YouTube video for the product" in the "field description" field.

Notes On The Above Code

In this example, a custom product field is used to store just the code for the video, so to share the link for this video (https://youtu.be/xlcywgEMuGI), the last string of the URL, xlcywgEMuGI, would be stored in the custom field on Neto's control panel. This is done to allow the iframe to load the responsive classes and make the data more versatile when it comes to supporting other video players or things like embedded video players.

Step 2. Add the YouTube video ID to a product

Open any product, find the newly created "YouTube Video ID" field, and enter the following ID: xlcywgEMuGI.

Step 3. Add the JS to the footer

Open footers/template.html, and add the below block of code directly below [%SITE_VALUE id:'footer_javascript' type:'load'/%]:

<script type="text/javascript" language="javascript">
    $(".youtube-play").click(function() {
        var autoplay = '';
        if ($(this).attr('rel') == 'autoplay')
            autoplay = '&autoplay=1';
            $.fancybox({
                'padding'             : 0,
                'autoScale'           : true,
                'transitionIn'        : 'elastic',
                'transitionOut'       : 'elastic',
                'title'               : false,
                'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + autoplay,
                'type'                : 'swf',
                'swf'                 : {'allowfullscreen':'true'}
            });
        return false;
    });
</script>

Step 4. Add the Fancybox code to the gallery view thumb

Open thumbs/products/template.html, and add the below block of code directly below <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">, being sure to replace both instances of [@misc6@] with the number of your custom product field (e.g. [@misc1@]), as noted in step 1.

By default the thumb_list function can't get the [@misc#@] value. We can get around this by using the [%product%] function within a [%set%] function.

[%set [@thismisc6@]%][%product sku:'[@sku@]'%][%param *body%][@misc6@][%/param%][%/product%][%/set%]
[%if [@thismisc6@]%]
    <a href="//www.youtube.com/watch?v=[@thismisc6@]" class="pull-right youtube-play"><i class="fa fa-youtube-play"></i></a>
[%/if%]

As you can see above, we make a new set tag called [@thismisc6@] which uses the [%product%] function to get this particular product's [@misc6@] value.

Step 5. Add the Fancybox code to the list view thumb

Open thumbs/products/list.template.html, and add the below block of code directly below the <p> tag with class price lead, being sure to replace both instances of [@misc6@] with the number of the custom product field (e.g. [@misc1@]), as noted in the first step.

[%set [@thismisc6@]%][%product sku:'[@sku@]'%][%param *body%][@misc6@][%/param%][%/product%][%/set%]
[%if [@thismisc6@]%]
    <a href="//www.youtube.com/watch?v=[@thismisc6@]" class="pull-right youtube-play"><i class="fa fa-youtube-play"></i></a>
[%/if%]

Step 6. Shuffle elements or update styles to suit

Update the CSS to suit - for example, increase the size of the icon and change its colour for contrast.

Final Result