14/07/2019

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

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://1.bp.blogspot.com/-M1_Uw5wdFqQ/XSgv1ZJm5bI/AAAAAAAAAm8/diSmBRV3fS0uOAwydWF7bfkKH4x1QYrywCLcBGAs/s450/iphone-xs-max-256gb-white-compressed.jpg',document.getElementById(&quot;doititle&quot;).innerHTML = &quot;iPhone XS Max (trắng 64gb)&quot; " title="Trắng" value="0"></button>
<button class="button den" data-tooltip="+100.000đ" onclick="document.getElementById('img_01').src='https://1.bp.blogspot.com/-XiPcizhA9x0/XShSR3KjTII/AAAAAAAAPS4/0r9s46ejQ-QKYA-Ny98bHqQJtwDEM9-hwCLcBGAs/s450/iphone-xs-max-256gb-xam-1-1-org.jpg',document.getElementById(&quot;doititle&quot;).innerHTML = &quot;iPhone XS Max (đen 64gb)&quot; " title="Đen" value="100000"></button>   <button class="button vang" data-tooltip="+500.000đ" onclick="document.getElementById('img_01').src='https://1.bp.blogspot.com/-_A9G6fdB-nE/XShSRwXArNI/AAAAAAAAPS8/FaPMCEwpNBgp_wY-78Caj9OfYqH_n1migCLcBGAs/s450/636767481293463872_iphone-xs-gold-4.jpg',document.getElementById(&quot;doititle&quot;).innerHTML = &quot;iPhone XS Max (vàng 64gb)&quot; " 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

<script>
            //- đổ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://1.bp.blogspot.com/-M1_Uw5wdFqQ/XSgv1ZJm5bI/AAAAAAAAAm8/diSmBRV3fS0uOAwydWF7bfkKH4x1QYrywCLcBGAs/s450/iphone-xs-max-256gb-white-compressed.jpg
  • Màu đen: https://1.bp.blogspot.com/-XiPcizhA9x0/XShSR3KjTII/AAAAAAAAPS4/0r9s46ejQ-QKYA-Ny98bHqQJtwDEM9-hwCLcBGAs/s450/iphone-xs-max-256gb-xam-1-1-org.jpg
  • Màu vàng: https://1.bp.blogspot.com/-_A9G6fdB-nE/XShSRwXArNI/AAAAAAAAPS8/FaPMCEwpNBgp_wY-78Caj9OfYqH_n1migCLcBGAs/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:

<button class="button den" data-tooltip="+100.000đ" onclick="document.getElementById('img_01').src='https://1.bp.blogspot.com/-XiPcizhA9x0/XShSR3KjTII/AAAAAAAAPS4/0r9s46ejQ-QKYA-Ny98bHqQJtwDEM9-hwCLcBGAs/s450/iphone-xs-max-256gb-xam-1-1-org.jpg',document.getElementById(&quot;doititle&quot;).innerHTML = &quot;iPhone XS Max (đen 64gb)&quot; " title="Đen" value="100000"></button>

  1. +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
  2. Khi click vào màu đen, ảnh sản phẩm sẽ đổi thành sản phẩm màu đen: https://1.bp.blogspot.com/-XiPcizhA9x0/XShSR3KjTII/AAAAAAAAPS4/0r9s46ejQ-QKYA-Ny98bHqQJtwDEM9-hwCLcBGAs/s450/iphone-xs-max-256gb-xam-1-1-org.jpg
  3. iPhone XS Max (đen 64gb): Tiêu đề sản phẩm sẽ đổi lại khi chon màu đen
  4. 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:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;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:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;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:&quot;font-family:&quot;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:&#39;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!