Alternate/Switch Picture For Products On Hover in NopCommerce


Being apart from NopCommerce for years, I thought it would be great to start on the latest version and try to implement some basic functionality that base nop is missing. Today I would like to share my implementation of alternate picture for Products.

I picked up this item as I was trying to design a new Theme for nop. I was just following a Magento Theme I own. But surprisingly did not find any default way to show alternate picture for a product when I hovered. This is just basic. Some may find it useful; others will treat this as a novice work. I appreciate both the views; there are always¬†people know better than you. ūüôā

Step 1: Add a model for Alternate Picture.

 ~\Presentation\Nop.Web\Models\Catalog\ProductDetailsModel.cs

a. Please add this line in the constructor:  AlternatePictureModel = new PictureModel(); My one looks like:

public ProductDetailsModel()
{
 DefaultPictureModel = new PictureModel();
 AlternatePictureModel = new PictureModel(); //meer
 PictureModels = new List<PictureModel>();
 ...................

b. Add the Getter Setter.

//picture(s)
 public bool DefaultPictureZoomEnabled { get; set; }
 public PictureModel DefaultPictureModel { get; set; }
 public PictureModel AlternatePictureModel { get; set; } //meer
 ...............

~\Presentation\Nop.Web\Models\Catalog\ProductOverviewModel.cs

a. Please add this line to the constructor: AlternatePictureModel = new PictureModel();

public ProductOverviewModel()
{
 ProductPrice = new ProductPriceModel();
 DefaultPictureModel = new PictureModel();
 AlternatePictureModel = new PictureModel(); //meer
 .....

b. Don’t forget the Getter Setter:

//picture
 public PictureModel DefaultPictureModel { get; set; }
 public PictureModel AlternatePictureModel { get; set; } //meer

Step 2: Enable the Caching

~\Presentation\Nop.Web\Infrastructure\Cache\ModelCacheEventConsumer.cs

a. Add these lines anywhere in the file:

/// <summary>
 /// Key for default alternate picture caching (all pictures)
 /// </summary>
 /// <remarks>
 /// {0} : product id
 /// {1} : picture size
 /// {2} : isAssociatedProduct?
 /// {3} : language ID ("alt" and "title" can depend on localized product name)
 /// {4} : is connection SSL secured?
 /// {5} : current store ID
 /// </remarks>
 public const string PRODUCT_ALTERNATEPICTURE_MODEL_KEY = "Nop.pres.product.detailspictures-{0}-{1}-{2}-{3}-{4}-{5}-{6}";
 public const string PRODUCT_ALTERNATEPICTURE_PATTERN_KEY = "Nop.pres.product.detailspictures";

Step 3: Setup the Controller for the Alternate Image

~\Presentation\Nop.Web\Controllers\ProductController.cs

a. Add the lines given in b. in the #product Region after

//all pictures
 var pictureModels = new List<PictureModel>();
 foreach (var picture in pictures)
 {
     pictureModels.Add(new PictureModel()
     {
         ImageUrl = _pictureService.GetPictureUrl(picture, _mediaSettings.ProductThumbPictureSizeOnProductDetailsPage),
         FullSizeImageUrl = _pictureService.GetPictureUrl(picture),
         Title = string.Format(_localizationService.GetResource("Media.Product.ImageLinkTitleFormat.Details"), model.Name),
         AlternateText = string.Format(_localizationService.GetResource("Media.Product.ImageAlternateTextFormat.Details"), model.Name),
     });
 }

b. Lines to Add:

 var alternatePictureModel = new PictureModel(); //meer
 if (pictures.Count() > 1)
 {
     alternatePictureModel = new PictureModel() //meer
     {
         ImageUrl = _pictureService.GetPictureUrl(pictures[1], defaultPictureSize, !isAssociatedProduct),
         FullSizeImageUrl = _pictureService.GetPictureUrl(pictures[1], 0, !isAssociatedProduct),
         Title = string.Format(_localizationService.GetResource("Media.Product.ImageLinkTitleFormat.Details"), model.Name),
         AlternateText = string.Format(_localizationService.GetResource("Media.Product.ImageAlternateTextFormat.Details"), model.Name),
    };
 }
 else
 {
     alternatePictureModel = null;
 }
 return new { DefaultPictureModel = defaultPictureModel, PictureModels = pictureModels, AlternatePictureModel = alternatePictureModel }; //meer
 });

c. Followed by:

model.DefaultPictureModel = cachedPictures.DefaultPictureModel;
model.AlternatePictureModel = cachedPictures.AlternatePictureModel; //meer

Step 4: Change the ProductOverviewModel Preparation

~\Presentation\Nop.Web\Extensions\ControllerExtensions.cs

a. Search for the function: public static IEnumerable<ProductOverviewModel> PrepareProductOverviewModels

b. Add these lines in the  #region Prepare product picture just before the #endregion:

if (pictureService.GetPicturesByProductId(product.Id).Count() > 1)
{
     model.AlternatePictureModel = cacheManager.Get(alternateProductPictureCacheKey, () =>
    {
         var picture = pictureService.GetPicturesByProductId(product.Id, 2).ElementAt(1);
         var pictureModel = new PictureModel()
         {
               ImageUrl = pictureService.GetPictureUrl(picture, pictureSize),
               FullSizeImageUrl = pictureService.GetPictureUrl(picture),
               Title = string.Format(localizationService.GetResource("Media.Product.ImageLinkTitleFormat"), model.Name),
               AlternateText = string.Format(localizationService.GetResource("Media.Product.ImageAlternateTextFormat"), model.Name)
         };
         return pictureModel;
    });
 }
 else
     model.AlternatePictureModel = null;

Step 5: Change the product box UI to fit this change

~\Presentation\Nop.Web\Views\Shared\_ProductBox.cshtml

a. Replace the DIV CLASS=”picture” with the following code:

<div class="picture">
    <a class="default-picture" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
       <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
    </a>
    @if(Model.AlternatePictureModel != null){
          <a class="alternate-picture" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
             <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.AlternatePictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" /> <!--meer-->
          </a>
    }
 <script type="text/javascript">
 $(document).ready(function () {

         $('.default-picture').bind({
                mouseenter: function (e) {
                      // Hover event handler
                      var $default_picture = $(this);
                      var $alternate_picture = $(this).next('.alternate-picture');
                      if($alternate_picture.length)
                      {
                             $default_picture.slideUp();
                             $alternate_picture.slideDown();
                      }
                },
                mouseleave: function (e) {
                }
         });
         $('.alternate-picture').bind({
                mouseenter: function (e) {
                },
                mouseleave: function (e) {
                           // Hover event handler
                           var $default_picture = $(this).prev();
                           var $alternate_picture = $(this);
                           $default_picture.slideDown();
                           $alternate_picture.slideUp();
               }
        });
 });
 </script>
 </div>

* I added only the basic UI change, you can add eye candies matching your interest.

Step 6: Add the CSS Classes:

~\Presentation\Nop.Web\Themes\DefaultClean\Content\styles.css

a. Add these two classes anywhere in this file:

.alternate-picture { display:none; } /* meer */
.default-picture { display:block; }

Now you are ready to run your site and start debugging if anything breaks. I checked this code in my PC with VS2012. Hope there is no compile errors, I may have left some TYPOs.

However, there is no live demo unfortunately. But I am providing screenshot of what it looks:

Picture on Load:

default-picture

Changed Picture when Hovered:

alternate-picture

 

 

 

 

 

Happy Coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s