{"id":27759,"date":"2022-08-16T11:25:33","date_gmt":"2022-08-16T11:25:33","guid":{"rendered":"http:\/\/create-shoppable-videos-in-blitzjs"},"modified":"2022-08-16T11:25:33","modified_gmt":"2022-08-16T11:25:33","slug":"create-shoppable-videos-in-blitzjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-shoppable-videos-in-blitzjs\/","title":{"rendered":"Create Shoppable Videos in Blitz.js"},"content":{"rendered":"

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.<\/p>\n

In this article, we will learn how to add videos in a Blitz app using Cloudinary\u2019s Shoppable Video and Video Player.<\/p>\n

Sandbox<\/h2>\n

The completed project is on CodeSandbox<\/a>. Fork it and run the code.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

The source code is also available on GitHub<\/a>.<\/p>\n

Prerequisites<\/h2>\n

Knowledge of React, Blitz<\/a>, and a Cloudinary account<\/a> is required to get the most out of this article.<\/p>\n

Getting started<\/h2>\n

Run any of the commands below in the terminal to install Blitz.<\/p>\n

yarn global<\/span> add blitz \nor<\/span> \nnpm install -g blitz --legacy-peer-deps\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Next, scaffold a new Blitz.js project with the command below:<\/p>\n
blitz new<\/span> brand-visualizer\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
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:<\/p>\n
\"\"<\/p>\n
Next, navigate into the project directory.<\/p>\n
cd blitz-shoppable-app\n<\/code><\/span><\/pre>\n
Then, run the command below to start the application at http:\/\/localhost:3000<\/a>.<\/p>\n
blitz dev\n<\/code><\/span><\/pre>\n
\"\"<\/p>\n
Creating the Shoppable Video component<\/h2>\n
Next, we need to create the ShoppableVideo<\/code> component, which will hold the video player. Create a components\/ShoppableVideo.js<\/code> file inside  a<\/code>pp “ folder and paste the code below.<\/p>\n
import<\/span> { useEffect } from<\/span> \"react\"<\/span>\nimport<\/span> { Cloudinary } from<\/span> \"cloudinary-core\"<\/span>\nimport<\/span> \"cloudinary-video-player\/dist\/cld-video-player.min.js\"<\/span>\nimport<\/span> \"cloudinary-video-player\/dist\/cld-video-player.min.css\"<\/span>\n\nconst<\/span> ShoppableVideo = ()<\/span> =><\/span> {\n  const<\/span> cld = new<\/span> Cloudinary({ cloud_name<\/span>: \"nefejames\"<\/span> })\n  useEffect(()<\/span> =><\/span> {\n    const<\/span> videoplayer = cld\n      .videoPlayer(\"video-player\"<\/span>, {\n        controls<\/span>: true<\/span>,\n      })\n      .width(600<\/span>)\n    videoplayer.source(\n      \"https:\/\/res.cloudinary.com\/nefejames\/video\/upload\/v1657587018\/Hackmamba\/house%20videos\/production_ID_4301618_gxbqe7.mp4\"<\/span>\n    )\n  }, [])\n  return<\/span> (\n    <div<\/span> className<\/span>=\"container\"<\/span>><\/span>\n      <h1<\/span>><\/span>Blitz.js Shoppable Video<\/h1<\/span>><\/span>\n      <video<\/span> controls<\/span> autoPlay<\/span> id<\/span>=\"video-player\"<\/span>><\/span><\/video<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  )\n}\nexport<\/span> default<\/span> ShoppableVideo\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The code above does the following:<\/p>\n