Khắc Phục Lỗi Không Lắng Nghe Được Sự Kiện Fotorama Fullscreen trong Magento 2

Bạn đang gặp khó khăn khi cố gắng lắng nghe sự kiện fotorama:fullscreenenter trong Magento 2? Đây là một vấn đề phổ biến khi tùy chỉnh giao diện và tương tác với thư viện Fotorama. Bài viết này sẽ cung cấp cho bạn một hướng dẫn chi tiết, từng bước để khắc phục lỗi này, đảm bảo bạn có thể bắt được sự kiện fullscreen một cách chính xác và thực hiện các tùy chỉnh mong muốn. Chúng ta sẽ cùng nhau khám phá nguyên nhân gốc rễ của vấn đề và áp dụng các giải pháp đã được kiểm chứng.

Vấn Đề: Không Thể Lắng Nghe Sự Kiện fotorama:fullscreenenter

Một trong những thách thức khi làm việc với Magento 2 là tùy chỉnh các thư viện JavaScript hiện có. Fotorama, một thư viện slideshow phổ biến, thường được sử dụng để hiển thị hình ảnh sản phẩm. Tuy nhiên, việc lắng nghe các sự kiện của nó, đặc biệt là fotorama:fullscreenenter, có thể không hoạt động như mong đợi. Điều này có thể gây khó khăn cho việc thực hiện các hành động tùy chỉnh khi người dùng chuyển sang chế độ toàn màn hình.

Giải Pháp 1: Sử Dụng gallery:loaded để Bắt Sự Kiện

Một cách tiếp cận hiệu quả là lắng nghe sự kiện gallery:loaded, sau đó mới gắn các trình xử lý sự kiện Fotorama. Điều này đảm bảo rằng Fotorama đã được khởi tạo hoàn toàn trước khi bạn cố gắng tương tác với nó. Đoạn code dưới đây minh họa cách thực hiện:

    
<script type="text/javascript">
require([
    'jquery',
    'mage/gallery/gallery'
], function ($, gallery) {
    $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () {
        console.log('this works!');
        $(this).on('fotorama:ready', function () {
            console.log('this also works!');
        });
        $(this).on('fotorama:fullscreenenter', function () {
            console.log('THIS DOESN\'T WORK!');
        });
    });
    $('[data-gallery-role="gallery"]').on('fotorama:fullscreenenter', function () {
        console.log('THIS ALSO DOESN\'T WORK!');
    });
    $(this).on('gallery:fullscreenenter', function () {
        console.log('ALSO DOESN\'T WORK!');
    })
});
</script>
    
  

Tuy nhiên, như đã đề cập trong đoạn code, sự kiện fotorama:fullscreenenter có thể vẫn không hoạt động. Điều này có thể do cách Magento 2 xử lý các sự kiện và đối tượng Fotorama.

Giải Pháp 2: Tìm và Gắn Sự Kiện Trực Tiếp Vào .fotorama-item

Một giải pháp đã được chứng minh là hiệu quả là tìm trực tiếp phần tử .fotorama-item và gắn sự kiện vào đó. Ví dụ:

    
var item = $(document).find('.fotorama-item');
console.log(item);
item.on('fotorama:fullscreenenter', function () {
    console.log('okokokokkokko');
})
    
  

Điều quan trọng là phải đảm bảo rằng bạn đang chọn đúng phần tử. Nếu có nhiều gallery trên trang, hãy sử dụng $(this) thay vì $(document) để chọn .fotorama-item trong phạm vi của gallery hiện tại:

    
var item = $(this).find('.fotorama-item');
item.on('fotorama:fullscreenenter', function () {
    console.log('OK');
});
    
  

Giải Pháp 3: Bắt Sự Kiện Click Vào Nút Play Video

Nếu bạn muốn bắt sự kiện click vào nút play video trong Fotorama, bạn có thể sử dụng đoạn code sau:

    
require(['jquery'], function($){
    $(document).on('click', '.fotorama__stage__shaft', function () {
        console.log(this);
    });
})
    
  

Đoạn code này gắn một trình xử lý sự kiện click vào phần tử .fotorama__stage__shaft, phần tử này chứa nút play video.

Giải Pháp 4: Xử Lý Sự Kiện Click "X" ở Chế Độ Toàn Màn Hình (Fullscreen)

Một vấn đề khác có thể xảy ra là khi người dùng nhấp vào nút "X" để thoát khỏi chế độ toàn màn hình, một sự kiện click có thể được kích hoạt trên phần tử bên dưới nút "X". Để ngăn chặn điều này, bạn có thể sử dụng một overlay tạm thời:

    
function preventclickfotorama(event){
  console.log('here');
  var div = "<div id='preventclick' style='position:fixed;height:100vh;width:100vw;z-index:100;top:0;left:0'> </div>";
  $("body").append(div);
  setTimeout(function(){
    $("#preventclick").remove();
  },1000);
}
function assign_clickthroughprevention(){
  if($(".fotorama__fullscreen-icon").length==0){
    console.log('waiting on fotorama');
    setTimeout(assign_clickthroughprevention,100);
    return;
  }
  else {
    $(".fotorama__fullscreen-icon").click(preventclickfotorama);
    $(".fotorama__fullscreen-icon").touchend(preventclickfotorama);
  }
}
require(['jquery', 'jquery/ui'], function($){
  $(document).ready(function(){
    assign_clickthroughprevention();
  });
});
    
  

Giải pháp này tạo ra một lớp phủ toàn màn hình trong một khoảng thời gian ngắn sau khi nhấp vào nút "X", ngăn chặn bất kỳ sự kiện click nào trên các phần tử bên dưới.

Kết Luận

Việc tùy chỉnh Fotorama trong Magento 2 có thể đòi hỏi một số kiến thức chuyên sâu và thử nghiệm. Bằng cách hiểu rõ cách các sự kiện hoạt động và áp dụng các giải pháp được trình bày trong bài viết này, bạn có thể khắc phục lỗi không lắng nghe được sự kiện fotorama:fullscreenenter và tạo ra trải nghiệm người dùng tốt hơn. Hãy nhớ kiểm tra kỹ các giải pháp khác nhau và chọn giải pháp phù hợp nhất với trường hợp cụ thể của bạn. Chúc bạn thành công!