Cài nút thử đồ ảo trên WooCommerce

Plugin Macgi cho WooCommerce đang được hoàn thiện. Trong lúc chờ, bạn vẫn dùng được widget ngay hôm nay bằng một thẻ script: WooCommerce đã in dữ liệu sản phẩm (JSON-LD) trên trang sản phẩm, nên chế độ tự động thường nhận ra trang và ảnh mà không cần chỉnh gì thêm.

Plugin WooCommerce (sắp ra mắt)

Plugin sẽ cho bạn nhập khoá trong phần cài đặt của WordPress, tự lấy ảnh sản phẩm và thêm nút “Thử đồ” vào trang sản phẩm, không cần sửa mã. Shop đăng ký beta sẽ được báo ngay khi plugin sẵn sàng. Khi chuyển sang plugin, chỉ cần xoá thẻ script đã thêm theo một trong hai cách dưới đây.

Cách tạm 1: plugin chèn mã header/footer (dễ nhất)

1. Trong trang quản trị WordPress, vào Plugins → Cài mới (Add New), tìm WPCode (“Insert Headers and Footers”), cài đặt và kích hoạt. Plugin chèn mã header/footer khác cũng được.
2. Mở Code Snippets → Header & Footer.

3. Dán đoạn sau vào ô Footer:

   FooterSao chép

   <script src="https://cdn.macgi.app/widget.js"
           data-key="pk_live_..."
           data-auto
           defer></script>

4. Bấm Lưu, rồi mở một trang sản phẩm để kiểm tra nút “Thử đồ”.

Cách tạm 2: hook wp_footer trong functions.php

Nếu bạn quen sửa mã, thêm đoạn sau vào functions.php của theme con (child theme), để bản cập nhật theme không xoá mất. Đoạn này chỉ tải widget trên trang sản phẩm.

add_action( 'wp_footer', function () {
	// Chỉ tải widget trên trang sản phẩm.
	if ( ! function_exists( 'is_product' ) || ! is_product() ) {
		return;
	}
	?>
	<script src="https://cdn.macgi.app/widget.js"
	        data-key="pk_live_..."
	        data-auto
	        data-slot-rules='{"quần":"bottom","chân váy":"bottom","váy liền":"one_piece","đầm":"one_piece"}'
	        defer></script>
	<?php
} );

Tuỳ chọn: tự đặt nút

Muốn nút nằm ngay sau nút “Thêm vào giỏ” và dùng kiểu nút của theme? Bỏ data-auto (và data-slot-rules) khỏi thẻ script, rồi thêm đoạn sau vào functions.php của theme con. Quần, chân váy được đánh dấu bằng tag sản phẩm macgi-bottom, váy liền và đầm bằng macgi-one-piece.

add_action( 'woocommerce_after_add_to_cart_button', function () {
	global $product;
	$image = wp_get_attachment_image_url( $product->get_image_id(), 'full' );
	if ( ! $image ) {
		return;
	}
	$slot = 'top';
	if ( has_term( 'macgi-bottom', 'product_tag', $product->get_id() ) ) {
		$slot = 'bottom';
	} elseif ( has_term( 'macgi-one-piece', 'product_tag', $product->get_id() ) ) {
		$slot = 'one_piece';
	}
	printf(
		'<button type="button" class="button alt" data-macgi-tryon data-garment-image="%s" data-garment-slot="%s" data-garment-description="%s">%s</button>',
		esc_url( $image ),
		esc_attr( $slot ),
		esc_attr( $product->get_name() ),
		esc_html( 'Thử đồ' )
	);
} );

Lưu ý

• Plugin bộ nhớ đệm hoặc tối ưu JavaScript (gộp, trì hoãn script) có thể làm mất thuộc tính data-key. Nếu nút không hiện, loại trừ cdn.macgi.app khỏi phần tối ưu JavaScript và xoá bộ nhớ đệm.
• Tên miền: khoá chỉ chạy trên tên miền đã đăng ký. Trang thử nghiệm (staging) cần được thêm riêng; nhắn chúng tôi.
• Tuỳ chọn, sự kiện JavaScript và xử lý sự cố: xem Bắt đầu nhanh.