Cập nhật lại product variant khả dụng khi thay đổi product select option đầu tiên cho website Haravan

Cập nhật lại product variant khả dụng khi thay đổi product select option đầu tiên cho website Haravan

Trong sản phẩm có 2 hoặc 3 tuỳ chọn (màu sắc, kích thước, chất liệu), khách hàng mong muốn khi chon màu sắc, thì select option kích thước chỉ hiện ra những giá trị kích thước khả dụng kết hợp với màu sắc vừa chọn. Tương tự khi chọn option kích thước, option chất liệu cũng chỉ hiện ra những giá trị chất liệu khả dụng với 2 option vừa chọn ở trên. 

Haravan không cung cấp cho bạn tuỳ chọn để làm việc này trong backend. Hiện tại các option đều list ra tất cả các giá trị của thuộc tính. Chúng ta có thể can thiệp vào code để làm việc này theo 2 bước dưới đây:

Bước 1: Add javascript vào theme

  1. Vào Haravan Admin -> Website -> Giao diện -> Hiệu chỉnh theme

  2. Tạo mới file snippet với tên linked-options.

     

     

  3. Nôi dung file linked-options.liquid có thể xem ở đây http://hstatic.net/716/1000033716/10/2015/9-21/linked-options.liquid.txt

  4. Click Lưu.

  5. Trong file product.liquid thêm vào cuối cùng của file đoạn mã: {% include 'linked-options' %}

  6. Click Lưu.

Bước 2: Thêm 1 cấu trúc mới ở Haravan.OptionSelectors

Tìm trong file theme.liquid hoặc product.liquid tìm đoạn mã :

new Haravan.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true });

Thêm vào bên dưới đoạn mã:

{% if product.available and product.options.size > 1 %}
Haravan.linkOptionSelectors({{ product | json }});
{% endif %}

Click Lưu.

Ra ngoài giao diện vào 1 sản phẩm có nhiều variant và kiểm tra kết quả nhé.
Chúc các bạn làm được như mong muốn. :D

BÌNH LUẬN