{"id":28213,"date":"2021-05-18T21:48:13","date_gmt":"2021-05-18T21:48:13","guid":{"rendered":"http:\/\/Utilizing-Product-Videos-in-Gatsby.js-Commerce"},"modified":"2021-05-18T21:48:13","modified_gmt":"2021-05-18T21:48:13","slug":"utilizing-product-videos-in-gatsby-js-commerce","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/utilizing-product-videos-in-gatsby-js-commerce\/","title":{"rendered":"Utilizing Product Videos in Gatsby.js Commerce"},"content":{"rendered":"

Gatsby.js<\/a> is a front-end web technology that helps streamline making fast, search-engine friendly and secure websites. It does that using modern technologies like React and GraphQL.<\/p>\n

This post explores using product videos on an e-commerce store to engage and convert users.<\/p>\n

\n

Care should be taken as videos not optimized can affect the performance and speed of the website.<\/p>\n<\/blockquote>\n

We\u2019ll utilize the Cloudinary video player, which helps us render an optimized video.<\/p>\n

At the end of this tutorial, we\u2019ll gain a solid understanding of how to render a product video using the URL of a video stored on Cloudinary. A user should be able to carry out video transformations on the video player if they choose.<\/p>\n

Sandbox<\/h2>\n

We completed the entire project on Codesandbox<\/a>, and you can fork it to run the code.<\/p>\n<\/div>\n \n

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

Prerequisites and Installation<\/h2>\n

This article assumes that you have a basic knowledge of JavaScript, and React.js is required. However, understanding Gatsby.js is not a necessity.<\/p>\n

We\u2019ll use the gatsby-starter-ecommerce<\/a> starter to scaffold the front-end of an e-commerce site from the command line. First, we install Gatsby globally and create a new project in our desired directory with the URL of the starter template. Gatsby ships starters to help scaffold projects quickly.<\/p>\n

The Gatsby CLI is available via npm, and we install it using the command:<\/p>\n

    npm install -g gatsby-cli\n<\/code><\/span><\/pre>\n
We create a new project titled \u201cgatsby-starter-ecommerce\u201d from an e-commerce starter using the command:<\/p>\n
    gatsby new<\/span> gatsby-starter-ecommerce https:\/\/github.com\/parmsang\/gatsby-starter-ecommerce<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The above command installs Gatsby and creates a new project titled \u201cgatsby-starter-ecommerce\u201d.<\/p>\n
We need to install the dependencies in our project using the CLI command.<\/p>\n
    npm install cloudinary-react\n<\/code><\/span><\/pre>\n
To start the development server on localhost:8000, we run the app using the command:<\/p>\n
    npm run develop\n<\/code><\/span><\/pre>\n
Product video creation<\/h2>\n
We create a new directory in the src\/components directory called VideoPlayer, and in there, we create a file called index.js that would contain all the components and styles we need to run our video player.<\/p>\n
    \/\/ src\/components\/VideoPlayer\/index.js<\/span>\n    import<\/span> React, {useState, useEffect, memo} from<\/span> 'react'<\/span>\n    import<\/span> {Video, CloudinaryContext} from<\/span> 'cloudinary-react'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We create a function component for the video player. The component will return a Cloudinary video wrapped around a Cloudinary Context component. Cloudinary Context provides a container with shared data accessible by all child Cloudinary components.<\/p>\n
    const ProductVideo = ({video = 'video-ecommerce\/tomato'}) => {\n      return (\n        <CloudinaryContext cloudName="codeg0d">\n          <Video\n            publicId={video}\n            controls\n            width="100%"\n          \/>\n        <\/CloudinaryContext>\n      )\n    }\n    \n    export default ProductVideo\n<\/code><\/pre>\n
From the Cloudinary Context, we provided a cloud name. To obtain a cloud name, you need to register a new account on Cloudinary<\/a> to get the cloud name value from your dashboard.<\/p>\n
Rendering the video player<\/h2>\n
With the completed steps above, we render a ProductVideo<\/code> component into the ProductAttributes<\/code> component, in src\/components\/index.js. Next, we update the code component to include the video player.<\/p>\n
    import<\/span> React from<\/span> 'react'<\/span>\n    import<\/span> {Header, Divider, Table} from<\/span> 'semantic-ui-react'<\/span>\n    import<\/span> ProductVideo from<\/span> '..\/VideoPlayer\/index'<\/span>\n    \n    export<\/span> default<\/span> ({description, material, max_watt, bulb_qty, finish, bulb}) => (\n     <div<\/span>><\/span>\n      <Header<\/span> as<\/span>=\"h3\"<\/span>><\/span>About this product<\/Header<\/span>><\/span>\n      <p<\/span>><\/span>{description}<\/p<\/span>><\/span>\n      <Divider<\/span> \/><\/span>\n      <Table<\/span> celled<\/span>><\/span>\n       {\/*table information goes in here*\/}\n      <\/Table<\/span>><\/span>\n      <Divider<\/span> \/><\/span>\n      <ProductVideo<\/span> \/><\/span>\n     <\/div<\/span>><\/span><\/span>\n    )\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Video transformation<\/h2>\n
In this post, we stated that Cloudinary is cloud-based, and it offers the possibility for transformation of videos using the Transformation URL API Reference<\/a>, which include all transformation parameters.<\/p>\n
We can apply transformations to the video rendered in the ProductVideo<\/code> component.<\/p>\n
    const<\/span> ProductVideo = ({video = 'video-ecommerce\/tomato'<\/span>}<\/span>) =><\/span> {\n      return<\/span> (\n        <CloudinaryContext<\/span> cloudName<\/span>=\"codeg0d\"<\/span>><\/span>\n          <Video<\/span>\n            publicId<\/span>={video}<\/span>\n            controls<\/span>\n            width<\/span>=\"100%\"<\/span>\n            sourceTransformation<\/span>={{<\/span>\n              ogv:<\/span> {\n                aspect_ratio:<\/span> '3:2<\/span>',\n              },\n              webm:<\/span> {\n                aspectRatio:<\/span> '1:1<\/span>',\n              },\n            }}\n            sourceTypes<\/span>={[<\/span>'webm<\/span>', 'ogv<\/span>', 'mp4<\/span>']}\n          \/><\/span>\n        <\/CloudinaryContext<\/span>><\/span><\/span>\n      )\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the above code block, we defined the source types and source transformation parameters for our video.<\/p>\n
There are multiple other parameters we can include based on our preference and what we want to achieve.<\/p>\n
With these, we have the product page looking like this. Spot the video after the product attributes.<\/p>\n
\"Product<\/p>\n
Summary<\/h2>\n
The use of product videos in your e-commerce store can improve customers\u2019 trust and boost sales. With Cloudinary, this is possible as we can optimize and transform product videos for the best user and media experience.<\/p>\n
Resources<\/h2>\n
You may find these resources helpful.<\/p>\n
The sourceTransformation<\/code> parameter specifies the aspect ratio for each video format and determines how the asset (video) is adjusted to new dimensions. Finally, the sourceTypes<\/a> parameter is an ordered array of the video source types to include in the HTML5 tag, where the type is mapped to the mime type.<\/p>\n
Cloudinary is a cloud-based media management service that handles all digital media stored, transformed, and optimized for a great media experience. We\u2019ll use the Video component shipped with Cloudinary\u2019s React.js library, cloudinary-react<\/a>, to render and display the video.<\/p>\n