{"id":28425,"date":"2021-11-17T22:31:57","date_gmt":"2021-11-17T22:31:57","guid":{"rendered":"http:\/\/Build-an-E-commerce-Product-Image-Zoom-Lens-in-Next.js"},"modified":"2025-02-09T14:22:21","modified_gmt":"2025-02-09T22:22:21","slug":"build-an-e-commerce-product-image-zoom-lens-in-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-e-commerce-product-image-zoom-lens-in-next-js\/","title":{"rendered":"Build a Product Image Zoom Lens in Next.js"},"content":{"rendered":"

Customers of modern E-commerce systems, expect custom-made products and the option to see how their products will look before purchasing them.<\/p>\n

In this tutorial, we will use Next.js to create a product image zoom lens that allows us to zoom in on a product image while maintaining the anticipated image look and feel of the image after purchase.<\/p>\n

CodeSandbox<\/h2>\n

This project was completed in a Codesandbox<\/a>. To get started quickly, \u201cfork\u201d the Codesandbox<\/a> or run the project.<\/p>\n<\/div>\n \n

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

GitHub Repository: https:\/\/github.com\/Olanetsoft\/E-commerce-Product-Image-Zoom-Lens-in-Next.js<\/a><\/p>\n

<!\u2014 Can you please swap the link text, it is different than the actual git link \u2014><\/p>\n

Getting Started with Next.js<\/h2>\n

Next.js<\/a> is an open-source React-based front-end development web framework, that allows server-side rendering and the generation of static websites and applications.<\/p>\n

To create a new project, we use the npx create-next-app<\/code> command to scaffold a new project in a directory of our choice.\nOnce the app is created and the dependencies automatically installed, we will see a message with instructions for navigating to our site and running it locally. We do this with the command<\/p>\n

    cd <project<\/span> name<\/span>><\/span> && npm start\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We will use react-image-magnify<\/a> to handle the product image zoom.<\/p>\n
React-Image-Magnify<\/a> is a responsive React image zoom component for touch and mouse. It provides features like in-place and side-by-side image enlargement, positive or negative space guide lens options, interaction hint, configurable enlarged image dimensions, optional enlarged image external render, hover intent, etc.<\/p>\n
On the main page, we need the user interface to handle the product image zoom. We create this by updating the pages\/index.js<\/code> file to a component:<\/p>\n
    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n    \n      return<\/span> (\n        <div<\/span> className<\/span>=\"body\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"image\"<\/span>><\/span>\n            \/\/ Image here\n          <\/div<\/span>><\/span>\n          <div<\/span> className<\/span>=\"text\"<\/span>><\/span>\n            <h2<\/span>><\/span>E-commerce Product Image Zoom Lens in Next.js<\/h2<\/span>><\/span>\n            <h3<\/span>><\/span>Touch<\/h3<\/span>><\/span>\n            <p<\/span>><\/span>Hover image to magnify<\/p<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
As shown in the code snippet above, we created a simple layout to fit our image and a text description.<\/p>\n
In the project\u2019s root directory, we create a folder titled css, and in it, a stylesheet called styles.css<\/code> with the following content.<\/p>\n
<!\u2014 Based on your procedure, I would be unsure where to place this piece of code \u2014><\/p>\n
<!\u2014 I think you might have skipped creating a css folder in root and a style.css file \u2014><\/p>\n
    .body<\/span> {\n      \/* max-width: 1024px; *\/<\/span>\n      margin<\/span>: 0<\/span> auto;\n      display<\/span>: flex;\n      flex-direction<\/span>: column;\n    }\n    .image<\/span> {\n      flex<\/span>: 0<\/span> 0<\/span> 100%<\/span>;\n    }\n    .text<\/span> {\n      border-left<\/span>: 2px<\/span> solid grey;\n      padding<\/span>: 40px<\/span>;\n      font-family<\/span>: sans-serif;\n    }\n    @media<\/span> (min-width:<\/span> 415px<\/span>) {\n      .body<\/span> {\n        flex-direction<\/span>: row;\n      }\n      .image<\/span> {\n        flex<\/span>: 0<\/span> 0<\/span> 50%<\/span>;\n      }\n    }\n    @media<\/span> (min-width:<\/span> 800px<\/span>) {\n      .image<\/span> {\n        flex<\/span>: 0<\/span> 0<\/span> 33.5%<\/span>;\n      }\n    }\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
We also need to create an _app.js<\/code> file inside the pages<\/code> directory. This file is native to Next.js and wraps the whole application. We\u2019ll import the CSS file we created into this _app.js<\/code> file.<\/p>\n
    import<\/span> \"..\/css\/style.css\"<\/span>;\n    export<\/span> default<\/span> function<\/span> MyApp<\/span>({ Component, pageProps }<\/span>) <\/span>{\n      return<\/span> <Component<\/span> {...pageProps<\/span>} \/><\/span><\/span>;\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\"\"<\/p>\n
Product Image Zoom<\/h2>\n
In the project, we install the react-image-magnify<\/a> package using the command below:<\/p>\n
    npm i react-image-magnify\n<\/code><\/span><\/pre>\n
Next, in pages\/index.js<\/code> we import react-image-magnify<\/a>.<\/p>\n
    import<\/span> ReactImageMagnify from<\/span> \"react-image-magnify\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span> className<\/span>=\"body\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"image\"<\/span>><\/span>\n            <ReactImageMagnify<\/span>\n              {...<\/span>{\n                smallImage:<\/span> {\n                  alt:<\/span> \"\",\n                  isFluidWidth:<\/span> true<\/span>,\n                  src:<\/span> \"\",\n                  srcSet:<\/span> \"\",\n                  sizes:<\/span>\n                    \"(min-width:<\/span> 1000px<\/span>) 33.5vw<\/span>, (min-width:<\/span> 415px<\/span>) 50vw<\/span>, 100vw<\/span>\"\n                },\n                largeImage:<\/span> {\n                  alt:<\/span> \"\",\n                  src:<\/span> \"\",\n                  width:<\/span> 1200<\/span>,\n                  height:<\/span> 1800<\/span>\n                },\n                isHintEnabled:<\/span> true<\/span>\n              }}\n            \/><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span> className<\/span>=\"text\"<\/span>><\/span>\n            \/\/ ...\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Notice that we are yet to specify src<\/code>, srcSet<\/code>, and alt<\/code> in the above snippet, to do that we will be using an image URL for src<\/code> and we will also create an array to specify sizes that will be used for srcSet<\/code>.<\/p>\n
src<\/code> : The src stands for image source, which is used to specify the source of an image in a tag.<\/p>\n
srcSet<\/code> : This is a new attribute that allows you to specify different images for different screen sizes\/orientations\/display-types.<\/p>\n
alt<\/code> : Adds a text description to an image on a Web page.<\/p>\n
Let\u2019s create our base URL and sizes with the snippet below:<\/p>\n
    import<\/span> ReactImageMagnify from<\/span> \"react-image-magnify\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n    \n      const<\/span> imageBaseUrl =\n        \"https:\/\/res.cloudinary.com\/olanetsoft\/image\/upload\/cat.jpg\"<\/span>;\n    \n     const<\/span> sizes = [ \"355\"<\/span>,\"481\"<\/span>,\"584\"<\/span>,\"687\"<\/span>,\"770\"<\/span>,\"861\"<\/span>,\"955\"<\/span>,\"1033\"<\/span>,\"1112\"<\/span>,\"1192\"<\/span>,\"1200\"<\/span>];\n      return<\/span> (\n        \/\/ ...<\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We defined our preferred picture sizes and created our primary image URL, which will be used for srcSet<\/code> in the code snippet above.<\/p>\n
We will loop through all of the sizes in the array because srcSet<\/code> is used to define various types of pictures for various screen sizes.<\/p>\n
Using the code snippet below, create the srcSet<\/code>:<\/p>\n
    import<\/span> ReactImageMagnify from<\/span> \"react-image-magnify\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n      \/\/...<\/span>\n    \n    const<\/span> srcSet = ()<\/span> =><\/span> {\n      sizes.forEach((i<\/span>) =><\/span> {\n        return<\/span> `https:\/\/res.cloudinary.com\/olanetsoft\/image\/upload\/w_${i}<\/span>,c_scale\/cat.jpg`<\/span>;\n        });\n    };\n    \n      return<\/span> (\n        \/\/ ...<\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We successfully iterated over the sizes array, passing it in our base URL to set the image size based on the sizes in the array. With this, we\u2019ll use the srcSet<\/code> attributes to define different types of images.<\/p>\n
We will update the src<\/code>, srcSet<\/code>, and alt<\/code> attribute as shown in the code snippet below:<\/p>\n
    import ReactImageMagnify from \"react-image-magnify\"<\/span>;\n    \n    export default<\/span> function<\/span> IndexPage<\/span>()<\/span> <\/span>{\n      [...]\n      return<\/span> (\n        <div className=\"body\"<\/span>>\n          <div className=\"image\"<\/span>>\n            <ReactImageMagnify\n              {...{\n                smallImage: {\n                  alt: \"Cat\"<\/span>, \/\/ updated<\/span>\n                  isFluidWidth: true<\/span>,\n                  src: `${imageBaseUrl}`, \/\/ updated<\/span>\n                  srcSet, \/\/ updated<\/span>\n                  sizes:\n                    \"(min-width: 1000px) 33.5vw, (min-width: 415px) 50vw, 100vw\"<\/span>\n                },\n                largeImage: {\n                  alt: \"Cat\"<\/span>, \/\/ updated<\/span>\n                  src: `${imageBaseUrl}`, \/\/ updated<\/span>\n                  width: 1200<\/span>,\n                  height: 1800<\/span>\n                },\n                isHintEnabled: true<\/span>\n              }}\n            \/>\n          <\/div>\n          <div className=\"text\"<\/span>>\n            \/\/ ..<\/span>\n          <\/div>\n        <\/div>\n      );\n    }\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
The final interface should appear something like this, with the product image on the left and the text description on the right. See demo below:<\/p>\n
Summary<\/h1>\n\n
This article explains how to create an E-commerce product image zoom lens in Next.js, using React-image-magnify.<\/p>\n\n
Resources<\/h1>\n
You may find this resource useful.<\/p>\n
https:\/\/drive.google.com\/file\/d\/1cMHpmk5ii9pI4qdsASef4lP4KfyvkQFZ\/view?usp=drivesdk<\/a><\/p>\n
We have successfully imported react-image-magnify<\/a> with the default configuration from the docs.<\/p>\n
Our application should now look like this on http:\/\/localhost:3000\/<\/a>:<\/p>\n
https:\/\/gist.github.com\/Olanetsoft\/ff5a07491d6a62ed372c2e333edc72b8.js<\/a><\/p>\n
Next.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/a><\/p>\n