{"id":27870,"date":"2022-11-22T11:20:11","date_gmt":"2022-11-22T11:20:11","guid":{"rendered":"http:\/\/e-commerce-sites-wt-cloudinary-widgets-and-netlify"},"modified":"2022-11-22T11:20:11","modified_gmt":"2022-11-22T11:20:11","slug":"e-commerce-sites-wt-cloudinary-widgets-and-netlify","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/e-commerce-sites-wt-cloudinary-widgets-and-netlify\/","title":{"rendered":"Ecommerce Sites with Cloudinary Widgets & Netlify"},"content":{"rendered":"

The power of compelling images increases the likelihood that a potential customer will make a purchase. When interactive, images provide a more profound experience for the customer, making them almost as tangible as the product themselves. Using Sanity<\/a>, Cloudinary<\/a> and Netlify<\/a> I will show you how to set up your own interactive product media gallery with minimal effort.<\/p>\n

In this tutorial, we will build the product Gallery management feature for an e-commerce web application using the Cloudinary Product Widget.<\/p>\n

Sandbox<\/h2>\n

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

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

Prerequisites<\/h2>\n

Knowledge of React, Next.js, Sanity CLI, Netlify edge functions and a Cloudinary account<\/a> is required to get the most out of this article.<\/p>\n

Getting Started<\/h2>\n

Create a Next.js project by running the command below in your terminal.<\/p>\n

npx create-next-app product-gallery\n<\/code><\/span><\/pre>\n
Next, add the project dependencies using the following command:<\/p>\n
npm<\/span> install<\/span> axios<\/span> @sanity<\/span>\/client @sanity\/image-url netlify-cli dotenv -g\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Next, navigate into the project directory.<\/p>\n
cd product-gallery\n<\/code><\/span><\/pre>\n
Then, run the command below to start the application.<\/p>\n
ntl dev\n<\/code><\/span><\/pre>\n
This should start our Next.js application on port 8888<\/code>.<\/p>\n
\n
Note: You need to have the Netlify CLI installed to run ntl<\/code> commands.<\/p>\n<\/blockquote>\n
Reading data from Sanity<\/h2>\n
Our product data will be coming from a Sanity CMS project we\u2019ve previously created. You can pull in data for products from wherever you want, a REST endpoint, your database, or from a JSON file. Whatever works best for you.<\/p>\n
Let\u2019s initialize a new Sanity instance for our project. Create a \/lib\/sanity.js<\/code> file and update it with the snippet below:<\/p>\n
\/\/ sanity.js<\/span>\nimport<\/span> sanityClient from<\/span> \"@sanity\/client\"<\/span>;\nexport<\/span> const<\/span> client = sanityClient({\n  projectId<\/span>: \"[Project ID]\"<\/span>,\n  dataset<\/span>: \"production\"<\/span>,\n  useCdn<\/span>: true<\/span>,\n});\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, we setup a new sanity client by passing it our projectId<\/code> and dataset<\/code>. We have now established a connection with Sanity to read data.<\/p>\n
Fetching Products from Sanity<\/h2>\n
We are going to use Netlify functions to interface with our Sanity instance and fetch our products.\nTo do that, let\u2019s setup a simple Netlify function to fetch our data. Create a functions\/product.js<\/code> file from the root directory and update it with this snippet:<\/p>\n
\/\/ src\/functions\/product.js<\/span>\n\nconst<\/span> sanityClient = require<\/span>(\"@sanity\/client\"<\/span>);\nrequire<\/span>(\"dotenv\"<\/span>).config();\n\nexports.handler = async (event) => {\n    const<\/span> client = sanityClient({\n    projectId: process.env.PROJECTID,\n    dataset: \"process.env.DATASET,\n    useCdn: true,\n    token: process.env.TOKEN,\n    apiVersion: \"<\/span>2022<\/span>-08<\/span>-10<\/span>\"\n    });\n    try {\n        const products = await client.fetch(\n        `*[_type == \"<\/span>product\" && \"<\/span>chocolate\" in tags]`\n        );\n        const res = await products;\n        return {\n        statusCode: 200,\n        body: JSON.stringify(res)\n        };\n    } catch (error) {\n        console.log(error);\n    }\n};\n\n<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Here, we used a GROQ query to fetch all products from Sanity with a chocolate<\/code> tag and send it back as a response. As a result, if you visited our project at localhost:8888\/.netlify\/functions\/product<\/code> you should get a response containing all our products from Sanity.<\/p>\n
\"\"<\/p>\n
Now that we are successfully fetching our product data from Sanity, it only makes sense that we display them on the homepage for users to see. To do that, let\u2019s update our pages\/index.js<\/code> file to call our Netlify function and display the response (our products):<\/p>\n
\/\/ index.js<\/span>\nimport<\/span> imageUrlBuilder from<\/span> \"@sanity\/image-url\"<\/span>;\nconst<\/span> builder = imageUrlBuilder(client);\nexport<\/span> default<\/span> function<\/span> IndexPage<\/span>({ products }<\/span>) <\/span>{\n  return<\/span> (\n    <div<\/span> className<\/span>={styles.container}<\/span>><\/span>\n      <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n        <div<\/span> className<\/span>={styles.grid}<\/span>><\/span>\n          {products.map((product) => {\n            const { defaultProductVariant = {} } = product;\n            const { images } = defaultProductVariant;\n            return (\n              <div<\/span> key<\/span>={product._id}<\/span>><\/span>\n                <a<\/span> href<\/span>={<\/span>`\/product<\/span>\/${product._id<\/span>}`}><\/span>\n                  <img<\/span>\n                    className<\/span>={styles.card}<\/span>\n                    src<\/span>={builder.image(images[0]).width(300)}<\/span>\n                    alt<\/span>=\"images\"<\/span>\n                  \/><\/span>\n                <\/a<\/span>><\/span>\n                <h3<\/span>><\/span>{product.title}<\/h3<\/span>><\/span>\n              <\/div<\/span>><\/span>\n            );\n          })}\n        <\/div<\/span>><\/span>\n      <\/main<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\nexport<\/span> async<\/span> function<\/span> getStaticProps<\/span>(<\/span>) <\/span>{\n  const<\/span> products = await<\/span> axios.get(\n    \"http:\/\/localhost:8888\/.netlify\/functions\/products\"<\/span>\n  );\n  return<\/span> {\n    props<\/span>: {\n      products<\/span>: products.data,\n    },\n  };\n}\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With that, if we reload the homepage on the browser, we should now see our products from Sanity rendered for the users to see.<\/p>\n
\"\"<\/p>\n
Adding Dynamic Product Details Pages<\/h2>\n
Now that we have our products displayed, we want to implement dynamic pages so that when you click on a product, we open a product details page where you can see more information about the product.<\/p>\n
We\u2019ll follow the standard Next.js approach of using getStaticPaths to generate the dynamic paths and build the pages on demand with our data. We\u2019ll use the Cloudinary Product Gallery widget<\/a> to display more images of the products. Create a p``ages\/p``roduct\/[id].js<\/code> file and add the following snippet:<\/p>\n
\/\/ product\/[id].js<\/span>\nimport<\/span> axios from<\/span> \"axios\"<\/span>;\nexport<\/span> default<\/span> function<\/span> product<\/span>(<\/span>) <\/span>{\n    return<\/span> (\n        \/\/ Cloudinary product widget goes here <\/span>\n    )\n}\nexport<\/span> default<\/span> product;\nexport<\/span> async<\/span> function<\/span> getStaticPaths<\/span>(<\/span>) <\/span>{\n    const<\/span> products = await<\/span> axios.get(\n        \"http:\/\/localhost:8888\/.netlify\/functions\/products\"<\/span>\n    );\n    const<\/span> paths = products.data && products.data.map((prod<\/span>) =><\/span> ({\n        params<\/span>: { id<\/span>: prod._id }\n    }));\n    return<\/span> {\n        paths<\/span>: paths,\n        fallback<\/span>: false<\/span>\n    };\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, we export the getStaticPath``()<\/code> function to make requests to our Netlify function and generate all our products via the paths we\u2019ve specified.  Then, we loop through the products and assigned id<\/code> to params.id<\/code> to match the product ID.<\/p>\n
Next, update the file and pass the paths we want to generate to the getStaticProps() function and pass the generated product to our homepage:<\/p>\n
\/\/ product\/[id].js<\/span>\n\/\/ ...<\/span>\nexport<\/span> async<\/span> function<\/span> getStaticProps<\/span>({ params }<\/span>) <\/span>{\n  const<\/span> products = await<\/span> axios.get(\n    \"http:\/\/localhost:8888\/.netlify\/functions\/products\"<\/span>\n  );\n  const<\/span> product =\n    products.data && products.data.filter((prod<\/span>) =><\/span> params.id === prod._id);\n  return<\/span> {\n    props<\/span>: {\n      product,\n    },\n  };\n}\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With this, we can pass the generated product to our IndexPage()<\/code> component for rendering. However, we don\u2019t just want to render it. We want to use the Cloudinary Product Gallery Widget to display all the different images of the product.<\/p>\n
Setting up Cloudinary Product Gallery Widget<\/h2>\n
The Cloudinary gallery widget relies on the Client-side asset lists<\/a> feature to retrieve the list of images (or videos) with specified tags. To ensure that this feature is available on your Cloudinary account, you must ensure that the Resource list<\/strong> option is enabled. By default, the list delivery type is restricted. To enable it, open the Security settings<\/strong> in your console and clear the Resource lis****t<\/strong> item under Restricted media types<\/strong>.<\/p>\n
\"User-uploaded<\/p>\n
Add Gallery Context<\/h2>\n
The functionality for the gallery widget is delivered via CDN and instantiated in the index.js<\/code> file. However, we need access to the instantiated object elsewhere in our application to update the Widget on successful upload.<\/p>\n
To avoid prop drilling, we\u2019ll use React Context<\/a> to pass this object to any component where it may be required. Create a \/context\/GalleryContext.js<\/code> file in the root directory and set it up like so:<\/p>\n
import<\/span> { createContext } from<\/span> \"react\"<\/span>;\nconst<\/span> GalleryContext = createContext(null<\/span>);\nexport<\/span> default<\/span> GalleryContext;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With our context in place, we can instantiate the widget and update the context value.<\/p>\n
Instantiate Gallery Widget<\/h2>\n
To instantiate the gallery widget we will use Next\u2019s Custom Document<\/code><\/a> to update the <html><\/code> tags used to render a Page.<\/p>\n
To override the default Document<\/code>, create the file pages\/_document.js<\/code> as shown below:<\/p>\n
import<\/span> Document, { Html, Head, Main, NextScript } from<\/span> \"next\/document\"<\/span>;\n\nclass<\/span> MyDocument<\/span> extends<\/span> Document<\/span> <\/span>{\n  render() {\n    return<\/span> (\n      <Html<\/span>><\/span>\n        <Head<\/span> \/><\/span>\n        <body<\/span>><\/span>\n          <script<\/span>\n            src<\/span>=\"https:\/\/product-gallery.cloudinary.com\/all.js\"<\/span>\n            type<\/span>=\"text\/javascript\"<\/span>\n            strategy<\/span>=\"beforeInteractive\"<\/span>\n          ><\/span><\/script<\/span>><\/span>\n          <Main<\/span> \/><\/span>\n          <NextScript<\/span> \/><\/span>\n        <\/body<\/span>><\/span>\n      <\/Html<\/span>><\/span><\/span>\n    );\n  }\n}\n\nexport<\/span> default<\/span> MyDocument;\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The snippet above is the default Document<\/code> added by Next.js that allows custom attributes as props. We\u2019re using it to embed our JavaScript file which incorporates all the product gallery functionality.<\/p>\n
Next, update your products\/[id].js<\/code> file to match the following snippet:<\/p>\n
\/\/ product\/[id].js<\/span>\n\/\/ ...<\/span>\n\nconst<\/span> product = ({ product }<\/span>) =><\/span> {\n  useEffect(()<\/span> =><\/span> {\n    const<\/span> productGallery = cloudinary.galleryWidget(\n      {\n        container<\/span>: \"#gallery\"<\/span>,\n        cloudName<\/span>: \"cloudName\"<\/span>,\n        mediaAssets<\/span>: [{ tag<\/span>: `${product[0<\/span>].tags[0<\/span>]}<\/span>`<\/span>, mediaType<\/span>: \"image\"<\/span> }],\n      },\n      []\n    );\n    productGallery.render();\n  });\n  return<\/span> (\n    <div<\/span> className<\/span>={styles.wrapper}<\/span>><\/span>\n      <div<\/span>><\/span>\n        <div<\/span> id<\/span>=\"gallery\"<\/span>><\/span><\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <div<\/span>><\/span>\n          <p<\/span> className<\/span>={styles.product}<\/span>><\/span>{product[0].title}<\/p<\/span>><\/span>\n          <p<\/span>><\/span>{product[0].description}<\/p<\/span>><\/span>\n        <\/div<\/span>><\/span>\n        <p<\/span> className<\/span>={styles.price}<\/span>><\/span>$ 20 <\/p<\/span>><\/span>\n        <button<\/span> className<\/span>={styles.btn}<\/span>><\/span>Add to Cart<\/button<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\nexport<\/span> default<\/span> product;\n\n\/\/ ...<\/span>\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, we initialize the Product Gallery Widget with the cloudinary.galleryWidge``t()<\/code> method call and pass the initialization options, including the cloud name and the tags of the media assets we wish to retrieve. We also specify a key named container<\/code> to be the div<\/code> element where the gallery will be rendered.<\/p>\n
With these, we can now view the individual product and its variants. The final result will look like the GIF shown below.<\/p>\n
\"\"<\/p>\n
Conclusion<\/h2>\n
In this tutorial, we went over the process of reading e-commerce product data from Sanity using Netlify functions and rendering multiple product variant images in a product display page using the Cloudinary Product Gallery Widget. We rendered only images in this project, however, the widget can also render videos, 360 spin sets and 3D models.<\/p>\n
Resources you may find helpful:<\/strong><\/p>\n