Tính năng chọn màu sắc, đổi giá bán và đổi hình ảnh theo màu sắc trong Tinhdauonline Premium

Chi tiết Liên quan Nhận xét Tác giả Hướng dẫn

Xem toàn trang

Tính năng bán hàng mới nhất trong theme Tinhdauonline Premium cho phép khách hàng chọn màu sắc sản phẩm và giá bán sẽ thay đổi tùy theo màu sắc sản phẩm.

Đồng thời hình ảnh cũng sẽ đổi theo màu sắc khi khác hàng lựa chọn màu sản phẩm.

Tính năng này chỉ phù hợp cho các website bán điện thoại, quần áo...vv hoặc các sản phẩm có nhiều phiên bản màu sắc khác nhau.

DEMO tính năng này

Các tính năng bán hàng mới trong Tinhdauonline Premium

Tính năng chọn màu sắc, đổi giá bán và đổi hình ảnh theo màu sắc trong Tinhdauonline Premium

HƯỚNG DẪN TRIỂN KHAI:

Các tính năng đặt hàng được chèn vào giữa cặp thẻ chức năng [tomtat] ... [/tomtat]

CODE:

<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</span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul><span style="font-family: inherit;"> <strong style="float: left; line-height: 32px; margin-right: 13px; vertical-align: top;">Chọn màu:</strong> <button class="button trang" data-tooltip="+0đ" onclick="document.getElementById('img_01').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR1i8Xtqz6DtRSW_jXCClVn_ygJwjszwZxy2AC-wPj8G00nMnJ4VgEQZLwtVRLq_ZYm5Giyp5zwIFJSAYKmcPhMXA6SSfLxWAkS6a56rrlB5kRS9NK-LiU5SW9om8LwF4skuEfAoAxQWQ/s450/iphone-xs-max-256gb-white-compressed.jpg',document.getElementById("doititle").innerHTML = "iPhone XS Max (trắng 64gb)" " title="Trắng" value="0"></button>
<button class="button den" data-tooltip="+100.000đ" onclick="document.getElementById('img_01').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-IrvlWgJ31oi6SSwINAFuS7Oy16_fgQ3wim4wOcwNr6713JDSjsUSybD7oVqXZZyBAbzTxn-qWKGExgr4WMo9sLgz7cI8H9kCAWR3JedWbr_nLx9QcJGOhqXia_7BJFkBCA4t_Oi21AdT/s450/iphone-xs-max-256gb-xam-1-1-org.jpg',document.getElementById("doititle").innerHTML = "iPhone XS Max (đen 64gb)" " title="Đen" value="100000"></button> <button class="button vang" data-tooltip="+500.000đ" onclick="document.getElementById('img_01').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4mXwIaXREtTwfZjLm-xI8blOEKi1OEs0kXn_eZffmfWfgQBwoSHXlUnrb_E5aJQXu1HVUpVn_rcUwNX1u7nP_oqyEo8l8IO-buR8xz__C6vKb8C2VUvJ5sPiYkAOMMGC2R13CKlsy-C0/s450/636767481293463872_iphone-xs-gold-4.jpg',document.getElementById("doititle").innerHTML = "iPhone XS Max (vàng 64gb)" " title="Vàng" value="500000"></button>
<script>
//- đổi xuôi
var x = 29900000;
$(document).ready(function(){
$('button').click(function(){
theTotal = x + Number($(this).val());
$('.total').text(""+(theTotal) .toLocaleString ().split("."));

});
});
</script>

Cách sử dụng:

1. Cấu hình giá bán ban đầu

//- đổi xuôi

var x = 29900000;

$(document).ready(function(){

$('button').click(function(){

theTotal = x + Number($(this).val());

$('.total').text(""+(theTotal) .toLocaleString ().split("."));

});

</script>

Với 29900000 là giá bán sản phẩm hiện tại của bạn.

2. Chuẩn bị ảnh theo màu sắc

Bạn sẽ phải chuẩn bị link hình ảnh tùy theo màu sắc sản phẩm khác nhau, khi chọn màu sản phẩm thì sẽ dùng hình ảnh sản phẩm theo từng màu sắc.

Bạn có thể tạo 1 trang mới trong blogger để up ảnh sản phẩm lên để lấy link trước khi sử dụng.

P/s nên chọn ảnh là hình vuông, tối thiểu là 450x450 px. Nếu ảnh quá lớn sẽ nặng web, quá nhỏ sẽ mờ ảnh.

Ví dụ:

Màu trắng: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR1i8Xtqz6DtRSW_jXCClVn_ygJwjszwZxy2AC-wPj8G00nMnJ4VgEQZLwtVRLq_ZYm5Giyp5zwIFJSAYKmcPhMXA6SSfLxWAkS6a56rrlB5kRS9NK-LiU5SW9om8LwF4skuEfAoAxQWQ/s450/iphone-xs-max-256gb-white-compressed.jpg
Màu đen: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-IrvlWgJ31oi6SSwINAFuS7Oy16_fgQ3wim4wOcwNr6713JDSjsUSybD7oVqXZZyBAbzTxn-qWKGExgr4WMo9sLgz7cI8H9kCAWR3JedWbr_nLx9QcJGOhqXia_7BJFkBCA4t_Oi21AdT/s450/iphone-xs-max-256gb-xam-1-1-org.jpg
Màu vàng: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4mXwIaXREtTwfZjLm-xI8blOEKi1OEs0kXn_eZffmfWfgQBwoSHXlUnrb_E5aJQXu1HVUpVn_rcUwNX1u7nP_oqyEo8l8IO-buR8xz__C6vKb8C2VUvJ5sPiYkAOMMGC2R13CKlsy-C0/s450/636767481293463872_iphone-xs-gold-4.jpg

3. Giá bán theo sản phẩm

Ví dụ sản phẩm của bạn Màu đen sẽ thêm giá thêm 100k thì ta dùng:

Nút Button màu đen:

+100.000đ: Khi rê chuột vào màu sắc sẽ hiện +100.000đ cho khách hàng biết trước
Khi click vào màu đen, ảnh sản phẩm sẽ đổi thành sản phẩm màu đen: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-IrvlWgJ31oi6SSwINAFuS7Oy16_fgQ3wim4wOcwNr6713JDSjsUSybD7oVqXZZyBAbzTxn-qWKGExgr4WMo9sLgz7cI8H9kCAWR3JedWbr_nLx9QcJGOhqXia_7BJFkBCA4t_Oi21AdT/s450/iphone-xs-max-256gb-xam-1-1-org.jpg
iPhone XS Max (đen 64gb): Tiêu đề sản phẩm sẽ đổi lại khi chon màu đen
value="100000": Giá bán sẽ được cộng thêm 100000 khi khách hàng chọn

4. Class màu tương ứng

class="button do": Màu đỏ

class="button xanh-duong": Màu xanh dương

class="button xanh-luc": Màu xanh lục

class="button tim": Màu tím

class="button vang": Màu vàng

class="button cam": Màu cam

class="button bac": Màu Bạc

class="button rose-gold": Rose Gold (iPhone)

class="button den": Đen

class="button trang": Trắng

P/s: Nếu sản phẩm của bạn có những màu đặc biệt khác, có thể liên hệ mình để code thêm

5. CSS cài đặt thêm

[data-tooltip]{position:relative;z-index:0;cursor:pointer}[data-tooltip]:before,[data-tooltip]:after{visibility:hidden;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;pointer-events:none}[data-tooltip]:before{z-index:1.0E+18;box-shadow:0 0 5px #000;font-family:segoe ui;position:absolute;margin:-40px 0 0 -8px;padding:6px 2px;min-width:100px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background-color:#37393e;color:#fff;content:attr(data-tooltip);text-align:center;font-size:16px;line-height:1.2}[data-tooltip]:hover:before,[data-tooltip]:hover:after{visibility:visible;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}button.button:focus:before,button.button:active:before{box-shadow:none;background:transparent;position:relative;margin:0;content:"font-family:"font-size:12px;font-weight:900;color:#fff}#internal_memory .box_internal_memory:hover{box-shadow:0 0 10px red;border:1px solid red!important}button.button{height:33px;border:2px solid #000;width:33px;border-radius:100%}#dst_gmua .dst_col_right .row{margin-bottom:15px}#internal_memory{margin:15px 0}#internal_memory p{margin-left:5px;color:#868686}#internal_memory a{padding:5px}#internal_memory .price_of_memory{color:red}.pointer-event-none{pointer-events:none}#internal_memory .selected{border:1px solid red!important}#internal_memory .box_internal_memory{margin:0!important;padding:5px!important;text-align:center;display:block;border:1px solid #bdbcbc;border-radius:5px}#internal_memory span{font-size:13px}.selected{margin:-8px 4.8px 7px!important;border:2px solid #000!important;-webkit-box-shadow:0 0 5px;-moz-box-shadow:0 0 5px;box-shadow:0 0 10px;border-color:#999!important;opacity:1;padding:18px!important}#doigia:after,.pr-old:after{letter-spacing:2px;content:'margin-left:4px;font-family:roboto}button.button{letter-spacing:-.5px;font-family:roboto;font-size:11px;margin:0 4.8px 7px;color:#fff;cursor:pointer;text-transform:none;padding:0;float:left}button.button.do{background:red}button.button.xanh-duong{background:blue}button.button.xanh-luc{background:green}button.button.tim{background:#8224e3}button.button.vang{background:#ff0;color:#000}button.button.cam{background:#ffbd0b}button.button.bac{background:silver}button.button.rose-gold{background:#b76e79}button.button.den{background:#000}button.button.trang{background:#fff;color:#000}

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

Mục Lục Nội Dung

Minh Tiến IT

Pass giải nén mặc định: truongblogger

Chắc bạn cũng đã nhiều lần gặp những link của 123link dạng 123link.co tại những trang web chia sẻ nội dung số. Nhưng bạn không biết cách nào để truy cập vào đúng link gốc của nội dung mà mình muốn truy cập. Bài viết này sẽ giúp bạn làm điều đó.
Đầu tiên bạn truy cập vào một link 123link. Khi bạn truy cập xong thì nội dung bạn thấy sẽ tựa như hình ở dưới.

Trang 123link

Đánh dấu check vào vô “I’m not a robot”. Sau đó sẽ có một bảng captcha hiện ra. Bạn trả lời theo câu hỏi của captcha rồi bấm Verify để xác nhận.

I’m not a robot

Verify

Sau khi xác nhận captcha thành công thì bấm chọn nút “Click here to continue” để sang bước tiếp theo.

Click here to continue

Ở trang tiếp theo, bạn sẽ thấy một đồng hồ đếm ngược, thường thì nhiều nhất sẽ là 7 giây. Bạn đợi cho thời gian đếm ngược chạy hết.

Bạn đợi cho thời gian đếm ngược chạy hết

Khi thời gian đếm ngược chạy hết, bạn sẽ thấy nút Get Link hiện ra. Bạn bấm vào nút đó để truy cập đến đường link đã được rút gọn bởi 123link.

Get Link

Bạn cứ yên tâm là link từ 123link sẽ không có ẩn chứa những mối nguy hiểm như virus, các pop-up quảng cáo không lành mạnh và phiền toái khi bạn đang thao tác các bước để tới link đích.

THAM GIA KIẾM TIỀN CÙNG MINH TIẾN IT