Tính năng chọn màu sắc dành cho các website có thuộc tính chọn màu sắc sản phẩm để cho khác hàng lựa chọn như bán Smartphone, bao da, ốp lưng, quần áo Freesize....vv
 |
| Thêm tính năng chọn màu sắc trong Template TinhDauOnline |
Bước 1: Cài đặt CSS
Tìm dòng Tùy chỉnh CSS và thêm vào bên dưới hoặc chèn trước /b:skin#form-check-input{ cursor: pointer;}
.changecolor a,.choose-product a{line-height: 33px;
width: 33px;
height: 33px;
border: 2px solid rgba(0, 0, 0, 0.2784313725490196);
margin: 0 4.8px 7px;
display: block;
float: left;
background-color: #555;
border-radius: 100%;
text-align: center;}
.changecolor a:focus,.choose-product a:focus{border:2px solid rgba(0, 0, 0, 0.45)}
.changecolor a:focus:before,.choose-product a:focus:before,.choose-product a:active:before{content:"\f00c";font-family:"FontAwesome";font-size:12px;font-weight:900;color:#fff;line-height:27px}
.p-color{margin-bottom: 20px;overflow: hidden;}
.p-color ul strong{ margin-top: 7px;float:left;padding-right:10px}
Bước 2: Thêm tính năng hiện màu trong Giỏ hàng
cũ: Tìm dòng code sau
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";
Bước 3: Thêm đoan code Javascript sau trên Body
<b:if cond='data:blog.pageType == "item"'>
<script>//<![CDATA[
$('#form-check-input a').each(function() {
$(this).on('click', function(event) {
var check_value = $(event.target).attr('value');
$('.check-value').attr('value', check_value);
});
});
//]]></script>
<!-- Chọn màu sản phẩm -->
<script type='text/javascript'>
//<![CDATA[
$(".changecolor a,#form-check-input a").each(function () {
var o = $(this).attr("data-color");
$(this).css("background-color", o), $(this).click(function () {
return $(".chua-them").css("color", o),
$(".dachon1").css("background-color", o), $(".chua-them").css("border-color", o), $(".chua-them").hover(function () {
$(this).css("background-color", o)
}, function () {
$(this).css("background-color", "#f4f4f4")
}), $(".chua-them").hover(function () {
$(this).css("background-color", o)
}, function () {
$(this).css("border-color", "#eee")
}), $(".chua-them").each(function () {
$(this).css("border-color", o)
}, function () {
$(this).css("color", "#fff!important")
}), $(".chua-them").hover(function () {
$(this).css("color", o)
}, function () {
$(this).css("background-color", "#fff")
}), !1
})
});
//]]>
</script>
</b:if>
Bước 4: Thêm chọn màu sắc vào bài viết sản phẩm
Bạn chèn code sau trước thẻ [/tomtat] trong phần HTML của bài viết
<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 id="form-check-input" class="choose-product qc">
<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>
Mỗi dòng tương ứng với 1 lựa chọn màu sắc riêng. Nếu sản phẩm của bạn có nhiều màu hơn bạn chỉ cần nhân bản code đã được đánh dấu và thêm mã màu riêng cho nó.!
<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>
<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>
Lựa chọn Bảng mã màu có sẳn bên dưới
- lưu ý: (mã màu có dấu # phía trước nữa nhé)
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!
