Build an E-commerce Product Image Zoom Lens in NuxtJS

Idris Olubisi

Customers of modern e-commerce systems anticipate custom-made products and the ability to preview their purchases before making a purchase.

This tutorial will utilize Nuxt to make a product image zoom lens that lets us zoom in on a product image while keeping the expected look and feel after purchase.

Sandbox

The completed project is on Codesandbox. Fork it to get started quickly.

GitHub Repository

https://github.com/Olanetsoft/product-image-zoom-with-nuxt

Prerequisite

The knowledge of JavaScript and Vue.js is needed for this post. The knowledge of Nuxt is not required but preferred.

Getting Started with Nuxtjs

Nuxt provides the bedrock of our Vue.js project, providing structure and flexibility while allowing us to scale the application with confidence.

It is extensible, with a robust module ecosystem and hooks engine that makes it simple to integrate REST or GraphQL endpoints, favorite CMS, CSS frameworks, and other third-party applications.

Project Setup and Installation

To create a new project, we will use the command below to scaffold a new project:

1npx create-nuxt-app <project-name>

A series of prompts will appear, and we recommend the following defaults:

Next, we need to navigate the project directory and start the development server using the command below.

1cd <project name> && yarn dev

Nuxt.js will start a hot-reloading development environment accessible by default at http://localhost:3000

Next, we will install the vue-product-zoomer dependency with

1yarn add vue-product-zoomer

Configuring vue-product-zoomer as a plugin in Nuxtjs

To use Vue plugins, we must first create a Nuxt plugin.

In the root directory, we'll create a plugins folder and a file titled vue-product-zoomer.js with the following code snippet below. This creates a custom plugin in Nuxt.

1import Vue from "vue";
2 import ProductZoomer from "vue-product-zoomer";
3
4 Vue.use(ProductZoomer);

Image sourcing

We will need sample hosted images for our product zoom in different sizes. Here are example image links for thumbs , normal_size, and large_size, respectively.

1thumbs:
2 "https://res.cloudinary.com/olanetsoft/image/upload/v1647642978/h1-r3.jpg",
3 "https://res.cloudinary.com/olanetsoft/image/upload/v1647644372/h3-r3.jpg",
4 "https://res.cloudinary.com/olanetsoft/image/upload/v1647644758/h4-r3.jpg"
5
6 normal_size:
7 "https://res.cloudinary.com/olanetsoft/image/upload/v1647642886/h1-r2.jpg",
8 "https://res.cloudinary.com/olanetsoft/image/upload/v1647644372/h3-r2.jpg",
9 "https://res.cloudinary.com/olanetsoft/image/upload/v1647644758/h4-r2.jpg",
10
11 large_size:
12 "https://res.cloudinary.com/olanetsoft/image/upload/v1647642886/h1-r1.jpg",
13 "https://res.cloudinary.com/olanetsoft/image/upload/v1647644372/h3-r1.jpg",
14 "https://res.cloudinary.com/olanetsoft/image/upload/v1647644758/h4-r1.jpg",

Building the product image zoom lens

With our project fully set up and configured, we can start building the product image zoom lens.

We'll create a new file called ProductImage.vue in the component folder and update it with the code snippet below.

1<template>
2 <div>
3 <p class="text-center text-4xl text-gray-900 font-bold mt-8 pt-8">
4 E-commerce product image zoom lens in Nuxtjs
5 </p>
6 </div>
7 </template>
8
9 <script>
10 export default {
11 name: "ProductImage",
12 data() {
13 return {}
14 },
15 };
16 </script>

Next, we will import the ProductImage component into the pages/index.vue file with the code snippet below.

1<template>
2 <ProductImage/>
3 </template>
4
5 <script>
6 export default {
7 name: 'IndexPage'
8 }
9 </script>

Let's open our browser, and we should see something similar to the image below.

Let us update components/ProductImage.vue with the following GitHub Gist to configure the product image zoomer options.

https://gist.github.com/Chuloo/53ab0d02c9bed53a3fc025be68323b2c

https://gist.github.com/Chuloo/53ab0d02c9bed53a3fc025be68323b2c

In the code snippet above, we

  • Added sample image links and returned images data which comprises the thumbs, normal_size, and large_size.
  • Configured zoomer options by setting individual configurations required for product image zoom

We can now use the configured zoomer package in the same file with the following snippet below.

1<template>
2 <div>
3 // ...
4 <div
5 class="relative flex items-top justify-center mt-16 sm:items-center sm:pt-0"
6 >
7 <ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions" />
8 </div>
9 </div>
10 </template>
11
12 <script>
13 export default {
14 name: "ProductImage",
15 data() {
16 return {
17 // ...
18 }
19 },
20 };
21 </script>

After testing our application, we should get something similar to what we have below.

https://www.loom.com/share/02fe71663f2941b28badb5f687bac579

Conclusion

This article addressed how to build an e-commerce product image zoom lens in Nuxtjs.

Resources

We may find these resources helpful.

Idris Olubisi

Software Engineer & Technical Writer

A Software Engineer & Technical Writer with immense knowledge and a passionate speaker about open source, blockchain, software products, and serverless technologies.