Create an E-Commerce Product Gallery in Remix

Emadamerho-Atori Nefe

Create an E-Commerce Product Gallery in Remix

Remix is a full-stack React framework for building web applications that provides several useful features such as server-side rendering, file-system-based routing, TypeScript support, built-in support for cookies and sessions, and more.

In this article, we will build an e-commerce product gallery with Remix and Cloudinary's Product Gallery widget.

Sandbox

The completed project is on CodeSandbox. Fork it and run the code.

The source code is also available on GitHub.

Prerequisites

Knowledge of React, Remix, and a Cloudinary account is required to get the most out of this article.

Getting Started

Run the command below in the terminal to set up a new Remix application.

1npx create-remix@latest

The command above triggers 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.

1cd remix-product-gallery

Then, run the command below to start the application.

1npm run dev

Setting up Cloudinary

Navigate to the Media Library section of the Cloudinary dashboard and create a new folder called image gallery.

Upload some images into the image gallery folder.

Cloudinary's Product Gallery Widget

We can dynamically display images, videos, 3D models, and 360-degree animations on our websites using Cloudinary's Product Gallery widget.

The following steps are required to integrate the widget into our application:

  • Tag the media assets we want to render in the widget

  • Provide access to client-side resource lists

To add tags to the images, click on any of them, and a sidebar will appear on the right side of the dashboard.

Next, click on the "metadata" setting in the sidebar. We'll set the tag of the images to dog-picture and then save the tag.

Cloudinary supports listing resources from the client side by their tags. However, the resource list is restricted by default, so we need to enable it on our account's security settings page.

On the security settings page, scroll down to 'Restricted media types', uncheck 'Resource list', and then save.

Initializing the Product Gallery Widget

Navigate to the app/routes/index.tsx file and update it with the code below.

1import { useEffect } from "react";
2
3export default function Home() {
4 useEffect(() => {
5 const productGallery = cloudinary.galleryWidget({
6 container: "#product-gallery",
7 cloudName: "OUR-ACCOUNT-CLOUD-NAME",
8 mediaAssets: [{ tag: "dog-picture", mediaType: "image" }],
9 });
10
11 productGallery.render();
12 }, []);
13
14 return (
15 <div className="container">
16 <h1>Remix Ecommerce Product Gallery</h1>
17 <div className="gallery-container">
18 <div id="product-gallery"></div>
19 </div>
20 </div>
21 );
22}

Let's break down the code above:

  • We imported useEffect from React, and from there, initialized the widget

  • We set up a div with an ID of product-gallery, this is the element with which we will render the product gallery

  • cloudinary.galleryWidget(options): Initializes the widget, takes in a container, cloudName, and mediaAsset as required parameters

  • container: References the div with the ID of product-gallery

  • cloudName: The cloud name of our Cloudinary account

  • mediaAssets: An array of the media assets we want to display; we populate the widget with all images tagged with dog-picture and set the mediaType of the images to image which will enable the widget to render the files in their appropriate formats

  • productGallery.render(): Renders the product gallery widget

Loading the Product Gallery Widget's Script

Navigate to the app/root.tsx file and add the widget’s script there.

1export default function App() {
2 return (
3 <html lang="en">
4 <head>
5 <Meta />
6 <Links />
7 </head>
8 <body>
9 <Outlet />
10 <ScrollRestoration />
11 <script
12 type="text/javascript"
13 src="https://product-gallery.cloudinary.com/all.js"
14 ></script>
15 <Scripts />
16 <LiveReload />
17 </body>
18 </html>
19 );
20}

With this, we see the product gallery widget.

Conclusion

This article taught us how to build an e-commerce product gallery with Remix and Cloudinary's Product Gallery widget.

Resources

Emadamerho-Atori Nefe

Frontend Developer and Technical Writer