Close

Cloud zoom not working

pdesignz
12 years ago
#1392 Quote
Avatar
  • 40
What is the best way of working with the Cloud Zoom plugin. I am currently using a trial version and have been trying to use the automatic integration, but whenever I go to my product detail view and click on the image nothing happens. I am running Nop 2.65 and I checked the Configuration>Plugins and all are installed and set to true. I have tried playing with different setting, but everytime I click on the image nothing happens or zooms in. Is there anything different that I should do or check or would you recommend trying the manual integration.

Thanks
IvanStoyanov
12 years ago
#1394 Quote
Avatar
  • 269
pdesignz wrote:
What is the best way of working with the Cloud Zoom plugin. I am currently using a trial version and have been trying to use the automatic integration, but whenever I go to my product detail view and click on the image nothing happens. I am running Nop 2.65 and I checked the Configuration>Plugins and all are installed and set to true. I have tried playing with different setting, but everytime I click on the image nothing happens or zooms in. Is there anything different that I should do or check or would you recommend trying the manual integration.

Thanks


Hi pdesignz,

The automatic integration for our plugins works only for the DarkOrange and nopClassic themes. If you use custom theme, you will need to integrate the plugin manually.
Please check our online documentation for information on how to do this.
https://www.nop-templates.com/Help/NopCloudZoom/Version_2_6/lessons/Integration.html

Have a great day!

Ivan Stoyanov
Thank you for choosing our products! Your feedback is important to us!
pdesignz
12 years ago
#1398 Quote
Avatar
  • 40
I tried the NopClassic theme that I had originally downloaded from your site and that did not work and this was what I used as a basis for my theme that I am working with. I tried the DarkOrange theme and that seems to work. When I had tried to integrate manually, the items specified in the documentation did not match to what I have in my document. When I look for <div class="product-details-info">  in the page, this div does not exist. I did however find, @Html.Partial("_ProductDetailsPictures", Model) this was within <div class="product-essential">.

I am not sure if the default code has changed since you wrote the documentation, but the code is structured as this...

<div class="product-essential">
                @Html.Widget("productdetails_before_pictures")
                <!--product pictures-->
                @Html.Action("CloudZoom", "CloudZoom", Model)
                @Html.Widget("productdetails_after_pictures")
                <div class="overview">
                    <div id="cloudZoomWindowElement" style="position: absolute">
                    </div>
As you can see there is no product-details-info

I did the manual integration and now it is working great! Thanks for the help
IvanStoyanov
12 years ago
#1400 Quote
Avatar
  • 269
pdesignz wrote:
I tried the NopClassic theme that I had originally downloaded from your site and that did not work and this was what I used as a basis for my theme that I am working with. I tried the DarkOrange theme and that seems to work. When I had tried to integrate manually, the items specified in the documentation did not match to what I have in my document. When I look for <div class="product-details-info">  in the page, this div does not exist. I did however find, @Html.Partial("_ProductDetailsPictures", Model) this was within <div class="product-essential">.

I am not sure if the default code has changed since you wrote the documentation, but the code is structured as this...

<div class="product-essential">
                @Html.Widget("productdetails_before_pictures")
                <!--product pictures-->
                @Html.Action("CloudZoom", "CloudZoom", Model)
                @Html.Widget("productdetails_after_pictures")
                <div class="overview">
                    <div id="cloudZoomWindowElement" style="position: absolute">
                    </div>
As you can see there is no product-details-info

I did the manual integration and now it is working great! Thanks for the help


The documentation is actually for 2.6 version and in 2.65 some of the html was changed. In spite of this you have successfully integrated the plugin.
Thank you for reporting this problem. We will update our documentation ASAP.

Best wishes!

Ivan Stoyanov
Thank you for choosing our products! Your feedback is important to us!
nirmaljoseph
11 years ago
#1915 Quote
Avatar
  • 15
i too tried installing nop cloud zoom...i used the customized theme. but i couldnt access the nopcloud settings ..i dont know the reason...then i tried uninstalling it..but it is not getting uninstalled...Aftr installing this all my JQuery and JScripts keep on showing error..So i manually removed the folder from plugins folder in nop.web...But the effect still remains..Is this making any changes to the current Jqueries already installed..it seems as if some kind of conflict occurs....
Boyko
11 years ago
#1923 Quote
Avatar
  • 1570
nirmaljoseph wrote:
i too tried installing nop cloud zoom...i used the customized theme. but i couldnt access the nopcloud settings ..i dont know the reason...then i tried uninstalling it..but it is not getting uninstalled...Aftr installing this all my JQuery and JScripts keep on showing error..So i manually removed the folder from plugins folder in nop.web...But the effect still remains..Is this making any changes to the current Jqueries already installed..it seems as if some kind of conflict occurs....


If you can't access the Settings of the plugin then it is not properly installed.
Please modify you Global.asax file by adding some extra blank spaces in it and save it. This will force application restart and you should be able to access the Settings of the plugin.
For you information the plugin does not change any JQuery scripts, so your problems are not caused from the Cloud Zoom plugin.

Thanks
Regards,
Nop-Templates.com Team
nirmaljoseph
11 years ago
#1925 Quote
Avatar
  • 15
i dont understand this..i try many times to install..and even after installing i cant access the settings of cloud zoom
nirmaljoseph
11 years ago
#1926 Quote
Avatar
  • 15
goshh installed it atlast... but the zoom looks soo base..it doesnt even havea  next or close button...if i need to go out of zoom i need to click back button on browser..and wht ever zoom type i select i get he same response
nirmaljoseph
11 years ago
#2000 Quote
Avatar
  • 15
installed zoom..but why is that what ever i do int he setting it looks the same.The product image gets added to the main product image area.but i cannot zoom there..I tried with higher resolution images too but still the same effect..I am using a custmoized gheme.So i did like it was given in manual for customized theme.. the below is the code in ProductTemplate.VarientsInGrid.cshtml...
I have marked the area where i customized as <!-- cloud zoom enabling -->


@model ProductDetailsModel
@using Nop.Core;
@using Nop.Core.Domain.Common;
@using Nop.Core.Infrastructure;
@using Nop.Web;
@using Nop.Web.Models.Catalog;
@{
    Layout = "~/Views/Shared/_ColumnsOne.cshtml";

    //title, meta
    Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    Html.AddMetaDescriptionParts(Model.MetaDescription);
    Html.AddMetaKeywordParts(Model.MetaKeywords);

    var canonicalUrlsEnabled = EngineContext.Current.Resolve<SeoSettings>().CanonicalUrlsEnabled;
    if (canonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl("Product", new { productId = Model.Id, SeName = Model.SeName }, this.Request.Url.Scheme);
        Html.AddCanonicalUrlParts(productUrl);
    }
}
<!--product breadcrumb-->
@Html.Action("ProductBreadcrumb", "Catalog", new { productId = Model.Id })
<div class="clear">
</div>
<div class="page product-details-page">
    <div class="page-body">
        @Html.Widget("productdetails_top")
        @using (Html.BeginRouteForm("Product", new { productId = Model.Id, SeName = Model.SeName }, FormMethod.Post, new { id = "product-details-form" }))
        {
            <div class="productDetailLeft">
            <div class="product-essential">
                @Html.Widget("productdetails_before_pictures")
                <!--product pictures-->
                
                <!-- cloud zoom enabling-->
               @* @Html.Partial("_ProductDetailsPictures", Model)*@
               @Html.Action("CloudZoom", "CloudZoom", Model)              
                <div id="cloudZoomWindowElement" style="position: absolute"></div>
                 <!-- cloud zoom enabling -->

                @Html.Widget("productdetails_after_pictures")
                <img src="../../Themes/luk/Content/images/ico-sizes.png" alt="imagedemosize"/>
            </div>
            @Html.Action("RelatedProducts", "Catalog", new { productId = Model.Id })

            <div class="full-description">
                    @Html.Raw(Model.FullDescription)
            </div>
            
            </div>
            <div class="productDetailRight">
            <div class="overview">

                    <h1 class="product-name">
                        @Model.Name
                    </h1>
                    <div class="short-description">
                        @Html.Raw(Model.ShortDescription)
                    </div>

                    <div class="clear">
                    </div>

                    @Html.Widget("productdetails_overview_top")
                    <!--product manufacturers-->
                    @Html.Action("ProductManufacturers", "Catalog", new { productId = Model.Id })
                    <div class="clear">
                    </div>
                    <!--product reviews-->
                    @Html.Action("ProductReviewOverview", "Catalog", new { productId = Model.Id })
                                    
                    <div class="clear">
                    </div>

                     <div id="featureMenu1">
                           <a href="../Buyonegiveone/Index" title="Мы профи по солнцезащитным очкам">
                          <div class="buy_one_give_one">&nbsp;</div>                          
                           </a>
                          <a href="../Gifts/Index" title="Тысячи моделей, спецзаказ">
                          <div class="gift">&nbsp;</div>                          
nirmaljoseph
11 years ago
#2001 Quote
Avatar
  • 15
As i did customization i couldn't place it under the exact classes as in the manual..