product.bwt

option_selection.js và callbacksAnchor link for: option_selectionjs v callbacks

Một sản phẩm có thể có đến 3 tùy chọn khác nhau, ví dụ một chiếc áo có thể có các tùy chọn về Kích cỡ, Màu sắc và Chất liệu. Trong trường hợp này, khuyến khích bạn dùng thư viện chung là option_selection.js để hiện thị các tùy chọn cho khách hàng có thể dễ dàng chọn lựa các phiên bản sản phẩm.

Dựa trên Javascript, callback dùng để bắt các hành động và thông tin trả về của khách hàng mỗi khi khách hàng chọn một phiên bản sản phẩm. Điều này cho phép bạn có thể hiện thị thông tin khác nhau theo từng phiên bản sản phẩm như ảnh sản phẩm, giá, SKU, số lượng tồn kho của mỗi phiên bản sản phẩm,...

Kiểm tra khả năng có thể đặt hàng của phiên bản sản phẩmAnchor link for: kim tra kh nng c th t hng ca phi

Mỗi phiên bản của sản phẩm có thể có số lượng sản phẩm và quy định quản lý kho hàng khác nhau, điều này rất quan trọng để có thể thông báo cho khách hàng rằng sản phầm này có thể đặt hàng hay không. Với callback, chỉ cần thêm một vài đoạn mã là bạn có thể kích hoạt/bỏ kích hoạt được nút Thêm vào giỏ hàng tùy theo sản phẩm đó có thể đặt hàng hay không. Đây là một ví dụ nếu sử dụng jQuery

var selectCallback = function(variant, selector){ if(variant && variant.available){ $('#add-to-cart').removeClass('disabled').removeAttr('disabled'); // Kích hoạt nút Thêm vào giỏ hàng $('.options .price').html('<strong>'+Bizweb.formatMoney(variant.price, "{{store.money_with_currency_format}}")+'</strong>'); // Hiển thị giá của phiên bản sản phẩm } else{ $('#add-to-cart').addClass('disabled').attr('disabled', 'disabled'); // Bỏ kích hoạt nút Thêm vào giỏ hàng $('.options .price').text("Hết hàng!"); // Thay thế giá của phiên bản sản phẩm bằng "Hết hàng!" } } 

Ảnh cho phiên bản sản phẩmAnchor link for: nh cho phin bn sn phm

Bạn có thể sử dụng các ảnh khác nhau đối với các phiên bản sản phẩm khác nhau. Ví dụ, nếu có một sản phẩm là Áo, với các phiên bản sản phẩm khác nhau về màu sắc, mỗi phiên bản sản phẩm này có thể có một ảnh sản phẩm tương ứng với màu sắc mà nó có. Trong product.bwt, có thể làm ảnh sản phẩm thay đổi mỗi khi chọn một phiên bản sản phẩm tương ứng bằng cách sử dụng Liquid kết hợp với Javascript. 

• Khung số lượng sản phẩm: cho phép khách hàng có thể thêm nhiều phiên bản sản phẩm cùng lúc vào giỏ hàng
• Sản phẩm liên quan: bán hàng nhiều hơn khi giới thiệu các sản phẩm liên quan tới sản phẩm khách hàng đang xem
• Ajax API: cho phép khách hàng thêm phiên bản sản phẩm vào trong giỏ hàng mà không cần đi đến trang giỏ hàng.

Các yêu cầu bắt buộc khi gửi giao diệnAnchor link for: cc yu cu bt buc khi gi giao din

Nếu bạn muốn gửi giao diện của bạn lên hệ thống của Sapo, product.bwt sẽ phải đáp ứng đủ các điều kiện sau

• Thông tin sản phẩm

           - Tên sản phẩm phải đầy đủ.

           - Giá.

           - Mô tả về sản phẩm.

• Ảnh chính của sản phẩm phải được làm nổi bật.
• Ảnh phụ của sản phẩm, hiển thị dạng ảnh nhỏ

          - Ảnh có tỉ lệ khác nhau sẽ không làm hỏng giao diện.

          - Ảnh nhỏ có thể xem dạng đầy đủ.

• Ảnh phiên bản sản phẩm phải được nhìn thấy khi chọn phiên bản sản phẩm khác nhau
• Chức năng mua hàng

          - Lựa chọn cho phiên bản sản phẩm nếu có.

          - Nút Thêm vào giỏ hàng phải được thay đổi trạng thái tùy theo trạng thái tồn kho của sản phẩm.

• Có thể sử dụng image.alt cho ảnh của sản phẩm.