 |
| Tính năng chọn màu và đổi giá tùy theo màu sắc sản phẩm trong Tinhdauonline Premium |
Sau đây mình sẽ hướng dẫn bạn cách sử dụng!
1. Thêm code chọn màu trong bài sản phẩm
Chèn code này dưới [tintuc] trong phần HTML của bài viết
<hr />
<span style="font-family: inherit;">
Giá bán có thể khác nhau tùy phiên bản màu sắc<br />
Vui lòng chọn 1 phiên bản màu sắc bên dưới<br />
<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" data-tooltip="+300.000đ" href="#" onclick="document.getElementById("doigia").innerHTML = "460,000 đ"; document.getElementById("doititle").innerHTML = "Tinh Dầu Oải Hương Nguyên Chất (Màu đỏ)"" title="Đỏ" value="Đỏ"></a><a data-color="#0015b0" data-tooltip="+200.000đ" href="#" onclick="document.getElementById("doigia").innerHTML = "360,000 đ"; document.getElementById("doititle").innerHTML = "Tinh Dầu Oải Hương Nguyên Chất (Màu xanh)"" title="Xanh" value="Xanh"></a>
<a data-color="#ffcc00" data-tooltip="+100.000đ" href="#" onclick="document.getElementById("doigia").innerHTML = "260,000 đ"; document.getElementById("doititle").innerHTML = "Tinh Dầu Oải Hương Nguyên Chất (Màu vàng)"" title="Vàng" value="Vàng"></a>
<a data-color="#9f9f9f" data-tooltip="+100.000đ" href="#" onclick="document.getElementById("doigia").innerHTML = "260,000 đ"; document.getElementById("doititle").innerHTML = "Tinh Dầu Oải Hương Nguyên Chất (Màu xám)"" title="Xám" value="Xám"></a>
<a data-color="#ffffff" data-tooltip="+0đ" href="#" onclick="document.getElementById("doigia").innerHTML = "160,000 đ"; document.getElementById("doititle").innerHTML = "Tinh Dầu Oải Hương Nguyên Chất (Màu trắng)"" title="Trắng" value="Trắng"></a>
</div>
</ul>
</div>
2. Tùy chỉnh nâng cao
Tách 1 đoạn code mình đánh dấu đỏ
<a data-color="#ff0000" data-tooltip="+300.000đ" href="#" onclick="document.getElementById("doigia").innerHTML = "460,000 đ"; document.getElementById("doititle").innerHTML = "Tinh Dầu Oải Hương Nguyên Chất (Màu đỏ)"" title="Đỏ" value="Đỏ"></a>
- data-color="#ff0000" - #ff0000: Là mã màu của màu đỏ, bạn có thể chọn mãu màu khác
- data-tooltip="+300.000đ": Khi người dùng rê chuột vào màu này thì có giá bán chênh 300.000đ so với màu hiện tại.
- innerHTML = "460,000 đ: với 460.000đ là giá bán sau cùng khi được +300.000đ nữa!
- Tinh Dầu Oải Hương Nguyên Chất (Màu đỏ): Là tiêu đề sẽ được thay đổi sau khi chọn màu
3. Bảng mã màu
Bảng mã màu sắc thông dụng và đẹp dùng cho việc thiết kế giao diện website.
.
Chúc bạn thành công!
