1. An Nguyen

    An Nguyen bụi Ban quản trị

    14/10/14
    #1
    Mình sẽ hướng dẫn áp dụng jqZoom của: http://www.myjqueryplugins.com/jquery-plugin/jqzoom vào nopCommerce 3.4.

    Demo: http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

    Bước 1: Chuẩn bị
    - Tải jqZoom và giải nén các thư mục css, images và js vào thư mục Themes\DefaultClean\jqzoom

    - Copy file _Root.Head.cshtml trong thư mục Views\Shared vào thư mục Themes\DefaultClean\Views\Shared

    - Mở file _Root.Head.cshtml, tìm đoạn code
    Mã (Text):
    1. //resources
    Thêm vào bên dưới
    Mã (Text):
    1.  Html.AddScriptParts("~/Themes/DefaultClean/jqzoom/js/jquery.jqzoom-core.js");
    2. Html.AddCssFileParts("~/Themes/DefaultClean/jqzoom/css/jquery.jqzoom.css");
    Bước 2: tiến hành sửa
    -Copy file _ProductDetailsPictures.cshtml trong thư mục Views\Product vào thư mục Themes\DefaultClean\Views\Product

    - Mở file _ProductDetailsPictures.cshtml và tìm đoạn code:
    PHP:
    1. <a href="@Model.DefaultPictureModel.FullSizeImageUrl" title="@Model.Name" id="main-product-img-lightbox-anchor-@Model.Id">
    2. <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
    3. </a>
    thay bằng:
    PHP:
    1. <a href="@Model.DefaultPictureModel.FullSizeImageUrl" class="jqzoom" title="@Model.Name" id="main-product-img-lightbox-anchor-@Model.Id">
    2. <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" >
    3. </a>
    4.  
    5. <script type="text/javascript">
    6. $(document).ready(function() {
    7. /* simple call */
    8. $('.jqzoom').jqzoom();
    9. /* more complex call*/
    10. var options = {
    11. zoomType: 'standard',
    12. lens:true,
    13. preloadImages: true,
    14. alwaysOn:false,
    15. zoomWidth: 300,
    16. zoomHeight: 250,
    17. xOffset:90,
    18. yOffset:30,
    19. position:'left'
    20. //...MORE OPTIONS
    21.   };
    22.   $('.jqzoom').jqzoom(options);
    23. });
    24. </script>
    Bước 3: Thiết lập cài đặt
    Vào Admin > Configuration > Settings > All Settings (advanced)

    Tìm Setting Name defaultpicturezoomenabled

    Thay đổi Value: False => True

    Lưu ý: nên sử dụng các ảnh lớn để khi zoom được đẹp và chi tiết.
    Screenshot (4).png
    Đã xong. Chúc các bạn thành công!
     

    Các file đính kèm:

    Sửa lần cuối: 17/2/16
    2
    Khánhhunter thích bài này.
    Khánh hunter thích bài này
    Đang tải...
    • ngày tạo

      An Nguyen 14/10/14
    • trả lời cuối

      Khánh 16/3/15
    • 2,805

      lượt xem

    • 8

      trả lời

    • 2

      lượt thích

  2. hunter

    hunter NopMember

    22/10/14
    #2
    cho mình hỏi là nếu dùng theme khác thì phải cho vào thư mục theme đấy đúng ko
     
  3. An Nguyen

    An Nguyen bụi Ban quản trị

    22/10/14
    #3
    đúng rồi, thay DefaultClean bằng tên thư mục theme của bạn
     
    1
    hunter thích bài này.
    hunter thích bài này
  4. hunter

    hunter NopMember

    25/10/14
    #4
    sao trong setting của mình ko thấy phần "defaultpicturezoomenabled" nhỉ mà mình thêm chuỗi này vào thủ công thấy hình ảnh vẫn không thay đổi gì cả
     
  5. An Nguyen

    An Nguyen bụi Ban quản trị

    25/10/14
    #5
    bạn xài phiên bản nop bao nhiêu
     
  6. hunter

    hunter NopMember

    25/10/14
    #6
    mình dùng 3.4 mà
     
  7. An Nguyen

    An Nguyen bụi Ban quản trị

    25/10/14
    #7
    Đây nhé, mình tìm có mà
    Screenshot (17).png
     
    1
    hunter thích bài này.
    hunter thích bài này
  8. hunter

    hunter NopMember

    30/10/14
    #8
    uh thanks cậu mình tìm mỗi từ defaultpicturezoomenabled thảo nào ko thấy
     
  9. Khánh

    Khánh NopNew

    16/3/15
    #9
    Cho mình hỏi tại sao khi mình zoom vào hình sản phẩm thì nó lại hiện nguyên cái hình ra chứ không zoom từng phần lên.
     
Đã lưu nháp Draft deleted
Đang tải...