WPSuperDealer

How do I add a video link to a vehicle?

Jeff - The Super Trouble Maker

The backstory

One of our users, let’s call him Jeff , wants to know the best way to add a video to a vehicle.
We don’t know Jeff all that well, but we suspect he’s a trouble maker.
Which makes him our kind of people. Thus and therefore we’ve tossed together this here post so we can help a fellow troublemaker out.

Vehicle Options

Go to Dashboard->Vehicles->Settings | Click on the “Vehicle Options” tab.

Click on the vehicle type you want to add a video link to. If you want to add it to all types then go ahead and add it to all of your vehicle types.

Give it a logical name, like “Video Link” and don’t forget to save your options after you’ve added it.

That will put a “Video Link” field on your vehicle edit pages, assuming you’ve selected a vehicle type that now has the field.
If you stay on the WPSuperDealer settings page and you click on the new “Video Link” field you’ll see a place to enter a default value.
With a little luck the dealer will have a generic video that you can enter the URL for, then all vehicles will use that unless someone enters a different video.

Did you read that part about Jeff being a trouble maker? It's his Super Power!

Turns out Jeff’s dealer doesn’t have a generic video to use as a default, they want the video section to disappear if there isn’t a video.
For now, let’s go ahead and use a # as the default, then we can take care of a few other things real quick, then we’ll circle back and explain how we handle Jeff’s request.

Hiding it on the front end

If you edit a vehicle and add a vehicle link you might be surprised to see it spit that out on the front end as a raw link.
Here’s a video link you can test with, just add it to one of your vehicles and then look at it on the front end: https://www.youtube.com/embed/OHYN8RGY4dU
We’re going to add a little custom CSS to hide it.

Fancy CSS Code

				
					.vdp-spec-item-video_link {
    display: none;
}
Where do you put this “Fancy CSS Code”?
There’s lots of ways to add custom CSS to your site and just about any of them will work.
If you don’t know where to drop this then try going to Dashboard->Appearance->Customize and look for the “Additional CSS” section and paste it in there.

Using the Video link to show the video!

This is the exciting stuff, the meat and taters, the actual reason we’re going to all this trouble.
Go Dashboard->Appearance->Widgets
You should see several Sidebar areas for your vehicles, find the one that says “Single Vehicle Middle” and add a ‘custom html’ widget to it.
Drop in the code for displaying the video and use the {video_link} tag to get the value from the video. 
				
					<iframe width="853" height="480" src="{video_link}" data-src="{video_link}" frameborder="0"></iframe>
You could actually add this to one of the other widget areas, but for the sake of simplicity let’s just go with “Single Vehicle Middle” for our example.

How do we hide the video embed code if there isn't a video?

In a perfect world we’d have a default video, but in this case we don’t. So if a vehicle doesn’t have a video then the embed code we added is going to fail.
The easiest way to handle this is to ***wait for it*** add some custom code!
We’re not going to add just any old code, we’re going to add some PHP and some of that PHP is going to spit out some javascript for us.

How do we add PHP code to a website?

There are a lot of ways to add PHP, but for our example we’re going to use a fancy little PlugIn called WP Code.
We’re not going to go into all the details of using WP Code.
Just create a new snippet and follow their directions, etc.
Honestly, it isn’t difficult…
If you run into trouble just pop over to their support forum and let them know you’re adding a “Custom PHP Code Snippet and they should be able to get you pointed in the right direction.

What code are we adding?

First, we need a snippet that allows WPSuperDealer to output “data-src” as part of the parameters for an iframe.

WPSuperDealer uses a custom KSES function to help escape output and prevent nefarious activities, which is a fancy way of saying we need to add a php filter to get around that. 
				
					add_filter( 'wpsd_kses_vdp_filter', 'my_kses_vdp_filter', 10, 1 );
function my_kses_vdp_filter( $elements ) {
	$elements['iframe']['data-src'] = array();
    return $elements;
}
That’s the first piece of code we need to add, but we still need to get some JavaScript added that can handle removing the video for us. 
				
					add_action( 'wp_footer', 'my_iframe_js' );
function my_iframe_js() {
	?>
	<script>
		//= Start jQuery
		jQuery( document ).ready(function($) {
			console.log( 'check iframes' );
			if ( 0 < $( '.single-vehicle iframe' ).length ) {
				console.log( 'iframe found ' );
				var src = $( '.single-vehicle iframe' ).data( 'src' );
				console.log( 'iframe src ' + src );
				if ( '#' == src || '' == src ) {
					$( '.single-vehicle iframe' ).remove();
					console.log( 'Empty iFrame removed' );
				} else {
					console.log( 'iFrame NOT empty' );
				}
			} else {
				console.log( 'iframe NOT found' );
			}
		});
	</script>
	<?php
}
We suggest you remove all the “console.log” lines in a production site, they’re there so you can check the console and see when each piece runs.
With that little piece of code active it should look for any iframe that has a “data-src” field with # and simply remove the iframe.
This isn’t a perfect solution, there is a slight microsecond where the iframe exists with a bad src value, but it isn’t likely anyone will see it.
A better solution would be to use our Template Manager add-on and build the logic into the VDP template, then it won’t output at all.
If you need professional assistance editing your SRP and VDPs then let us know and we can assist you in fully customizing your listings.

Questions?

Send us a message

Built by the Heroes at

WPSuperTeam.com

Unleash your Hidden Hero!

© 2020 All rights reserved​ - WP super PlugIns

Made with the power of ❤