As e-commerce and video consumption adoption rises, an intersection of the two is emerging. Giving users an in-depth experience of the product by displaying not just static images but a sample usage video. These are called Shoppable videos. Let us learn how we can add them to our Nuxt.Js websites.
The final project can be viewed on Codesandbox.
You can find the full source code on my Github repository.
Our first step is to set up our Nuxt.Js app. Nuxt.Js is a Vue.Js framework that boasts of improving developer experience while being performant. To get started, ensure you have yarn or npm v5.2+/v6.1+ installed. Open your terminal in your preferred working directory and run the following command.
yarn create nuxt-app nuxtjs-shoppable-video
# OR
npx create-nuxt-app nuxtjs-shoppable-video
# OR
npm init nuxt-app nuxtjs-shoppable-video
Code language: PHP (php)Once you run the above command, you will receive a set of setup questions. Here are our recommended defaults:
Project name: nuxtjs-shoppable-video
Programming language: JavaScript
Package manager: Yarn
UI framework: Tailwind CSS
Nuxt.js modules: N/A
Linting tools: N/A
Testing framework: None
Rendering mode: Universal (SSR/SSG)
Deployment target: Server (Node.js hosting)
Development tools: None
Once the setup process is complete, you may now enter the directory and run the project.
cd nuxtjs-shoppable-video
yarn dev
# OR
npm run dev
Code language: PHP (php)The project should now be running on http://localhost:3000
We need to store our media assets before we start consuming them. For this, we will use Cloudinary, a media management platform with a set of rich APIs and SDKs. Open your media library and create a folder called nuxtjs-shoppable-video. If you do not have an account create one here.
Inside this folder add the following files:
You should now have a folder visually similar to this one.
To be able to use advanced video player features such as shoppable video, we will be using Cloudinary’s video player. To set it up, you simply need to add its CSS and JavaScript files to your project. We will do this by using the files already hosted on UNPKG’s Content Delivery Network (CDN).
To add the files, add the following in the head section of our nuxt.config.js file.
// nuxt.config.js
export default {
head: {
...
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.css' }
],
script: [
{ src: 'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js' },
{ src: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js' },
],
},
...
};
Code language: JavaScript (javascript)With the above setup, our assets will be included on every page in our app. Now we need to configure our Cloudinary cloud name globally. This will link the app to our Cloudinary account. We will store this in our environmental variables as it changes based on who is deploying the code thus we do not want it fixed in our codebase and sent to the remote code repository.
We store environmental variables in the global .env file so if you do not have one feel free to create it.
touch .env
Code language: CSS (css)We can now add our cloud name. If you do not have yours you can refer to the Account Details section of the dashboard.
<!-- .env -->
NUXT_ENV_CLOUDINARY_CLOUD_NAME=
Code language: HTML, XML (xml)To use the video player, we need to set up the HTML video element it is going to be running in. We need to give this element cld-video-player cld-video-player-skin-dark classes. We will also give the video player an ID we will use to refer to it later.
<!-- pages/index.vue -->
<template>
<div>
<video
id="video-player"
controls
muted
class="cld-video-player cld-video-player-skin-dark"
>
</video>
</div>
</template>
Code language: HTML, XML (xml)Once the above is configured, we now need to instantiate the player in JavaScript and inject the source video to be played.
// pages/index.vue
<script>
export default {
name: 'IndexPage',
data(){
return {
cld:null,
player:null,
};
},
mounted(){
this.cld = cloudinary.Cloudinary.new({ cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME });
this.player = this.cld.videoPlayer('video-player');
this.player.source(
"nuxtjs-shoppable-video/video.mp4",
);
}
}
</script>
Code language: HTML, XML (xml)We will now have a fully functional video player.
To make a video shoppable, we need to add a shoppable object to the source. This object will have the shoppable video configuration, mainly the UI and functionality as well as the products.
The products array in the object will contain a list of products available in the video. For each product, we specify an id, name, start and end time, image publicId, hotspots where the product is found in the video, hover behaviors, and callback when the product is clicked.
Let us store our shoppable configuration in the data section.
// pages/index.vue
<script>
export default {
name: 'IndexPage',
data(){
return {
cld:null,
player:null,
shoppable:{
transformation: {
crop: "pad",
aspect_ratio: "1"
},
products: [
{
productId: 1,
productName: "Macbook Pro",
startTime: 0,
endTime: 1,
publicId:
"nuxtjs-shoppable-video/macbook",
hotspots: [
{
time: "00:02",
x: "62%",
y: "32%",
tooltipPosition: "left",
clickUrl: "https://www.amazon.com/Apple-MacBook-Air-Retina-Display/dp/B08VF621Z4/ref=sr_1_2"
}
],
onHover: {
action: "overlay",
args: "See the MacBook in the video"
},
onClick: {
action: "seek",
pause: 5,
args: {
time: "00:02"
}
}
},
{
productId: 2,
productName: "iPad Pro",
startTime: 0,
endTime: 1,
publicId:
"nuxtjs-shoppable-video/ipad",
hotspots: [
{
time: "00:02",
x: "55%",
y: "68%",
tooltipPosition: "left",
clickUrl: "https://www.amazon.com/Apple-12-9-inch-Wi%E2%80%91Fi-Cellular-256GB/dp/B0932BB1BX/ref=sr_1_3"
}
],
onHover: {
action: "overlay",
args: "See the iPad in the video"
},
onClick: {
action: "seek",
pause: 5,
args: {
time: "00:02"
}
}
},
{
productId: 3,
productName: "iPhone",
startTime: 0,
endTime: 1,
publicId:
"nuxtjs-shoppable-video/iphone",
hotspots: [
{
time: "00:02",
x: "35%",
y: "68%",
tooltipPosition: "left",
clickUrl: "https://www.amazon.com/Apple-iPhone-12-Pro-Max/dp/B09JFS16CP/ref=sr_1_1"
}
],
onHover: {
action: "overlay",
args: "See the iPhone in the video"
},
onClick: {
action: "seek",
pause: 5,
args: {
time: "00:02"
}
}
},
]
}
};
},
...
};
</script>
Code language: HTML, XML (xml)We can now add the shoppable configuration to our player.source statement.
// pages/index.vue
export default {
...
mounted(){
this.cld = cloudinary.Cloudinary.new({ cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME });
this.player = this.cld.videoPlayer('video-player');
this.player.source(
"nuxtjs-shoppable-video/video.mp4",
{
shoppable: this.shoppable
}
);
}
}
</script>
Code language: PHP (php)This ensures that the video player will use the configuration as the video source is being loaded. Let us see the result.
This is just an introduction to see what we can achieve with shoppable videos using Cloudinary’s video player. To see what more is possible, refer to the documentation here.
