12/08/2018

[v6.6] TinhDauOnline Template Premium hỗ trợ chọn Size, Màu Sắc

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!