03/06/2019

Tính năng Chọn màu, Kích thước và đổi giá bán trong Tinhdauonline Premium

Trong 3 năm qua số lượng người dùng sử dụng theme Tinhdauonline để kinh doanh sản phẩm có tùy chọn màu và kích thước khá ít nên hôm nay được yêu cầu mình mới hướng dẫn nâng cấp tính năng bán hàng trong Tinhdauonline Premium.

Tính năng này phù hợp với các sản phẩm như:

  1. Ốp lưng điện thoại nhiều màu, nhiều kích thước và giá bán
  2. Bán vải hoặc quần áo nhiều size...vvv
Cần lưu ý: Giá bán sản phẩm sẽ không thay đổi theo màu sắc mà chỉ thay đổi theo kích thước sản phẩm (Dung tích).

Ví dụ:
  • Ốp lưng iphone 6/6s/7/8 (đỏ): 60k
  • Ốp lưng iphone 6 Plus/6s Plus/7 Plus/8Plus (đỏ): 80k

Việc chọn ốp lưng xanh, đỏ, vàng sẽ không thay đổi giá bán!


Tính năng Chọn màu, Kích thước và đổi giá bán trong Tinhdauonline Premium
Tính năng Chọn màu, Kích thước và đổi giá bán trong Tinhdauonline Premium
Bước 1:

1. Thêm tính năng chọn màu và Size trong bài viết sản phẩm

Bạn chèn code dưới thẻ [tomtat] trong HTML bài viết nhé!
<div class="p-color changecolor">
<ul>
<strong style="vertical-align: top;">Chọn màu:</strong>
<select class="single-option-selector item_size" data-option="option1" id="product-selectors-option-1" style="display: none;">
<option class="check-value" value="Đỏ"></option>
</select>
<div class="choose-product qc" id="form-check-input">
<a data-color="#ff0000" href="#" title="Đỏ" value="Đỏ"></a>
<a data-color="#0015b0" href="#" title="Xanh" value="Xanh"></a>
<a data-color="#ffcc00" href="#" title="Vàng" value="Vàng"></a>
<a data-color="#9f9f9f" href="#" title="Xám" value="Xám"></a>
</div>
</ul>
</div>
<style>input[type="checkbox"], input[type="radio"]{opacity: 0}</style>
<div id="bang-dung-tich">
<div class="canh-trai"> ĐƠN VỊ:</div>
<div class="canh-phai"> GIÁ (VNĐ)</div>
</div>
<input type="radio" checked="checked" id="two" name="gender" onclick="document.getElementById(&quot;doigia&quot;).innerHTML = &quot;160,000 đ&quot;; document.getElementById(&quot;doititle&quot;).innerHTML = &quot;Vải áo dài in họa tiết phong cảnh mã HB_AD 1427 (Loại 1m6)&quot;" type="radio" />
<label for="two"><span></span>Loại 1M6 </label><div id="canhphai">160,000 đ</div>
<input id="four" name="gender" onclick="document.getElementById(&quot;doigia&quot;).innerHTML = &quot;180,000 đ&quot;; document.getElementById(&quot;doititle&quot;).innerHTML = &quot;Vải áo dài in họa tiết phong cảnh mã HB_AD 1427 (Loại 1m8)&quot;" type="radio"" />
<label for="four"><span></span>Loại 1M8 </label><div id="canhphai">180,000 đ</div>
<input id="six" name="gender" onclick="document.getElementById(&quot;doigia&quot;).innerHTML = &quot;200,000 đ&quot;; document.getElementById(&quot;doititle&quot;).innerHTML = &quot;Vải áo dài in họa tiết phong cảnh mã HB_AD 1427 (Loại 2m)&quot;" type="radio"" />
<label for="six"><span></span>Loại 2M </label><div id="canhphai">200,000 đ</div>
Bước 2:

2. Nâng cấp giỏ hàng tinhdauonline thêm tính năng chọn màu

Tìm dòng code sau trong phần HTML của chủ đề
cũ: 

            d += " + " + n["name"] + " = ( " + number_format(n["price"], 0, ",", ".") + " x " + n["quantity"] + " = " + number_format(n["price"] * n["quantity"], 0, ",", ".") + " )\n";
↳ mới: Thay bằng đoạn code sau:

            d += " - " + n["name"] + " - Màu " + n["size"] + " -- ( " + number_format(n["price"], 0, ".", ",") + " x " + n["quantity"] + " = " + number_format(n["price"] * n["quantity"], 0, ".", ",") + " )\n";

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