Bugs

Hi CEEJAY34,

The Nop Cloud Zoom is disabled on mobile device by default, because on mobile devices you do not have a mouse over event or something like that to trigger the zoom. What is even more it is not a good idea to have popups on mobile devices as it is not very user friendly. That is why on mobile device the cloud zoom is not integrated and when the product image is clicked, it should be opened in another tab of the browser where the customer can see a bigger version of the image.

Hope that makes sense!

I see, that makes sense, thanks for the info!

Dear Support Team,

We have installed the Nop.Traction Template. The Nop Cloud Zoom also enabled. Product Quick View Page the there is no zoom option.Kindly help me on this. The version of  nopcommerce and Nop Cloud Zoom  is 3.4

Regards,
Ela
BlueMed Development Team

Hi Ela,

I guess you are talking about the Zoom in the Quick View plugin. Please note that the Zoom in the Quick View has nothing to do with the Cloud Zoom plugin, so this is not the right topic.
You can enable the Zoom in the Quick View from the Quick View settings page in the administration like on our admin demo.
Open the "Quick View Popup Appearance Settings" panel and enable the first setting "Enable the cloud zoom on the main product image".

Nop Cloud Zoom version 3.7 not working in product details page for me.
integration instructions is obsolete for version 3.7.
please help me.

Hi,

Could you please give us more information about your problem.

Did the plugin installed successfully? Do you have any errors on the page? Also, if possible, please provide a link to your site.

Looking forward to your reply!

I have installed the nop-template plugins(Seven Spikes Core, Nop Uptown Theme), after installing Nop Cloud Zoom plugin, the product detail thrown an error, like the following, could anyone take a look it?

Server Error in '/' Application.

Buffer cannot be null.
Parameter name: buffer

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.ArgumentNullException: Buffer cannot be null.
Parameter name: buffer

Source Error: 


Line 3:  @foreach (var widget in Model)
Line 4:  {
Line 5:      @Html.Action(widget.ActionName, widget.ControllerName, widget.RouteValues)
Line 6:  }

Source File: g:\Git projects\PFAFF\Presentation\Nop.Web\Views\Widget\WidgetsByZone.cshtml    Line: 5 

Hi,

Do you have any other 3rd party plugins installed on your site? I'm asking because none of our plugins could return such error (Buffer cannot be null.).

Looking forward to your reply!

Believe I've found a bug in the Cloud Zoom plugin. Using the Pavilion Theme 4.3 archive, the SevenSpikes.Nop.Plugins.CloudZoom has the following files.

Scripts/Carousel/...

and

Styles/Carousel/slick-slider-1.6.0.css

. The CloudZoom.cshtml file reference these directory via lowercase 'carousel' (lines 32 and 34), and breaks the display due to not finding the appropriate source.


Currently workaround is just renaming the directories - but it should be consistent across the Razor file and the directories.

Hello, I am seeing an issue with this plugin and would love some help or ideas for a workaround if possible

I have Grouped Products and a drop down with the Parent Product and the various variants. When an item is selected, I want the variant picture to be displayed. This works perfectly.

However, when I hover over the picture for any of the variants, the picture zooms in but stays static and the cursor changes to a cross hair one. From then on if I select any other product the picture doesn’t  reset to that of the selected variant and stays zoomed in with the cross air cursor.

Only when I do a refresh would the functionality return, until I hover over the picture.

The zooming works fine on the parent product , however once you hover on it, the next product you select exhibits the static zoomed in picture behavior as described above.

Thnak you and here is my razor code below:


@await Component.InvokeAsync("Widget", new { widgetZone =  PublicWidgetZones.ProductDetailsEssentialTop, additionalData = Model })
@{
    IHtmlContent cloudZoom = null;
if ((settingService.GetSettingByKey("AvenueThemeSettings.ProductPageLayout",            "standard-gallery", storeId, true).Equals("standard-gallery")))
      {
cloudZoom = await Component.InvokeAsync("Widget", new { widgetZone =              "sevenspikes_cloud_zoom", additionalData = Model });
}
}
@if (cloudZoom != null && !String.IsNullOrEmpty(cloudZoom.ToHtmlString()))
{
<div class="prod-pict" >
   @cloudZoom
</div>

        // Go through the loop and put a div around each, hide all
        // Only when selected do you show.
        foreach (var variant in Model.AssociatedProducts)
        {
           IHtmlContent cloudZoomVar = null;

cloudZoomVar = await Component.InvokeAsync("Widget", new { widgetZone = "sevenspikes_cloud_zoom", additionalData = variant });

if (cloudZoomVar != null && !String.IsNullOrEmpty(cloudZoomVar.ToHtmlString()))
            {
<div class="prod-pict prodvarpic-@(variant.Id)" data-productid="@variant.Id" style="display:none">
                @cloudZoomVar
              </div>
            }
         }
}