Template TinhDauOnline Premium V6.6 hiện tại đã hỗ trợ thêm 2 thuộc tính là cho phép chọn Size và Màu sắc.
Tuy nhiên 2 thuộc tính chỉ phù hợp với website bán quần áo nên sẽ không được cập nhật trong giao diện Demo tại tinhdauonline.com.vn
Do vậy nếu muốn sử dụng thêm 2 thuộc tính này có thể liên hệ với mình để update thêm tính năng này!
 |
| Tùy chọn Size và Màu của bài bán hàng |
 |
| Thông tin đặt hàng có thuộc tính Size và Màu |
Hướng dẫn tích hợp Màu và Size cho template tinhdauonline Premium
↪B1: Tích hợp code giỏ hàng
Tìm và thay code cũ bằng code mới như sau:
Code cũ
d += " + " + n["name"] + " = ( " + number_format(n["price"], 0, ",", ".") + " x " + n["quantity"] + " = " + number_format(n["price"] * n["quantity"], 0, ",", ".") + " )\n";
↪Code mới
d += " - " + n["name"] + " - Màu " + n["color"] + " - size " + n["size"] + " -- ( " + number_format(n["price"], 0, ".", ",") + " x " + n["quantity"] + " = " + number_format(n["price"] * n["quantity"], 0, ".", ",") + " )\n";
B2: Thêm tùy chọn Màu và Size trong bài viết sản phẩm
Trong bài viết bạn chuyển qua tab HTML
Chèn code trên [/tomtat] là được
<div class="form-group"><div class="selector-wrapper" style="text-align: left; margin-bottom: 15px;">
<label for="product-selectors-option-0">Size <span>(*)</span></label>
<select class="single-option-selector item_size" data-option="option1" id="product-selectors-option-0">
<option value="M">M</option><option value="L">L</option></select></div>
<div class="selector-wrapper" style="text-align: left; margin-bottom: 15px;">
<label for="product-selectors-option-1">Màu sắc <span>(*)</span></label><select class="single-option-selector item_color" data-option="option2" id="product-selectors-option-1">
<option value="Nâu">Nâu</option><option value="Trắng">Trắng</option></select></div></div>
↪Nâng cao:
Bạn có thể thêm thuộc tính màu vào size mới bằng cách nhân bản các đoạn code đỏ hoặc code xanh
B3: Thêm CSS vào trong code Chủ đề
Tìm Tùy chỉnh CSS và thêm bên dưới đoạn code css sau:
.form-group {
width: 100%;
margin: 20px 0px 0px 0;
} .selector-wrapper span{color:red}
.details-product .form-group {
margin-bottom: 30px;
}
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-product label {
font-weight: 700;
color: #111;
font-size: 14px;
}
.form-group select { color: #000;
border-color: #e1e1e1;
font-size: 14px;
padding: 0px 10px;
min-width: 100%;
margin-top: 5px;
}
Chúc bạn thành công!
