Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

YouTube Button

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

Industries

  • Music & Instruments
  • Toys & Games

Wireframe

Yotube Button

Coding Instructions

Step 1. Add the custom product field

1) Go to Admin > Customisable Fields > 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

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

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.

[%site_value id:'footer_javascript'%]
    <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>
[%/site_value%]
[%if [@misc6@]%]
    <a href="//www.youtube.com/watch?v=[@misc6@]" class="pull-right youtube-play"><i class="fa fa-youtube-play"></i></a>
[%/if%]

Step 4. 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.

[%site_value id:'footer_javascript'%]
    <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>
[%/site_value%]
[%if [@misc6@]%]
    <a href="//www.youtube.com/watch?v=[@misc6@]" class="pull-right youtube-play"><i class="fa fa-youtube-play"></i></a>
[%/if%]

Step 5. 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

Download Files

Download Files