Develop Mouse Hover Product Image Swap To Make Your nopCommerce Site More Interactive

Our target is to swap the existing product image with another image using a smooth fade in transition. The most interesting part is that I will do the whole thing writing only 5 lines of css and 5 lines of code.

What is nopCommerce?

It is an open-source ecommerce solution based on ASP.NET (MVC) with MS SQL 2008 (or higher) as backend database. It has been downloaded more than 1.5 million times and is currently used by more than 25,000 stores. It is stable and highly usable as well as offers unprecedented flexibility and control. A store owner will find everything to get started in selling physical and digital goods over the internet. Since it is open-source, the source code of nopCommerce is available free for download. Just click here to download your copy today.

Introduction

nopCommerce has everything out of the box which is needed in a professional ecommerce shop. At the same time, it would be also great if you can add some interactivity to your site using some code snippets. First of all, I want to thank the nopCommerce team for offering such a flexible open source ecommerce solution which made my task easier. I will divide my article in two steps. In the  first steps I will just show how this feature can be added into your existing nopCommerce site and in second steps I will explain my code snippets. The final output will be something like the following image:

It is really tough to make you understand the final output with an image but I have tried my best.

First step:

Go to: Nop.Web\Themes\DefaultClean\Content\css\styles.css



Open your style sheet “styles.css” and add the following snippets at the end of the file,

/**Product Box hover image swap*/

.product-item > .picture{position:relative}
.product-item > .picture img.swappable{transition: opacity 0.9s;position:absolute;top:0;left:0}
.product-item > .picture img.swappable:last-child{opacity:0}
.product-item:hover img:first-child{opacity:0}
.product-item:hover img.swappable:last-child{opacity:1}

Go to: Nop.Web\Views\Shared\ _ProductBox.cshtml



Open this cshtml file “_ProductBox.cshtml” add the following line as “@using” in the top of the file.

@using Nop.Core.Infrastructure

Then, after line number 22 add the 2 lines snippets given below,

var _pictureService = EngineContext.Current.Resolve<Nop.Services.Media.IPictureService>();
var pictures = _pictureService.GetPicturesByProductId(Model.Id);

In the same file after approximate line number 30 add the following snippets,

@if(pictures.Count() > 1)
{
    var imageUrl = _pictureService.GetPictureUrl(pictures[1].Id, 415); < img class = "swappable"
    alt = "@Model.Name"
    src = "@imageUrl"
    title = "@Model.Name" / >
}

To understand the position where you need to add snippet check the following snap,



Second Step

Explanation (styles.css)

1. In the first line of the css snippet we select the parent dom ‘.picture’ containing the image and make its position relative. So that the 2 pictures will be at the same place overlapping each other.
   
   
2. In the second line of the css snippet we select the image with class name ‘.swappable’ and give some position property to overlap itself with the default images. I also have added a transition here for giving a fade in effect in the time of image swap.
   
   
3. In the third line of the css snippet I made the second image fully transparent which will hide the second image.
   
   
4. In the fourth line of the css snippet we made first/default product image hidden on mouse hover of the product box.
   
   
5. In the fifth line of the css snippet we swap the default image with the second product image on mouse hover of the product box.

Explanation (_ProductBox.cshtml)

1. In the first line of the cshtml file snippet we resolve the dependency registrar for picture service.
   
   
2. In the second line of the cshtml file snippet we collect all the pictures for the particular product.
   
   
3. In the last part of the snippet using if condition we have checked if there is more than one product image. Then based on this condition we find the image url of the second image and add that url as the source of the second image.

In brief we are adding two images in product box if available and then using css; on mouse hover we swap the default image with the second image using a smooth fade in effect. You may have to change a bit in css or snippet if you have customized nopCommerce theme. I have attached style.css and _ProductBox.cshtml files. You can check the result just replace these 2 files in appropriate path.

***Please, press ctrl+f5 before checking the output.