Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế web giá rẻ
    • Thiết kế website WordPress
    • Tích hợp thanh toán MoMo, ViettelPay, Vietcombank, MB..
    • Tối ưu Google PageSpeed
    • Sửa lỗi nâng cấp website
    • Viết plugin WordPress
    • Code Tool theo yêu cầu
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Wordpress plugins » Thêm tính năng cloud zoom cho product gallery – woocommerce

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

Thứ Năm, 18/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Tính năng phóng ảnh rất phổ biến trong website thương mại điện tử, giúp người dùng xem mọi góc cạnh đến chi tiết của sản phẩm trước khi họ đặt hàng trực tuyến trên website. Trong blog, mình cũng đã có bài hướng 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 hôm nay mình sẽ trình bày các bước cài đặt cloud zoom cho các 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 xem 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ả những ảnh bạn thêm vào 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 sản phẩm bằng cách nhấn vào liên kết “Add product gallery images” bên dưới.
Sau đó nhấn vào Update/Publish để lưu lại.
Như chúng ta biết, cloudzoom sử dụng 3 kích thước cho một ảnh:
– thumbnail: ảnh nhỏ nằm trong danh sách gallery.
– medium: ảnh có kích thước lớn hơn, xuất hiện trên khung nhìn khi chuột vào nó bạn 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 và product-thumbnails.php, chép 2 file này trong thư mục plugins/woocommerce/templates/single-product/product-image.php và 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 để hiển thị ảnh xem ban đầu là product-image.php, và file thứ hai product-thumbnails.php hiển thị các ảnh gallery còn lại sẽ được xem khi người 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ó thể thêm các thuộc tính 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.='<span class="view-larger-image"></span>';
....

và các thẻ html khác. Sửa lại $gallery 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 sản phẩm có kích thước shop_single, woocommerce sử dụng hàm filter woocommerce_single_product_image_html, thiết lập thuộc tính còn lại phù hợp với cloudzoom.

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a class="cloud-zoom" href="%s" itemprop="image" id="zoom01" title="%s" rel="position:\'right\', adjustX:20, adjustY:-3, tint:\'#FFFFFF\', softFocus:1, smoothMove:5, tintOpacity:0.8" data-rel="prettyPhoto' . $gallery . '">%s</a>', $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ó 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 sản phẩm 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 những kích thước ảnh sử dụng trong woocommerce thông qua filters có phân nhóm cho từng loại từng loại kích thướ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(
	'class'=>"abc",
) );

Đoạn code trên, mình có sửa thêm thuộc tính vào thẻ img. Chúng ta cần thêm 2 kích thước nữa là “medium, full”. Chèn code sau đây vào sau đoạn code trên.

$medium=wp_get_attachment_image_src( $attachment_id,'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( '<a  href="%s" class="%s" title="%s" rel="useZoom: \'zoom01\', smallImage: \'%s\'">%s</a>', $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.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài liên quan:

  • Toàn tập cài đặt WooCommerce và cấu hình
    Toàn tập cài đặt WooCommerce và cấu hình
  • Cài đặt và cấu hình WordPress SEO by Yoast từ A đến Z
    Cài đặt và cấu hình WordPress SEO by Yoast từ A đến Z
  • Click ảo là gì? Cách Chặn click ảo và Hạn chế click tặc 80%
    Click ảo là gì? Cách Chặn click ảo và Hạn chế click tặc 80%
  • Top plugin tạo trang kéo thả cho WordPress
    Top plugin tạo trang kéo thả cho WordPress
  • Tạo gallery ảnh cho wordpress
    Tạo gallery ảnh cho wordpress
  • 20 plugins vận chuyển và tính phí cho WooCommerce
    20 plugins vận chuyển và tính phí cho WooCommerce

Chuyên mục: Wordpress, Wordpress plugins Tìm kiếm: gallery, web bán hàng, Woocommerce, wordpress plugins

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Comments

  1. phố nhạc says

    Thứ Tư, 02/05/2018 at 10:33 chiều

    m làm theo nhưng khó quá làm mãi k xong. admin có plugin nào k

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: hoangweb24@gmail.com

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • GitHub
  • YouTube

SẢN PHẨM

  • Plugin Thanh Toán Quét Mã QR Code Tự Động
  • WP2Speed – Tối ưu Google Speed
  • Hosting Miễn Phí Trọn Đời

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2022 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.

plugin thanh toan
Link tải : https://wordpress.org/plugins/bck-tu-dong-xac-nhan-thanh-toan-chuyen-khoan-ngan-hang/