1. An Nguyen

    An Nguyen bụi Ban quản trị

    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).
    Đã 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
    • ngày tạo

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

      Khánh 16/3/15
    • 3,500

      lượt xem

    • 8

      trả lời

    • 2

      lượt thích

    Đang tải...
  2. hunter

    hunter Gà tre

    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ị

    đú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 Gà tre

    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ị

    bạn xài phiên bản nop bao nhiêu
     
  6. hunter

    hunter Gà tre

    mình dùng 3.4 mà
     
  7. An Nguyen

    An Nguyen bụi Ban quản trị

    Đây nhé, mình tìm có mà
    Screenshot (17).
     
    1
    hunter thích bài này.
    hunter thích bài này
  8. hunter

    hunter Gà tre

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

    Khánh Gà con

    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.
     
Mã xác nhận:
Đã lưu nháp Draft deleted
Đang tải...