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!







Hướng dẫn tích hợp tùy chọn 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!


Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được