Thêm tính năng cloud zoom cho product gallery – woocommerce

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Thêm tính năng cloud zoom cho product gallery – woocommerce

Tính năng phóng ảnh rất thông dụng trong website thương mại điện tử, giúp người sử dụng xem mọi góc cạnh đến chi tiết của sản phẩm trước lúc họ đặt mua trực tuyến trên website. Trong blog, mình cũng đã có bài chỉ dẫn tạo tính năng phóng ảnh sử dụng cloud zoom cho mọi website. Nhưng với WooCommerce tính năng này không được cài đặt mặc định cho product gallery, trong bài bữa nay mình sẽ trình bày các bước cài đặt cloud zoom cho những hình ảnh đại diện của sản phẩm.
tích hợp cloudzoom cho product gallery

Trước khi tiếp tục, bạn nên nhìn qua bài viết sử dụng cloudzoom cho website. Chúng ta chuẩn bị ảnh mặc định trước, ảnh này được thiết lập đầu tiên trong product gallery và các ảnh gallery khác. Tất cả các ảnh bạn thêm nữa nội dung sản phẩm sẽ tự động thêm vào metabox “ Product Gallery “, cái mà bạn thấy ở bên phải.
metabox-product-gallery-woo
Bạn cũng có thể thêm gallery image khác cho mặt hàng bằng cách bấm vào liên kết “Add product gallery images” bên dưới.
Sau đó bấm vào Update/Publish để lưu lại.
Như chúng ta biết, cloudzoom sử dụng 3 kích cỡ cho một ảnh:
– thumbnail: ảnh nhỏ nằm ở trong danh sách gallery.
– medium: ảnh có kích cỡ lớn hơn, xuất hiện trên khung nhìn khi chuột vào nó bạn cũng có thể có thể xem chi tiết vào từng phần mà chuột đang trỏ vào.
– full: kích: thước ảnh này lớn nhất, bản chất ảnh phóng ra bạn nhìn thấy chính là ảnh này.

Tiến hành Override woocommerce template product-image.php product-thumbnails.php , chép 2 file này trong thư mục plugins/woocommerce/templates/single-product/product-image.php plugins/woocommerce/templates/single-product/product-thumbnails.php vào folder theme và dữ nguyên dường dẫn thư mục. Chúng ta sẽ sửa 2 file này, một file dùng để làm hiển thị ảnh xem mới đầu là product-image.php, và file thứ 2 product-thumbnails.php hiển thị các ảnh gallery còn sót lại sẽ được xem khi người sử dụng chọn.

Product Image

Mở product-image.php và sửa lại theo hướng dẫn cài đặt của cloudzoom. Bạn cũng đều có thể thêm các tính chất cho thẻ img với hàm get_the_post_thumbnail và các thẻ html khác. Ví dụ:

 ... $image= get_the_post_thumbnail( $post-> ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' =>  $image_title, 'width'=> "300px", 'height'=> "300px", 'style'=> 'width:300px;height:300px;' ) ); $image.=''; ....  

và các thẻ html khác. Sửa lại $gallery cũng có thể như thế này, tùy vào thư viện cloudzoom bạn sử dụng.

 if ( $attachment_count >  0 ) { $gallery = '[product-gallery]'; } else { $gallery = ''; }  

Cuối cùng là đoạn mã hiển thị ảnh đại diện cho mặt hàng có kích cỡ shop_single , woocommerce sử dụng hàm filter woocommerce_single_product_image_html , thiết lập tính chất còn sót lại phù phù hợp với cloudzoom.

 echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post-> ID );  

Trường hợp product không có thumbnail thì mình bỏ qua.
Lưu ý: Bạn cũng có thể có thể thêm filter woocommerce_single_product_image_html này trong functions.php để sửa lại ảnh đại diện trong trang sản phẩm chi tiết nếu muốn.

Product gallery/thumbnails

Phần liệt kê những hình ảnh thumbnails khác của mặt hàng chứa trong file product-thumbnails.php, sử dụng vòng lặp duyệt đến mỗi product gallery, các ảnh nhỏ này có kích thước shop_thumbnail , tên đăng ký bởi add_image_size cho các kích cỡ ảnh sử dụng trong woocommerce thông qua filters có phân nhóm cho mỗi loại từng loại kích cỡ rất dễ nhớ, vd: single_product_small_thumbnail_size, single_product_large_thumbnail_size..
Lý do woocommerce thiết kế mã nguồn plugin khá chặt chẽ đến như vậy.

 $image= wp_get_attachment_image( $attachment_id, apply_filters('single_product_small_thumbnail_size', 'shop_thumbnail' ),null,array( 'medium'); $thumbnail_src=$medium[0]; $large=wp_get_attachment_image_src( $attachment_id,'full');  

Ảnh lớn trong product-thumbnails.php , bạn lấy đường dẫn ảnh này: $image_link = wp_get_attachment_url( $attachment_id );
Sửa lại filter hiển thị ảnh thumbnail woocommerce_single_product_image_thumbnail_html tương ứng với cloudzoom như sau:

 echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '%s', $image_link, $image_class, $image_title,$thumbnail_src, $image ), $attachment_id, $post-> ID, $image_class );  

Như vậy chúng ta đã hoàn tất việc cấu hình cloudzoom cho product image và product thumbnails bằng cách override template trong woocommerce.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của TopVn trên Twitter và Facebook

Bài viết Thêm tính năng cloud zoom cho product gallery – woocommerce được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang