Hướng dẫn xuất variants theo dạng từng ô click chọn

Bài viết hôm nay mình sẽ hướng dẫn các bạn xuất variants theo dạng từng ô và click để chọn variant tương ứng. Trước tiên các bạn hãy xem demo ở đây:

Link : https://mega-plus.myharavan.com/products/mouse-hp-1200dpi-led-sam-set-game-cuc-dep

Để thực hiện được các bạn cần làm theo những bước như sau:

Bước 1: Tạo file snippet swatch.liquid

Các bạn copy và paste đoạn code trong file dưới đây vào file vừa tạo.
     Xem file: swatch.liquid  


Bước 2: Thêm code vào file product.liquid
Đầu tiên các bạn tìm đến vị trí cần xuất variant ra, copy và pates đoạn code dưới vào.

<div class="select-swatch">
    {% if product.available and product.variants.size > 1 %}
    {% for option in product.options %}
    {% include 'swatch' with option %}
    {% endfor %}
    {% endif %}
</div>

Đoạn code trên đơn thuần chỉ kiếm trả tình trạng còn hàng hay không và sản phẩm có variant hay không rồi sau đó sẽ gọi file swatch mà ta đã tạo từ trước.

Bước 3: Thêm code js vào file product.liquid
Các bạn tải file và include vào dưới hàm selectCallback. Tốt nhất là để ở dưới cùng
   File: Click here 
Đối với file này có một số lưu ý sau đây:
Các bạn thấy mình có tạo 1 biến toàn cục check_variant=true. Biến này nhằm để trả về giá trị mỗi khi thực hiện hành động gọi hàm selectCallback. 

Cứ mỗi lần bạn click chọn vào 1 variant bất kì thì hàm selectCallback sẽ được gọi lại, ứng với variant có hàng thì biến check_variant sẽ trả về giá trị là true và ngược lại sẽ là false.
Bước 3: Thêm code css.
Các bạn copy và pates đoạn css dưới đây vào file css dùng chung cho website nhé, tốt nhất là nên đặt nó ở dưới cùng.
    Xem file.

Ở file css trên chỉ là css cơ bản để variant xuất ra cho dễ nhin hơn thôi, các bạn có thể tự css lại tùy ý các bạn.
Các bạn có thể tải file hình khi sản phẩm hết hàng tại đây

Còn đây là file hình khi click chọn Tải hình

Chúc các bạn thành công!...