Nội dung
Đối với các shop thời trang bán hàng online thì việc cung cấp tính năng hướng dẫn chọn size cho khách hàng là gần như bắt buộc để giúp khách lựa chọn được sản phẩm phù hợp nhất cũng như tăng tỷ lệ mua hàng cho cửa hàng.
Việc chọn size có thể thực hiện theo nhiều cách khác nhau như nhập thông số hoặc kéo chọn thông số chiều cao, cân nặng để gợi ý ra size phù hợp hoặc đơn giản hơn là tạo 1 bảng size để khách tự tìm size phù hợp cho mình,… Hôm nay, MKTShare sẽ chia sẻ cho các bạn đoạn code hướng dẫn chọn size quần áo theo số đo kèm bảng size gợi ý áp dụng trên Flatsome (các theme khác có thể tham khảo html, css và js để tuỳ biến thêm nhé).
Code hướng dẫn chọn size quần áo theo số đo kèm bảng size gợi ý cho Flatsome
Bước 1: Tạo 01 UX Block có chứa 02 tab là Hướng dẫn chọn size + Bảng size
Các bạn vào UX Block tạo mới 01 block đặt tên là Lựa chọn size và paste đoạn code sau vào nhé:
[section class="tab-size-select"] [row] [col span__sm="12"] [tabgroup style="tabs"] [tab title="Hướng dẫn chọn size"] [ux_html] <div id="SizeGuide"> <p><strong>Chiều cao (cm):</strong><input type="range" min="100" max="200" id="heightSlider" oninput="updateHeightValue()" style="width: 80%;"> <strong><span id="heightDisplay"></span> cm</strong></p> <p><strong>Cân nặng (kg):</strong><input type="range" min="20" max="100" id="weightSlider" oninput="updateWeightValue()" style="width: 80%;"> <strong><span id="weightDisplay"></span> kg</strong></p> <div class="goi-y"> <span class="text-gy">Gợi ý cho bạn:</span> <span class="size-gy">Size: <span id="sizeDisplay"></span></span> </div> </div> [/ux_html] [/tab] [tab title="Bảng size"] [ux_html] <div id="SizeChart"> <div class="sizechart-table"> <table class="site-table one-whole mgb--10 underwear-trunk-4XL" style="width: 100%;"> <thead> <tr> <td>Size</td> <td>M</td> <td>L</td> <td>XL</td> <td>2XL</td> <td>3XL</td> <td>4XL</td> </tr> </thead> <tbody> <tr> <td><span class="text--bold">Chiều cao</span></td> <td>1m50 - 1m62</td> <td>1m63 - 1m69</td> <td>1m70 - 1m76</td> <td>1m77 - 1m83</td> <td>1m84 - 1m88</td> <td>1m89 - 1m90</td> </tr> <tr> <td><span class="text--bold">Cân nặng</span></td> <td>51kg - 59kg</td> <td>60kg - 68kg</td> <td>69kg - 77kg</td> <td>78kg - 84kg</td> <td>85kg - 89kg</td> <td>89kg - 91kg</td> </tr> <tr> <td><span class="text--bold">DÀI QUẦN</span></td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td><span class="text--bold">RỘNG CẠP</span></td> <td>32</td> <td>34</td> <td>36</td> <td>38</td> <td>40</td> <td>42</td> </tr> <tr> <td><span class="text--bold">RỘNG MÔNG</span></td> <td>18.5</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> </tr> </tbody> </table> <div class="size-table__description"> Trường hợp số đo của bạn nằm trong khoảng giữa các size với nhau: Với áo thun, bạn hãy lựa chọn ưu tiên theo chiều cao Ví dụ chiều cao của bạn theo size L nhưng cân nặng của bạn theo size M, Hãy chọn L. 97% khách hàng của chúng tôi đã chọn đúng size theo cách này. </div> </div> </div> [/ux_html] [/tab] [/tabgroup] [/col] [/row] [/section]
Bước 2: Tạo lightbox popup khi click
Paste đoạn code sau vào Footer Script nhé:
[lightbox id="size-guide" width="1000px" padding="20px"][block id="lua-chon-size"][/lightbox]
Trường hợp các bạn muốn tạo link click show ra thì có thể dùng đoạn code:
<a href=”#size-guide” class=”option-heading-sizeguide”>Hướng dẫn chọn size</a>
Bước 3: CSS thêm cho đẹp
Đây là CSS tham khảo, các bạn có thể tự tuỳ biến thêm
/*Size Guide*/#SizeGuide p{display:flex;padding: 10px;}
.size-gy{font-weight:700}
.text-gy{
font-size: 13px;
font-weight: 700;
background-color: #000;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
margin-right: 20px;
}
.goi-y{padding-left:10px;line-height: 40px;}
.tab-size-select .tabbed-content .nav{margin-bottom:10px}
.tab-size-select .tabbed-content ul li.active a{background-color:#000;color:#fff}
.tab-size-select .tabbed-content ul li.active a,.tab-size-select .tabbed-content ul li a{border:none!important}
.tab-size-select .tab-panels .panel.active{border-radius:0px!important}
/*CSS bảng size*/.site-table {
border-collapse: separate;
border-spacing: 0;
font-weight: 500;
font-size: 12px;
line-height: 15px;
letter-spacing: .03em;
border: 1px solid #d9d9d9;
border-radius: 16px;
}
.one-whole {
width: 80%;
}
.mgb--10 {
margin-bottom: 10px;
}
.site-table thead {
position: relative;
color: #fff;
border-radius: 16px;
z-index: 2;
}
.size-table table td:first-of-type {
padding-left: 18px;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.size-table table td {
padding: 5px 10px;
height: 42px;
font-size: 11px;
}
.site-table thead td {
position: relative;
z-index: 1;
background-color: #111;
color: #fff!important;
}
.site-table thead td:first-child{padding-left:10px}
.site-table tbody tr td:first-of-type {
border-bottom-left-radius: 16px;
padding-left:10px;
}
.site-table tbody tr td {
position: relative;
border-bottom: 1px solid #d9d9d9;
}
.size-table__description {
margin-top: 27px;
font-weight: 400;
font-size: 10px;
line-height: 13px;
letter-spacing: .03em;
color: #000;
padding-left: 10px;
padding-bottom: 10px;
}
/*CSS thanh trượt*/input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: #000;
cursor: pointer;
margin-top:8px
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -4px;
background-color: #000;
height: 1rem;
width: 1rem;
}
input[type="range"]::-webkit-slider-runnable-track {
background: #FFC300;
height: 0.5rem;
}
@media only screen and (max-width: 420px){
.off-canvas .off-canvas-cart {
.tab-size-select .tab-panels{padding:0px!important}
input[type="range"]{background:#ddd!important}
}Bước 4: Thêm JS để code hoạt động
Paste đoạn JS sau vào Footer Script nhé:
<script>
function updateHeightValue() {
var height = document.getElementById('heightSlider').value;
document.getElementById('heightDisplay').innerText = height;
updateSize();
}
function updateWeightValue() {
var weight = document.getElementById('weightSlider').value;
document.getElementById('weightDisplay').innerText = weight;
updateSize();
}
function updateSize() {
var height = document.getElementById('heightSlider').value;
var weight = document.getElementById('weightSlider').value;
// Determine the size based on the height and weight
var size;
if (height >= 150 && height <= 162 && weight >= 51 && weight <= 59) {
size = "M";
} else if (height >= 163 && height <= 169 && weight >= 60 && weight <= 68) {
size = "L";
} else if (height >= 170 && height <= 176 && weight >= 69 && weight <= 77) {
size = "XL";
} else if (height >= 177 && height <= 183 && weight >= 78 && weight <= 84) {
size = "2XL";
} else if (height >= 184 && height <= 188 && weight >= 85 && weight <= 89) {
size = "3XL";
} else if (height >= 189 && height <= 190 && weight >= 89 && weight <= 91) {
size = "4XL";
} else {
size = "Không có size";
}
document.getElementById('sizeDisplay').innerText = size;
}
</script>Chúc các bạn thành công!