Videos are an integral aspect of success in ecommerce, as they help drive sales and revenue. Shoppable videos is an interactive marketing tool that features products available for purchase.
In this article, we will learn how to add videos in a Blitz app using Cloudinary’s Shoppable Video and Video Player.
The completed project is on CodeSandbox. Fork it and run the code.
The source code is also available on GitHub.
Knowledge of React, Blitz, and a Cloudinary account is required to get the most out of this article.
Run any of the commands below in the terminal to install Blitz.
yarn global add blitz
or
npm install -g blitz --legacy-peer-deps
Code language: PHP (php)
Next, scaffold a new Blitz.js project with the command below:
blitz new brand-visualizer
Code language: JavaScript (javascript)
The command will trigger a command-line interface (CLI) where we can configure the application. The images below show the configuration options the CLI provides:
Next, navigate into the project directory.
cd blitz-shoppable-app
Then, run the command below to start the application at http://localhost:3000.
blitz dev
Next, we need to create the ShoppableVideo
component, which will hold the video player. Create a components/ShoppableVideo.js
file inside a
pp “ folder and paste the code below.
import { useEffect } from "react"
import { Cloudinary } from "cloudinary-core"
import "cloudinary-video-player/dist/cld-video-player.min.js"
import "cloudinary-video-player/dist/cld-video-player.min.css"
const ShoppableVideo = () => {
const cld = new Cloudinary({ cloud_name: "nefejames" })
useEffect(() => {
const videoplayer = cld
.videoPlayer("video-player", {
controls: true,
})
.width(600)
videoplayer.source(
"https://res.cloudinary.com/nefejames/video/upload/v1657587018/Hackmamba/house%20videos/production_ID_4301618_gxbqe7.mp4"
)
}, [])
return (
<div className="container">
<h1>Blitz.js Shoppable Video</h1>
<video controls autoPlay id="video-player"></video>
</div>
)
}
export default ShoppableVideo
Code language: JavaScript (javascript)
The code above does the following:
-
Imports
useEffect
from React. -
Imports the required dependencies from
blitz
,cloudinary-core
andreact
. -
Imports the video player’s CSS stylesheet and JavaScript bundle.
-
Creates a
cld
variable and sets it to a newCloudinary
instance. -
Instantiates the video player using the
videoPlayer
method. The method takes two parameters; the first is the ID of the video element, and the second is a configuration object. -
Set the width of the video player to 600px.
-
Pass in the URL of the video we want to play to the
cld.source()
method.
Having created the ShoppableVideo
component, let’s integrate it into the app. Update the pages/index.js
file with the code below.
import { Head, dynamic } from "blitz"
const DynamicShoppableVideo = dynamic(() => import("app/components/ShoppableVideo"), {
ssr: false,
})
const Home = () => {
return (
<div className="container">
<Head>
<title>Blitz App</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<main>
<DynamicShoppableVideo />
</main>
</div>
)
}
Home.suppressFirstRenderFlicker = true
export default Home
Code language: JavaScript (javascript)
Here, we import dynamic
from Next.js and use that to dynamically import ShoppableVideo
with SSR turned off. This is because the Cloudinary video player package works only on the client-side and needs the window
object.
With that, the video player renders in the browser.
Now, we’ll add the shoppable video to the player. To do that, we need to update the components/ShoppableVideo.js
file and pass one more parameter to the cld.source()
method.
However, we first need to define the data of the product we want to display in the shoppable feature.
Create an app/data/index.js
file and update it with the code below.
const shoppable = {
products: [
{
productId: 1,
productName: "A Dog",
publicId:
"https://res.cloudinary.com/nefejames/image/upload/v1632500955/Hackmamba/Images/pet9.jpg",
onClick: {
action: "goto",
pause: true,
args: {
url: "/product/1",
},
},
},
],
}
export default shoppable
Code language: JavaScript (javascript)
Let’s break down the code above:
-
We defined and exported an object called
shoppable
. Theproducts
array contains the configuration for the products we want to display. -
productId
is the ID of the product. -
productName
is the name of the product. -
publicId
is the ID of the product image; in this case, it is the URL of the product image. -
onClick
defines what happens when a user clicks on a product in the products bar. -
We set the
action
togoto
, which will open a URL in a new tab. -
pause
will pause the videoonClick
. -
We define the URL for the action in
args
.
Next, we’ll add the shoppable
object we defined to the cld.source()
method. Update the components/ShoppableVideo.js
file with the code below.
import { useEffect } from "react"
import shoppable from "app/data" //added
import { Cloudinary } from "cloudinary-core"
import "cloudinary-video-player/dist/cld-video-player.min.js"
import "cloudinary-video-player/dist/cld-video-player.min.css"
const ShoppableVideo = () => {
const cld = new Cloudinary({ cloud_name: "nefejames" })
useEffect(() => {
const videoplayer = cld
.videoPlayer("video-player", {
controls: true,
})
.width(600)
videoplayer.source(
"https://res.cloudinary.com/nefejames/video/upload/v1657587018/Hackmamba/house%20videos/production_ID_4301618_gxbqe7.mp4",
{
shoppable: shoppable, //added
}
)
}, [])
return (
<div className="container">
<h1>Blitz.js Shoppable Video</h1>
<video controls autoPlay id="video-player"></video>
</div>
)
}
export default ShoppableVideo
Code language: JavaScript (javascript)
With this, the shoppable video displays on the browser.
When a user clicks on a product, we want to redirect them to the product’s page, where they can make a purchase. That’s why we defined the action
as goto
in the shoppable data.
Create a pages/product/[id].js
file and paste the code below to make the page.
import Cart from "app/components/Cart"
import shoppable from "app/data"
import { useState } from "react"
const Product = () => {
const [cartItem, setCartItem] = useState(null)
const addToCart = () => {
setCartItem({
imgUrl: shoppable.products[0].publicId,
name: shoppable.products[0].productName,
})
}
return (
<div className="product-container ">
<div className="product">
<img src={shoppable.products[0].publicId} alt="a product" />
<span>$20:00</span>
<span>{shoppable.products[0].productName}</span>
<button onClick={addToCart}>Buy</button>
</div>
<Cart cartItem={cartItem} />
</div>
)
}
export default Product
Code language: JavaScript (javascript)
Above, we did the following:
-
Imported the required dependencies.
-
Created a
cartItem
state that will hold the data of the product in the cart. -
Created an
addToCart
function, which is an object containing the product’s name and image. Then we passedaddToCart
to the button. -
Accessed the product’s data from shoppable and displayed it.
-
Passed the
cartItem
state to theCart
component. TheCart
component will show the items the user bought.
Let’s define the Cart
component.
const Cart = ({ cartItem }) => {
return (
<div className="cart-box">
<div className="cart">
<h2>Cart</h2>
{cartItem ? (
<div>
<img src={cartItem.imgUrl} alt="a product" />
<span>{cartItem.name}</span>
</div>
) : (
<span>Cart is empty</span>
)}
</div>
</div>
)
}
export default Cart
Code language: JavaScript (javascript)
Here, we check to ensure an item is in the cart and display that item. With that, we have successfully added the product page.
Here’s a gif of the working demo.
This article demonstrated how to add videos in a Blitz app using Cloudinary’s Shoppable Video and Video Player.