update
This commit is contained in:
@@ -40,7 +40,21 @@
|
|||||||
"Bash(curl -s -H \"X-Figma-Token: figd_uiWTwLaZj6DQBU16r7t9r8Ei9zOhD-fevGWEBPwp\" \"https://api.figma.com/v1/files/JmbJxl6r2KMggCtiJOc0gZ/nodes?ids=7-6456\")",
|
"Bash(curl -s -H \"X-Figma-Token: figd_uiWTwLaZj6DQBU16r7t9r8Ei9zOhD-fevGWEBPwp\" \"https://api.figma.com/v1/files/JmbJxl6r2KMggCtiJOc0gZ/nodes?ids=7-6456\")",
|
||||||
"Bash(python -m json.tool)",
|
"Bash(python -m json.tool)",
|
||||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\" http://local.agent_test/)",
|
"Bash(curl -s -o /dev/null -w \"%{http_code}\" http://local.agent_test/)",
|
||||||
"Bash(curl -sk http://local.agent_test/)"
|
"Bash(curl -sk http://local.agent_test/)",
|
||||||
|
"Bash(node --version)",
|
||||||
|
"Bash(php --version)",
|
||||||
|
"Bash(node \"c:/Users/APC/Downloads/work/agent_test/convert_php.js\")",
|
||||||
|
"Bash(php -l \"c:/Users/APC/Downloads/work/agent_test/data/article/article.php\")",
|
||||||
|
"Bash(node \"c:/Users/APC/Downloads/work/agent_test/convert_php.cjs\")",
|
||||||
|
"Bash(php -l \"c:/Users/APC/Downloads/work/agent_test/data/article/detail.php\")",
|
||||||
|
"Bash(curl -s -o \"c:/Users/APC/Downloads/work/agent_test/asset/images/icon_commitment_1.png\" \"https://www.figma.com/api/mcp/asset/1eb5d75b-4d86-4183-afc5-4ea470d2b03a\" -w \"%{http_code}\")",
|
||||||
|
"Bash(curl -s -o \"c:/Users/APC/Downloads/work/agent_test/asset/images/icon_commitment_2.png\" \"https://www.figma.com/api/mcp/asset/67ff0e18-ae1e-4a60-b2f7-7adce5447103\" -w \"%{http_code}\")",
|
||||||
|
"Bash(curl -s -o \"c:/Users/APC/Downloads/work/agent_test/asset/images/icon_commitment_3.png\" \"https://www.figma.com/api/mcp/asset/ad1d1545-2457-4297-9260-befa7a7ae7c3\" -w \"%{http_code}\")",
|
||||||
|
"Bash(curl -s -o \"c:/Users/APC/Downloads/work/agent_test/asset/images/icon_commitment_4.png\" \"https://www.figma.com/api/mcp/asset/8ccb7b02-0447-4725-9436-399b0fdcdea2\" -w \"%{http_code}\")",
|
||||||
|
"Bash(mv icon_commitment_1.png icon_commitment_1.svg)",
|
||||||
|
"Bash(mv icon_commitment_2.png icon_commitment_2.svg)",
|
||||||
|
"Bash(mv icon_commitment_3.png icon_commitment_3.svg)",
|
||||||
|
"Bash(mv icon_commitment_4.png icon_commitment_4.svg)"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
5
asset/images/icon_commitment_1.svg
Normal file
5
asset/images/icon_commitment_1.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="fluent:archive-arrow-back-20-regular">
|
||||||
|
<path id="Vector" d="M11.9 14C11.7143 14 11.5363 14.0737 11.405 14.205C11.2737 14.3363 11.2 14.5143 11.2 14.7C11.2 14.8857 11.2737 15.0637 11.405 15.195C11.5363 15.3263 11.7143 15.4 11.9 15.4H14.3598C14.798 14.868 15.3076 14.3976 15.8718 14H11.9ZM8.4 22.4H12.8898C13.0289 22.8891 13.2123 23.3557 13.44 23.8H8.4C7.28609 23.8 6.2178 23.3575 5.43015 22.5698C4.6425 21.7822 4.2 20.7139 4.2 19.6V10.9648C3.78092 10.766 3.42688 10.4523 3.17905 10.0603C2.93122 9.6682 2.79977 9.21383 2.8 8.75V6.65C2.8 5.2976 3.8976 4.2 5.25 4.2H22.75C24.1024 4.2 25.2 5.2976 25.2 6.65V8.75C25.2 9.7272 24.6274 10.57 23.8 10.9648V13.44C23.3524 13.2113 22.8835 13.0271 22.4 12.8898V11.2H5.6V19.6C5.6 20.3426 5.895 21.0548 6.4201 21.5799C6.9452 22.105 7.65739 22.4 8.4 22.4ZM5.25 5.6C4.97152 5.6 4.70445 5.71062 4.50754 5.90754C4.31062 6.10445 4.2 6.37152 4.2 6.65V8.75C4.2 9.3296 4.6704 9.8 5.25 9.8H22.75C23.0285 9.8 23.2955 9.68938 23.4925 9.49246C23.6894 9.29555 23.8 9.02848 23.8 8.75V6.65C23.8 6.37152 23.6894 6.10445 23.4925 5.90754C23.2955 5.71062 23.0285 5.6 22.75 5.6H5.25ZM20.3 26.6C21.9709 26.6 23.5733 25.9363 24.7548 24.7548C25.9363 23.5733 26.6 21.9709 26.6 20.3C26.6 18.6291 25.9363 17.0267 24.7548 15.8452C23.5733 14.6637 21.9709 14 20.3 14C18.6291 14 17.0267 14.6637 15.8452 15.8452C14.6637 17.0267 14 18.6291 14 20.3C14 21.9709 14.6637 23.5733 15.8452 24.7548C17.0267 25.9363 18.6291 26.6 20.3 26.6ZM19.0456 17.6456L17.7898 18.9H19.95C20.9711 18.9 21.9503 19.3056 22.6724 20.0276C23.3944 20.7497 23.8 21.7289 23.8 22.75V23.1C23.8 23.2857 23.7263 23.4637 23.595 23.595C23.4637 23.7263 23.2857 23.8 23.1 23.8C22.9143 23.8 22.7363 23.7263 22.605 23.595C22.4737 23.4637 22.4 23.2857 22.4 23.1V22.75C22.4 22.1002 22.1419 21.4771 21.6824 21.0176C21.2229 20.5581 20.5998 20.3 19.95 20.3H17.7898L19.0456 21.5544C19.177 21.6858 19.2509 21.8641 19.2509 22.05C19.2509 22.2359 19.177 22.4142 19.0456 22.5456C18.9142 22.677 18.7359 22.7509 18.55 22.7509C18.3641 22.7509 18.1858 22.677 18.0544 22.5456L15.6016 20.0914C15.4716 19.9599 15.3989 19.7823 15.3994 19.5973C15.4 19.4124 15.4737 19.2352 15.6044 19.1044L18.0544 16.6544C18.1858 16.523 18.3641 16.4491 18.55 16.4491C18.7359 16.4491 18.9142 16.523 19.0456 16.6544C19.177 16.7858 19.2509 16.9641 19.2509 17.15C19.2509 17.3359 19.177 17.5142 19.0456 17.6456Z" fill="var(--fill-0, #0084FF)"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
6
asset/images/icon_commitment_2.svg
Normal file
6
asset/images/icon_commitment_2.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="carbon:security">
|
||||||
|
<path id="Vector" d="M12.25 14.5162L9.98375 12.25L8.75 13.4837L12.25 16.9837L19.25 9.98375L18.0163 8.75L12.25 14.5162Z" fill="var(--fill-0, #0084FF)"/>
|
||||||
|
<path id="Vector_2" d="M14 26.25L8.596 23.3686C7.05529 22.5492 5.76687 21.3256 4.86905 19.8292C3.97124 18.3328 3.49795 16.6201 3.5 14.875V3.5C3.5 3.03587 3.68437 2.59075 4.01256 2.26256C4.34075 1.93437 4.78587 1.75 5.25 1.75H22.75C23.2141 1.75 23.6592 1.93437 23.9874 2.26256C24.3156 2.59075 24.5 3.03587 24.5 3.5V14.875C24.502 16.6201 24.0288 18.3328 23.1309 19.8292C22.2331 21.3256 20.9447 22.5492 19.404 23.3686L14 26.25ZM5.25 3.5V14.875C5.24903 16.3027 5.63664 17.7038 6.37129 18.928C7.10595 20.1522 8.15993 21.1534 9.42025 21.8242L14 24.2664L18.5797 21.8251C19.8402 21.1542 20.8943 20.1529 21.6289 18.9285C22.3636 17.7041 22.7511 16.3029 22.75 14.875V3.5H5.25Z" fill="var(--fill-0, #0084FF)"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
5
asset/images/icon_commitment_3.svg
Normal file
5
asset/images/icon_commitment_3.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="si:info-line">
|
||||||
|
<path id="Vector" d="M14 9.33333H14.0093M14 18.6667V12.8333M25.6667 14C25.6667 20.4435 20.4435 25.6667 14 25.6667C7.5565 25.6667 2.33333 20.4435 2.33333 14C2.33333 7.5565 7.5565 2.33333 14 2.33333C20.4435 2.33333 25.6667 7.5565 25.6667 14Z" stroke="var(--stroke-0, #0084FF)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 570 B |
5
asset/images/icon_commitment_4.svg
Normal file
5
asset/images/icon_commitment_4.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="carbon:build-image">
|
||||||
|
<path id="Vector" d="M26.25 21.875V20.125H24.4125C24.325 19.6 24.0625 19.075 23.8 18.55L25.1125 17.2375L23.8875 16.0125L22.575 17.325C22.1375 17.0625 21.6125 16.8 21 16.7125V14.875H19.25V16.7125C18.725 16.8 18.2 17.0625 17.675 17.325L16.3625 16.0125L15.1375 17.2375L16.45 18.55C16.1875 18.9875 15.925 19.5125 15.8375 20.125H14V21.875H15.8375C15.925 22.4 16.1875 22.925 16.45 23.45L15.1375 24.7625L16.3625 25.9875L17.675 24.675C18.1125 24.9375 18.6375 25.2 19.25 25.2875V27.125H21V25.2875C21.525 25.2 22.05 24.9375 22.575 24.675L23.8875 25.9875L25.1125 24.7625L23.8 23.45C24.0625 23.0125 24.325 22.4875 24.4125 21.875H26.25ZM20.125 23.625C18.6375 23.625 17.5 22.4875 17.5 21C17.5 19.5125 18.6375 18.375 20.125 18.375C21.6125 18.375 22.75 19.5125 22.75 21C22.75 22.4875 21.6125 23.625 20.125 23.625ZM18.7994 6.23525L10.9244 1.86025C10.7945 1.78824 10.6485 1.75045 10.5 1.75045C10.3515 1.75045 10.2055 1.78824 10.0756 1.86025L2.20063 6.23525C2.06413 6.31095 1.95037 6.42177 1.87114 6.55624C1.79191 6.69071 1.75008 6.84392 1.75 7V15.75C1.74999 15.906 1.79169 16.0591 1.87076 16.1936C1.94984 16.3281 2.06342 16.4389 2.19975 16.5148L10.0747 20.8898C10.2079 20.9638 10.3582 21.0018 10.5106 21C10.663 20.9981 10.8122 20.9565 10.9436 20.8793C11.075 20.802 11.1839 20.6918 11.2595 20.5595C11.3352 20.4272 11.375 20.2774 11.375 20.125V11.8895L17.5 8.4875V12.25H19.25V7C19.2499 6.84392 19.2081 6.69071 19.1289 6.55624C19.0496 6.42177 18.9359 6.31095 18.7994 6.23525ZM10.5 3.626L16.5734 7L10.5 10.374L4.4275 7L10.5 3.626ZM3.5 15.2346V8.4875L9.625 11.8913V18.6375L3.5 15.2346Z" fill="var(--fill-0, #0084FF)"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
432
data/article/detail.php
Normal file
432
data/article/detail.php
Normal file
@@ -0,0 +1,432 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return array(
|
||||||
|
'keywords' => '',
|
||||||
|
'description' => 'Hiện nay, sự phát triển của các tựa game mobile đang càng ngày càng thịnh hành, nhu cầu chơi game của anh em không còn gói gọn trên chiếc điện thoại của mình nữa.',
|
||||||
|
'title' => '7 phần mềm giả lập Android tốt nhất 2020',
|
||||||
|
'canonical' => 'https://demopc8.hurasoft.com/phan-mem-gia-lap-android',
|
||||||
|
'image' => '/media/news/276_8_best_features_of_bluestacks_4_2.jpg',
|
||||||
|
'article_detail' => array(
|
||||||
|
'id' => 276,
|
||||||
|
'title' => '7 phần mềm giả lập Android tốt nhất 2020',
|
||||||
|
'summary' => 'Hiện nay, sự phát triển của các tựa game mobile đang càng ngày càng thịnh hành, nhu cầu chơi game của anh em không còn gói gọn trên chiếc điện thoại của mình nữa.',
|
||||||
|
'type' => 'article',
|
||||||
|
'content' => '<p style="text-align: justify;">Hiện nay, sự phát triển của các tựa game mobile đang càng ngày càng thịnh hành, nhu cầu chơi game của anh em không còn gói gọn trên chiếc điện thoại của mình nữa. Vì vậy, các <em><strong><a href="https://hoanghapc.vn/phan-mem-gia-lap-android">phần mềm giả lập</a> trên PC</strong></em> được sinh ra với vai trò giúp tiện lợi hơn trong việc giải trí, cũng như đua top mà không phải lo việc hết pin hay nóng máy như điện thoại. Sau đây <strong>Hoàng Hà PC</strong> sẽ chia sẻ với anh em 7 phần mềm giả lập tối ưu nhất cho PC:</p>
|
||||||
|
<h3><span style="font-size: 12pt;">1. Phần mềm giả lập Bluestacks </span></h3>
|
||||||
|
<p style="text-align: justify;">Có thể nói <strong>Bluestacks</strong> là cái tên nổi tiếng nhất trong mảng giả lập Android, không chỉ chạy được trên hệ điều hành Windows mà còn tương thích với MacOS. Nhìn chung Bluestacks mang tới sự ổn định cao và tương thích tốt với hầu hết các ứng dụng có trên android.</p>
|
||||||
|
<p style="text-align: justify;">Điểm lợi của <strong>Bluestacks</strong> còn nằm ở việc cài sẵn cửa hàng ứng dụng Google Play Store, hỗ trợ apk, cho phép stream game lên nền tảng mạng xã hội,... Và từ bản Bluestacks 4 trở đi, người dùng có thể chơi nhiều game cùng lúc hay chơi cùng một game nhưng nhiều tab. </p>
|
||||||
|
<p style="text-align: justify;">Tuy nhiên điểm bất lợi của Bluestacks chính là việc phần mềm giả lập Android này nặng nhất trong danh sách 10 phần mềm chạy android trên PC, yêu cầu cấu hình máy khá cao dựa trên nhu cầu của người dùng hay ứng dụng họ sử dụng để có thể sử dụng tốt ứng dụng Bluestacks. </p>
|
||||||
|
<p style="text-align: justify;">Các bạn có thể tải ứng dụng Bluestacks tại đây: <span style="color: #ff0000;"><strong><a style="color: #ff0000;" href="https://www.bluestacks.com/vi/index.html" target="blank" rel="nofollow">https://www.bluestacks.com/vi/index.html</a></strong></span></p>
|
||||||
|
<p><span style="font-size: 12pt;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/media/news/3108_8-best-features-of-bluestacks-4-2.jpg" alt="phần mềm giả lập Android tốt nhất 2020" width="807" height="454" /></span></p>
|
||||||
|
<h3 id="mcetoc_1bsnd0ltj2" style="text-align: justify;"><span style="font-size: 12pt;">2. Phần mềm giả lập NoxPlayer </span></h3>
|
||||||
|
<p style="text-align: justify;">Tiếp theo là <strong>NoxPlayer</strong>, giống như <strong>BlueStacks</strong>, Nox là một trong những giả lập Android tốt nhất hiện nay cho máy tính được thiết kế để phục vụ cho các game thủ. NoxPlayer cho phép người dùng bổ sung thêm tính năng sử dụng bàn phím, chuột. Ví dụ như anh em có thể vuốt sang phải bằng mũi tên bên phải hoặc thiết lập nút W. Điều này mang đến sự tiện lợi cho những người cày giả lập. </p>
|
||||||
|
<p style="text-align: justify;">Điểm khiến cho người dùng thích sử dụng NoxPlayer chính là giao diện thông minh, dễ sử dụng và vô cùng mượt mà. Đặc biết phần mềm này có khả năng thiết lập chạy nhiều game cùng lúc hoặc chạy 1 game, điều này tạo tiền đề vô cùng lớn cho những dân chơi chuyên nghiệp cày cuộc nhiều account để xưng bá võ lâm. Tuy nhiên, việc chạy nhiều app yêu cầu rất nhiều tài nguyên của CPU và các linh kiện khác trong máy, chưa kể để có thể tối ưu nhiều Nox cũng cần phải có hiểu biết trong việc chỉnh config giúp chạy mượt mà. </p>
|
||||||
|
<p style="text-align: justify;">Các bạn có thể tải ứng dụng NoxPlayer tại đây:<strong> <span style="color: #ff0000;"><a style="color: #ff0000;" href="https://vn.bignox.com/">https://vn.bignox.com/</a></span></strong></p>
|
||||||
|
<p> <img style="display: block; margin-left: auto; margin-right: auto;" src="/media/news/0812_phan-mem-gia-lap-nox-player.jpg" alt="" width="767" height="433" /></p>
|
||||||
|
<h3 style="text-align: justify;"><span style="font-size: 12pt;">3. Phần mềm giả lập <strong>MEmu</strong></span></h3>
|
||||||
|
<p style="text-align: justify;"><strong>MEmu</strong> là phần mềm nổi lên hiện nay với việc tương thích vô cùng tốt với hầu hết các CPU của Intel và AMD hiện nay, Nhìn chung giao diện của MEmu khá tối giản và mang lại trải nghiệm tốt. Ngoài ra MEmu đi kèm với khả năng root giúp việc mod chỉnh sửa app trở nên dễ dàng hơn.</p>
|
||||||
|
<p style="text-align: justify;">Ngoài ra <strong>Memu</strong> cũng có tính năng mở nhiều cửa sổ để chạy nhiều ứng dụng cùng lúc như NoxPlayer. Tuy nhiên vào năm 2018, MEmu đã bị dính đến việc chứa file mã độc gây ảnh hưởng tới PC cũng như tài khoản game sử dụng trong MEmu do bị tin tặc tấn công. Đây là vấn đề vô cùng lớn khiến cho người dùng không tin tưởng vào giả lập này dù tốt tới đâu.</p>
|
||||||
|
<p style="text-align: justify;"><em>Lưu ý:</em> Anh em dùng MEmu vẫn có thể yên tâm khi nhà phát triển đã liên tục khắc phục lỗi, lưu ý anh em hãy update thường xuyên để tránh trường hợp đáng tiếc xảy ra.</p>
|
||||||
|
<p style="text-align: justify;">Các bạn có thể tải ứng dụng MEmu tại đây:<strong> <span style="color: #ff0000;"><a style="color: #ff0000;" href="https://www.memuplay.com/" target="blank" rel="nofollow">https://www.memuplay.com/</a></span></strong></p>
|
||||||
|
<p><span style="font-size: 12pt;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/media/news/3108_memu1.jpg" alt="phần mềm giả lập Android tốt nhất" width="740" height="460" /></span></p>
|
||||||
|
<h3 style="text-align: justify;"><span style="font-size: 12pt;">4. Phần mềm giả lập LDPlayer</span></h3>
|
||||||
|
<p style="text-align: justify;">LDPlayer là trình giả lập Android mới phổ biến gấn đây và được rất nhiều người dùng Việt Nam yêu thích. Đó là việc LDPlayer khá ổn định, tích hợp sẵn Google Play Store và dễ dàng tải và cài đặt các ứng dụng Android yêu thích trên máy tính.</p>
|
||||||
|
<p style="text-align: justify;">Tương tự như Nox và Memu, LDPlayer cũng cho phép mở nhiều cửa sổ để chạy ứng dụng, game cùng lúc. Đặc điểm tương thích tốt với hệ thống giúp cho việc trải nghiệm game trên LDPlayer mượt mà.</p>
|
||||||
|
<p style="text-align: justify;">Các bạn có thể tải ứng dụng LDPLayer tại đây:<strong> <span style="color: #ff0000;"><a style="color: #ff0000;" href="https://vn.ldplayer.net/" target="blank" rel="nofollow">https://vn.ldplayer.net/</a></span></strong></p>
|
||||||
|
<p><span style="font-size: 12pt;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/media/news/3108_ldplayer-free-android-emulator-for-pc-image.jpg" alt="phần mềm giả lập Android tốt nhất" width="796" height="448" /></span></p>
|
||||||
|
<h3 id="mcetoc_1dfs77bpi0" style="text-align: justify;"><span style="font-size: 12pt;">5. Phần mềm giả lập TGB hay GameLoop</span></h3>
|
||||||
|
<p style="text-align: justify;">Nếu anh em là fan của dòng game <em>PUBG Mobile, PUBG Mobile VNG</em> thì không còn xa lạ với Tencent Gaming Buddy hay TGB, hay đã đổi tên thành GameLoop. Trình giả lập này ban đầu được tạo ra để chơi những game mobile của Tencent trên máy tính.</p>
|
||||||
|
<p style="text-align: justify;">Sau đó, hãng đã quyết định phát triển thành giả lập Android trên máy tính và trở thành một trong 10 gia lập phổ biến hiện nay. Điểm lợi của TGB hay GameLoop nằm ở việc có dung lượng vô cùng nhẹ chỉ 10MB và tập trung giả lập game. Ngoài ra TGB cũng tối ưu phím bấm của PC giúp game thủ thoải mái sử dụng mà không cần phải cài đặt mod để chạy phím và chuột.</p>
|
||||||
|
<p style="text-align: justify;">Tuy nhiên điểm trừ của sản phẩm này nằm ở việc không được tích hợp <em>Google Play Store</em> và anh em buộc phải tìm file apk để tải. Còn lại mọi thứ trên GameLoop đều khá dễ sử dụng và có sẵn tiếng Việt cho anh em dùng.</p>
|
||||||
|
<p style="text-align: justify;">Các bạn có thể tải ứng dụng LDPLayer tại đây:<strong> <span style="color: #ff0000;"><a style="color: #ff0000;" href="https://gameloop.fun/vi" target="blank" rel="nofollow">https://gameloop.fun/vi</a></span></strong></p>
|
||||||
|
<p><span style="font-size: 12pt;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/media/news/3108_gameloop1.png" alt="phần mềm giả lập Android tốt nhất" width="801" height="465" /></span></p>
|
||||||
|
<h3 style="text-align: justify;"><span style="font-size: 12pt;">6. Phần mềm giả lập KoPlayer</span></h3>
|
||||||
|
<p style="text-align: justify;"><strong>KoPlayer</strong> là trình giả lập nhắm tới đối tượng là những game thủ khi cho phép bật tắt 2 chế độ là Speed (tốc độ) và Compatibility (tương thích). Với chế độ Speed, anh em sẽ được tối ưu hóa hiệu suất của trò chơi, giúp đạt được tốc độ nhanh nhất có thể. Trong khi chế độ Compatibility lại hướng tới tính ổn định cao tránh bị trồi sụt fps giúp trải nghiệm mượt mà hơn.</p>
|
||||||
|
<p style="text-align: justify;">Về tính năng, KoPlayer cũng có tính năng cho phép chạy nhiều ứng dụng android khá, cho phép sử dụng bàn phím máy tính. Nhược điểm của KoPlayer nằm ở việc ứng dụng thường hay bị treo và đôi khi bị lag dù đã bật chế độ Compatibility.</p>
|
||||||
|
<p style="text-align: justify;">Các bạn có thể tải ứng dụng LDPLayer tại đây:<span style="color: #ff0000;"><strong> <a style="color: #ff0000;" href="https://koplayerpc.com/" target="blank" rel="nofollow">https://koplayerpc.com/</a></strong></span></p>
|
||||||
|
<p><span style="font-size: 12pt;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/media/news/3108_maxresdefault.jpg" alt="phần mềm giả lập Android tốt nhất" width="805" height="453" /></span></p>
|
||||||
|
<h3 style="text-align: justify;"><span style="font-size: 12pt;">7. Phần mềm giả lập Genymotion</span></h3>
|
||||||
|
<p style="text-align: justify;">Khác với những giả lập ở phía trên, Genymotion hướng tới người dùng là các nhà phát triển muốn thử nghiệm ứng dụng hay trò chơi của mình trên một loạt các thiết bị Android mà không cần phải sở hữu chúng. Cụ thể Genymotion có thể thiết lập biến thành 1 chiếc Nexus 6 với Android 6.0 hay chuyển đổi nó thành một chiếc Samsung Galaxy S7 một cách dễ dàng.</p>
|
||||||
|
<p style="text-align: justify;">Vì đây là phần mềm dành cho nhà phát triển, nên Genymotion khá là phức tạp trong khâu cài đặt và khó sử dụng hơn so với các phần mềm giả lập ở phía trên. Vì thế đây không phải là lựa chọn tốt cho những người muốn cày game đặc biệt là nhiều game cùng lúc hay cài đặt những ứng dụng khác. Dù sao đây cũng là ứng dụng miễn phí nên anh em có thể dùng thử để trải nghiệm.</p>
|
||||||
|
<p style="text-align: justify;">Các bạn có thể tải ứng dụng LDPLayer tại đây:<span style="color: #ff0000;"><strong> <span style="color: #ff0000;"><a style="color: #ff0000;" href="https://www.genymotion.com/download/" target="blank" rel="nofollow">https://www.genymotion.com/download/</a></span></strong></span></p>
|
||||||
|
<p><span style="font-size: 12pt;"><img style="display: block; margin-left: auto; margin-right: auto;" src="/media/news/3108_Genymotion-player-3.0.jpg" alt="phần mềm giả lập Android tốt nhất" width="824" height="464" /><br /></span></p>
|
||||||
|
<p><span style="font-size: 14pt;"><strong>Các cấu hình máy tính NoxPlayer:</strong></span></p>
|
||||||
|
<p style="text-align: justify;"><strong>Hoàng Hà PC</strong> sẽ cho khách hàng chạy thử tại cửa hàng hoặc TeamView hay Zalo Live Camera để xem trực tiếp kết quả chạy trước khi bàn giao cho khách để đúng nhu cầu chơi game của quý khách.</p>
|
||||||
|
<blockquote>
|
||||||
|
<p style="text-align: justify;"><em><strong>LƯU Ý</strong>: Có rất nhiều khách hàng tự build cấu hình giống như những cấu hình mà Hoàng Hà PC đã đề nghị từ những người bán khác, tuy nhiên khi chạy thì chỉ chạy được hơn 10 nox là bị giật và đã gọi điện nhờ Hoàng Hà PC hỗ trợ. Hoàng Hà PC thành thật không thể hỗ trợ bởi vì cấu hình khách tự build bên ngoài không đáp ứng được tiêu chuẩn của Hoàng Hà PC đề ra (MAIN SERVER, NGUỒN SERVER,....)</em></p>
|
||||||
|
</blockquote>
|
||||||
|
<p><strong>Ngoài ra các bạn tham khảo thêm các cấu hình máy tính chạy giả lập Android khác tại: <span style="color: #ff0000;"><a style="color: #ff0000;" href="https://hoanghapc.vn/server-may-ao-gia-lap">https://hoanghapc.vn/server-may-ao-gia-lap</a></span></strong></p>
|
||||||
|
<h2><strong>Tổng kết:</strong></h2>
|
||||||
|
<p style="text-align: justify;">Nhìn chung 7 giả lập trên đều có những ưu và nhược điểm. Chúng đều là phần mềm miễn phí nên anh em có thể trải nghiệm để xem đâu là phần mềm phù hợp nhất nhé. Nếu là game thủ muốn dùng nhiều ứng dụng game hay mở nhiều cửa sổ để cày 1 game, chắc chắn NoxPlayer là lựa chọn hoàn hảo nhất hiện nay. </p>
|
||||||
|
<p style="text-align: justify;">Xem Thêm:<em> <span style="color: #ff0000;"><strong><a style="color: #ff0000;" href="https://hoanghapc.vn/cau-hinh-may-tinh-dung-phim">Cấu Hình máy tính dựng phim, edit video chuyên nghiệp</a></strong></span></em></p>',
|
||||||
|
'article_category' => array(
|
||||||
|
'0' => 22,
|
||||||
|
),
|
||||||
|
'image_background' => '',
|
||||||
|
'extend' => '',
|
||||||
|
'meta_title' => '',
|
||||||
|
'meta_keywords' => '',
|
||||||
|
'meta_description' => '',
|
||||||
|
'album_id' => 0,
|
||||||
|
'url' => '/phan-mem-gia-lap-android',
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'allow_se_index' => 1,
|
||||||
|
'url_canonical' => '',
|
||||||
|
'tags' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'article_time' => '',
|
||||||
|
'relate_article' => '',
|
||||||
|
'visit' => 930,
|
||||||
|
'createDate' => '26-08-2020, 10:26 am',
|
||||||
|
'lastUpdate' => '08-12-2020, 3:28 pm',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_276_8_best_features_of_bluestacks_4_2.jpg',
|
||||||
|
'original' => '/media/news/276_8_best_features_of_bluestacks_4_2.jpg',
|
||||||
|
),
|
||||||
|
'image_list' => array(
|
||||||
|
'0' => array(
|
||||||
|
'caption' => 0,
|
||||||
|
'file_location' => '/media/news/0812_phan-mem-gia-lap-nox-player.jpg',
|
||||||
|
),
|
||||||
|
'1' => array(
|
||||||
|
'caption' => 0,
|
||||||
|
'file_location' => '/media/news/3108_Genymotion-player-3.0.jpg',
|
||||||
|
),
|
||||||
|
'2' => array(
|
||||||
|
'caption' => 0,
|
||||||
|
'file_location' => '/media/news/3108_maxresdefault.jpg',
|
||||||
|
),
|
||||||
|
'3' => array(
|
||||||
|
'caption' => 0,
|
||||||
|
'file_location' => '/media/news/3108_gameloop1.png',
|
||||||
|
),
|
||||||
|
'4' => array(
|
||||||
|
'caption' => 0,
|
||||||
|
'file_location' => '/media/news/3108_ldplayer-free-android-emulator-for-pc-image.jpg',
|
||||||
|
),
|
||||||
|
'5' => array(
|
||||||
|
'caption' => 0,
|
||||||
|
'file_location' => '/media/news/3108_memu1.jpg',
|
||||||
|
),
|
||||||
|
'6' => array(
|
||||||
|
'caption' => 0,
|
||||||
|
'file_location' => '/media/news/3108_content1.jpg',
|
||||||
|
),
|
||||||
|
'7' => array(
|
||||||
|
'caption' => 0,
|
||||||
|
'file_location' => '/media/news/3108_8-best-features-of-bluestacks-4-2.jpg',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'categoryInfo' => array(
|
||||||
|
'0' => array(
|
||||||
|
'id' => 22,
|
||||||
|
'type' => 'article',
|
||||||
|
'catPath' => ':22:20',
|
||||||
|
'childListId' => 22,
|
||||||
|
'sellerId' => 0,
|
||||||
|
'url' => 'thu-thuat-phan-mem',
|
||||||
|
'url_hash' => '1e21ef13f20602c09119b79963c93e65',
|
||||||
|
'name' => 'Thủ Thuật Phần Mềm',
|
||||||
|
'summary' => '',
|
||||||
|
'description' => '',
|
||||||
|
'isParent' => 0,
|
||||||
|
'imgUrl' => '',
|
||||||
|
'parentId' => 20,
|
||||||
|
'status' => 1,
|
||||||
|
'ordering' => 0,
|
||||||
|
'item_count' => 13,
|
||||||
|
'display_option' => 'child_article',
|
||||||
|
'createDate' => '2020-12-08 09:32:18',
|
||||||
|
'createBy' => 8,
|
||||||
|
'lastUpdate' => '2020-12-08 09:32:27',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'meta_title' => 'Thủ Thuật Phần Mềm | Máy Tính, Tin Học Hay',
|
||||||
|
'meta_keyword' => '',
|
||||||
|
'meta_description' => 'Chia sẻ những thủ thuật sử dụng phần mềm hay và thú vị mà Hoàng Hà PC tổng hợp được. Tổng hợp thủ thuật phần mềm Ai, Pts, Au,...',
|
||||||
|
'request_path' => '/thu-thuat-phan-mem',
|
||||||
|
'relate_product' => '',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'articlePath' => array(
|
||||||
|
'0' => array(
|
||||||
|
'path' => array(
|
||||||
|
'0' => array(
|
||||||
|
'id' => 20,
|
||||||
|
'url' => '/blog',
|
||||||
|
'name' => 'Blog Thủ Thuật Công Nghệ',
|
||||||
|
),
|
||||||
|
'1' => array(
|
||||||
|
'id' => 22,
|
||||||
|
'url' => '/thu-thuat-phan-mem',
|
||||||
|
'name' => 'Thủ Thuật Phần Mềm',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'path_url' => '<a href="/blog">Blog Thủ Thuật Công Nghệ</a> >> <a href="/thu-thuat-phan-mem">Thủ Thuật Phần Mềm</a>',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'related' => array(
|
||||||
|
),
|
||||||
|
'tag_list' => array(
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'article_other_same_category' => array(
|
||||||
|
'new' => array(
|
||||||
|
'406' => array(
|
||||||
|
'id' => 406,
|
||||||
|
'title' => '5 Phần Mềm Đổi Đuôi Video Đơn Giản Và Chất Lượng Nhất 2021',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Hoàng Hà PC giới thiệu các công cụ phần mềm đổi đuôi Video miễn phí, hỗ trợ chuyển đổi video, Audio tốc độ cao trên máy tính,...',
|
||||||
|
'createDate' => '08-12-2020, 11:00 am',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '11-12-2020, 5:10 pm',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'visit' => 89,
|
||||||
|
'is_featured' => 0,
|
||||||
|
'lastUpdateByUser' => 'Admin',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'counter' => 10,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_406_phan_mem_doi_duoi_video_1.png',
|
||||||
|
'original' => '/media/news/406_phan_mem_doi_duoi_video_1.png',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'405' => array(
|
||||||
|
'id' => 405,
|
||||||
|
'title' => '7 Phần Mềm Xem Video Cho PC Miễn Phí Tốt Nhất 2021',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Đáp ứng nhu cầu xem video giải trí ngày càng cao của người dùng, Hoàng Hà PC đã tổng hợp lại Top phần mềm xem video chất lượng nhất hiện nay',
|
||||||
|
'createDate' => '08-12-2020, 9:21 am',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '11-12-2020, 11:58 am',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'visit' => 117,
|
||||||
|
'is_featured' => 0,
|
||||||
|
'lastUpdateByUser' => 'Admin',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'counter' => 9,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_405_phan_mem_xem_video_4.png',
|
||||||
|
'original' => '/media/news/405_phan_mem_xem_video_4.png',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'403' => array(
|
||||||
|
'id' => 403,
|
||||||
|
'title' => 'Cách Mở Nhiều Giả Lập Noxplayer Cùng Lúc',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Trình giả lập Noxplayer giúp người dùng có thể mở và sử dụng cùng lúc nhiều phần mềm ứng dụng khác nhau trên máy tính.',
|
||||||
|
'createDate' => '07-12-2020, 2:30 pm',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '08-12-2020, 3:41 pm',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'visit' => 48,
|
||||||
|
'is_featured' => 0,
|
||||||
|
'lastUpdateByUser' => 'Admin',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'counter' => 8,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_403_phan_mem_gia_lap_nox_player.jpg',
|
||||||
|
'original' => '/media/news/403_phan_mem_gia_lap_nox_player.jpg',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'402' => array(
|
||||||
|
'id' => 402,
|
||||||
|
'title' => '7 Phần Mềm Chỉnh Sửa Video Tốt Nhất 2021',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Top các phần mềm chỉnh sửa video tốt nhất giúp người dùng tạo ra những video mượt mà, chất lượng không thể bỏ qua.',
|
||||||
|
'createDate' => '03-12-2020, 4:38 pm',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '08-12-2020, 11:34 am',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'visit' => 71,
|
||||||
|
'is_featured' => 0,
|
||||||
|
'lastUpdateByUser' => 'Admin',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'counter' => 7,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_402_phan_mem_chinh_sua_video_5.jpg',
|
||||||
|
'original' => '/media/news/402_phan_mem_chinh_sua_video_5.jpg',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'393' => array(
|
||||||
|
'id' => 393,
|
||||||
|
'title' => '6 Trình Duyệt Web Tốt Nhất 2021 Bạn Nên Tham Khảo',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Bạn có muốn lựa chọn một trình duyệt phù hợp cho máy tính? Hoàng Hà PC sẽ gợi ý cho bạn top 6 trình duyệt web tốt nhất 2020 nhé!',
|
||||||
|
'createDate' => '30-11-2020, 2:41 pm',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '08-12-2020, 11:49 am',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'visit' => 82,
|
||||||
|
'is_featured' => 1,
|
||||||
|
'lastUpdateByUser' => 'Admin',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'counter' => 6,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_393_top_trinh_duyet_web_4.jpg',
|
||||||
|
'original' => '/media/news/393_top_trinh_duyet_web_4.jpg',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'392' => array(
|
||||||
|
'id' => 392,
|
||||||
|
'title' => '5 Cách Tải Mp3 Từ Youtube Đơn Giản Ai Cũng Làm Được',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Tải mp3 từ youtube sẽ cho bạn một kho nhạc phong phú và không giới hạn. Vì thế, Hoàng Hà PC sẽ gợi ý cho bạn 5 cách tải nhạc đơn giản và nhanh chóng nhé!',
|
||||||
|
'createDate' => '30-11-2020, 1:16 pm',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '08-12-2020, 1:15 pm',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'visit' => 107,
|
||||||
|
'is_featured' => 0,
|
||||||
|
'lastUpdateByUser' => 'Admin',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'counter' => 5,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_392_tai_mp3_tu_youtube_6.png',
|
||||||
|
'original' => '/media/news/392_tai_mp3_tu_youtube_6.png',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'389' => array(
|
||||||
|
'id' => 389,
|
||||||
|
'title' => 'Top 10 Game Offline Hay Cho Android Có Thể Bạn Chưa Biết 2021',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Hoàng Hà PC sẽ giới thiệu đến bạn 10 tựa game offline hay cho Android của bạn. Hãy thử trải nghiệm những tựa game hấp dẫn dưới đây nhé!',
|
||||||
|
'createDate' => '30-11-2020, 9:28 am',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '09-12-2020, 9:46 am',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'visit' => 109,
|
||||||
|
'is_featured' => 0,
|
||||||
|
'lastUpdateByUser' => 'Admin',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'counter' => 4,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_389_game_offline_hay_cho_android_1.jpg',
|
||||||
|
'original' => '/media/news/389_game_offline_hay_cho_android_1.jpg',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'386' => array(
|
||||||
|
'id' => 386,
|
||||||
|
'title' => '5 Phần Mềm Ghép Video Online Hot Nhất 2021',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Phần mềm ghép video online là công cụ chỉnh sửa video phổ biến nhất hiện nay. Hãy cùng chúng tôi tìm hiểu top 5 phần mềm phổ biến nhất qua bài viết sau nhé.',
|
||||||
|
'createDate' => '27-11-2020, 2:52 pm',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '09-12-2020, 10:29 am',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'visit' => 75,
|
||||||
|
'is_featured' => 0,
|
||||||
|
'lastUpdateByUser' => 'Admin',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'counter' => 3,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_386_phan_mem_ghep_video_online_3.jpg',
|
||||||
|
'original' => '/media/news/386_phan_mem_ghep_video_online_3.jpg',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'385' => array(
|
||||||
|
'id' => 385,
|
||||||
|
'title' => '7 Phần Mềm Cẩn Thiết Cho Máy Tính PC, Laptop Win 10',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Vậy những phần mềm hay cho máy tính mà bạn nên có là? Hoàng Hà PC sẽ giới thiệu cho bạn 7 phần mềm cực kỳ hay và hữu ích cho máy tính của bạn thông qua bài viết dưới đây, hãy đón xem nhé!',
|
||||||
|
'createDate' => '27-11-2020, 2:33 pm',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '24-04-2023, 2:06 pm',
|
||||||
|
'lastUpdateBy' => 16,
|
||||||
|
'visit' => 98,
|
||||||
|
'is_featured' => 0,
|
||||||
|
'lastUpdateByUser' => 'Nguyễn An',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Nguyễn An',
|
||||||
|
'counter' => 2,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_385_phan_mem_can_thiet_cho_may_tinh.jpg',
|
||||||
|
'original' => '/media/news/385_phan_mem_can_thiet_cho_may_tinh.jpg',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'384' => array(
|
||||||
|
'id' => 384,
|
||||||
|
'title' => 'Top 6 Phần Mềm Nghe Nhạc Chuyên Nghiệp Nhất 2021',
|
||||||
|
'extend' => '',
|
||||||
|
'summary' => 'Phần mềm nghe nhạc chuyên nghiệp nổi bật nhất cũng ra đời để đáp ứng nhu cầu của người dùng mà Hoàng Hà PC muốn giới thiệu với các bạn.',
|
||||||
|
'createDate' => '27-11-2020, 1:49 pm',
|
||||||
|
'createBy' => 10,
|
||||||
|
'lastUpdate' => '08-12-2020, 2:54 pm',
|
||||||
|
'lastUpdateBy' => 8,
|
||||||
|
'visit' => 99,
|
||||||
|
'is_featured' => 0,
|
||||||
|
'lastUpdateByUser' => 'Admin',
|
||||||
|
'article_time' => '',
|
||||||
|
'review_rate' => 0,
|
||||||
|
'review_count' => 0,
|
||||||
|
'video_code' => '',
|
||||||
|
'external_url' => '',
|
||||||
|
'author' => 'Admin',
|
||||||
|
'counter' => 1,
|
||||||
|
'url' => '/article/detail',
|
||||||
|
'image' => array(
|
||||||
|
'thum' => '/media/news/120_384_vlc_media_player.jpg',
|
||||||
|
'original' => '/media/news/384_vlc_media_player.jpg',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'comment_list' => array(
|
||||||
|
),
|
||||||
|
'article_album' => 0,
|
||||||
|
);
|
||||||
1580
data/article/home.php
Normal file
1580
data/article/home.php
Normal file
File diff suppressed because it is too large
Load Diff
279
data/cart/home.php
Normal file
279
data/cart/home.php
Normal file
@@ -0,0 +1,279 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return array(
|
||||||
|
'keywords' => 'giỏ hàng',
|
||||||
|
'description' => 'Xem các sản phẩm đã thêm vào trong giỏ hàng',
|
||||||
|
'title' => 'Thông tin giỏ hàng',
|
||||||
|
'favicon' => '',
|
||||||
|
'canonical' => '',
|
||||||
|
'image' => '',
|
||||||
|
'membership_discount' => array(
|
||||||
|
'value' => 0,
|
||||||
|
'info' => '',
|
||||||
|
),
|
||||||
|
'cart_items' => array(
|
||||||
|
0 => array(
|
||||||
|
'_id' => 'product-22-0',
|
||||||
|
'item_type' => 'product',
|
||||||
|
'item_id' => '22-0',
|
||||||
|
'item_info' => array(
|
||||||
|
'id' => 22,
|
||||||
|
'priceUnit' => 'chiếc',
|
||||||
|
'marketPrice' => 0,
|
||||||
|
'hasVAT' => 0,
|
||||||
|
'weight' => 0,
|
||||||
|
'price' => 0,
|
||||||
|
'currency' => 'vnd',
|
||||||
|
'bulk_price' => array(),
|
||||||
|
'configurable' => 0,
|
||||||
|
'productName' => 'Máy quét mã vạch 1D TEKI TK500',
|
||||||
|
'productSummary' => "Máy quét mã vạch 1D chuyên dụng, đọc nhanh – chính xác các chuẩn mã phổ biến\nKiểu dáng cầm tay, thiết kế chắc chắn, dễ thao tác liên tục nhiều giờ\nKết nối có dây (USB), cắm là chạy, tương thích tốt với Windows, macOS, Linux\nTia quét đơn, tối ưu cho tem giấy, tem in nhiệt, mã in rõ\nPhù hợp cửa hàng bán lẻ, siêu thị mini, nhà thuốc, kho hàng, bưu cục\nĐộ bền cao, hoạt động ổn định, chi phí đầu tư hợp lý",
|
||||||
|
'productImage' => array(
|
||||||
|
'small' => 'https://miq.vn/media/product/75_22_teki_tk500.jpg',
|
||||||
|
'large' => 'https://miq.vn/media/product/250_22_teki_tk500.jpg',
|
||||||
|
'original' => '',
|
||||||
|
),
|
||||||
|
'productUrl' => '/may-quet-ma-vach-1d-teki-tk500',
|
||||||
|
'brand' => array(
|
||||||
|
'id' => 246,
|
||||||
|
'brand_index' => 'teki',
|
||||||
|
'name' => 'TEKI',
|
||||||
|
'image' => '/media/brand/LOGO-TEKI.jpg',
|
||||||
|
'url' => '/brand/teki',
|
||||||
|
),
|
||||||
|
'productSKU' => 'TK500',
|
||||||
|
'quantity' => 1,
|
||||||
|
'addon' => array(),
|
||||||
|
'condition' => 0,
|
||||||
|
'warranty' => '',
|
||||||
|
'variants' => array(),
|
||||||
|
'variant_option' => array(),
|
||||||
|
'extend' => array(
|
||||||
|
'faq' => array(),
|
||||||
|
),
|
||||||
|
'categories' => array(
|
||||||
|
0 => array(
|
||||||
|
'id' => 65,
|
||||||
|
'catPath' => ':65',
|
||||||
|
'name' => 'Mã số mã vạch',
|
||||||
|
'url' => '/ma-so-ma-vach',
|
||||||
|
),
|
||||||
|
1 => array(
|
||||||
|
'id' => 66,
|
||||||
|
'catPath' => ':66:65',
|
||||||
|
'name' => 'Máy quét mã vạch',
|
||||||
|
'url' => '/may-quet-ma-vach',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'specialOffer' => array(
|
||||||
|
'all' => array(),
|
||||||
|
),
|
||||||
|
'specialOfferGroup' => array(),
|
||||||
|
'sale_rules' => array(
|
||||||
|
'price' => 0,
|
||||||
|
'normal_price' => 0,
|
||||||
|
'min_purchase' => 1,
|
||||||
|
'max_purchase' => 1,
|
||||||
|
'remain_quantity' => 1,
|
||||||
|
'from_time' => 0,
|
||||||
|
'to_time' => 0,
|
||||||
|
'type' => '',
|
||||||
|
),
|
||||||
|
'variant_info' => '',
|
||||||
|
),
|
||||||
|
'in_cart' => array(
|
||||||
|
'quantity' => 1,
|
||||||
|
'addon' => array(),
|
||||||
|
'price' => 0,
|
||||||
|
'total_price' => 0,
|
||||||
|
'weight' => 0,
|
||||||
|
'total_weight' => 0,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
1 => array(
|
||||||
|
'_id' => 'product-2-0',
|
||||||
|
'item_type' => 'product',
|
||||||
|
'item_id' => '2-0',
|
||||||
|
'item_info' => array(
|
||||||
|
'id' => 2,
|
||||||
|
'priceUnit' => 'chiếc',
|
||||||
|
'marketPrice' => 2055000,
|
||||||
|
'hasVAT' => 0,
|
||||||
|
'weight' => 0,
|
||||||
|
'price' => 1850000,
|
||||||
|
'currency' => 'vnd',
|
||||||
|
'bulk_price' => array(),
|
||||||
|
'configurable' => 0,
|
||||||
|
'productName' => 'Máy Quét Mã Vạch Symbol LS2208',
|
||||||
|
'productSummary' => "Máy quét mã vạch 1D – đơn tia laser\nThiết kế cầm tay – có dây – bền bỉ\nTốc độ quét nhanh, chính xác, ít lỗi\nHoạt động ổn định trong môi trường bán lẻ & kho vận\nTương thích tốt với POS, phần mềm bán hàng, kho\nĐược tin dùng nhiều năm trên thị trường toàn cầu",
|
||||||
|
'productImage' => array(
|
||||||
|
'small' => 'https://miq.vn/media/product/75_2_ls2208.jpg',
|
||||||
|
'large' => 'https://miq.vn/media/product/250_2_ls2208.jpg',
|
||||||
|
'original' => '',
|
||||||
|
),
|
||||||
|
'productUrl' => '/may-quet-ma-vach-symbol-ls2208-chinh-hang-ben-bi-quet-nhanh',
|
||||||
|
'brand' => array(
|
||||||
|
'id' => 209,
|
||||||
|
'brand_index' => 'zebra',
|
||||||
|
'name' => 'Zebra',
|
||||||
|
'image' => '/media/brand/ZEBRALOGO.jpg',
|
||||||
|
'url' => '/brand/zebra',
|
||||||
|
),
|
||||||
|
'productSKU' => 'LS2208',
|
||||||
|
'quantity' => 1,
|
||||||
|
'addon' => array(),
|
||||||
|
'condition' => 0,
|
||||||
|
'warranty' => '',
|
||||||
|
'variants' => array(),
|
||||||
|
'variant_option' => array(),
|
||||||
|
'extend' => array(
|
||||||
|
'faq' => array(),
|
||||||
|
),
|
||||||
|
'categories' => array(
|
||||||
|
0 => array(
|
||||||
|
'id' => 66,
|
||||||
|
'catPath' => ':66:65',
|
||||||
|
'name' => 'Máy quét mã vạch',
|
||||||
|
'url' => '/may-quet-ma-vach',
|
||||||
|
),
|
||||||
|
1 => array(
|
||||||
|
'id' => 65,
|
||||||
|
'catPath' => ':65',
|
||||||
|
'name' => 'Mã số mã vạch',
|
||||||
|
'url' => '/ma-so-ma-vach',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'specialOffer' => array(
|
||||||
|
'all' => array(),
|
||||||
|
),
|
||||||
|
'specialOfferGroup' => array(),
|
||||||
|
'sale_rules' => array(
|
||||||
|
'price' => 1850000,
|
||||||
|
'normal_price' => 1850000,
|
||||||
|
'min_purchase' => 1,
|
||||||
|
'max_purchase' => 1,
|
||||||
|
'remain_quantity' => 1,
|
||||||
|
'from_time' => 0,
|
||||||
|
'to_time' => 0,
|
||||||
|
'type' => '',
|
||||||
|
),
|
||||||
|
'variant_info' => '',
|
||||||
|
),
|
||||||
|
'in_cart' => array(
|
||||||
|
'quantity' => 1,
|
||||||
|
'addon' => array(),
|
||||||
|
'price' => 1850000,
|
||||||
|
'total_price' => 1850000,
|
||||||
|
'weight' => 0,
|
||||||
|
'total_weight' => 0,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'cart_summary' => array(
|
||||||
|
'total_value' => 1850000,
|
||||||
|
'total_quantity' => 2,
|
||||||
|
'total_item' => 2,
|
||||||
|
'total_weight' => 0,
|
||||||
|
),
|
||||||
|
'shopping_cart_step' => 1,
|
||||||
|
'shipping_method' => array(),
|
||||||
|
'payment_method' => array(
|
||||||
|
0 => array(
|
||||||
|
'id' => 4,
|
||||||
|
'type' => 'cod',
|
||||||
|
'provider' => '',
|
||||||
|
'provider_settings' => '',
|
||||||
|
'title' => 'Thanh toán khi nhận hàng (COD)',
|
||||||
|
'detail' => '',
|
||||||
|
'detailHash' => 0,
|
||||||
|
'ordering' => 1,
|
||||||
|
'status' => 1,
|
||||||
|
'create_time' => 1768889536,
|
||||||
|
'create_by' => 'Kỹ thuật - hura',
|
||||||
|
'last_update' => 1768890503,
|
||||||
|
'last_update_by' => 'Kỹ thuật - hura',
|
||||||
|
),
|
||||||
|
1 => array(
|
||||||
|
'id' => 5,
|
||||||
|
'type' => 'atm',
|
||||||
|
'provider' => '',
|
||||||
|
'provider_settings' => '',
|
||||||
|
'title' => 'Chuyển khoản ngân hàng',
|
||||||
|
'detail' => "- Ngân Hàng TCMP Công Thương Việt Nam\n- Chi nhánh Thăng Long- PGD Đại An\n- Số TK : 115601856999- Tên tài khoản : CÔNG TY TNHH THUONG MAI CHICO",
|
||||||
|
'detailHash' => 0,
|
||||||
|
'ordering' => 0,
|
||||||
|
'status' => 1,
|
||||||
|
'create_time' => 1768889580,
|
||||||
|
'create_by' => 'Kỹ thuật - hura',
|
||||||
|
'last_update' => 0,
|
||||||
|
'last_update_by' => 0,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
'coupon_code' => '',
|
||||||
|
'province_list' => array(
|
||||||
|
0 => array('id' => 1, 'api_id' => 'ha-noi', 'name' => 'Hà Nội'),
|
||||||
|
1 => array('id' => 2, 'api_id' => 'tp-hcm', 'name' => 'TP HCM'),
|
||||||
|
2 => array('id' => 3, 'api_id' => 'can-tho', 'name' => 'Cần Thơ'),
|
||||||
|
3 => array('id' => 4, 'api_id' => 'da-nang', 'name' => 'Đà Nẵng'),
|
||||||
|
4 => array('id' => 5, 'api_id' => 'hai-phong', 'name' => 'Hải Phòng'),
|
||||||
|
5 => array('id' => 6, 'api_id' => 'an-giang', 'name' => 'An Giang'),
|
||||||
|
6 => array('id' => 7, 'api_id' => 'ba-ria-vung-tau', 'name' => 'Bà Rịa - Vũng Tàu'),
|
||||||
|
7 => array('id' => 8, 'api_id' => 'bac-lieu', 'name' => 'Bạc Liêu'),
|
||||||
|
8 => array('id' => 9, 'api_id' => 'bac-kan', 'name' => 'Bắc Kạn'),
|
||||||
|
9 => array('id' => 10, 'api_id' => 'bac-giang', 'name' => 'Bắc Giang'),
|
||||||
|
10 => array('id' => 11, 'api_id' => 'bac-ninh', 'name' => 'Bắc Ninh'),
|
||||||
|
11 => array('id' => 12, 'api_id' => 'ben-tre', 'name' => 'Bến Tre'),
|
||||||
|
12 => array('id' => 13, 'api_id' => 'binh-duong', 'name' => 'Bình Dương'),
|
||||||
|
13 => array('id' => 14, 'api_id' => 'binh-dinh', 'name' => 'Bình Định'),
|
||||||
|
14 => array('id' => 15, 'api_id' => 'binh-phuoc', 'name' => 'Bình Phước'),
|
||||||
|
15 => array('id' => 16, 'api_id' => 'binh-thuan', 'name' => 'Bình Thuận'),
|
||||||
|
16 => array('id' => 17, 'api_id' => 'ca-mau', 'name' => 'Cà Mau'),
|
||||||
|
17 => array('id' => 18, 'api_id' => 'cao-bang', 'name' => 'Cao Bằng'),
|
||||||
|
18 => array('id' => 19, 'api_id' => 'dak-lak', 'name' => 'Đắk Lắk'),
|
||||||
|
19 => array('id' => 20, 'api_id' => 'dak-nong', 'name' => 'Đắk Nông'),
|
||||||
|
20 => array('id' => 21, 'api_id' => 'dien-bien', 'name' => 'Điện Biên'),
|
||||||
|
21 => array('id' => 22, 'api_id' => 'dong-nai', 'name' => 'Đồng Nai'),
|
||||||
|
22 => array('id' => 23, 'api_id' => 'dong-thap', 'name' => 'Đồng Tháp'),
|
||||||
|
23 => array('id' => 24, 'api_id' => 'gia-lai', 'name' => 'Gia Lai'),
|
||||||
|
24 => array('id' => 25, 'api_id' => 'ha-giang', 'name' => 'Hà Giang'),
|
||||||
|
25 => array('id' => 26, 'api_id' => 'ha-nam', 'name' => 'Hà Nam'),
|
||||||
|
26 => array('id' => 27, 'api_id' => 'ha-tinh', 'name' => 'Hà Tĩnh'),
|
||||||
|
27 => array('id' => 28, 'api_id' => 'hai-duong', 'name' => 'Hải Dương'),
|
||||||
|
28 => array('id' => 29, 'api_id' => 'hau-giang', 'name' => 'Hậu Giang'),
|
||||||
|
29 => array('id' => 30, 'api_id' => 'hoa-binh', 'name' => 'Hòa Bình'),
|
||||||
|
30 => array('id' => 31, 'api_id' => 'hung-yen', 'name' => 'Hưng Yên'),
|
||||||
|
31 => array('id' => 32, 'api_id' => 'khanh-hoa', 'name' => 'Khánh Hòa'),
|
||||||
|
32 => array('id' => 33, 'api_id' => 'kien-giang', 'name' => 'Kiên Giang'),
|
||||||
|
33 => array('id' => 34, 'api_id' => 'kon-tum', 'name' => 'Kon Tum'),
|
||||||
|
34 => array('id' => 35, 'api_id' => 'lai-chau', 'name' => 'Lai Châu'),
|
||||||
|
35 => array('id' => 36, 'api_id' => 'lam-dong', 'name' => 'Lâm Đồng'),
|
||||||
|
36 => array('id' => 37, 'api_id' => 'lang-son', 'name' => 'Lạng Sơn'),
|
||||||
|
37 => array('id' => 38, 'api_id' => 'lao-cai', 'name' => 'Lào Cai'),
|
||||||
|
38 => array('id' => 39, 'api_id' => 'long-an', 'name' => 'Long An'),
|
||||||
|
39 => array('id' => 40, 'api_id' => 'nam-dinh', 'name' => 'Nam Định'),
|
||||||
|
40 => array('id' => 41, 'api_id' => 'nghe-an', 'name' => 'Nghệ An'),
|
||||||
|
41 => array('id' => 42, 'api_id' => 'ninh-binh', 'name' => 'Ninh Bình'),
|
||||||
|
42 => array('id' => 43, 'api_id' => 'ninh-thuan', 'name' => 'Ninh Thuận'),
|
||||||
|
43 => array('id' => 44, 'api_id' => 'phu-tho', 'name' => 'Phú Thọ'),
|
||||||
|
44 => array('id' => 45, 'api_id' => 'phu-yen', 'name' => 'Phú Yên'),
|
||||||
|
45 => array('id' => 46, 'api_id' => 'quang-binh', 'name' => 'Quảng Bình'),
|
||||||
|
46 => array('id' => 47, 'api_id' => 'quang-nam', 'name' => 'Quảng Nam'),
|
||||||
|
47 => array('id' => 48, 'api_id' => 'quang-ngai', 'name' => 'Quảng Ngãi'),
|
||||||
|
48 => array('id' => 49, 'api_id' => 'quang-ninh', 'name' => 'Quảng Ninh'),
|
||||||
|
49 => array('id' => 50, 'api_id' => 'quang-tri', 'name' => 'Quảng Trị'),
|
||||||
|
50 => array('id' => 51, 'api_id' => 'soc-trang', 'name' => 'Sóc Trăng'),
|
||||||
|
51 => array('id' => 52, 'api_id' => 'son-la', 'name' => 'Sơn La'),
|
||||||
|
52 => array('id' => 53, 'api_id' => 'tay-ninh', 'name' => 'Tây Ninh'),
|
||||||
|
53 => array('id' => 54, 'api_id' => 'thai-binh', 'name' => 'Thái Bình'),
|
||||||
|
54 => array('id' => 55, 'api_id' => 'thai-nguyen', 'name' => 'Thái Nguyên'),
|
||||||
|
55 => array('id' => 56, 'api_id' => 'thanh-hoa', 'name' => 'Thanh Hóa'),
|
||||||
|
56 => array('id' => 57, 'api_id' => 'thua-thien-hue', 'name' => 'Thừa Thiên Huế'),
|
||||||
|
57 => array('id' => 58, 'api_id' => 'tien-giang', 'name' => 'Tiền Giang'),
|
||||||
|
58 => array('id' => 59, 'api_id' => 'tra-vinh', 'name' => 'Trà Vinh'),
|
||||||
|
59 => array('id' => 60, 'api_id' => 'tuyen-quang', 'name' => 'Tuyên Quang'),
|
||||||
|
60 => array('id' => 61, 'api_id' => 'vinh-long', 'name' => 'Vĩnh Long'),
|
||||||
|
61 => array('id' => 62, 'api_id' => 'vinh-phuc', 'name' => 'Vĩnh Phúc'),
|
||||||
|
62 => array('id' => 63, 'api_id' => 'yen-bai', 'name' => 'Yên Bái'),
|
||||||
|
),
|
||||||
|
'order_special_offer' => array(),
|
||||||
|
);
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -33,9 +33,9 @@ return array (
|
|||||||
'productUrl' => '/hura-test',
|
'productUrl' => '/hura-test',
|
||||||
'productName' => 'Hura test',
|
'productName' => 'Hura test',
|
||||||
'productImage' => array (
|
'productImage' => array (
|
||||||
'small' => '/media/product/75_1_samsung_odyssey_g5.jpg',
|
'small' => 'https://miq.vn/media/product/75_1_samsung_odyssey_g5.jpg',
|
||||||
'large' => '/media/product/250_1_samsung_odyssey_g5.jpg',
|
'large' => 'https://miq.vn/media/product/250_1_samsung_odyssey_g5.jpg',
|
||||||
'original' => '/media/product/1_samsung_odyssey_g5.jpg',
|
'original' => 'https://miq.vn/media/product/1_samsung_odyssey_g5.jpg',
|
||||||
),
|
),
|
||||||
'price' => 7590000,
|
'price' => 7590000,
|
||||||
'quantity' => 1,
|
'quantity' => 1,
|
||||||
@@ -312,9 +312,9 @@ return array (
|
|||||||
'description' => '',
|
'description' => '',
|
||||||
'brand' => '',
|
'brand' => '',
|
||||||
'image' => array (
|
'image' => array (
|
||||||
'small' => '/media/product/75_1_samsung_odyssey_g5.jpg',
|
'small' => 'https://miq.vn/media/product/75_1_samsung_odyssey_g5.jpg',
|
||||||
'large' => '/media/product/250_1_samsung_odyssey_g5.jpg',
|
'large' => 'https://miq.vn/media/product/250_1_samsung_odyssey_g5.jpg',
|
||||||
'original' => '/media/product/1_samsung_odyssey_g5.jpg',
|
'original' => 'https://miq.vn/media/product/1_samsung_odyssey_g5.jpg',
|
||||||
),
|
),
|
||||||
'sku' => '',
|
'sku' => '',
|
||||||
'productID' => 1,
|
'productID' => 1,
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<?php
|
|
||||||
2
instructions/export_cart.md
Normal file
2
instructions/export_cart.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
- lấy code từ export_to_html/cart.html ghép vào template/cart/home.html
|
||||||
|
- làm chức năng tăng giảm số lượng, tính giá khi tăng giảm, xóa sản phẩm
|
||||||
@@ -1 +0,0 @@
|
|||||||
- sửa lại footer, tất cả nội dung đều là container, để style 1200px và màn 1600px , bỏ giới hạn width 1440px
|
|
||||||
@@ -2,7 +2,6 @@
|
|||||||
@https://www.figma.com/design/JmbJxl6r2KMggCtiJOc0gZ/UI--%3E-CODE-200226?node-id=7-4895&m=dev
|
@https://www.figma.com/design/JmbJxl6r2KMggCtiJOc0gZ/UI--%3E-CODE-200226?node-id=7-4895&m=dev
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Implement this design from Figma. sử dụng html + taiwindcss, dặt tên file html là category.html
|
- Implement this design from Figma. sử dụng html + taiwindcss, dặt tên file html là category.html
|
||||||
@https://www.figma.com/design/JmbJxl6r2KMggCtiJOc0gZ/UI--%3E-CODE-200226?node-id=7-1587&m=dev
|
@https://www.figma.com/design/JmbJxl6r2KMggCtiJOc0gZ/UI--%3E-CODE-200226?node-id=7-1587&m=dev
|
||||||
|
|
||||||
|
|||||||
2
instructions/exrport_article.md
Normal file
2
instructions/exrport_article.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
- lấy code từ export_to_html/home-article.html ghép vào template/article/home.html
|
||||||
|
- lấy code từ export_to_html/article-detail.html ghép vào template/article/detail.html
|
||||||
@@ -1 +1,2 @@
|
|||||||
- lấy code từ export_to_html/category.html ghép vào template/product/category.html
|
- lấy code từ export_to_html/category.html ghép vào template/product/category.html
|
||||||
|
- ghép dữ liệu từ data/product/category
|
||||||
@@ -1 +1,6 @@
|
|||||||
- lấy code từ export_to_html/product-detail.html ghép vào template/product/detail.html
|
- lấy code từ export_to_html/product-detail.html ghép vào template/product/detail.html
|
||||||
|
- ảnh sản phẩm cần làm hiệu ứng swiper Thumbs gallery, bấm ảnh thì hiển thị fancybox
|
||||||
|
- thông số kỹ thật/ mô tả sản phẩm cần chuyển tab hiển thị nội dung
|
||||||
|
- mô tả sản phẩm có nút xem thêm, thu gọn
|
||||||
|
- bấm nút thêm vào giỏ hàng thông báo mua hàng thành công
|
||||||
|
- bấm nút mua hàng thì chuyển tới trang /cart
|
||||||
283
instructions/huong_dan_tu_dong.md
Normal file
283
instructions/huong_dan_tu_dong.md
Normal file
@@ -0,0 +1,283 @@
|
|||||||
|
# Hướng dẫn tự động: Quy trình từ Figma → Template Liquid
|
||||||
|
|
||||||
|
> File này mô tả toàn bộ các bước tôi thực hiện tự động để chuyển đổi thiết kế Figma thành template Liquid.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tổng quan quy trình
|
||||||
|
|
||||||
|
```
|
||||||
|
Figma Design → Export HTML/TailwindCSS → Ghép vào Template Liquid → Gắn dữ liệu PHP
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bước 1: Export Figma sang HTML
|
||||||
|
|
||||||
|
**Trigger:** File `instructions/export_html.md` chứa các link Figma cần export.
|
||||||
|
|
||||||
|
**Hành động tự động:**
|
||||||
|
1. Truy cập từng link Figma trong `export_html.md`
|
||||||
|
2. Implement design thành HTML + TailwindCSS (dùng `@tailwindcss/browser@4` CDN)
|
||||||
|
3. Lưu file HTML vào thư mục `export_to_html/`
|
||||||
|
4. Lưu ảnh vào thư mục `export_to_html/image/`, đặt tên file ảnh tương ứng với từng phần
|
||||||
|
5. kiểm tra lại file vừa xuất, so sánh với thiết kế để cho ra bản hoàn hảo
|
||||||
|
6. chạy lần nữa kiểm tra code từ giao diện với thiết kế
|
||||||
|
|
||||||
|
**Các trang đã export:**
|
||||||
|
| File output | Figma node |
|
||||||
|
|---|---|
|
||||||
|
| `export_to_html/index.html` | Homepage |
|
||||||
|
| `export_to_html/category.html` | Trang danh mục sản phẩm |
|
||||||
|
| `export_to_html/product-detail.html` | Trang chi tiết sản phẩm |
|
||||||
|
| `export_to_html/home-article.html` | Trang danh sách bài viết |
|
||||||
|
| `export_to_html/cart.html` | Trang giỏ hàng |
|
||||||
|
| `export_to_html/article-detail.html` | Trang chi tiết bài viết |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bước 2: Thiết lập cấu trúc Theme
|
||||||
|
|
||||||
|
**File gốc:** `template/theme.html`
|
||||||
|
|
||||||
|
**Hành động tự động:**
|
||||||
|
1. Lấy `<head>` và các thẻ CSS từ `export_to_html/index.html`
|
||||||
|
2. Cấu trúc `theme.html` theo dạng:
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="vi">
|
||||||
|
<head>
|
||||||
|
<!-- fonts, tailwindcss CDN, daisyui CDN -->
|
||||||
|
<link rel="stylesheet" href="{{ 'miq-homepage.css' | asset_url }}" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% include "other/header" %}
|
||||||
|
<main id="layout-content">
|
||||||
|
{{ page_content }}
|
||||||
|
</main>
|
||||||
|
{% include "other/footer" %}
|
||||||
|
{% include javascript/index %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
3. Tách header ra `template/other/header.html`
|
||||||
|
4. Tách footer ra `template/other/footer.html`
|
||||||
|
5. Tách JS global ra `template/javascript/global.html`
|
||||||
|
6. Include `javascript/global` trong `template/javascript/index.html`
|
||||||
|
|
||||||
|
**Quy tắc xử lý đường dẫn:**
|
||||||
|
- `src="image/xxx.png"` → `{{ 'xxx.png' | asset_url }}`
|
||||||
|
- `href="/xxx"` → giữ nguyên hoặc dùng biến Liquid tương ứng
|
||||||
|
- Ảnh lỗi: thay bằng `{{ 'no-image.png' | asset_url }}`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bước 3: Ghép Header + Dữ liệu Menu
|
||||||
|
|
||||||
|
**File data:** `data/menu.php`
|
||||||
|
**File template:** `template/other/header.html`
|
||||||
|
|
||||||
|
**Hành động tự động:**
|
||||||
|
1. Đọc cấu trúc menu từ `data/menu.php`
|
||||||
|
2. Thay nội dung danh mục tĩnh bằng vòng lặp Liquid:
|
||||||
|
```liquid
|
||||||
|
{% for item in menu %}
|
||||||
|
<a href="{{ item.url }}">{{ item.name }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
```
|
||||||
|
3. Category icon chỉ hiển thị khi `is_featured = 1`:
|
||||||
|
```liquid
|
||||||
|
{% if item.is_featured == 1 %}
|
||||||
|
<img src="{{ item.icon | asset_url }}" onerror="this.src='{{ 'no-image.png' | asset_url }}'" />
|
||||||
|
{% endif %}
|
||||||
|
```
|
||||||
|
4. JS liên quan đến header (mobile menu, dropdown...) để trong `template/javascript/global.html`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bước 4: Ghép Homepage
|
||||||
|
|
||||||
|
**Trigger:** File `instructions/ghep_homepage.md`
|
||||||
|
**File nguồn:** `export_to_html/index.html`
|
||||||
|
**File đích:** `template/home/home.html`
|
||||||
|
**JS trang chủ:** `template/javascript/homepage.html`
|
||||||
|
|
||||||
|
**Checklist tự động:**
|
||||||
|
- [x] Copy nội dung `<main>` từ `index.html` vào `home.html`
|
||||||
|
- [x] **Banner:** Lấy dữ liệu từ `data/banner/banner.php`, implement Swiper slider:
|
||||||
|
```liquid
|
||||||
|
{% for banner in banners %}
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="{{ banner.image | asset_url }}" alt="{{ banner.title }}" />
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
```
|
||||||
|
- [x] **Category icon:** Dữ liệu từ `data/menu.php`, filter `is_featured = 1`
|
||||||
|
- [x] **Sản phẩm đã xem:** Biến `product_history` từ `data/home.php`
|
||||||
|
- [x] **Bộ sưu tập:** Biến `product_collection` từ `data/home.php`
|
||||||
|
- Max 8 sản phẩm
|
||||||
|
- Ẩn section nếu `product_collection` rỗng
|
||||||
|
- [x] **Sản phẩm theo danh mục:** Biến `product_category` từ `data/home.php`
|
||||||
|
- Loop qua từng danh mục
|
||||||
|
- Max 5 sản phẩm/danh mục
|
||||||
|
- Lấy tên & URL từ `categories[0]` của sản phẩm đầu tiên
|
||||||
|
- Ẩn nếu rỗng
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bước 5: Ghép Trang Danh Mục Sản Phẩm
|
||||||
|
|
||||||
|
**Trigger:** File `instructions/ghep_category.md`
|
||||||
|
**File nguồn:** `export_to_html/category.html`
|
||||||
|
**File đích:** `template/product/category.html`
|
||||||
|
**File data:** `data/product/category.php`
|
||||||
|
|
||||||
|
**Hành động tự động:**
|
||||||
|
1. Copy HTML từ `category.html` vào `template/product/category.html`
|
||||||
|
2. Thay danh sách sản phẩm tĩnh bằng Liquid loop:
|
||||||
|
```liquid
|
||||||
|
{% for product in products %}
|
||||||
|
<div class="product-card">
|
||||||
|
<img src="{{ product.image | asset_url }}" />
|
||||||
|
<a href="{{ product.url }}">{{ product.name }}</a>
|
||||||
|
<span>{{ product.price | money }}</span>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
```
|
||||||
|
3. Gắn breadcrumb, tiêu đề danh mục, phân trang
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bước 6: Ghép Trang Chi Tiết Sản Phẩm
|
||||||
|
|
||||||
|
**Trigger:** File `instructions/ghep_product_detail.md`
|
||||||
|
**File nguồn:** `export_to_html/product-detail.html`
|
||||||
|
**File đích:** `template/product/detail.html`
|
||||||
|
**File data:** `data/product/detail.php`
|
||||||
|
**JS:** `template/javascript/product-detail.html`
|
||||||
|
|
||||||
|
**Hành động tự động:**
|
||||||
|
1. Copy HTML vào `template/product/detail.html`
|
||||||
|
2. **Swiper Thumbs Gallery:** Implement cho ảnh sản phẩm + Fancybox khi click
|
||||||
|
3. **Tab thông số/mô tả:** Chuyển tab hiển thị nội dung
|
||||||
|
4. **Nút xem thêm/thu gọn** cho mô tả sản phẩm
|
||||||
|
5. **Thêm vào giỏ hàng:** Thông báo mua hàng thành công
|
||||||
|
6. **Nút mua hàng:** Chuyển hướng tới `/cart`
|
||||||
|
7. Gắn biến Liquid từ `data/product/detail.php`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bước 7: Ghép Trang Giỏ Hàng
|
||||||
|
|
||||||
|
**Trigger:** File `instructions/export_cart.md`
|
||||||
|
**File nguồn:** `export_to_html/cart.html`
|
||||||
|
**File đích:** `template/cart/home.html`
|
||||||
|
**File data:** `data/cart/home.php`
|
||||||
|
**JS:** `template/javascript/cart.html`
|
||||||
|
|
||||||
|
**Hành động tự động:**
|
||||||
|
1. Copy HTML vào `template/cart/home.html`
|
||||||
|
2. **Tăng/giảm số lượng:** JS cập nhật số lượng
|
||||||
|
3. **Tính giá:** Tự động cập nhật tổng tiền khi thay đổi số lượng
|
||||||
|
4. **Xóa sản phẩm:** Xóa khỏi danh sách giỏ hàng
|
||||||
|
5. Gắn biến Liquid từ `data/cart/home.php`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bước 8: Ghép Trang Bài Viết
|
||||||
|
|
||||||
|
**Trigger:** File `instructions/exrport_article.md`
|
||||||
|
**File data:** `data/article/home.php`, `data/article/detail.php`
|
||||||
|
|
||||||
|
### 8a. Trang danh sách bài viết
|
||||||
|
- **Nguồn:** `export_to_html/home-article.html`
|
||||||
|
- **Đích:** `template/article/home.html`
|
||||||
|
|
||||||
|
### 8b. Trang chi tiết bài viết
|
||||||
|
- **Nguồn:** `export_to_html/article-detail.html`
|
||||||
|
- **Đích:** `template/article/detail.html`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Cấu trúc thư mục dự án
|
||||||
|
|
||||||
|
```
|
||||||
|
agent_test/
|
||||||
|
├── export_to_html/ # HTML export từ Figma (nguồn)
|
||||||
|
│ ├── index.html
|
||||||
|
│ ├── category.html
|
||||||
|
│ ├── product-detail.html
|
||||||
|
│ ├── home-article.html
|
||||||
|
│ ├── cart.html
|
||||||
|
│ ├── article-detail.html
|
||||||
|
│ └── image/
|
||||||
|
├── template/ # Template Liquid (đích)
|
||||||
|
│ ├── theme.html # Layout chính
|
||||||
|
│ ├── home/home.html
|
||||||
|
│ ├── product/
|
||||||
|
│ │ ├── category.html
|
||||||
|
│ │ └── detail.html
|
||||||
|
│ ├── article/
|
||||||
|
│ │ ├── home.html
|
||||||
|
│ │ └── detail.html
|
||||||
|
│ ├── cart/home.html
|
||||||
|
│ ├── other/
|
||||||
|
│ │ ├── header.html
|
||||||
|
│ │ └── footer.html
|
||||||
|
│ └── javascript/
|
||||||
|
│ ├── index.html # Include tất cả JS
|
||||||
|
│ ├── global.html # JS dùng chung (header...)
|
||||||
|
│ ├── homepage.html # JS trang chủ (Swiper banner...)
|
||||||
|
│ ├── product-detail.html
|
||||||
|
│ └── cart.html
|
||||||
|
├── data/ # Dữ liệu mẫu PHP
|
||||||
|
│ ├── menu.php
|
||||||
|
│ ├── banner/banner.php
|
||||||
|
│ ├── home/home.php
|
||||||
|
│ ├── product/
|
||||||
|
│ │ ├── category.php
|
||||||
|
│ │ └── detail.php
|
||||||
|
│ ├── article/
|
||||||
|
│ │ ├── home.php
|
||||||
|
│ │ └── detail.php
|
||||||
|
│ └── cart/home.php
|
||||||
|
└── instructions/ # File hướng dẫn từng bước
|
||||||
|
├── export_html.md
|
||||||
|
├── ghep_homepage.md
|
||||||
|
├── ghep_category.md
|
||||||
|
├── ghep_product_detail.md
|
||||||
|
├── export_cart.md
|
||||||
|
├── exrport_article.md
|
||||||
|
└── huong_dan_tu_dong.md ← file này
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quy tắc chung khi ghép Liquid
|
||||||
|
|
||||||
|
| Tình huống | Cú pháp Liquid |
|
||||||
|
|---|---|
|
||||||
|
| Hiển thị biến | `{{ variable }}` |
|
||||||
|
| Định dạng tiền | `{{ price \| formart_price }}` |
|
||||||
|
| Đường dẫn ảnh asset | `{{ 'file.png' \| asset_url }}` |
|
||||||
|
| Ảnh lỗi fallback | `onerror="this.src='{{ 'no-image.png' \| asset_url }}'"` |
|
||||||
|
| Vòng lặp | `{% for item in list %}...{% endfor %}` |
|
||||||
|
| Điều kiện | `{% if condition %}...{% endif %}` |
|
||||||
|
| Ẩn nếu rỗng | `{% if list != empty %}...{% endif %}` |
|
||||||
|
| Giới hạn số lượng | `{% for item in list limit: 8 %}` |
|
||||||
|
| Include file | `{% include "other/header" %}` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Thứ tự thực hiện
|
||||||
|
|
||||||
|
```
|
||||||
|
1. export_html.md → Export Figma → export_to_html/
|
||||||
|
2. theme.html → Thiết lập layout chính + header/footer
|
||||||
|
3. ghep_homepage.md → Ghép trang chủ + dữ liệu
|
||||||
|
4. ghep_category.md → Ghép trang danh mục
|
||||||
|
5. ghep_product_detail → Ghép trang chi tiết sản phẩm
|
||||||
|
6. export_cart.md → Ghép trang giỏ hàng
|
||||||
|
7. exrport_article.md → Ghép trang bài viết
|
||||||
|
```
|
||||||
@@ -296,10 +296,13 @@ class Context
|
|||||||
$key = preg_replace("|\[([0-9]+)\]|", ".$1", $key);
|
$key = preg_replace("|\[([0-9]+)\]|", ".$1", $key);
|
||||||
} elseif (preg_match("|\[[0-9a-z._]+\]|", $key, $matches)) {
|
} elseif (preg_match("|\[[0-9a-z._]+\]|", $key, $matches)) {
|
||||||
$index = $this->get(str_replace(["[", "]"], "", $matches[0]));
|
$index = $this->get(str_replace(["[", "]"], "", $matches[0]));
|
||||||
|
if ($index !== null && (is_scalar($index) || (is_object($index) && method_exists($index, '__toString')))) {
|
||||||
|
$index = (string) $index;
|
||||||
if (strlen($index)) {
|
if (strlen($index)) {
|
||||||
$key = preg_replace("|\[([0-9a-z._]+)\]|", ".$index", $key);
|
$key = preg_replace("|\[([0-9a-z._]+)\]|", ".$index", $key);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$parts = explode(Liquid::get('VARIABLE_ATTRIBUTE_SEPARATOR'), $key);
|
$parts = explode(Liquid::get('VARIABLE_ATTRIBUTE_SEPARATOR'), $key);
|
||||||
|
|
||||||
|
|||||||
@@ -416,6 +416,14 @@ class StandardFilters
|
|||||||
*/
|
*/
|
||||||
public static function remove($input, $string)
|
public static function remove($input, $string)
|
||||||
{
|
{
|
||||||
|
if ($input === null) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($string === null) {
|
||||||
|
$string = '';
|
||||||
|
}
|
||||||
|
|
||||||
return str_replace($string, '', $input);
|
return str_replace($string, '', $input);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -430,6 +438,14 @@ class StandardFilters
|
|||||||
*/
|
*/
|
||||||
public static function remove_first($input, $string)
|
public static function remove_first($input, $string)
|
||||||
{
|
{
|
||||||
|
if ($input === null) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($string === null || $string === '') {
|
||||||
|
return $input;
|
||||||
|
}
|
||||||
|
|
||||||
if (($pos = strpos($input, $string)) !== false) {
|
if (($pos = strpos($input, $string)) !== false) {
|
||||||
$input = substr_replace($input, '', $pos, strlen($string));
|
$input = substr_replace($input, '', $pos, strlen($string));
|
||||||
}
|
}
|
||||||
@@ -449,6 +465,18 @@ class StandardFilters
|
|||||||
*/
|
*/
|
||||||
public static function replace($input, $string, $replacement = '')
|
public static function replace($input, $string, $replacement = '')
|
||||||
{
|
{
|
||||||
|
if ($input === null) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($string === null) {
|
||||||
|
$string = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($replacement === null) {
|
||||||
|
$replacement = '';
|
||||||
|
}
|
||||||
|
|
||||||
return str_replace($string, $replacement, $input);
|
return str_replace($string, $replacement, $input);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -464,6 +492,18 @@ class StandardFilters
|
|||||||
*/
|
*/
|
||||||
public static function replace_first($input, $string, $replacement = '')
|
public static function replace_first($input, $string, $replacement = '')
|
||||||
{
|
{
|
||||||
|
if ($input === null) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($string === null || $string === '') {
|
||||||
|
return $input;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($replacement === null) {
|
||||||
|
$replacement = '';
|
||||||
|
}
|
||||||
|
|
||||||
if (($pos = strpos($input, $string)) !== false) {
|
if (($pos = strpos($input, $string)) !== false) {
|
||||||
$input = substr_replace($input, $replacement, $pos, strlen($string));
|
$input = substr_replace($input, $replacement, $pos, strlen($string));
|
||||||
}
|
}
|
||||||
@@ -522,6 +562,10 @@ class StandardFilters
|
|||||||
*/
|
*/
|
||||||
public static function size($input)
|
public static function size($input)
|
||||||
{
|
{
|
||||||
|
if ($input === null) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
if ($input instanceof \Iterator) {
|
if ($input instanceof \Iterator) {
|
||||||
return iterator_count($input);
|
return iterator_count($input);
|
||||||
}
|
}
|
||||||
@@ -542,7 +586,7 @@ class StandardFilters
|
|||||||
}
|
}
|
||||||
|
|
||||||
// only plain values and stringable objects left at this point
|
// only plain values and stringable objects left at this point
|
||||||
return strlen($input);
|
return strlen((string)$input);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -640,6 +684,10 @@ class StandardFilters
|
|||||||
*/
|
*/
|
||||||
public static function strip($input)
|
public static function strip($input)
|
||||||
{
|
{
|
||||||
|
if ($input === null) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
return trim($input);
|
return trim($input);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -697,7 +745,12 @@ class StandardFilters
|
|||||||
*/
|
*/
|
||||||
public static function truncate($input, $characters = 100, $ending = '...')
|
public static function truncate($input, $characters = 100, $ending = '...')
|
||||||
{
|
{
|
||||||
|
if ($input === null) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
if (is_string($input) || is_numeric($input)) {
|
if (is_string($input) || is_numeric($input)) {
|
||||||
|
$input = (string)$input;
|
||||||
if (strlen($input) > $characters) {
|
if (strlen($input) > $characters) {
|
||||||
return mb_substr($input, 0, $characters) . $ending;
|
return mb_substr($input, 0, $characters) . $ending;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,163 +0,0 @@
|
|||||||
<div class="w-[100%]">
|
|
||||||
<div
|
|
||||||
class="bg-white m-[16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
|
|
||||||
<p class="leading-[30px] mb-[13px] font-bold text-[24px]"> Danh mục nội dung </p>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-end font-[500] leading-[35px] mb-[20px]">
|
|
||||||
<a href="/article/category-add"
|
|
||||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_16px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span
|
|
||||||
class="border-[1px] border-[#0041E8] h-[13px] w-[13px] leading-[10.2px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
|
||||||
<span>Thêm danh mục mới</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/article"
|
|
||||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<i class="far fa-folder mr-2"></i>
|
|
||||||
<span>Danh sách nội dung</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="table">
|
|
||||||
<table>
|
|
||||||
<thead class="bg-[#f6f6f6] text-[#000] text-[14px] font-[500]">
|
|
||||||
<tr>
|
|
||||||
<td width="600"> Danh mục </td>
|
|
||||||
<td width="50" align="center"> ID </td>
|
|
||||||
<td width="100" align="center"> Hiển thị </td>
|
|
||||||
<td width="100" align="center"> STT </td>
|
|
||||||
<td width="120" align="center"> Số bài viết </td>
|
|
||||||
<td width="172" align="center"> Lựa chọn </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr align="center">
|
|
||||||
<td align="left"> 1. Danh mục cấp 1 </td>
|
|
||||||
|
|
||||||
<td> 1 </td>
|
|
||||||
|
|
||||||
<td> child_article </td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<input type="text" value="0"
|
|
||||||
class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
|
|
||||||
<a href=""
|
|
||||||
class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
|
|
||||||
Xem
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<div class="items-center flex justify-center">
|
|
||||||
<a href="/article/category-add?id=1" title="Sửa lại"
|
|
||||||
class="icons icon-edit mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Xem tại web"
|
|
||||||
class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Hạ xuống"
|
|
||||||
class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Cho Hiển thị"
|
|
||||||
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Danh mục cấp 2 -->
|
|
||||||
<tr align="center">
|
|
||||||
<td align="left" style="padding-left: 30px;"> 1.1 Danh mục cấp 2 </td>
|
|
||||||
|
|
||||||
<td> 1 </td>
|
|
||||||
|
|
||||||
<td> child_article </td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<input type="text" value="0"
|
|
||||||
class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
|
|
||||||
<a href=""
|
|
||||||
class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
|
|
||||||
Xem
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<div class="items-center flex justify-center">
|
|
||||||
<a href="/article/category-add?id=1" title="Sửa lại"
|
|
||||||
class="icons icon-edit mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Xem tại web"
|
|
||||||
class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Hạ xuống"
|
|
||||||
class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Cho Hiển thị"
|
|
||||||
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Danh mục cấp 3 -->
|
|
||||||
<tr align="center">
|
|
||||||
<td align="left" style="padding-left: 60px;"> 1.1.1 Danh mục cấp 3 </td>
|
|
||||||
|
|
||||||
<td> 1 </td>
|
|
||||||
|
|
||||||
<td> child_article </td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<input type="text" value="0"
|
|
||||||
class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
|
|
||||||
<a href=""
|
|
||||||
class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
|
|
||||||
Xem
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<div class="items-center flex justify-center">
|
|
||||||
<a href="/article/category-add?id=1" title="Sửa lại"
|
|
||||||
class="icons icon-edit mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Xem tại web"
|
|
||||||
class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Hạ xuống"
|
|
||||||
class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Cho Hiển thị"
|
|
||||||
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
158
template/article/detail.html
Normal file
158
template/article/detail.html
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
{% assign no_image_url = 'no-image.png' | asset_url %}
|
||||||
|
{% assign _article = page.article_detail %}
|
||||||
|
{% assign _article_cat_url = _article.categoryInfo[0].request_path | default: _article.categoryInfo[0].url %}
|
||||||
|
{% if _article_cat_url != '' %}
|
||||||
|
{% unless _article_cat_url contains '/' %}
|
||||||
|
{% assign _article_cat_url = '/' | append: _article_cat_url %}
|
||||||
|
{% endunless %}
|
||||||
|
{% endif %}
|
||||||
|
<div class="layout-container flex flex-col gap-4 py-4">
|
||||||
|
|
||||||
|
<!-- Breadcrumb -->
|
||||||
|
<div class="flex items-center gap-2 text-[12px] tracking-[-0.24px]">
|
||||||
|
<a href="/article" class="text-[#888] hover:text-[#e4057c]">Tin tức</a>
|
||||||
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||||
|
<span class="text-black">Chi tiết tin tức</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main layout: article + sidebar -->
|
||||||
|
<div class="flex gap-5">
|
||||||
|
|
||||||
|
<!-- Article Content -->
|
||||||
|
<article class="flex flex-col gap-5 w-[864px] mx-auto bg-white p-[20px] shrink-0">
|
||||||
|
|
||||||
|
<!-- Category badge -->
|
||||||
|
{% if _article.categoryInfo.size > 0 %}
|
||||||
|
<div class="inline-flex items-center self-start bg-[#eff6ff] border border-[#bedbff] rounded-full px-4 py-2">
|
||||||
|
<a href="{{ _article_cat_url }}" class="text-[14px] text-[#364153] hover:text-[#e4057c]">
|
||||||
|
{{ _article.categoryInfo[0].name }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<h1 class="font-medium text-[32px] leading-normal text-black">
|
||||||
|
{{ _article.title }}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<!-- Meta: date + author -->
|
||||||
|
<div class="flex items-center gap-4 border-b border-black/10 pb-3">
|
||||||
|
<div class="flex items-center gap-1.5 text-[14px] text-[#4a5565]">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2" />
|
||||||
|
<path d="M16 2v4M8 2v4M3 10h18" />
|
||||||
|
</svg>
|
||||||
|
{{ _article.createDate }}
|
||||||
|
</div>
|
||||||
|
{% if _article.author != '' %}
|
||||||
|
<div class="flex items-center gap-1.5 text-[14px] text-[#4a5565]">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||||
|
<circle cx="12" cy="7" r="4" />
|
||||||
|
</svg>
|
||||||
|
{{ _article.author }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Summary box -->
|
||||||
|
{% if _article.summary != '' %}
|
||||||
|
<div class="bg-[#e5e7eb] rounded-[10px] p-6 flex flex-col gap-3">
|
||||||
|
<p class="font-bold text-[20px] leading-[30px] text-[#101828]">
|
||||||
|
{{ _article.summary }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Article Content -->
|
||||||
|
<div class="font-inter text-[16px] leading-6 text-[#364153] flex flex-col gap-4 article-content">
|
||||||
|
{{ _article.content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TIN KHUYẾN MẠI + VIDEO REVIEW từ bà i liên quan -->
|
||||||
|
{% assign _promo_articles = page.home_article_list[19] %}
|
||||||
|
{% assign _video_articles = page.home_article_list[29] %}
|
||||||
|
{% if _promo_articles.size > 0 or _video_articles.size > 0 %}
|
||||||
|
<div class="bg-white rounded-xl px-3 py-4 flex gap-3">
|
||||||
|
|
||||||
|
{% if _promo_articles.size > 0 %}
|
||||||
|
<div class="flex flex-col gap-3 flex-1">
|
||||||
|
<h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">TIN KHUYẾN MẠI</h2>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
{% assign _main_promo = _promo_articles[0] %}
|
||||||
|
<a href="{{ _main_promo.url }}" class="flex flex-col gap-2 w-[481px] shrink-0">
|
||||||
|
<div class="overflow-hidden rounded-[4px]">
|
||||||
|
<img src="{{ _main_promo.image.thum }}" alt="{{ _main_promo.title }}"
|
||||||
|
class="h-[300px] w-full object-cover rounded-[4px] hover:scale-105 transition-transform duration-300"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||||
|
</div>
|
||||||
|
<p class="text-[20px] font-bold text-black tracking-[-0.4px] leading-snug">{{ _main_promo.title }}</p>
|
||||||
|
</a>
|
||||||
|
<div class="flex flex-col gap-3 flex-1">
|
||||||
|
{% for _article in _promo_articles offset:1 limit:3 %}
|
||||||
|
<a href="{{ _article.url }}" class="flex gap-3 items-start no-underline">
|
||||||
|
<img src="{{ _article.image.thum }}" alt="{{ _article.title }}"
|
||||||
|
class="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||||
|
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-[#e4057c]">
|
||||||
|
{{ _article.title }}
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if _promo_articles.size > 0 and _video_articles.size > 0 %}
|
||||||
|
<div class="w-px bg-gray-200 self-stretch"></div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if _video_articles.size > 0 %}
|
||||||
|
<div class="flex flex-col gap-3 w-[279px] shrink-0">
|
||||||
|
<h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">VIDEO REVIEW</h2>
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
{% assign _main_video = _video_articles[0] %}
|
||||||
|
<a href="{{ _main_video.url }}" class="relative block rounded-[4px] overflow-hidden group">
|
||||||
|
<img src="{{ _main_video.image.thum }}" alt="{{ _main_video.title }}"
|
||||||
|
class="h-[159px] w-full object-cover rounded-[4px]"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||||
|
<div class="absolute inset-0 bg-black/20 flex items-center justify-center rounded-[4px]">
|
||||||
|
<div
|
||||||
|
class="w-10 h-10 bg-white/80 rounded-full flex items-center justify-center group-hover:bg-white transition-colors">
|
||||||
|
<svg class="w-5 h-5 text-[#e4057c] ml-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M8 5v14l11-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% for _video in _video_articles offset:1 limit:2 %}
|
||||||
|
<a href="{{ _video.url }}" class="flex gap-3 items-start group no-underline">
|
||||||
|
<div class="relative w-[107px] h-[64px] rounded-[4px] overflow-hidden shrink-0">
|
||||||
|
<img src="{{ _video.image.thum }}" alt="{{ _video.title }}" class="w-full h-full object-cover rounded-[4px]"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||||
|
<div class="absolute inset-0 bg-black/20 flex items-center justify-center">
|
||||||
|
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M8 5v14l11-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-2 group-hover:text-[#e4057c]">
|
||||||
|
{{ _video.title }}
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
@@ -1,502 +0,0 @@
|
|||||||
<div class="global-breadcrumb-container">
|
|
||||||
<a href="/article"> Bài viết </a>
|
|
||||||
<a href=""> Form cập nhật Bài viết </a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="max-w-[1141px] m-auto p-[0_15px]">
|
|
||||||
<div class="flex flex-wrap items-start m-[16px_0]">
|
|
||||||
<div
|
|
||||||
class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px] flex flex-wrap items-center justify-between">
|
|
||||||
{% if global.url contains 'id=' %}
|
|
||||||
<p class="font-bold text-[20px]"> Sửa nội dung </p>
|
|
||||||
|
|
||||||
<p class="w-[100%] text-[#6B7280] order-[1]">
|
|
||||||
ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ CHUYỆN NHỎ
|
|
||||||
</p>
|
|
||||||
{% else %}
|
|
||||||
<p class="font-bold text-[20px]"> Thêm mới </p>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div class="flex items-center">
|
|
||||||
<a href="/article/form"
|
|
||||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span
|
|
||||||
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
|
||||||
<span>Thêm nội dung mới</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href=""
|
|
||||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span class="far fa-folder mr-2"></span>
|
|
||||||
<span>Quản lý danh mục</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/article" title="Danh sách nội dung"
|
|
||||||
class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-[25%] mr-[16px]">
|
|
||||||
<div
|
|
||||||
class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
|
||||||
<a href="javascript:void(0)" style="color: #Fff;background: #0041E8;"
|
|
||||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{% if global.url contains 'id=' %}
|
|
||||||
<a href="/article/tag?id=1"
|
|
||||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
|
|
||||||
<a href="/article/relation?id=1&related_item_type=product"
|
|
||||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên
|
|
||||||
quan:
|
|
||||||
Sản phẩm </a>
|
|
||||||
<a href="/article/relation?id=1&related_item_type=product-category"
|
|
||||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên
|
|
||||||
quan:
|
|
||||||
Danh mục sản phẩm </a>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form method="post" enctype="multipart/form-data"
|
|
||||||
class="w-[calc(100%_-25%_-16px)] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
|
||||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
|
||||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Thông tin cơ bản </p>
|
|
||||||
|
|
||||||
<div class="mb-[15px] flex flex-wrap items-center">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]">Ảnh đại diện </p>
|
|
||||||
|
|
||||||
<div class="inline-block">
|
|
||||||
<img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="cursor-pointer">
|
|
||||||
<span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
|
|
||||||
|
|
||||||
<input type="file" name="file_thumbnail"
|
|
||||||
class="file-input h-[40px] rounded-[4px] file-input-bordered file-input-primary w-full max-w-xs">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px] flex flex-wrap items-center">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]"> Ảnh nền trong chi tiết </p>
|
|
||||||
|
|
||||||
<div class="inline-block">
|
|
||||||
<img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="cursor-pointer">
|
|
||||||
<span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
|
|
||||||
|
|
||||||
<input type="file" name="file_thumbnail"
|
|
||||||
class="file-input h-[40px] rounded-[4px] file-input-bordered file-input-primary w-full max-w-xs">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="p-[12px_20px] m-[15px_0] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] rounded-[4px]">
|
|
||||||
<p class="font-bold mb-2"> Danh mục <i class="font-[300] text-[#6B7280]"> * có thể chọn nhiều danh
|
|
||||||
mục </i> </p>
|
|
||||||
|
|
||||||
<div class="overflow-auto max-h-[250px]">
|
|
||||||
<div class="mb-1">
|
|
||||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
|
||||||
<input type="checkbox" value="1" class="checkbox checkbox-success">
|
|
||||||
<b class="label-text ml-[5px]"> Danh mục cấp 1 </b>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-1">
|
|
||||||
|
|
||||||
<p class="font-bold mb-[5px]"> Danh mục cấp 1 </p>
|
|
||||||
|
|
||||||
<div class="pl-[25px]">
|
|
||||||
<!-- KHÔNG CÓ danh mục con -->
|
|
||||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
|
||||||
<input type="checkbox" value="2" class="checkbox checkbox-success">
|
|
||||||
<span class="label-text ml-[5px] text-[#6B7280]"> Danh mục
|
|
||||||
cấp 2 </span>
|
|
||||||
</label> <br>
|
|
||||||
|
|
||||||
<!-- CÓ danh mục con -->
|
|
||||||
<div>
|
|
||||||
<p class="font-bold mb-[5px]"> Danh mục cấp 2 </p>
|
|
||||||
|
|
||||||
<div class="pl-[25px]">
|
|
||||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
|
||||||
<input type="checkbox" value="2" class="checkbox checkbox-success">
|
|
||||||
<span class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 3 </span>
|
|
||||||
</label> <br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br>
|
|
||||||
<div>
|
|
||||||
<p class="font-bold mb-[5px]"> Danh mục cấp 2 </p>
|
|
||||||
<div class="pl-[25px]"> <label
|
|
||||||
class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 3 </span>
|
|
||||||
</label> <br></div>
|
|
||||||
</div><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- clone -->
|
|
||||||
<div class="mb-1"> <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
|
|
||||||
<input type="checkbox" value="1" class="checkbox checkbox-success">
|
|
||||||
<b class="label-text ml-[5px]"> Danh mục cấp 1</b>
|
|
||||||
</label> </div>
|
|
||||||
<div class="mb-1">
|
|
||||||
<p class="font-bold mb-[5px]"> Danh mục cấp 1 </p>
|
|
||||||
<div class="pl-[25px]"> <label
|
|
||||||
class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
|
|
||||||
type="checkbox" value="2" class="checkbox checkbox-success"> <span
|
|
||||||
class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
|
|
||||||
<br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- // -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px]">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]"> Tiêu đề </p>
|
|
||||||
|
|
||||||
<input type="text" value=""
|
|
||||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px]">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]"> Link Index </p>
|
|
||||||
|
|
||||||
<input type="text" value=""
|
|
||||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px]">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]"> Link tham khảo (link web ngoài nếu có) </p>
|
|
||||||
|
|
||||||
<input type="text" value=""
|
|
||||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px]">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]"> Tóm tắt chính </p>
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
class="w-[100%] min-h-[90px] max-h-[150px] textarea textarea-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]"> Tags (Mỗi cụm từ 1 dòng) </p>
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
class="w-[100%] min-h-[90px] max-h-[150px] rounded-[4px] textarea textarea-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
|
||||||
<div class="flex flex-wrap items-center justify-between mb-3">
|
|
||||||
<p class="font-bold text-[20px] leading-[20px]"> Mô tả (nếu có) </p>
|
|
||||||
|
|
||||||
<div class="flex items-center font-[500] leading-[35px]">
|
|
||||||
<a href=""
|
|
||||||
class="group flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span class="icons icon-upload group-hover:filter-none"></span>
|
|
||||||
<span> Upload ảnh </span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href=""
|
|
||||||
class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<i class="far fa-folder mr-2"></i>
|
|
||||||
<span> Quản lý </span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href=""
|
|
||||||
class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<i class="fa fa-image mr-2"></i>
|
|
||||||
<span> Chọn ảnh trong kho ảnh </span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex overflow-auto pb-2 w-[100%]">
|
|
||||||
|
|
||||||
<a href="javascript:void(0)" class="min-w-[100px] m-[10px_10px_0_0]">
|
|
||||||
<img src="https://via.placeholder.com/2000x800" class="h-[40px] block" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px]">
|
|
||||||
<textarea id="js-desc"> </textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]"> Thứ tự <i class="font-[300] text-[13px]"> (* số cao xếp
|
|
||||||
trước)</i> </p>
|
|
||||||
|
|
||||||
<input type="text" value=""
|
|
||||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
|
||||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Dùng cho SEO </p>
|
|
||||||
|
|
||||||
<div class="mb-[15px]">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]">
|
|
||||||
Url canonical
|
|
||||||
<i class="text-[13px] font-[300]"> * để trống sẽ dùng link mặc định của hệ thống </i>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<input type="text" value=""
|
|
||||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px]">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]">
|
|
||||||
Meta Title
|
|
||||||
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ </i>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<input type="text" value=""
|
|
||||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px]">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]">
|
|
||||||
Meta Keywords
|
|
||||||
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ </i>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<input type="text" value=""
|
|
||||||
class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px]">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600]">
|
|
||||||
Meta Description
|
|
||||||
<i class="text-[13px] font-[300]"> 0 ký tự , 0 từ (Khuyến nghị: 160 ký tự) </i>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
class="w-[100%] min-h-[90px] max-h-[150px] rounded-[4px] textarea textarea-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-[15px] flex items-start">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Cho phép Google Index </p>
|
|
||||||
|
|
||||||
<label class="inline-flex items-center cursor-pointer">
|
|
||||||
<input type="checkbox" class="checkbox checkbox-success">
|
|
||||||
<span class="label-text ml-[15px]"> Cho phép Google Index </span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start">
|
|
||||||
<p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Hiển thị Mục lục đầu bài viết </p>
|
|
||||||
|
|
||||||
<label class="inline-flex items-center cursor-pointer">
|
|
||||||
<input type="checkbox" class="checkbox checkbox-success">
|
|
||||||
<span class="label-text ml-[15px]"> Cho phép hiển thị </span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
|
|
||||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Quản trị hiển thị </p>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="mb-[15px] flex flex-wrap">
|
|
||||||
<p class="w-[230px] font-bold">Thời gian của bài viết</p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
|
||||||
<input type="radio" value="0" name="info[article_time_set]"
|
|
||||||
class="radio checked:bg-blue-500" checked="">
|
|
||||||
<span class="label-text ml-[10px]"> Thời gian tạo bài </span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
|
||||||
<input type="radio" value="1" name="info[article_time_set]"
|
|
||||||
class="radio checked:bg-blue-500">
|
|
||||||
<span class="label-text ml-[10px]"> Chọn thời gian </span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="w-[100%] hidden" id="js-publish_time">
|
|
||||||
<div class="flex items-center m-[10px_0]">
|
|
||||||
<div class="relative mr-[20px]">
|
|
||||||
<i
|
|
||||||
class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
|
|
||||||
<input type="date" name="from_time_date" value="" placeholder="Từ ngày"
|
|
||||||
class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="mr-[10px]"> Giờ </p>
|
|
||||||
|
|
||||||
<select name="info[from_time_minute]" id="from_time_minute" style="width: 85px;"
|
|
||||||
class="border border-[#d8d8d8] h-[36px] rounded-[4px] pl-[5px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
|
||||||
<option value="00:00">00:00</option>
|
|
||||||
<option value="00:30">00:30</option>
|
|
||||||
<option value="01:00">01:00</option>
|
|
||||||
<option value="01:30">01:30</option>
|
|
||||||
<option value="02:00">02:00</option>
|
|
||||||
<option value="02:30">02:30</option>
|
|
||||||
<option value="03:00">03:00</option>
|
|
||||||
<option value="03:30">03:30</option>
|
|
||||||
<option value="04:00">04:00</option>
|
|
||||||
<option value="04:30">04:30</option>
|
|
||||||
<option value="05:00">05:00</option>
|
|
||||||
<option value="05:30">05:30</option>
|
|
||||||
<option value="06:00">06:00</option>
|
|
||||||
<option value="06:30">06:30</option>
|
|
||||||
<option value="07:00">07:00</option>
|
|
||||||
<option value="07:30">07:30</option>
|
|
||||||
<option value="08:00">08:00</option>
|
|
||||||
<option value="08:30">08:30</option>
|
|
||||||
<option value="09:00">09:00</option>
|
|
||||||
<option value="09:30">09:30</option>
|
|
||||||
<option value="10:00">10:00</option>
|
|
||||||
<option value="10:30">10:30</option>
|
|
||||||
<option value="11:00">11:00</option>
|
|
||||||
<option value="11:30">11:30</option>
|
|
||||||
<option value="12:00">12:00</option>
|
|
||||||
<option value="12:30">12:30</option>
|
|
||||||
<option value="13:00">13:00</option>
|
|
||||||
<option value="13:30">13:30</option>
|
|
||||||
<option value="14:00">14:00</option>
|
|
||||||
<option value="14:30">14:30</option>
|
|
||||||
<option value="15:00">15:00</option>
|
|
||||||
<option value="15:30">15:30</option>
|
|
||||||
<option value="16:00">16:00</option>
|
|
||||||
<option value="16:30">16:30</option>
|
|
||||||
<option value="17:00">17:00</option>
|
|
||||||
<option value="17:30">17:30</option>
|
|
||||||
<option value="18:00">18:00</option>
|
|
||||||
<option value="18:30">18:30</option>
|
|
||||||
<option value="19:00">19:00</option>
|
|
||||||
<option value="19:30">19:30</option>
|
|
||||||
<option value="20:00">20:00</option>
|
|
||||||
<option value="20:30">20:30</option>
|
|
||||||
<option value="21:00">21:00</option>
|
|
||||||
<option value="21:30">21:30</option>
|
|
||||||
<option value="22:00">22:00</option>
|
|
||||||
<option value="22:30">22:30</option>
|
|
||||||
<option value="23:00">23:00</option>
|
|
||||||
<option value="23:30">23:30</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<i class="w-[100%] font-[300] text-[#6B7280] mt-[5px]">(Hiển thị cho người xem thời gian thật của
|
|
||||||
bài thay vì thời gian cập nhật)</i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="mb-[15px] flex flex-wrap">
|
|
||||||
<p class="w-[230px] font-bold"> Trạng thái </p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
|
||||||
<input type="radio" value="0" name="info[status]" class="radio checked:bg-blue-500"
|
|
||||||
checked="">
|
|
||||||
<span class="label-text ml-[10px]"> Bản nháp </span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
|
||||||
<input type="radio" value="1" name="info[status]" class="radio checked:bg-blue-500">
|
|
||||||
<span class="label-text ml-[10px]"> Cho hiển thị </span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
|
|
||||||
<input type="radio" value="-1" name="info[status]" class="radio checked:bg-blue-500">
|
|
||||||
<span class="label-text ml-[10px]"> Chờ duyệt </span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center">
|
|
||||||
<p class="w-[230px] font-bold"> Xem thử </p>
|
|
||||||
|
|
||||||
<a href="" target="_blank"
|
|
||||||
class="inline-block font-[600] border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[30px] p-[0_12px] transition hover:bg-[#0041E8] hover:text-white">
|
|
||||||
Xem bài viết tại trang web
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input type="submit" value="Cập nhật"
|
|
||||||
class="inline-block m-[16px] cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
tinymce.init({
|
|
||||||
selector: 'textarea#js-desc',
|
|
||||||
height: 350,
|
|
||||||
menubar: true,
|
|
||||||
plugins: [
|
|
||||||
'advlist autolink lists link image charmap print preview anchor',
|
|
||||||
'searchreplace visualblocks code fullscreen',
|
|
||||||
'insertdatetime media table paste code help wordcount'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | formatselect | ' +
|
|
||||||
'bold italic backcolor | alignleft aligncenter ' +
|
|
||||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
||||||
'removeformat | help',
|
|
||||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
$("input[name='info[article_time_set]']").click(function () {
|
|
||||||
if ($(this).val() == 1) $("#js-publish_time").show();
|
|
||||||
else $("#js-publish_time").hide();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -1,137 +1,92 @@
|
|||||||
<div class="w-[100%]">
|
{% assign no_image_url = 'no-image.png' | asset_url %}
|
||||||
<div
|
<div class="layout-container flex flex-col gap-4 py-4">
|
||||||
class="bg-white m-[16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
|
|
||||||
<p class="leading-[30px] mb-[13px] font-bold text-[24px]"> Bài viết </p>
|
|
||||||
|
|
||||||
<form method="get" enctype="multipart/form-data" action="/"
|
<!-- Breadcrumb -->
|
||||||
class="border border-[#F6F6F6] m-[12px_0_16px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
|
<div class="flex items-center gap-2 text-[12px] text-[#888]">
|
||||||
<input type="text" name="q" id="keyword" value="" placeholder=""
|
<a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
|
||||||
class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
<input type="submit" value="Tìm kiếm"
|
<path d="M9 18l6-6-6-6" />
|
||||||
class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
|
</svg>
|
||||||
</form>
|
<span class="text-black">Tin tức</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center flex-wrap justify-between mb-[20px]">
|
<!-- News Tabs + Cards -->
|
||||||
<div class="flex items-center">
|
<div class="bg-white rounded-xl p-4">
|
||||||
<select
|
|
||||||
class="min-w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[15px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
|
||||||
<option value=""> Chọn danh mục </option>
|
|
||||||
<option value=""> option </option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<a href=""
|
<!-- Tab Navigation -->
|
||||||
class="leading-[35px] mr-[16px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
|
<nav class="flex border-b border-[#e5e7eb] mb-5">
|
||||||
Xem nội dung đang ẩn
|
{% for _cat in page.home_article_category %}
|
||||||
|
{% assign _cat_id = _cat.id %}
|
||||||
|
<a href="{{ _cat.url }}"
|
||||||
|
class="border-b-2 border-transparent pb-2.5 pt-2 px-5 text-[13px] text-[#6a7282] uppercase tracking-[0.35px] whitespace-nowrap hover:text-[#e91e63] js-article-tab"
|
||||||
|
data-cat="{{ _cat_id }}">
|
||||||
|
{{ _cat.name }}
|
||||||
</a>
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</nav>
|
||||||
|
|
||||||
<a href=""
|
<!-- News Cards - mỗi category một section, JS toggle show/hide -->
|
||||||
class="leading-[35px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
|
{% for _cat in page.home_article_category %}
|
||||||
Xem nội dung nổi bật
|
{% assign _cat_id = _cat.id %}
|
||||||
|
{% assign _articles = page.home_article_list[_cat_id] %}
|
||||||
|
{% if _articles.size > 0 %}
|
||||||
|
<div class="js-article-section" data-cat="{{ _cat_id }}" style="display:none">
|
||||||
|
<div class="grid grid-cols-3 gap-3 mb-6">
|
||||||
|
{% for _article in _articles %}
|
||||||
|
<article class="flex flex-col gap-2">
|
||||||
|
<a href="{{ _article.url }}" class="block overflow-hidden rounded-lg">
|
||||||
|
<img src="{{ _article.image.original }}" alt="{{ _article.title }}"
|
||||||
|
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'">
|
||||||
</a>
|
</a>
|
||||||
|
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
|
||||||
|
{{ _article.title }}
|
||||||
|
</h3>
|
||||||
|
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
|
||||||
|
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2" />
|
||||||
|
<path d="M16 2v4M8 2v4M3 10h18" />
|
||||||
|
</svg>
|
||||||
|
{{ _article.createDate }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<!-- Tab switcher script -->
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var tabs = document.querySelectorAll('.js-article-tab');
|
||||||
|
var sections = document.querySelectorAll('.js-article-section');
|
||||||
|
function activate(catId) {
|
||||||
|
tabs.forEach(function (t) {
|
||||||
|
var active = t.dataset.cat === catId;
|
||||||
|
t.classList.toggle('border-[#e91e63]', active);
|
||||||
|
t.classList.toggle('text-[#e91e63]', active);
|
||||||
|
t.classList.toggle('font-bold', active);
|
||||||
|
t.classList.toggle('border-transparent', !active);
|
||||||
|
t.classList.toggle('text-[#6a7282]', !active);
|
||||||
|
});
|
||||||
|
sections.forEach(function (s) {
|
||||||
|
s.style.display = s.dataset.cat === catId ? '' : 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (tabs.length > 0) {
|
||||||
|
activate(tabs[0].dataset.cat);
|
||||||
|
tabs.forEach(function (t) {
|
||||||
|
t.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
activate(t.dataset.cat);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="flex items-center font-[500] leading-[35px]">
|
|
||||||
<a href="/article/form"
|
|
||||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_16px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span
|
|
||||||
class="border-[1px] border-[#0041E8] h-[13px] w-[13px] leading-[10.2px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
|
||||||
<span>Thêm nội dung mới</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/article/category"
|
|
||||||
class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<i class="far fa-folder mr-2"></i>
|
|
||||||
<span>Quản lý danh mục</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="table">
|
|
||||||
<thead class="bg-[#F6F6F6] text-[#000] text-[14px] font-500">
|
|
||||||
<tr>
|
|
||||||
<td width="40"> STT </td>
|
|
||||||
<td width="130"> Ảnh </td>
|
|
||||||
<td> Sản phẩm (Tổng số: 1.742) </td>
|
|
||||||
<td> Thống kê </td>
|
|
||||||
<td> Quản trị </td>
|
|
||||||
<td width="160"> Lựa chọn </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td align="center"> 1 </td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<img src="https://via.placeholder.com/880x350" class="block m-auto" />
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<span> [#2481] </span>
|
|
||||||
<a href=""> Elgato – Happy New Year 2024 Deal Hot Đầu Xuân </a>
|
|
||||||
|
|
||||||
<div class="m-[5px_0]"> Thời gian chương trình : 15.02.2024 – 24.02.2024 </div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
STT
|
|
||||||
<input type="text" value="0"
|
|
||||||
class="w-[140px] h-[32px] border border-[#D8D8D8] m-[0_0_0_10px] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<p> - Xem: 90 </p>
|
|
||||||
<p> - Thích: 0 </p>
|
|
||||||
<p> - Comment: 0 </p>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<p> Cập nhật: Nguyễn MInh Hải </p>
|
|
||||||
<p> (15-02-2024, 2:57 pm) </p>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<div class="items-center flex">
|
|
||||||
<a href="/article/form?id=1" title="Sửa lại"
|
|
||||||
class="border-[1px] border-[#0041E8_!important] icons icon-edit mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Xem tại web"
|
|
||||||
class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Cho nổi bật"
|
|
||||||
class="fas fa-crown bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Hạ nổi bật"
|
|
||||||
class="fas fa-crown bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Hạ xuống"
|
|
||||||
class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
|
|
||||||
|
|
||||||
<a href="" title="Cho Hiển thị"
|
|
||||||
class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paging">
|
|
||||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
|
||||||
<a href="" class="current">1</a>
|
|
||||||
<a href="">2</a>
|
|
||||||
<a href="">3</a>
|
|
||||||
<a href="">4</a>
|
|
||||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
@@ -1,124 +0,0 @@
|
|||||||
{% assign _check_type = global.url | split: 'related_item_type=' %}
|
|
||||||
|
|
||||||
<div class="global-breadcrumb-container">
|
|
||||||
<a href="/article"> Bài viết </a>
|
|
||||||
<a href=""> Form cập nhật Bài viết </a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="max-w-[1141px] m-[0_auto_20px]">
|
|
||||||
<div class="flex flex-wrap items-start justify-center">
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] flex flex-wrap items-center justify-between">
|
|
||||||
<p class="font-bold text-[20px]"> Sửa nội dung </p>
|
|
||||||
|
|
||||||
<p class="text-[#6B7280] mt-[10px] order-[1] w-[100%]"> ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ
|
|
||||||
CHUYỆN NHỎ </p>
|
|
||||||
|
|
||||||
<div class="flex items-center">
|
|
||||||
<a href="/article/form"
|
|
||||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span
|
|
||||||
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
|
||||||
<span>Thêm nội dung mới</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href=""
|
|
||||||
class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span class="far fa-folder mr-2"></span>
|
|
||||||
<span>Quản lý danh mục</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/article" title="Danh sách nội dung"
|
|
||||||
class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- col left -->
|
|
||||||
<div
|
|
||||||
class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
|
||||||
<a href="/article/form?id=1"
|
|
||||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/article/tag?id=1"
|
|
||||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
|
|
||||||
|
|
||||||
<a href="/article/relation?id=1&related_item_type=product"
|
|
||||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition" {% if
|
|
||||||
_check_type[1]=='product' %}style="color: #Fff;background: #0041E8;" {% endif %}> Liên quan: Sản phẩm
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/article/relation?id=1&related_item_type=product-category"
|
|
||||||
class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition" {% if
|
|
||||||
_check_type[1]=='product-category' %}style="color: #Fff;background: #0041E8;" {% endif %}> Liên quan:
|
|
||||||
Danh mục sản phẩm </a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- col right -->
|
|
||||||
<div
|
|
||||||
class="w-[852px] bg-white p-[16pX_16px_20px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
|
||||||
{% if _check_type[1] == 'product'%}
|
|
||||||
|
|
||||||
{% include 'article/relation_product' %}
|
|
||||||
|
|
||||||
{% elsif _check_type[1] == 'product-category' %}
|
|
||||||
|
|
||||||
{% include 'article/relation_product_category' %}
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Popup chọn tag -->
|
|
||||||
<div id="popup-tag" class="hidden bg-white w-[852px] p-[16px] rounded-[15px]">
|
|
||||||
<p class="mb-[14px] font-bold text-[20px] leading-[26px]"> Chọn Tag </p>
|
|
||||||
|
|
||||||
<form method="get" enctype="multipart/form-data" action="/"
|
|
||||||
class="border border-[#F6F6F6] m-[12px_0_20px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
|
|
||||||
<input type="text" name="q" id="keyword" value="" placeholder="Tìm link truy cập"
|
|
||||||
class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
|
||||||
<input type="submit" value="Tìm kiếm"
|
|
||||||
class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] mr-[12px] cursor-pointer rounded-[4px]">
|
|
||||||
<p class="inline-block leading-[36px]"> (v.d. abc-xyz) </p>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="order-page-table max-h-[400px] overflow-auto">
|
|
||||||
<table class="table">
|
|
||||||
<thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-700">
|
|
||||||
<tr>
|
|
||||||
<td width="40">STT</td>
|
|
||||||
<td>Thương hiệu</td>
|
|
||||||
<td width="80"> Lựa chọn </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr align="center">
|
|
||||||
<td class="text-center"> 1 </td>
|
|
||||||
<td align="left"> Laptop AMD Ryzen 3 </td>
|
|
||||||
<td>
|
|
||||||
<a href=""
|
|
||||||
class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_7px] text-[#fff_!important]">
|
|
||||||
Chọn
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paging">
|
|
||||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
|
||||||
<a href="" class="current">1</a>
|
|
||||||
<a href="">2</a>
|
|
||||||
<a href="">3</a>
|
|
||||||
<a href="">4</a>
|
|
||||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
{% assign _check_type = global.url | split: 'related_item_type=' %}
|
|
||||||
|
|
||||||
<div class="global-breadcrumb-container">
|
|
||||||
<a href="/article"> Bài viết </a>
|
|
||||||
<a href="/article/form?id=1"> Form cập nhật Bài viết </a>
|
|
||||||
<a href=""> Thêm liên quan </a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="max-w-[1141px] m-auto">
|
|
||||||
<div class="flex flex-wrap items-start m-[16px_0]">
|
|
||||||
<div class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px]">
|
|
||||||
<p class="font-bold text-[20px] mb-[6px] leading-[26px]"> Thêm liên quan </p>
|
|
||||||
|
|
||||||
<p class="w-[100%] text-[#6B7280] order-[1]">
|
|
||||||
Thêm liên quan: HuraSoft - Test tin tức
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
|
||||||
<a href="/article/relation-add?id=1&related_item_type=product" {% if _check_type[1] == 'product' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
|
|
||||||
Sản phẩm (2)
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/article/relation-add?id=1&related_item_type=product-category" {% if _check_type[1] == 'product-category' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
|
|
||||||
Danh mục sản phẩm (0)
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% if _check_type[1] == 'product' %}
|
|
||||||
|
|
||||||
{% include 'article/relation_product_add' %}
|
|
||||||
|
|
||||||
{% elsif _check_type[1] == 'product-category' %}
|
|
||||||
|
|
||||||
{% include 'article/relation_product_category_add' %}
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
tinymce.init({
|
|
||||||
selector: 'textarea#js-desc',
|
|
||||||
height: 350,
|
|
||||||
menubar: true,
|
|
||||||
plugins: [
|
|
||||||
'advlist autolink lists link image charmap print preview anchor',
|
|
||||||
'searchreplace visualblocks code fullscreen',
|
|
||||||
'insertdatetime media table paste code help wordcount'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | formatselect | ' +
|
|
||||||
'bold italic backcolor | alignleft aligncenter ' +
|
|
||||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
||||||
'removeformat | help',
|
|
||||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(function(){
|
|
||||||
$("input[name='info[article_time_set]']").click(function(){
|
|
||||||
if($(this).val() == 1) $("#js-publish_time").show();
|
|
||||||
else $("#js-publish_time").hide();
|
|
||||||
}) ;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
<div class="flex flex-wrap items-center justify-between">
|
|
||||||
<p class="font-bold leading-[20px] text-[20px] mr-3 mb-[13px]"> Danh sách liên quan: HuraSoft - Test tin tức </p>
|
|
||||||
|
|
||||||
<a href="/article/relation-add?id=1&related_item_type=product" class="flex items-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mb-[13px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
|
||||||
<span> Thêm liên quan mới </span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="order-page-table">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td width="40"> STT </td>
|
|
||||||
<td width="70"> Ảnh </td>
|
|
||||||
<td width="270"> Tên </td>
|
|
||||||
<td> Thông tin bán hàng </td>
|
|
||||||
<td width="70"> Cài đặt </td>
|
|
||||||
<td > Lựa chọn </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr align="center">
|
|
||||||
<td> 1 </td>
|
|
||||||
|
|
||||||
<td> <img src="https://via.placeholder.com/500x500" class="block"> </td>
|
|
||||||
|
|
||||||
<td align="left">
|
|
||||||
<a href=""> CPU Intel Pentium Gold G6405 (Intel LGA1200 - 2 Core - 4 Thread - Base 4.1Ghz - Cache 4MB </a>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td align="left">
|
|
||||||
<p> - Mã kho : <b> CPUI0132 </b> </p>
|
|
||||||
<p> - Lượt xem: <b> 21577 </b> </p>
|
|
||||||
<p> - Giá bán : <b class="text-[red]"> 1.999.000 vnđ </b> </p>
|
|
||||||
<p> - Kho hàng : <b> 3 </b> </p>
|
|
||||||
<p> - Bảo hành : <b> 36 Tháng </b> </p>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<p class="mb-[5px]"> STT </p>
|
|
||||||
<input type="text" value="0" class="w-[100%] text-center h-[34px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<div class="flex items-center flex-wrap justify-center">
|
|
||||||
<a href="" class="inline-block text-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mr-[5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
Bỏ lựa chọn
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="" title="Xem tại web" class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8]"></a>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paging">
|
|
||||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
|
||||||
<a href="" class="current">1</a>
|
|
||||||
<a href="">2</a>
|
|
||||||
<a href="">3</a>
|
|
||||||
<a href="">4</a>
|
|
||||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
|
||||||
</div>
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
<div class="p-[16px] w-[852px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
|
||||||
<p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Chọn sản phẩm liên quan - Tổng số: 28872 </p>
|
|
||||||
|
|
||||||
<form method="get" enctype="multipart/form-data" action="/" class="border border-[#F6F6F6] m-[12px_0_16px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] flex items-center">
|
|
||||||
<input type="text" name="q" id="keyword" value="" placeholder="Tìm sản phẩm liên quan" class="w-[245px] h-[36px] border border-[#D8D8D8] mr-[10px] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
|
||||||
|
|
||||||
<p class="mr-[10px]"> Chọn danh mục </p>
|
|
||||||
|
|
||||||
<select class="w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[10px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
|
||||||
<option value=""> Tất cả sản phẩm </option>
|
|
||||||
<option value=""> option </option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<select class="w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[10px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
|
|
||||||
<option value=""> Thương hiệu </option>
|
|
||||||
<option value=""> option </option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<input type="submit" value="Tìm kiếm" class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<a href="" class="inline-block leading-[35px] mr-[16px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
|
|
||||||
Chọn toàn bộ danh sách
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="order-page-table m-[20px_0]">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td width="40"> STT </td>
|
|
||||||
<td width="80"> Ảnh </td>
|
|
||||||
<td> Tên </td>
|
|
||||||
<td width="220"> Thông tin bán hàng </td>
|
|
||||||
<td> Lựa chọn </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td align="center"> 1 </td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<img src="https://via.placeholder.com/880x350" class="block m-auto">
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<a href=""> CPU Intel Pentium Gold G6405 Intel LGA1200 - 2 Core - 4 Thread - Base 4.1Ghz - Cache 4MB </a>
|
|
||||||
<p> Cập nhật: Hôm nay, 11:11 am </p>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
- Mã kho : <b> CPUI0132 </b> <br>
|
|
||||||
- Lượt xem: <b> 21577 </b> <br>
|
|
||||||
- Giá bán : <b> 1.999.000 vnđ </b> <br>
|
|
||||||
- Kho hàng : <b> 3 </b> <br>
|
|
||||||
- Bảo hành : <b> 36 Tháng </b>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
Chọn liên quan
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paging">
|
|
||||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
|
||||||
<a href="" class="current">1</a>
|
|
||||||
<a href="">2</a>
|
|
||||||
<a href="">3</a>
|
|
||||||
<a href="">4</a>
|
|
||||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
<div class="flex flex-wrap items-center justify-between">
|
|
||||||
<p class="font-bold leading-[20px] text-[20px] mr-3 mb-[13px]"> Danh sách liên quan: HuraSoft - Test tin tức </p>
|
|
||||||
|
|
||||||
<a href="/article/relation-add?id=1&related_item_type=product-category"
|
|
||||||
class="flex items-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mb-[13px] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span
|
|
||||||
class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
|
||||||
<span> Thêm liên quan mới </span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="table">
|
|
||||||
<table>
|
|
||||||
<thead class="bg-[#f6f6f6] text-[#f6f6f6] font-700 text-[14px]">
|
|
||||||
<tr>
|
|
||||||
<td width="40"> STT </td>
|
|
||||||
<td> Tên </td>
|
|
||||||
<td width="120"> Lựa chọn </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr align="center">
|
|
||||||
<td> 1 </td>
|
|
||||||
|
|
||||||
<td align="left">
|
|
||||||
<p class="mb-[7px]"> Laptop - Tablet - Mobile </p>
|
|
||||||
|
|
||||||
<p class="mr-[10px] inline-block"> STT </p>
|
|
||||||
<input type="text" value="0"
|
|
||||||
class="w-[70px] text-center h-[34px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<a href=""
|
|
||||||
class="block text-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
Bỏ lựa chọn
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paging">
|
|
||||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
|
||||||
<a href="" class="current">1</a>
|
|
||||||
<a href="">2</a>
|
|
||||||
<a href="">3</a>
|
|
||||||
<a href="">4</a>
|
|
||||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
|
||||||
</div>
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
<form method="post" enctype="multipart/form-data" class="p-[16px] w-[852px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
|
||||||
<p class="font-bold text-[20px] leading-[20px] mb-[20px]"> Chọn danh mục liên quan </p>
|
|
||||||
|
|
||||||
<div class="order-page-table table-vertical-inherit">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td> Danh mục </td>
|
|
||||||
<td width="140"> Lựa chọn </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td> 1 Danh mục cấp 1 </td>
|
|
||||||
<td>
|
|
||||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
Chọn liên quan
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<p class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#000] rounded-[4px] p-[0_5px]"> Đã chọn </p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Danh mục cấp 2 -->
|
|
||||||
<tr>
|
|
||||||
<td style="padding-left: 30px;"> 1.1 Danh mục cấp 2 </td>
|
|
||||||
<td>
|
|
||||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
Chọn liên quan
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Danh mục cấp 3 -->
|
|
||||||
<tr>
|
|
||||||
<td style="padding-left: 50px;"> 1.1.1 Danh mục cấp 3 </td>
|
|
||||||
<td>
|
|
||||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
Chọn liên quan
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Danh mục cấp 4 -->
|
|
||||||
<tr>
|
|
||||||
<td style="padding-left: 70px;"> 1.1.1.1 Danh mục cấp 4 </td>
|
|
||||||
<td>
|
|
||||||
<a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
Chọn liên quan
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
<div class="global-breadcrumb-container">
|
|
||||||
<a href="/article"> Bài viết </a>
|
|
||||||
<a href=""> Form cập nhật Bài viết </a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="max-w-[1141px] m-[0_auto_20px]">
|
|
||||||
<div class="flex flex-wrap items-start justify-center">
|
|
||||||
|
|
||||||
<div class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] flex flex-wrap items-center justify-between">
|
|
||||||
<p class="font-bold text-[20px]"> Sửa nội dung </p>
|
|
||||||
|
|
||||||
<p class="text-[#6B7280] mt-[10px] order-[1] w-[100%]"> ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ CHUYỆN NHỎ </p>
|
|
||||||
|
|
||||||
<div class="flex items-center">
|
|
||||||
<a href="/article/form" class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
|
|
||||||
<span>Thêm nội dung mới</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="" class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
<span class="far fa-folder mr-2"></span>
|
|
||||||
<span>Quản lý danh mục</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="/article" title="Danh sách nội dung" class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- col left -->
|
|
||||||
<div class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
|
|
||||||
<a href="/article/form?id=1" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa </a>
|
|
||||||
|
|
||||||
{% if global.url contains 'id=' %}
|
|
||||||
<a href="javascript:void(0)" style="color: #Fff;background: #0041E8;" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
|
|
||||||
<a href="/article/relation?id=1&related_item_type=product" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên quan: Sản phẩm </a>
|
|
||||||
<a href="/article/relation?id=1&related_item_type=product-category" class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên quan: Danh mục sản phẩm </a>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- col right -->
|
|
||||||
<form method="post" enctype="multipart/form-data" class="w-[852px] bg-white p-[16pX_16px_20px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
|
|
||||||
|
|
||||||
<a href="#popup-tag" data-fancybox class="inline-block border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] hover:bg-[#0041E8] hover:text-[#fff]">
|
|
||||||
Chọn tag mới
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="order-page-table mt-[13px]">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td width="70"> STT </td>
|
|
||||||
<td> Tag </td>
|
|
||||||
<td width="70"> Lựa chọn </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr align="center">
|
|
||||||
<td> 1 </td>
|
|
||||||
<td align="left"> Laptop GTX 1050 </td>
|
|
||||||
<td>
|
|
||||||
<a href="" title="Xóa" class="icons icon-delete"></a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="border-[4px] border-[#FAFAFB] m-[16px_-16px]">
|
|
||||||
|
|
||||||
<input name="commit" type="submit" value="Cập nhật" class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Popup chọn tag -->
|
|
||||||
<div id="popup-tag" class="hidden bg-white w-[852px] p-[16px] rounded-[15px]">
|
|
||||||
<p class="mb-[14px] font-bold text-[20px] leading-[26px]"> Chọn Tag </p>
|
|
||||||
|
|
||||||
<form method="get" enctype="multipart/form-data" action="/" class="border border-[#F6F6F6] m-[12px_0_20px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
|
|
||||||
<input type="text" name="q" id="keyword" value="" placeholder="Tìm link truy cập" class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
|
|
||||||
<input type="submit" value="Tìm kiếm" class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] mr-[12px] cursor-pointer rounded-[4px]">
|
|
||||||
<p class="inline-block leading-[36px]"> (v.d. abc-xyz) </p>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="order-page-table max-h-[400px] overflow-auto">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td width="40">STT</td>
|
|
||||||
<td>Thương hiệu</td>
|
|
||||||
<td width="80"> Lựa chọn </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr align="center">
|
|
||||||
<td> 1 </td>
|
|
||||||
<td align="left"> Laptop AMD Ryzen 3 </td>
|
|
||||||
<td>
|
|
||||||
<a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_7px] text-[#fff_!important]">
|
|
||||||
Chọn
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paging">
|
|
||||||
<a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
|
|
||||||
<a href="" class="current">1</a>
|
|
||||||
<a href="">2</a>
|
|
||||||
<a href="">3</a>
|
|
||||||
<a href="">4</a>
|
|
||||||
<a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
247
template/cart/home.html
Normal file
247
template/cart/home.html
Normal file
@@ -0,0 +1,247 @@
|
|||||||
|
<!-- Breadcrumb -->
|
||||||
|
<div class="layout-container py-3">
|
||||||
|
<div class="flex items-center gap-2 text-[12px]">
|
||||||
|
<a href="/" class="text-[#888] hover:text-brand">Trang chủ</a>
|
||||||
|
<svg class="w-2.5 h-2.5 text-[#888]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-[#0a0a0a] font-medium">Giỏ hàng</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="layout-container pb-12 flex justify-center">
|
||||||
|
<div class="bg-white px-4 py-5 w-[832px]">
|
||||||
|
<div class="flex flex-col gap-3 w-full">
|
||||||
|
|
||||||
|
<!-- Section: Thông tin giỏ hàng -->
|
||||||
|
<h2 class="font-bold text-[16px] text-[#0a0a0a] leading-7">Thông tin giỏ hàng</h2>
|
||||||
|
|
||||||
|
<!-- Cart Items -->
|
||||||
|
{% for _item in page.cart_items %}
|
||||||
|
{% assign _info = _item.item_info %}
|
||||||
|
{% assign _ic = _item.in_cart %}
|
||||||
|
|
||||||
|
<div class="cart-item-wrap flex flex-col gap-1">
|
||||||
|
<div class="cart-item flex gap-4 items-start" data-id="{{ _item._id }}" data-price="{{ _ic.price }}"
|
||||||
|
data-qty="{{ _ic.quantity }}">
|
||||||
|
|
||||||
|
<!-- Image -->
|
||||||
|
<div class="bg-[#f3f4f6] flex items-center justify-center shrink-0 w-16 h-16">
|
||||||
|
<a href="{{ _info.productUrl }}">
|
||||||
|
<img src="{{ _info.productImage.small }}" alt="{{ _info.productName }}"
|
||||||
|
class="w-16 h-16 object-contain" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Info -->
|
||||||
|
<div class="flex flex-col flex-1">
|
||||||
|
<div class="flex items-start justify-between w-full">
|
||||||
|
<a href="{{ _info.productUrl }}" class="font-bold text-[13px] text-[#0a0a0a] leading-5 hover:text-brand">
|
||||||
|
{{ _info.productName }}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-10 shrink-0">
|
||||||
|
|
||||||
|
<!-- Price -->
|
||||||
|
<div class="w-[87px]">
|
||||||
|
{% if _ic.price == 0 %}
|
||||||
|
<p class="font-medium text-[14px] text-[#e7000b] leading-5">Liên hệ</p>
|
||||||
|
<p class="text-[14px] text-transparent select-none"> </p>
|
||||||
|
{% else %}
|
||||||
|
<p class="item-total-price font-medium text-[16px] text-[#e7000b] leading-[18px]">{{ _ic.total_price
|
||||||
|
}}</p>
|
||||||
|
{% if _info.marketPrice > 0 %}
|
||||||
|
<p class="item-market-price text-[12px] text-[#a5a5a5] line-through">{{ _info.marketPrice }}</p>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-[14px] text-transparent select-none"> </p>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quantity -->
|
||||||
|
<div class="flex items-center gap-3 h-8">
|
||||||
|
<button onclick="cartDec('{{ _item._id }}')"
|
||||||
|
class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="border border-[#d1d5dc] rounded w-12 h-8 flex items-center justify-center">
|
||||||
|
<span class="item-qty text-[14px] text-[#0a0a0a]">{{ _ic.quantity }}</span>
|
||||||
|
</div>
|
||||||
|
<button onclick="cartInc('{{ _item._id }}')"
|
||||||
|
class="border border-[#d1d5dc] rounded w-6 h-8 flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Delete -->
|
||||||
|
<button onclick="cartRemove('{{ _item._id }}')"
|
||||||
|
class="w-4 h-5 flex items-center justify-center text-[#4a5565] hover:text-[#e7000b]">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
||||||
|
d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
|
||||||
|
<path stroke-linecap="round" stroke-width="1.5" d="M10 11v6M14 11v6" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% if _info.productSummary != '' %}
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="shrink-0 w-16"></div>
|
||||||
|
<div class="flex-1 bg-[#f3f4f6] rounded px-3 py-1.5">
|
||||||
|
<ul class="list-disc list-inside flex flex-col gap-0.5 text-[12px] text-[#4a5565] leading-[1.6]">
|
||||||
|
{% assign _lines = _info.productSummary | split: "\n" %}
|
||||||
|
{% for _line in _lines %}
|
||||||
|
<li>{{ _line }}</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<!-- Section: Thông tin nhận hàng -->
|
||||||
|
<h2 class="font-bold text-[16px] text-[#0a0a0a] leading-7 mt-1">Thông tin nhận hàng</h2>
|
||||||
|
|
||||||
|
<!-- Delivery form -->
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="border-b border-black/10 flex">
|
||||||
|
<button id="tab-delivery" onclick="switchTab('delivery')"
|
||||||
|
class="h-[46px] w-[392px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg">
|
||||||
|
Giao hàng tận nơi
|
||||||
|
</button>
|
||||||
|
<button id="tab-pickup" onclick="switchTab('pickup')"
|
||||||
|
class="h-[46px] w-[408px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent">
|
||||||
|
Nhận hàng tại trung tâm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Form body -->
|
||||||
|
<div class="bg-[#f3f4f6] rounded px-3 py-5 flex flex-col gap-3">
|
||||||
|
<!-- Gender -->
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input type="radio" name="gender" value="anh" checked class="w-4 h-4 accent-[#e7000b]" />
|
||||||
|
<span class="font-medium text-[13px] text-[#0a0a0a]">Anh</span>
|
||||||
|
</label>
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input type="radio" name="gender" value="chi" class="w-4 h-4 accent-[#e7000b]" />
|
||||||
|
<span class="font-medium text-[13px] text-[#0a0a0a]">Chị</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Name + Phone -->
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<label class="text-[13px] font-medium text-[#0a0a0a]">
|
||||||
|
Họ và tên <span class="text-[#e7000b]">*</span>
|
||||||
|
</label>
|
||||||
|
<input type="text" placeholder="Họ tên"
|
||||||
|
class="bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b]" />
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<label class="text-[13px] font-medium text-[#0a0a0a]">
|
||||||
|
Số điện thoại <span class="text-[#e7000b]">*</span>
|
||||||
|
</label>
|
||||||
|
<input type="tel" placeholder="Nhập số điện thoại"
|
||||||
|
class="bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Address -->
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<label class="text-[13px] font-medium text-[#0a0a0a]">
|
||||||
|
Địa chỉ nhận hàng <span class="text-[#e7000b]">*</span>
|
||||||
|
</label>
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="relative">
|
||||||
|
<select
|
||||||
|
class="appearance-none bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 w-full text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b] cursor-pointer">
|
||||||
|
<option value="" disabled selected>Chọn Tỉnh/Thành Phố</option>
|
||||||
|
{% for _province in page.province_list %}
|
||||||
|
<option value="{{ _province.api_id }}">{{ _province.name }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
class="absolute right-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#0a0a0a] pointer-events-none rotate-90"
|
||||||
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<select
|
||||||
|
class="appearance-none bg-white border border-[#d1d5dc] rounded px-4 py-2 h-10 w-full text-[13px] text-[#0a0a0a] outline-none focus:border-[#e7000b] cursor-pointer">
|
||||||
|
<option value="" disabled selected>Chọn Xã/Phường</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
class="absolute right-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#0a0a0a] pointer-events-none rotate-90"
|
||||||
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea rows="2" placeholder="Nhập địa chỉ giao hàng"
|
||||||
|
class="bg-white border border-[#d1d5dc] rounded px-4 py-2 text-[13px] text-[rgba(10,10,10,0.5)] outline-none focus:border-[#e7000b] resize-none"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Invoice checkbox -->
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer h-5">
|
||||||
|
<input type="checkbox" class="w-4 h-4 accent-[#e7000b] border border-[#d1d5dc] rounded" />
|
||||||
|
<span class="font-medium text-[13px] text-[#0a0a0a]">Yêu cầu xuất hóa đơn công ty</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- Total -->
|
||||||
|
<div class="flex items-center justify-between h-8">
|
||||||
|
<span class="font-semibold text-[13px] text-[#0a0a0a]">Tổng tiền</span>
|
||||||
|
<span id="cart-total" class="font-medium text-[16px] text-[#e7000b]">{{ page.cart_summary.total_value }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<hr class="border-t border-dashed border-[#d1d5dc]" />
|
||||||
|
|
||||||
|
<!-- Section: Phương thức thanh toán -->
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<h3 class="font-bold text-[16px] text-[#0a0a0a] leading-7">Phương thức thanh toán</h3>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
{% for _pm in page.payment_method %}
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input type="radio" name="payment" value="{{ _pm.type }}" {% if forloop.first %}checked{% endif %}
|
||||||
|
class="w-4 h-4 accent-[#e7000b]" />
|
||||||
|
<span class="text-[13px] text-[#0a0a0a]">{{ _pm.title }}</span>
|
||||||
|
</label>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Terms checkbox -->
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer mt-4">
|
||||||
|
<input type="checkbox" class="w-4 h-4 accent-[#e7000b] border border-[#d1d5dc] rounded" />
|
||||||
|
<span class="text-[13px] text-[#4a5565]">
|
||||||
|
Tôi đã đọc và đồng ý với các
|
||||||
|
<a href="#" class="text-[#155dfc] font-bold hover:underline">Điều kiện giao dịch chung</a>
|
||||||
|
của website
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- Order button -->
|
||||||
|
<button
|
||||||
|
class="bg-[#e7000b] hover:bg-[#c00009] text-white font-medium text-[16px] h-12 w-full rounded flex items-center justify-center transition-colors mt-5">
|
||||||
|
ĐẶT HÀNG
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -48,7 +48,7 @@
|
|||||||
<img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" />
|
<img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
{% if _product.price > 0 %}
|
{% if _product.price > 0 %}
|
||||||
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">{{ _product.price | number_format }} <span
|
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">{{ _product.price | format_number }} <span
|
||||||
class="underline">đ</span></p>
|
class="underline">đ</span></p>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">Liên hệ</p>
|
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">Liên hệ</p>
|
||||||
@@ -62,12 +62,11 @@
|
|||||||
<!-- BST Sale -->
|
<!-- BST Sale -->
|
||||||
{% if page.product_collection.size > 0 %}
|
{% if page.product_collection.size > 0 %}
|
||||||
<div class="relative w-full rounded-[12px] overflow-hidden">
|
<div class="relative w-full rounded-[12px] overflow-hidden">
|
||||||
<img src="{{ 'bst_sale_bg.png' | asset_url }}" alt="" class="absolute inset-0 w-full h-full object-cover" />
|
<img src="{{ 'bst_sale_bg.png' | asset_url }}" alt="" class="absolute inset-0 w-full h-full" />
|
||||||
<div class="relative flex flex-col gap-3 px-[11px] pt-[93px] pb-5">
|
<div class="relative flex flex-col gap-3 px-[11px] pt-[93px] pb-5">
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<div class="flex items-center justify-center h-[54px] w-[608px] rounded-full"
|
<div class="flex items-center justify-center h-[54px] w-[608px] rounded-full" style="">
|
||||||
style="background: linear-gradient(90deg, #bf4000 0%, #e86020 50%, #f07810 100%)">
|
|
||||||
<p class="text-[24px] font-bold text-white uppercase text-center tracking-tight">Ngập tràn ưu đãi- Đừng bỏ
|
<p class="text-[24px] font-bold text-white uppercase text-center tracking-tight">Ngập tràn ưu đãi- Đừng bỏ
|
||||||
lỡ!</p>
|
lỡ!</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -100,19 +99,20 @@
|
|||||||
LẠNH - 50%</span>
|
LẠNH - 50%</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- Product Grid -->
|
<!-- Product Grid -->
|
||||||
<div class="grid grid-cols-5 gap-2">
|
<div class="grid grid-cols-5 2xl:grid-cols-6 gap-2">
|
||||||
{% for _product in page.product_collection limit:8 %}
|
{% for _product in page.product_collection limit:12 %}
|
||||||
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3">
|
<div
|
||||||
<a href="/product/detail" class="block"><img src="{{ _product.productImage.large }}"
|
class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3{% if forloop.index > 10 %} hidden 2xl:block{% endif %}">
|
||||||
alt="{{ _product.productName }}" class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
|
<a href="/product/detail" class="block w-full"><img src="{{ _product.productImage.large }}"
|
||||||
<div class="relative w-[204px] h-[51px] flex flex-col justify-center px-2 py-[7px]">
|
alt="{{ _product.productName }}" class="w-full aspect-square rounded-[4px] object-cover" /></a>
|
||||||
|
<div class="relative w-full h-[51px] flex flex-col justify-center px-2 py-[7px]">
|
||||||
<img src="{{ 'sale_price_box_bg.svg' | asset_url }}" alt=""
|
<img src="{{ 'sale_price_box_bg.svg' | asset_url }}" alt=""
|
||||||
class="absolute inset-0 w-full h-full object-cover" />
|
class="absolute inset-0 w-full h-full object-cover" />
|
||||||
{% if _product.price > 0 %}
|
{% if _product.price > 0 %}
|
||||||
<p class="relative text-[16px] font-bold text-white tracking-tight">{{ _product.price | number_format }} đ
|
<p class="relative text-[16px] font-bold text-white tracking-tight">{{ _product.price | format_number }} đ
|
||||||
</p>
|
</p>
|
||||||
{% if _product.marketPrice > 0 and _product.price_off != '' %}
|
{% if _product.marketPrice > 0 and _product.price_off != '' %}
|
||||||
<p class="relative text-[11px] text-white tracking-tight">{{ _product.marketPrice | number_format }} đ (-{{
|
<p class="relative text-[11px] text-white tracking-tight">{{ _product.marketPrice | format_number }} đ (-{{
|
||||||
_product.price_off }}%)</p>
|
_product.price_off }}%)</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
@@ -120,10 +120,10 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<a href="/product/detail"
|
<a href="/product/detail"
|
||||||
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c] line-clamp-2 h-[40px]">{{
|
class="text-[13px] font-bold text-black tracking-tight w-full hover:text-[#e4057c] line-clamp-2 h-[40px]">{{
|
||||||
_product.productName }}</a>
|
_product.productName }}</a>
|
||||||
<div
|
<div
|
||||||
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
|
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-full cursor-pointer hover:bg-red-50">
|
||||||
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
|
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -247,7 +247,7 @@
|
|||||||
class="absolute inset-0 w-full h-full object-cover" />
|
class="absolute inset-0 w-full h-full object-cover" />
|
||||||
<div class="absolute inset-0 flex flex-col items-center justify-end pb-[5px]">
|
<div class="absolute inset-0 flex flex-col items-center justify-end pb-[5px]">
|
||||||
<p class="text-[28px] font-bold text-white text-center capitalize tracking-tight">{{ _cat_info.name }}</p>
|
<p class="text-[28px] font-bold text-white text-center capitalize tracking-tight">{{ _cat_info.name }}</p>
|
||||||
<a href="{{ _cat_info.url }}" class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả
|
<a href="/product/category" class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả
|
||||||
>></a>
|
>></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -258,47 +258,49 @@
|
|||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<div
|
<div
|
||||||
class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px] h-full">
|
class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px] h-full">
|
||||||
<a href="/product/detail" class="block">
|
<a href="/product/detail?id={{ _product.productId }}" class="block">
|
||||||
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
||||||
class="w-full aspect-square rounded-[4px] object-cover"
|
class="w-full aspect-square rounded-[4px] object-cover"
|
||||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
</a>
|
</a>
|
||||||
{% if _product.productType.isSaleOff == 1 %}
|
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]"
|
||||||
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
|
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">
|
||||||
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sale off</span>
|
<span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img
|
||||||
{% elsif _product.productType.isHot == 1 %}
|
src="{{ 'icon_gift.png' | asset_url }}" alt="" class="w-[11px] h-[11px] object-contain" /></span>
|
||||||
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
|
<span>{{ _product.label | strip | default: 'Sắm tết vô tư' }}</span>
|
||||||
style="background:linear-gradient(89.82deg,#ff6600 2.38%,#cc4400 94.82%)">Hot</span>
|
</div>
|
||||||
{% elsif _product.productType.isNew == 1 %}
|
|
||||||
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
|
|
||||||
style="background:linear-gradient(89.82deg,#0066ff 2.38%,#0044cc 94.82%)">Mới</span>
|
|
||||||
{% endif %}
|
|
||||||
{% if _product.price > 0 %}
|
{% if _product.price > 0 %}
|
||||||
<div class="flex items-center gap-1">
|
<div class="flex items-center gap-[6px]">
|
||||||
<p class="text-[18px] font-bold text-[#db0000]">{{ _product.price | number_format }} <span
|
<p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">{{ _product.price | format_number }} <span
|
||||||
class="underline">đ</span></p>
|
class="underline">đ</span></p>
|
||||||
{% if _product.price_off != '' and _product.price_off != '0' %}
|
{% assign _price_off = _product.price_off | strip %}
|
||||||
<span class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-{{
|
{% if _price_off != '' and _price_off != '0' %}
|
||||||
_product.price_off }}%</span>
|
<span class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-{{
|
||||||
|
_price_off }}%</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% if _product.marketPrice > 0 %}
|
{% if _product.marketPrice > 0 %}
|
||||||
<p class="text-[12px] text-[#c5c5c5] line-through">{{ _product.marketPrice | number_format }} đ</p>
|
<p class="text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{ _product.marketPrice | format_number }} đ</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-[18px] font-bold text-[#db0000]">Liên hệ</p>
|
<p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="/product/detail" class="text-[13px] font-bold text-black hover:text-[#e4057c] line-clamp-2">{{
|
<a href="/product/detail?id={{ _product.productId }}" class="h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black hover:text-[#e4057c]">{{
|
||||||
_product.productName
|
_product.productName
|
||||||
}}</a>
|
}}</a>
|
||||||
{% if _product.rating > 0 %}
|
<div class="flex items-center gap-2">
|
||||||
<div class="flex items-center gap-1 text-[12px] text-[#707070]">
|
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
|
||||||
<img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" />
|
onerror="this.style.display='none'">
|
||||||
<span>{{ _product.rating }} · {{ _product.reviewCount }} đánh giá</span>
|
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
|
||||||
|
onerror="this.style.display='none'">
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
<div class="mt-auto flex items-center justify-between gap-[6px]">
|
||||||
<div class="mt-auto flex justify-end">
|
<div class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap">
|
||||||
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
<img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" />
|
||||||
|
<span>{{ _product.rating | default: 0 }} · Đã bán {{ _product.reviewCount | default: 0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shrink-0 shadow">
|
||||||
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
|
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
103
template/javascript/cart.html
Normal file
103
template/javascript/cart.html
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
<script>
|
||||||
|
// ── Helpers ──────────────────────────────────────────────────────────────
|
||||||
|
function formatPrice(n) {
|
||||||
|
return Number(n).toLocaleString('vi-VN') + '₫';
|
||||||
|
}
|
||||||
|
|
||||||
|
// cartItems cần global để các onclick inline gọi được
|
||||||
|
var cartItems = {};
|
||||||
|
|
||||||
|
// ── Update total ─────────────────────────────────────────────────────────
|
||||||
|
function updateCartTotal() {
|
||||||
|
var total = 0;
|
||||||
|
Object.values(cartItems).forEach(function (item) {
|
||||||
|
if (item.price > 0) total += item.price * item.qty;
|
||||||
|
});
|
||||||
|
var totalEl = document.getElementById('cart-total');
|
||||||
|
if (totalEl) totalEl.textContent = formatPrice(total);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Quantity controls ─────────────────────────────────────────────────────
|
||||||
|
function cartInc(id) {
|
||||||
|
var item = cartItems[id];
|
||||||
|
if (!item) return;
|
||||||
|
item.qty++;
|
||||||
|
item.el.dataset.qty = item.qty;
|
||||||
|
item.el.querySelector('.item-qty').textContent = item.qty;
|
||||||
|
if (item.price > 0) {
|
||||||
|
item.el.querySelector('.item-total-price').textContent = formatPrice(item.price * item.qty);
|
||||||
|
}
|
||||||
|
updateCartTotal();
|
||||||
|
}
|
||||||
|
|
||||||
|
function cartDec(id) {
|
||||||
|
var item = cartItems[id];
|
||||||
|
if (!item || item.qty <= 1) return;
|
||||||
|
item.qty--;
|
||||||
|
item.el.dataset.qty = item.qty;
|
||||||
|
item.el.querySelector('.item-qty').textContent = item.qty;
|
||||||
|
if (item.price > 0) {
|
||||||
|
item.el.querySelector('.item-total-price').textContent = formatPrice(item.price * item.qty);
|
||||||
|
}
|
||||||
|
updateCartTotal();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Remove item ──────────────────────────────────────────────────────────
|
||||||
|
function cartRemove(id) {
|
||||||
|
var item = cartItems[id];
|
||||||
|
if (!item) return;
|
||||||
|
if (!confirm('Bạn có chắc muốn xóa sản phẩm này khỏi giỏ hàng?')) return;
|
||||||
|
item.el.closest('.cart-item-wrap').remove();
|
||||||
|
delete cartItems[id];
|
||||||
|
updateCartTotal();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Delivery tab switch ───────────────────────────────────────────────────
|
||||||
|
function switchTab(tab) {
|
||||||
|
var tabDelivery = document.getElementById('tab-delivery');
|
||||||
|
var tabPickup = document.getElementById('tab-pickup');
|
||||||
|
if (tab === 'delivery') {
|
||||||
|
tabDelivery.className = 'h-[46px] w-[392px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg';
|
||||||
|
tabPickup.className = 'h-[46px] w-[408px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent';
|
||||||
|
} else {
|
||||||
|
tabPickup.className = 'h-[46px] w-[408px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg';
|
||||||
|
tabDelivery.className = 'h-[46px] w-[392px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Init sau khi DOM sẵn sàng ────────────────────────────────────────────
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
|
||||||
|
// Build cart state từ DOM
|
||||||
|
document.querySelectorAll('.cart-item').forEach(function (el) {
|
||||||
|
var id = el.dataset.id;
|
||||||
|
var price = parseInt(el.dataset.price) || 0;
|
||||||
|
var qty = parseInt(el.dataset.qty) || 1;
|
||||||
|
cartItems[id] = { el: el, price: price, qty: qty };
|
||||||
|
});
|
||||||
|
|
||||||
|
// Format giá từng item (số thô → "1.850.000₫")
|
||||||
|
document.querySelectorAll('.cart-item').forEach(function (el) {
|
||||||
|
var id = el.dataset.id;
|
||||||
|
var item = cartItems[id];
|
||||||
|
if (!item) return;
|
||||||
|
if (item.price > 0) {
|
||||||
|
var priceEl = el.querySelector('.item-total-price');
|
||||||
|
if (priceEl) priceEl.textContent = formatPrice(item.price * item.qty);
|
||||||
|
}
|
||||||
|
var marketEl = el.querySelector('.item-market-price');
|
||||||
|
if (marketEl) {
|
||||||
|
var raw = parseInt(marketEl.textContent) || 0;
|
||||||
|
if (raw > 0) marketEl.textContent = formatPrice(raw);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Format tổng tiền
|
||||||
|
var totalEl = document.getElementById('cart-total');
|
||||||
|
if (totalEl) {
|
||||||
|
var raw = parseInt(totalEl.textContent.replace(/\D/g, '')) || 0;
|
||||||
|
totalEl.textContent = formatPrice(raw);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs/editor/editor.main.css">
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs/loader.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs' } });
|
|
||||||
require(['vs/editor/editor.main'], function () {
|
|
||||||
|
|
||||||
monaco.editor.defineTheme('myCustomTheme', {
|
|
||||||
base: 'vs',
|
|
||||||
inherit: true,
|
|
||||||
rules: [
|
|
||||||
{ token: 'tag', foreground: '4CAF50', fontStyle: 'bold' }, // Màu cam cho thẻ HTML
|
|
||||||
{ token: 'attribute.name', foreground: 'e00000' }, // Màu xanh lá cho thuộc tính
|
|
||||||
{ token: 'attribute.value', foreground: 'e00000' }, // Màu vàng cho giá trị thuộc tính
|
|
||||||
{ token: 'string', foreground: 'e00000' }, // Màu xanh dương cho chuỗi
|
|
||||||
{ token: 'comment', foreground: '#4CAF50', fontStyle: 'italic' },
|
|
||||||
],
|
|
||||||
colors: {
|
|
||||||
'editor.foreground': '#000000',
|
|
||||||
'editorGutter.background': '#f6f6f6',
|
|
||||||
'editor.lineNumber.foreground': '#000000',
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('tpl_editor'), {
|
|
||||||
value: `<section class= "section-breakcrumb routing py-12 line-clamp" >
|
|
||||||
<div class="global-breadcrumb container">
|
|
||||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none
|
|
||||||
d- flex">
|
|
||||||
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
|
||||||
<a href="/" itemprop="item" class="nopad-l">
|
|
||||||
<span itemprop="name">Trang chủ</span>
|
|
||||||
</a>
|
|
||||||
<meta itemprop="position" content="1">
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="routing-link" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
|
||||||
<a href="{{ path.url }}" itemprop="item" class="nopad-l">
|
|
||||||
<span itemprop="name"> {{ path.name }} </span>
|
|
||||||
</a>
|
|
||||||
<meta itemprop="position" content="{{ counter }}" />
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
|
|
||||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none d-flex">
|
|
||||||
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
|
||||||
<a href="/" itemprop="item" class="nopad-l">
|
|
||||||
<span itemprop="name">Trang chủ</span>
|
|
||||||
</a>
|
|
||||||
<meta itemprop="position" content="1">
|
|
||||||
</li>
|
|
||||||
|
|
||||||
`,
|
|
||||||
language: 'html',
|
|
||||||
theme: 'myCustomTheme',
|
|
||||||
automaticLayout: true,
|
|
||||||
minimap: { enabled: false },
|
|
||||||
autoClosingBrackets: true,
|
|
||||||
autoClosingQuotes: true,
|
|
||||||
autoIndent: true,
|
|
||||||
wordWrap: 'on',
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function open_template_list(id) {
|
|
||||||
var $template = $('#template_list_' + id)
|
|
||||||
if ($template.prop('open')) {
|
|
||||||
$('#template_list_' + id).prop('open', false);
|
|
||||||
} else {
|
|
||||||
$('#template_list_' + id).prop('open', true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function show_older_version() {
|
|
||||||
$('#older_version').toggle()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -31,8 +31,8 @@
|
|||||||
prevEl: el.querySelector(".swiper-button-prev"),
|
prevEl: el.querySelector(".swiper-button-prev"),
|
||||||
},
|
},
|
||||||
breakpoints: {
|
breakpoints: {
|
||||||
1280: { slidesPerView: 4 },
|
1200: { slidesPerView: 5 },
|
||||||
1600: { slidesPerView: 5 },
|
1600: { slidesPerView: 6 },
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -12,45 +12,12 @@
|
|||||||
|
|
||||||
{% if global.view == 'home' %}
|
{% if global.view == 'home' %}
|
||||||
{% include javascript/product_list %}
|
{% include javascript/product_list %}
|
||||||
|
{% elsif global.view == 'detail' %}
|
||||||
|
{% include javascript/product-detail %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% include javascript/product_form %}
|
{% elsif global.module == 'cart' %}
|
||||||
|
|
||||||
{% elsif global.module == 'deal' %}
|
|
||||||
|
|
||||||
{% include javascript/product_form %}
|
|
||||||
|
|
||||||
{% elsif global.module == 'marketing' %}
|
|
||||||
|
|
||||||
{% include javascript/marketing_form %}
|
|
||||||
|
|
||||||
{% elsif global.module == 'brand' %}
|
|
||||||
|
|
||||||
{% include javascript/brand %}
|
|
||||||
|
|
||||||
{% elsif global.module == 'report' %}
|
|
||||||
|
|
||||||
{% include javascript/visitor %}
|
|
||||||
|
|
||||||
{% elsif global.module == 'system' %}
|
|
||||||
|
|
||||||
{% include javascript/system %}
|
|
||||||
|
|
||||||
{% elsif global.module == 'page' %}
|
|
||||||
|
|
||||||
{% include javascript/page %}
|
|
||||||
|
|
||||||
{% elsif global.module == 'template' and global.view == 'edit-template' %}
|
|
||||||
|
|
||||||
{% include javascript/edit_template %}
|
|
||||||
|
|
||||||
{% elsif global.module == 'tag' and global.view == 'add' %}
|
|
||||||
|
|
||||||
{% include javascript/tag %}
|
|
||||||
|
|
||||||
{% elsif global.module == 'shipping2' %}
|
|
||||||
|
|
||||||
{% include javascript/shipping2 %}
|
|
||||||
|
|
||||||
|
{% include javascript/cart %}
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
226
template/javascript/product-detail.html
Normal file
226
template/javascript/product-detail.html
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
// Swiper Thumbs Gallery
|
||||||
|
if (typeof Swiper !== "undefined") {
|
||||||
|
var thumbsSwiper = new Swiper(".product-thumbs-swiper", {
|
||||||
|
spaceBetween: 8,
|
||||||
|
slidesPerView: "auto",
|
||||||
|
freeMode: true,
|
||||||
|
watchSlidesProgress: true,
|
||||||
|
})
|
||||||
|
new Swiper(".product-main-swiper", {
|
||||||
|
spaceBetween: 0,
|
||||||
|
thumbs: { swiper: thumbsSwiper },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fancybox
|
||||||
|
if (typeof Fancybox !== "undefined") {
|
||||||
|
Fancybox.bind("[data-fancybox='product-gallery']")
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tab switching
|
||||||
|
var tabBtnSpec = document.getElementById("tab-btn-spec")
|
||||||
|
var tabBtnInfo = document.getElementById("tab-btn-info")
|
||||||
|
var tabContentSpec = document.getElementById("tab-content-spec")
|
||||||
|
var tabContentInfo = document.getElementById("tab-content-info")
|
||||||
|
var descriptionContent = document.getElementById("product-description-content")
|
||||||
|
var descriptionFade = document.getElementById("product-description-fade")
|
||||||
|
var toggleDescriptionBtn = document.getElementById("btn-toggle-description")
|
||||||
|
var descriptionCollapsedHeight = 420
|
||||||
|
var isDescriptionExpanded = false
|
||||||
|
|
||||||
|
function setActiveTab(active) {
|
||||||
|
if (active === "spec") {
|
||||||
|
tabBtnSpec.className = "w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]"
|
||||||
|
tabBtnInfo.className = "w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]"
|
||||||
|
tabContentSpec.classList.remove("hidden")
|
||||||
|
tabContentInfo.classList.add("hidden")
|
||||||
|
} else {
|
||||||
|
tabBtnInfo.className = "w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]"
|
||||||
|
tabBtnSpec.className = "w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]"
|
||||||
|
tabContentInfo.classList.remove("hidden")
|
||||||
|
tabContentSpec.classList.add("hidden")
|
||||||
|
requestAnimationFrame(syncDescriptionToggle)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncDescriptionToggle() {
|
||||||
|
if (!descriptionContent || !toggleDescriptionBtn || !descriptionFade || !tabContentInfo) return
|
||||||
|
if (tabContentInfo.classList.contains("hidden")) return
|
||||||
|
|
||||||
|
var fullHeight = descriptionContent.scrollHeight
|
||||||
|
if (fullHeight <= descriptionCollapsedHeight + 8) {
|
||||||
|
descriptionContent.style.maxHeight = "none"
|
||||||
|
descriptionFade.classList.add("hidden")
|
||||||
|
toggleDescriptionBtn.classList.add("hidden")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleDescriptionBtn.classList.remove("hidden")
|
||||||
|
|
||||||
|
if (isDescriptionExpanded) {
|
||||||
|
descriptionContent.style.maxHeight = fullHeight + "px"
|
||||||
|
toggleDescriptionBtn.textContent = "Thu gọn"
|
||||||
|
descriptionFade.classList.add("hidden")
|
||||||
|
} else {
|
||||||
|
descriptionContent.style.maxHeight = descriptionCollapsedHeight + "px"
|
||||||
|
toggleDescriptionBtn.textContent = "Xem thêm"
|
||||||
|
descriptionFade.classList.remove("hidden")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollToDescription() {
|
||||||
|
if (!tabContentInfo) return
|
||||||
|
var offsetTop = tabContentInfo.getBoundingClientRect().top + window.pageYOffset - 80
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetTop > 0 ? offsetTop : 0,
|
||||||
|
behavior: "smooth",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tabBtnSpec && tabBtnInfo && tabContentSpec && tabContentInfo) {
|
||||||
|
tabBtnSpec.addEventListener("click", function () { setActiveTab("spec") })
|
||||||
|
tabBtnInfo.addEventListener("click", function () { setActiveTab("info") })
|
||||||
|
}
|
||||||
|
|
||||||
|
if (toggleDescriptionBtn) {
|
||||||
|
toggleDescriptionBtn.addEventListener("click", function () {
|
||||||
|
var wasExpanded = isDescriptionExpanded
|
||||||
|
isDescriptionExpanded = !isDescriptionExpanded
|
||||||
|
syncDescriptionToggle()
|
||||||
|
if (wasExpanded) {
|
||||||
|
setTimeout(scrollToDescription, 60)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tabContentInfo && !tabContentInfo.classList.contains("hidden")) {
|
||||||
|
requestAnimationFrame(syncDescriptionToggle)
|
||||||
|
}
|
||||||
|
window.addEventListener("load", syncDescriptionToggle)
|
||||||
|
|
||||||
|
var installOptionGroup = document.getElementById("install-option-group")
|
||||||
|
var installOptions = installOptionGroup ? Array.prototype.slice.call(installOptionGroup.querySelectorAll(".js-install-option")) : []
|
||||||
|
var selectedAddonInput = document.getElementById("selected-addon-id")
|
||||||
|
|
||||||
|
function setInstallOptionActive(activeOption) {
|
||||||
|
if (!activeOption) return
|
||||||
|
|
||||||
|
installOptions.forEach(function (option) {
|
||||||
|
var isActive = option === activeOption
|
||||||
|
option.classList.toggle("is-selected", isActive)
|
||||||
|
option.classList.toggle("border-[#e4057c]", isActive)
|
||||||
|
option.classList.toggle("bg-[#fff6f6]", isActive)
|
||||||
|
option.classList.toggle("border-[#e2e2e2]", !isActive)
|
||||||
|
option.classList.toggle("bg-white", !isActive)
|
||||||
|
option.setAttribute("aria-checked", isActive ? "true" : "false")
|
||||||
|
|
||||||
|
var radio = option.querySelector(".js-install-radio")
|
||||||
|
var radioDot = option.querySelector(".js-install-radio-dot")
|
||||||
|
var selectedDot = option.querySelector(".js-install-selected-dot")
|
||||||
|
|
||||||
|
if (radio) {
|
||||||
|
radio.classList.toggle("border-[#a0045c]", isActive)
|
||||||
|
radio.classList.toggle("border-[#a9a9a9]", !isActive)
|
||||||
|
}
|
||||||
|
if (radioDot) {
|
||||||
|
radioDot.classList.toggle("hidden", !isActive)
|
||||||
|
}
|
||||||
|
if (selectedDot) {
|
||||||
|
selectedDot.classList.toggle("hidden", !isActive)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (selectedAddonInput) {
|
||||||
|
selectedAddonInput.value = activeOption.getAttribute("data-addon-id") || ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (installOptions.length > 0) {
|
||||||
|
installOptions.forEach(function (option) {
|
||||||
|
option.addEventListener("click", function () {
|
||||||
|
setInstallOptionActive(option)
|
||||||
|
})
|
||||||
|
option.addEventListener("keydown", function (event) {
|
||||||
|
if (event.key === "Enter" || event.key === " ") {
|
||||||
|
event.preventDefault()
|
||||||
|
setInstallOptionActive(option)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
var defaultOption = installOptionGroup.querySelector(".js-install-option.is-selected") || installOptions[0]
|
||||||
|
setInstallOptionActive(defaultOption)
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeCartPopup() {
|
||||||
|
var popup = document.getElementById("cart-popup")
|
||||||
|
if (!popup) return
|
||||||
|
popup.classList.add("hidden")
|
||||||
|
popup.style.display = "none"
|
||||||
|
document.body.classList.remove("overflow-hidden")
|
||||||
|
}
|
||||||
|
|
||||||
|
function showAddToCartPopup(button) {
|
||||||
|
var popup = document.getElementById("cart-popup")
|
||||||
|
|
||||||
|
if (!popup) {
|
||||||
|
// Fallback for pages without the global popup container.
|
||||||
|
var toast = document.getElementById("cart-toast")
|
||||||
|
if (toast) {
|
||||||
|
toast.classList.remove("hidden")
|
||||||
|
setTimeout(function () { toast.classList.add("hidden") }, 3000)
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var productName = button.getAttribute("data-product-name") || ""
|
||||||
|
var productImage = button.getAttribute("data-product-image") || ""
|
||||||
|
var productPrice = button.getAttribute("data-product-price") || "Liên hệ"
|
||||||
|
|
||||||
|
var popupImg = document.getElementById("cart-popup-img")
|
||||||
|
var popupName = document.getElementById("cart-popup-name")
|
||||||
|
var popupPrice = document.getElementById("cart-popup-price")
|
||||||
|
|
||||||
|
if (popupImg) popupImg.src = productImage
|
||||||
|
if (popupName) popupName.textContent = productName
|
||||||
|
if (popupPrice) popupPrice.textContent = productPrice
|
||||||
|
|
||||||
|
popup.classList.remove("hidden")
|
||||||
|
popup.style.display = "flex"
|
||||||
|
document.body.classList.add("overflow-hidden")
|
||||||
|
}
|
||||||
|
|
||||||
|
window.closeCartPopup = closeCartPopup
|
||||||
|
|
||||||
|
var cartPopup = document.getElementById("cart-popup")
|
||||||
|
if (cartPopup) {
|
||||||
|
cartPopup.addEventListener("click", function (event) {
|
||||||
|
if (event.target === cartPopup) {
|
||||||
|
closeCartPopup()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("keydown", function (event) {
|
||||||
|
if (event.key === "Escape") {
|
||||||
|
closeCartPopup()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var addToCartBtn = document.getElementById("btn-add-to-cart")
|
||||||
|
if (addToCartBtn) {
|
||||||
|
addToCartBtn.addEventListener("click", function () {
|
||||||
|
showAddToCartPopup(addToCartBtn)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
var buyNowBtn = document.getElementById("btn-buy-now")
|
||||||
|
if (buyNowBtn) {
|
||||||
|
buyNowBtn.addEventListener("click", function () {
|
||||||
|
window.location.href = "/cart"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<div class="layout-container flex flex-col gap-[27px]">
|
<div class="layout-container flex flex-col gap-[27px] mt-[20px]">
|
||||||
<!-- Box Article + Video Review -->
|
<!-- Box Article + Video Review -->
|
||||||
<div class="bg-white rounded-[12px] overflow-hidden flex gap-3 px-3 py-4">
|
<div class="bg-white rounded-[12px] overflow-hidden flex gap-3 px-3 py-4">
|
||||||
<!-- Tin khuyến mãi -->
|
<!-- Tin khuyến mãi -->
|
||||||
@@ -35,7 +35,8 @@
|
|||||||
{% assign _article_idx = _article_idx | plus: 1 %}
|
{% assign _article_idx = _article_idx | plus: 1 %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if _article_idx > 0 %}</div>{% endif %}
|
{% if _article_idx > 0 %}
|
||||||
|
</div>{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Video Review -->
|
<!-- Video Review -->
|
||||||
|
|||||||
@@ -102,10 +102,10 @@
|
|||||||
<span class="text-white text-sm font-semibold">Đăng nhập</span>
|
<span class="text-white text-sm font-semibold">Đăng nhập</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center gap-[10px] cursor-pointer">
|
<a href="/cart" class="flex items-center gap-[10px] cursor-pointer">
|
||||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[20.844px] h-[18.688px]" />
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[20.844px] h-[18.688px]" />
|
||||||
<span class="text-white text-sm font-semibold">Giỏ hàng</span>
|
<span class="text-white text-sm font-semibold">Giỏ hàng</span>
|
||||||
</div>
|
</a>
|
||||||
|
|
||||||
<div id="btn-showroom"
|
<div id="btn-showroom"
|
||||||
class="bg-[#b70061] h-8 rounded-full flex items-center justify-between pl-[11px] pr-[7px] w-[199px] cursor-pointer select-none"
|
class="bg-[#b70061] h-8 rounded-full flex items-center justify-between pl-[11px] pr-[7px] w-[199px] cursor-pointer select-none"
|
||||||
@@ -264,3 +264,28 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="overlay" class="hidden fixed inset-0 bg-black/30 z-40" onclick="closeAll()"></div>
|
<div id="overlay" class="hidden fixed inset-0 bg-black/30 z-40" onclick="closeAll()"></div>
|
||||||
|
|
||||||
|
<!-- Cart popup modal (global) -->
|
||||||
|
<div id="cart-popup" class="hidden fixed inset-0 z-[999] items-center justify-center bg-black/40" style="display:none">
|
||||||
|
<div class="bg-white rounded-[12px] p-5 w-[400px] flex flex-col gap-4 shadow-2xl">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-[#35b327] flex items-center justify-center shrink-0">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="white" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="text-[15px] font-semibold text-[#35b327]">Đã thêm sản phẩm vào giỏ hàng!</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 py-1">
|
||||||
|
<img id="cart-popup-img" src="" alt="" class="w-16 h-16 rounded-[4px] object-cover border border-[#ebebeb] shrink-0" />
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<p id="cart-popup-name" class="text-[13px] font-semibold text-black line-clamp-2"></p>
|
||||||
|
<p id="cart-popup-price" class="text-[14px] font-bold text-[#e40000] mt-1"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button onclick="closeCartPopup()" class="flex-1 h-10 rounded-[4px] border border-[#d0d0d0] text-[13px] font-medium text-[#333] hover:bg-gray-50">Tiếp tục mua sắm</button>
|
||||||
|
<a href="/cart" class="flex-1 h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium inline-flex items-center justify-center hover:bg-[#0066cc]">Xem giỏ hàng</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -4,8 +4,10 @@
|
|||||||
<!-- Breadcrumb -->
|
<!-- Breadcrumb -->
|
||||||
<div class="flex items-center gap-2 text-[13px]">
|
<div class="flex items-center gap-2 text-[13px]">
|
||||||
<a href="/" class="text-black cursor-pointer hover:text-[#e4057c]">Trang chủ</a>
|
<a href="/" class="text-black cursor-pointer hover:text-[#e4057c]">Trang chủ</a>
|
||||||
<img src="image/icon_arrow_next.svg" alt="" class="w-[10px] h-[10px]" />
|
<svg class="w-2.5 h-2.5 text-[#888]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<span class="text-black font-medium">{{ page.current_category.name }}</span>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="text-black font-medium">{{ page.current_category.name | strip }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Banner Sale -->
|
<!-- Banner Sale -->
|
||||||
@@ -19,29 +21,41 @@
|
|||||||
<div class="absolute bottom-[23px] left-[12px] right-[12px] flex gap-3">
|
<div class="absolute bottom-[23px] left-[12px] right-[12px] flex gap-3">
|
||||||
{% for _product in page.product_list limit:5 %}
|
{% for _product in page.product_list limit:5 %}
|
||||||
<a href="/product/detail?id={{ _product.productId }}"
|
<a href="/product/detail?id={{ _product.productId }}"
|
||||||
class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[9px] py-[10px] flex flex-col gap-[8px] no-underline">
|
class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[7px] pt-[10px] pb-[8px] flex flex-col gap-[8px] no-underline">
|
||||||
<div class="h-[173px] flex items-center justify-center">
|
<div class="absolute left-[7px] top-[8px] z-[1] flex items-center gap-[8px]">
|
||||||
|
{% if _product.productType.isNew == 1 %}
|
||||||
|
<span
|
||||||
|
class="inline-flex items-center justify-center h-4 rounded-[4px] bg-[#fff1f1] px-[5px] text-[10px] leading-none tracking-[-0.2px] text-[#e40000]">Mẫu
|
||||||
|
mới</span>
|
||||||
|
{% endif %}
|
||||||
|
<span
|
||||||
|
class="inline-flex items-center justify-center h-4 rounded-[4px] bg-[#f1f1f1] px-[6px] text-[10px] leading-none tracking-[-0.2px] text-[#484848]">Trả
|
||||||
|
chậm 0%</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="h-[173px] mt-[20px] flex items-center justify-center">
|
||||||
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
||||||
class="w-[173px] h-[173px] rounded-[4px] object-cover"
|
class="w-[173px] h-[173px] rounded-[4px] object-cover"
|
||||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
</div>
|
</div>
|
||||||
{% if _product.label != '' %}
|
|
||||||
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]"
|
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]"
|
||||||
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">
|
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">
|
||||||
<span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img
|
<span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img
|
||||||
src="{{ 'icon_gift.png' | asset_url }}" alt=""
|
src="{{ 'icon_gift.png' | asset_url }}" alt=""
|
||||||
class="w-[11px] h-[11px] object-contain" /></span>
|
class="w-[11px] h-[11px] object-contain" /></span>
|
||||||
<span>{{ _product.label }}</span>
|
<span>{{ _product.label | strip | default: 'Sắm tết vô tư' }}</span>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
|
||||||
<div class="flex items-center gap-[6px]">
|
<div class="flex items-center gap-[6px]">
|
||||||
{% if _product.price > 0 %}
|
{% if _product.price > 0 %}
|
||||||
<p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">{{
|
<p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">{{
|
||||||
_product.price | number_format }} <span class="underline">đ</span></p>
|
_product.price | format_number }} <span class="underline">đ</span></p>
|
||||||
{% if _product.price_off != '' %}
|
{% assign _price_off = _product.price_off | strip %}
|
||||||
|
{% if _price_off != '' and _price_off != '0' %}
|
||||||
<span
|
<span
|
||||||
class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-{{
|
class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-{{
|
||||||
_product.price_off }}%</span>
|
_price_off }}%</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
|
<p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
|
||||||
@@ -49,12 +63,20 @@
|
|||||||
</div>
|
</div>
|
||||||
{% if _product.marketPrice > 0 %}
|
{% if _product.marketPrice > 0 %}
|
||||||
<p class="m-0 text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{
|
<p class="m-0 text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{
|
||||||
_product.marketPrice | number_format }} đ</p>
|
_product.marketPrice | format_number }} đ</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<p
|
<p
|
||||||
class="m-0 h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black">
|
class="m-0 h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black">
|
||||||
{{ _product.productName }}</p>
|
{{ _product.productName }}</p>
|
||||||
<div class="mt-auto flex items-center justify-between gap-[6px]">
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
|
||||||
|
onerror="this.style.display='none'">
|
||||||
|
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
|
||||||
|
onerror="this.style.display='none'">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between gap-[6px]">
|
||||||
<div
|
<div
|
||||||
class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap">
|
class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap">
|
||||||
<img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" />
|
<img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" />
|
||||||
@@ -144,47 +166,53 @@
|
|||||||
{% for _product in page.product_list %}
|
{% for _product in page.product_list %}
|
||||||
<div
|
<div
|
||||||
class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px] h-full">
|
class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px] h-full">
|
||||||
<a href="/product/detail" class="block">
|
<a href="/product/detail?id={{ _product.productId }}" class="block">
|
||||||
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
||||||
class="w-full aspect-square rounded-[4px] object-cover"
|
class="w-full aspect-square rounded-[4px] object-cover"
|
||||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
</a>
|
</a>
|
||||||
{% if _product.productType.isSaleOff == 1 %}
|
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]"
|
||||||
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
|
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">
|
||||||
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sale off</span>
|
<span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img
|
||||||
{% elsif _product.productType.isHot == 1 %}
|
src="{{ 'icon_gift.png' | asset_url }}" alt=""
|
||||||
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
|
class="w-[11px] h-[11px] object-contain" /></span>
|
||||||
style="background:linear-gradient(89.82deg,#ff6600 2.38%,#cc4400 94.82%)">Hot</span>
|
<span>{{ _product.label | strip | default: 'Sắm tết vô tư' }}</span>
|
||||||
{% elsif _product.productType.isNew == 1 %}
|
</div>
|
||||||
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
|
|
||||||
style="background:linear-gradient(89.82deg,#0066ff 2.38%,#0044cc 94.82%)">Mới</span>
|
|
||||||
{% endif %}
|
|
||||||
{% if _product.price > 0 %}
|
{% if _product.price > 0 %}
|
||||||
<div class="flex items-center gap-1">
|
<div class="flex items-center gap-[6px]">
|
||||||
<p class="text-[18px] font-bold text-[#db0000]">{{ _product.price | number_format }} <span
|
<p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">{{ _product.price |
|
||||||
class="underline">đ</span></p>
|
format_number }} <span class="underline">đ</span></p>
|
||||||
{% if _product.price_off != '' and _product.price_off != '0' %}
|
{% assign _price_off = _product.price_off | strip %}
|
||||||
<span class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-{{
|
{% if _price_off != '' and _price_off != '0' %}
|
||||||
_product.price_off }}%</span>
|
<span
|
||||||
|
class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-{{
|
||||||
|
_price_off }}%</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% if _product.marketPrice > 0 %}
|
{% if _product.marketPrice > 0 %}
|
||||||
<p class="text-[12px] text-[#c5c5c5] line-through">{{ _product.marketPrice | number_format }} đ</p>
|
<p class="text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{
|
||||||
|
_product.marketPrice | format_number }} đ</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-[18px] font-bold text-[#db0000]">Liên hệ</p>
|
<p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="/product/detail" class="text-[13px] font-bold text-black hover:text-[#e4057c] line-clamp-2">{{
|
<a href="/product/detail?id={{ _product.productId }}"
|
||||||
|
class="h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black hover:text-[#e4057c]">{{
|
||||||
_product.productName
|
_product.productName
|
||||||
}}</a>
|
}}</a>
|
||||||
{% if _product.rating > 0 %}
|
<div class="flex items-center gap-2">
|
||||||
<div class="flex items-center gap-1 text-[12px] text-[#707070]">
|
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
|
||||||
<img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" />
|
onerror="this.style.display='none'">
|
||||||
<span>{{ _product.rating }} · {{ _product.reviewCount }} đánh giá</span>
|
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
|
||||||
|
onerror="this.style.display='none'">
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
<div
|
||||||
<div class="mt-auto flex justify-end">
|
class="mt-auto flex items-center justify-between gap-[6px] text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap">
|
||||||
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
<div class="inline-flex items-center gap-1">
|
||||||
|
<img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" />
|
||||||
|
<span>{{ _product.rating | default: 0 }} · Đã bán {{ _product.reviewCount | default: 0 }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shrink-0 shadow">
|
||||||
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
|
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,6 +2,9 @@
|
|||||||
{% assign _product = page.product_info %}
|
{% assign _product = page.product_info %}
|
||||||
{% assign _rating_summary = _product.review.summary %}
|
{% assign _rating_summary = _product.review.summary %}
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5/dist/fancybox/fancybox.css" />
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5/dist/fancybox/fancybox.umd.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.font-inter {
|
.font-inter {
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
@@ -9,12 +12,13 @@
|
|||||||
|
|
||||||
.star-row {
|
.star-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 10px 12px 1fr 36px;
|
grid-template-columns: 10px 12px 232px 40px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
column-gap: 9px;
|
column-gap: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.star-bar {
|
.star-bar {
|
||||||
|
width: 232px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
background: #e6e6e6;
|
background: #e6e6e6;
|
||||||
@@ -36,13 +40,52 @@
|
|||||||
.product-description table {
|
.product-description table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-thumbs-swiper .swiper-slide {
|
||||||
|
opacity: 0.5;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-thumbs-swiper .swiper-slide-thumb-active {
|
||||||
|
opacity: 1;
|
||||||
|
border-color: #57aeff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="w-[1200px] mx-auto flex flex-col gap-3 py-5">
|
<div class="layout-container flex flex-col gap-3 py-5">
|
||||||
|
<div class="flex items-center gap-2 text-[13px] text-black">
|
||||||
|
{% assign _product_paths = _product.productPath[0].path | to_array %}
|
||||||
|
{% if _product_paths.size > 0 %}
|
||||||
|
{% for _path_entry in _product_paths %}
|
||||||
|
{% assign _path = _path_entry.value %}
|
||||||
|
{% if _path.url != '' %}
|
||||||
|
<a href="{{ _path.url }}" class="hover:text-[#e4057c]">{{ _path.name | strip }}</a>
|
||||||
|
{% else %}
|
||||||
|
<span>{{ _path.name | strip }}</span>
|
||||||
|
{% endif %}
|
||||||
|
{% unless forloop.last %}
|
||||||
|
<svg class="w-2.5 h-2.5 text-[#888]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||||
|
</svg>
|
||||||
|
{% endunless %}
|
||||||
|
{% endfor %}
|
||||||
|
{% elsif _product.categoryInfo.size > 0 %}
|
||||||
|
<a href="{{ _product.categoryInfo[0].url }}" class="hover:text-[#e4057c]">{{ _product.categoryInfo[0].name | strip
|
||||||
|
}}</a>
|
||||||
|
{% else %}
|
||||||
|
<span>Chi tiết sản phẩm</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if false %}
|
||||||
<div class="flex items-center gap-2 text-[13px] text-black">
|
<div class="flex items-center gap-2 text-[13px] text-black">
|
||||||
<a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
|
<a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
|
||||||
{% if _product.productPath.size > 0 %}
|
{% assign _product_paths = _product.productPath[0].path | to_array %}
|
||||||
{% for _path in _product.productPath[0].path %}
|
{% if _product_paths.size > 0 %}
|
||||||
|
{% for _path_entry in _product_paths %}
|
||||||
|
{% assign _path = _path_entry.value %}
|
||||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||||
<a href="{{ _path.url }}" class="hover:text-[#e4057c]">{{ _path.name }}</a>
|
<a href="{{ _path.url }}" class="hover:text-[#e4057c]">{{ _path.name }}</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
@@ -50,7 +93,10 @@
|
|||||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||||
<a href="{{ _product.categoryInfo[0].url }}" class="hover:text-[#e4057c]">{{ _product.categoryInfo[0].name }}</a>
|
<a href="{{ _product.categoryInfo[0].url }}" class="hover:text-[#e4057c]">{{ _product.categoryInfo[0].name }}</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
|
||||||
|
<span class="text-black line-clamp-1">{{ _product.productName }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
@@ -68,71 +114,117 @@
|
|||||||
{{ _rating_summary.avgRate | default: 0 }}
|
{{ _rating_summary.avgRate | default: 0 }}
|
||||||
</span>
|
</span>
|
||||||
<a href="#product-spec" class="text-[#0084ff] flex items-center gap-1">
|
<a href="#product-spec" class="text-[#0084ff] flex items-center gap-1">
|
||||||
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-[#0084ff] text-[11px]">i</span>
|
<span
|
||||||
|
class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-[#0084ff] text-[11px]">i</span>
|
||||||
Thông số
|
Thông số
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-start gap-3">
|
<div class="flex items-start gap-3">
|
||||||
<section class="w-[796px] flex flex-col gap-3">
|
<section class="flex-1 min-w-0 flex flex-col gap-3">
|
||||||
<div class="bg-white rounded-[8px] px-3 py-[10px] flex flex-col gap-2">
|
<div class="bg-white rounded-[8px] px-3 py-[10px] flex flex-col gap-2">
|
||||||
<div class="w-[392px] h-[392px] mx-auto rounded-[8px] overflow-hidden bg-white flex items-center justify-center">
|
<!-- Main image swiper -->
|
||||||
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}" class="w-full h-full object-contain"
|
<div
|
||||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
class="swiper product-main-swiper w-full max-w-[460px] aspect-square mx-auto rounded-[8px] overflow-hidden bg-white">
|
||||||
</div>
|
<div class="swiper-wrapper">
|
||||||
<div class="flex flex-wrap gap-2">
|
|
||||||
{% if _product.productImageGallery.size > 0 %}
|
{% if _product.productImageGallery.size > 0 %}
|
||||||
{% for _image in _product.productImageGallery limit:13 %}
|
{% for _image in _product.productImageGallery limit:13 %}
|
||||||
<button class="w-[52px] h-[52px] rounded-[2px] overflow-hidden {% if forloop.first %}border border-[#57aeff]{% else %}border border-transparent{% endif %}">
|
<div class="swiper-slide flex items-center justify-center">
|
||||||
<img src="{{ _image.large | default: _image.original | default: _image.small }}" alt="{{ _product.productName }}"
|
<a data-fancybox="product-gallery"
|
||||||
class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
href="{{ _image.large | default: _image.original | default: _image.small }}"
|
||||||
</button>
|
class="block w-full h-full">
|
||||||
|
<img src="{{ _image.large | default: _image.original | default: _image.small }}"
|
||||||
|
alt="{{ _product.productName }}" class="w-full h-full object-contain"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<button class="w-[52px] h-[52px] rounded-[2px] overflow-hidden border border-[#57aeff]">
|
<div class="swiper-slide flex items-center justify-center">
|
||||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-full h-full object-cover"
|
<a data-fancybox="product-gallery" href="{{ _product.productImage.large }}" class="block w-full h-full">
|
||||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
<img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
|
||||||
</button>
|
class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Thumbnails swiper -->
|
||||||
|
<div class="swiper product-thumbs-swiper mt-1">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
{% if _product.productImageGallery.size > 0 %}
|
||||||
|
{% for _image in _product.productImageGallery limit:13 %}
|
||||||
|
<div class="swiper-slide !w-[52px] !h-[52px] rounded-[2px] overflow-hidden">
|
||||||
|
<img src="{{ _image.small | default: _image.original | default: _image.large }}"
|
||||||
|
alt="{{ _product.productName }}" class="w-full h-full object-cover"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
<div class="swiper-slide !w-[52px] !h-[52px] rounded-[2px] overflow-hidden">
|
||||||
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
|
class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bg-white rounded-[8px] px-3 py-2 flex flex-col gap-3">
|
<div class="bg-white rounded-[8px] px-3 py-2 flex flex-col gap-3">
|
||||||
<h2 class="font-inter text-[16px] font-bold tracking-[-0.32px]">MIQ cam kết</h2>
|
<h2 class="font-inter text-[16px] font-bold tracking-[-0.32px]">MIQ cam kết</h2>
|
||||||
<div class="h-px bg-[#ececec]"></div>
|
<div class="h-px bg-[#ececec]"></div>
|
||||||
<div class="grid grid-cols-2 gap-x-[40px] gap-y-3 text-[13px] text-black tracking-[-0.26px]">
|
<div class="grid grid-cols-2 gap-x-[40px] gap-y-3 text-[13px] text-black tracking-[-0.26px]">
|
||||||
<p class="flex items-start gap-2"><img src="{{ 'icon_double_next_small.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
<p class="flex items-start gap-2">
|
||||||
Hàng chính hãng, hỗ trợ kỹ thuật nhanh chóng.</p>
|
<img src="https://www.figma.com/api/mcp/asset/1eb5d75b-4d86-4183-afc5-4ea470d2b03a" alt=""
|
||||||
<p class="flex items-start gap-2"><img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
class="w-7 h-7 shrink-0" />
|
||||||
{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Bảo hành theo chính sách của nhà sản xuất.{% endif %}</p>
|
Hư gì đổi nấy 12 tháng tận nhà (miễn phí tháng đầu)
|
||||||
<p class="flex items-start gap-2"><img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
</p>
|
||||||
{% if _product.price > 0 %}Giá bán minh bạch, cập nhật theo dữ liệu sản phẩm.{% else %}Giá đang được cập nhật, vui lòng liên hệ để nhận báo giá.{% endif %}</p>
|
<p class="flex items-start gap-2">
|
||||||
<p class="flex items-start gap-2"><img src="{{ 'icon_customer_support.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
<img src="https://www.figma.com/api/mcp/asset/67ff0e18-ae1e-4a60-b2f7-7adce5447103" alt=""
|
||||||
Tư vấn trước và sau mua hàng trong giờ hành chính.</p>
|
class="w-7 h-7 shrink-0" />
|
||||||
<p class="flex items-start gap-2"><img src="{{ 'icon_double_next_small.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
|
{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Bảo hành chính hãng 2 năm, có người đến tận
|
||||||
{% if _product.package_accessory != '' %}{{ _product.package_accessory }}{% else %}Phụ kiện và quà tặng áp dụng theo từng chương trình cụ thể.{% endif %}</p>
|
nhà{% endif %}
|
||||||
|
</p>
|
||||||
|
<p class="flex items-start gap-2">
|
||||||
|
<img src="https://www.figma.com/api/mcp/asset/67ff0e18-ae1e-4a60-b2f7-7adce5447103" alt=""
|
||||||
|
class="w-7 h-7 shrink-0" />
|
||||||
|
{% if _product.price > 0 %}Giá bán minh bạch, cập nhật theo dữ liệu sản phẩm.{% else %}Giá đang được cập
|
||||||
|
nhật, vui lòng liên hệ để nhận báo giá.{% endif %}
|
||||||
|
</p>
|
||||||
|
<p class="flex items-start gap-2">
|
||||||
|
<img src="https://www.figma.com/api/mcp/asset/ad1d1545-2457-4297-9260-befa7a7ae7c3" alt=""
|
||||||
|
class="w-7 h-7 shrink-0" />
|
||||||
|
Nếu dùng cho hoạt động kinh doanh (nhà máy, khách sạn, giặt ủi,...) thì không được bảo hành.
|
||||||
|
</p>
|
||||||
|
<p class="flex items-start gap-2">
|
||||||
|
<img src="https://www.figma.com/api/mcp/asset/8ccb7b02-0447-4725-9436-399b0fdcdea2" alt=""
|
||||||
|
class="w-7 h-7 shrink-0" />
|
||||||
|
{% if _product.package_accessory != '' %}{{ _product.package_accessory }}{% else %}Lắp đặt miễn phí lúc giao
|
||||||
|
hàng{% endif %}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-white rounded-[8px] p-3 flex flex-col gap-3">
|
<div class="bg-white rounded-[8px] p-3 flex flex-col gap-3">
|
||||||
<h3 class="text-[16px] font-bold tracking-[-0.32px]">Tham khảo thêm sản phẩm đang xem</h3>
|
<h3 class="text-[16px] font-bold tracking-[-0.32px]">Tham khảo thêm sản phẩm đang xem</h3>
|
||||||
<div class="min-h-[98px] rounded-[8px] border border-[#ebebeb] flex items-center gap-3 px-3 py-[9px]">
|
<div class="min-h-[98px] rounded-[8px] border border-[#ebebeb] flex items-center gap-3 px-3 py-[9px]">
|
||||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[2px] object-cover"
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
class="w-20 h-20 rounded-[2px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
<div class="w-[472px] flex flex-col gap-1">
|
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
||||||
<p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">{{ _product.productName }}</p>
|
<p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">{{ _product.productName }}</p>
|
||||||
<div class="flex items-center gap-2 flex-wrap">
|
<div class="flex items-center gap-2 flex-wrap">
|
||||||
{% if _product.price > 0 %}
|
{% if _product.price > 0 %}
|
||||||
<p class="text-[15px] font-bold text-[#cd0000]">{{ _product.price | number_format }}₫</p>
|
<p class="text-[15px] font-bold text-[#cd0000]">{{ _product.price | format_number }}₫</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-[15px] font-bold text-[#cd0000]">Liên hệ</p>
|
<p class="text-[15px] font-bold text-[#cd0000]">Liên hệ</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if _product.marketPrice > 0 %}
|
{% if _product.marketPrice > 0 %}
|
||||||
<p class="text-[13px] text-[#9d9d9d] line-through">{{ _product.marketPrice | number_format }}₫</p>
|
<p class="text-[13px] text-[#9d9d9d] line-through">{{ _product.marketPrice | format_number }}₫</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<p class="text-[13px] leading-6 tracking-[-0.26px]">{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Thông tin bảo hành đang cập nhật.{% endif %}</p>
|
<p class="text-[13px] leading-6 tracking-[-0.26px]">{% if _product.warranty != '' %}{{ _product.warranty
|
||||||
|
}}{% else %}Thông tin bảo hành đang cập nhật.{% endif %}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -140,7 +232,8 @@
|
|||||||
<div class="bg-white rounded-[8px] px-3 py-[15px] flex flex-col gap-2">
|
<div class="bg-white rounded-[8px] px-3 py-[15px] flex flex-col gap-2">
|
||||||
<h3 class="text-[16px] font-bold tracking-[-0.32px]">Đặc điểm nổi bật</h3>
|
<h3 class="text-[16px] font-bold tracking-[-0.32px]">Đặc điểm nổi bật</h3>
|
||||||
{% if _product.productSummary != '' %}
|
{% if _product.productSummary != '' %}
|
||||||
<div class="text-[13px] leading-[22px] tracking-[-0.26px] whitespace-pre-line">{{ _product.productSummary }}</div>
|
<div class="text-[13px] leading-[22px] tracking-[-0.26px] whitespace-pre-line">{{ _product.productSummary }}
|
||||||
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<ul class="list-disc ps-5 text-[13px] leading-[22px] tracking-[-0.26px]">
|
<ul class="list-disc ps-5 text-[13px] leading-[22px] tracking-[-0.26px]">
|
||||||
<li>Sản phẩm đang được cập nhật phần mô tả nổi bật.</li>
|
<li>Sản phẩm đang được cập nhật phần mô tả nổi bật.</li>
|
||||||
@@ -151,18 +244,25 @@
|
|||||||
|
|
||||||
<div id="product-spec" class="bg-white rounded-[8px] px-3 py-[22px] flex flex-col gap-4">
|
<div id="product-spec" class="bg-white rounded-[8px] px-3 py-[22px] flex flex-col gap-4">
|
||||||
<div class="flex items-center justify-center gap-3">
|
<div class="flex items-center justify-center gap-3">
|
||||||
<button class="w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]">Thông số kỹ thuật</button>
|
<button id="tab-btn-spec"
|
||||||
<button class="w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]">Thông tin sản phẩm</button>
|
class="w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]">Thông
|
||||||
|
số kỹ thuật</button>
|
||||||
|
<button id="tab-btn-info"
|
||||||
|
class="w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]">Thông
|
||||||
|
tin sản phẩm</button>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Tab: Thông số kỹ thuật -->
|
||||||
|
<div id="tab-content-spec">
|
||||||
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2">
|
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2">
|
||||||
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Tổng quan</p>
|
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Tổng quan</p>
|
||||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-[196px_1fr] gap-x-[88px] gap-y-[24px] px-3 text-[13px] tracking-[-0.26px]">
|
<div class="grid grid-cols-[196px_1fr] gap-x-[88px] gap-y-[24px] px-3 mt-4 text-[13px] tracking-[-0.26px]">
|
||||||
<p>Tên sản phẩm</p>
|
<p>Tên sản phẩm</p>
|
||||||
<p>{{ _product.productName }}</p>
|
<p>{{ _product.productName }}</p>
|
||||||
<p>Danh mục</p>
|
<p>Danh mục</p>
|
||||||
<p>{% if _product.categoryInfo.size > 0 %}{{ _product.categoryInfo[0].name }}{% else %}Đang cập nhật{% endif %}</p>
|
<p>{% if _product.categoryInfo.size > 0 %}{{ _product.categoryInfo[0].name }}{% else %}Đang cập nhật{% endif
|
||||||
|
%}</p>
|
||||||
<p>Thương hiệu</p>
|
<p>Thương hiệu</p>
|
||||||
<p>{% if _product.brand.name != '' %}{{ _product.brand.name }}{% else %}Đang cập nhật{% endif %}</p>
|
<p>{% if _product.brand.name != '' %}{{ _product.brand.name }}{% else %}Đang cập nhật{% endif %}</p>
|
||||||
<p>Model</p>
|
<p>Model</p>
|
||||||
@@ -176,53 +276,85 @@
|
|||||||
<p>Cập nhật</p>
|
<p>Cập nhật</p>
|
||||||
<p>{{ _product.lastUpdate }}</p>
|
<p>{{ _product.lastUpdate }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2 mt-2">
|
<!-- Tab: Thông tin sản phẩm -->
|
||||||
|
<div id="tab-content-info" class="hidden">
|
||||||
|
<div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2">
|
||||||
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Mô tả sản phẩm</p>
|
<p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Mô tả sản phẩm</p>
|
||||||
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
<img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
|
||||||
</div>
|
</div>
|
||||||
<div class="product-description px-3 text-[13px] leading-[22px] tracking-[-0.26px] text-black overflow-hidden">
|
<div class="relative mt-4 px-3">
|
||||||
|
<div id="product-description-content"
|
||||||
|
class="product-description text-[13px] leading-[22px] tracking-[-0.26px] text-black overflow-hidden max-h-[420px] transition-all duration-300 ease-in-out">
|
||||||
{% if _product.productDescription != '' %}
|
{% if _product.productDescription != '' %}
|
||||||
{{ _product.productDescription }}
|
{{ _product.productDescription }}
|
||||||
{% else %}
|
{% else %}
|
||||||
<p>Thông tin mô tả sản phẩm đang được cập nhật.</p>
|
<p>Thông tin mô tả sản phẩm đang được cập nhật.</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
<div id="product-description-fade"
|
||||||
|
class="pointer-events-none absolute left-3 right-3 bottom-0 h-20 bg-gradient-to-t from-white to-transparent">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 flex justify-center">
|
||||||
|
<button id="btn-toggle-description" type="button"
|
||||||
|
class="hidden h-10 rounded-[4px] border border-[#8c8c8c] px-6 text-[#6b6b6b] text-[13px] font-medium">
|
||||||
|
Xem thêm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% comment %}
|
||||||
<div class="bg-white rounded-[12px] px-3 py-4 flex flex-col gap-5">
|
<div class="bg-white rounded-[12px] px-3 py-4 flex flex-col gap-5">
|
||||||
<h3 class="text-[18px] font-semibold tracking-[-0.36px]">Đánh giá {{ _product.productName }}</h3>
|
<h3 class="text-[18px] font-semibold tracking-[-0.36px]">Đánh giá {{ _product.productName }}</h3>
|
||||||
<div class="flex items-center justify-center gap-5">
|
<div class="flex items-center justify-center gap-5">
|
||||||
<div class="w-[112px] flex flex-col items-center gap-1">
|
<div class="w-[112px] flex flex-col items-center gap-1">
|
||||||
<p class="text-[32px] font-extrabold font-inter tracking-[-0.64px]">{{ _rating_summary.avgRate | default: 0 }}<span class="text-[13px] text-[#9d9d9d] font-normal">/5</span></p>
|
<p class="text-[32px] font-extrabold font-inter tracking-[-0.64px]">{{ _rating_summary.avgRate | default: 0
|
||||||
<p class="text-[13px] font-inter">{{ page.product_info.comment.summary.total | default: 0 }} khách hài lòng</p>
|
}}<span class="text-[13px] text-[#9d9d9d] font-normal">/5</span></p>
|
||||||
|
<p class="text-[13px] font-inter">{{ page.product_info.comment.summary.total | default: 0 }} khách hài lòng
|
||||||
|
</p>
|
||||||
<p class="text-[13px] text-[#9d9d9d] font-inter">{{ _rating_summary.total | default: 0 }} đánh giá</p>
|
<p class="text-[13px] text-[#9d9d9d] font-inter">{{ _rating_summary.total | default: 0 }} đánh giá</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[315px] flex flex-col gap-2 text-[13px]">
|
<div class="w-[315px] flex flex-col gap-2 text-[13px]">
|
||||||
<div class="star-row"><span>5</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
<div class="star-row"><span>5</span><span>★</span>
|
||||||
<div class="star-row"><span>4</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||||
<div class="star-row"><span>3</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
|
||||||
<div class="star-row"><span>2</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
|
||||||
<div class="star-row"><span>1</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
|
|
||||||
</div>
|
</div>
|
||||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
<div class="star-row"><span>4</span><span>★</span>
|
||||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
</div>
|
||||||
|
<div class="star-row"><span>3</span><span>★</span>
|
||||||
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||||
|
</div>
|
||||||
|
<div class="star-row"><span>2</span><span>★</span>
|
||||||
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||||
|
</div>
|
||||||
|
<div class="star-row"><span>1</span><span>★</span>
|
||||||
|
<div class="star-bar"><span style="width:0%"></span></div><span>0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
|
class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
|
class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
|
class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-[754px] grid gap-2 text-[13px] tracking-[-0.26px]">
|
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||||
<div class="flex items-center gap-1">
|
<div class="flex items-center gap-1">
|
||||||
<p class="font-bold">MIQ</p>
|
<p class="font-bold">MIQ</p>
|
||||||
<span class="text-[#35b327]">●</span>
|
<span class="text-[#35b327]">●</span>
|
||||||
<p class="text-[#35b327] font-medium">Thông tin đánh giá đang được cập nhật</p>
|
<p class="text-[#35b327] font-medium">Thông tin đánh giá đang được cập nhật</p>
|
||||||
</div>
|
</div>
|
||||||
<p>★★★★★ <span class="mx-2 text-[#9d9d9d]">|</span> Chưa có nội dung đánh giá hiển thị</p>
|
<p>★★★★★ <span class="mx-2 text-[#9d9d9d]">|</span> Chưa có nội dung đánh giá hiển thị</p>
|
||||||
<p>Khách hàng có thể để lại đánh giá sau khi mua hàng để hoàn thiện phần trải nghiệm thực tế cho sản phẩm này.</p>
|
<p>Khách hàng có thể để lại đánh giá sau khi mua hàng để hoàn thiện phần trải nghiệm thực tế cho sản phẩm này.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="h-px bg-[#e8e8e8] w-[772px]"></div>
|
<div class="h-px bg-[#e8e8e8] w-full"></div>
|
||||||
|
|
||||||
<div class="w-[754px] grid gap-2 text-[13px] tracking-[-0.26px]">
|
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||||
<div class="flex items-center gap-1">
|
<div class="flex items-center gap-1">
|
||||||
<p class="font-bold">MIQ</p>
|
<p class="font-bold">MIQ</p>
|
||||||
<span class="text-[#35b327]">●</span>
|
<span class="text-[#35b327]">●</span>
|
||||||
@@ -232,23 +364,144 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center justify-center gap-2">
|
<div class="flex items-center justify-center gap-2">
|
||||||
<button class="w-[231px] h-10 rounded-[4px] border border-[#8c8c8c] text-[#6b6b6b] text-[13px] font-medium">Xem {{ _rating_summary.total | default: 0 }} đánh giá</button>
|
<button
|
||||||
<button class="w-[231px] h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium">Viết đánh giá</button>
|
class="w-[231px] h-10 rounded-[4px] border border-[#8c8c8c] text-[#6b6b6b] text-[13px] font-medium">Xem {{
|
||||||
|
_rating_summary.total | default: 0 }} đánh giá</button>
|
||||||
|
<button class="w-[231px] h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium">Viết đánh
|
||||||
|
giá</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcomment %}
|
||||||
|
|
||||||
|
{% assign _rating_total = _rating_summary.total | default: 0 | plus: 0 %}
|
||||||
|
{% assign _rating_avg = _rating_summary.avgRate | default: 0 %}
|
||||||
|
{% assign _happy_total = page.product_info.comment.summary.total | default: _rating_total %}
|
||||||
|
<div class="bg-white rounded-[12px] px-3 py-4 flex flex-col gap-5">
|
||||||
|
<h3 class="text-[18px] font-semibold tracking-[-0.36px]">Đánh giá {{ _product.productName }}</h3>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center gap-5">
|
||||||
|
<div class="w-[112px] flex flex-col items-center gap-1 shrink-0">
|
||||||
|
<div class="flex items-center gap-[2px]">
|
||||||
|
<span class="text-[#f9a000] text-[18px] leading-none">★</span>
|
||||||
|
<p class="text-[32px] leading-none font-extrabold font-inter tracking-[-0.64px]">{{ _rating_avg }}</p>
|
||||||
|
<p class="text-[13px] text-[#9d9d9d] font-inter">/5</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-[13px] font-inter text-black">{{ _happy_total }} khách hài lòng</p>
|
||||||
|
<p class="text-[13px] text-[#9d9d9d] font-inter">{{ _rating_total }} đánh giá</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[315px] flex flex-col gap-2 text-[13px] shrink-0">
|
||||||
|
{% assign _rating_keys = '5,4,3,2,1' | split: ',' %}
|
||||||
|
{% for _star in _rating_keys %}
|
||||||
|
{% assign _rate_point = _star | plus: 0 %}
|
||||||
|
{% assign _rate_count = 0 %}
|
||||||
|
{% if _rating_summary.list_rate.size > 0 %}
|
||||||
|
{% for _rate in _rating_summary.list_rate %}
|
||||||
|
{% assign _rate_key = _rate.rate | default: _rate.star | default: _rate.key | default: _rate.id | plus: 0 %}
|
||||||
|
{% if _rate_key == _rate_point %}
|
||||||
|
{% assign _rate_count = _rate.total | default: _rate.count | default: _rate.value | plus: 0 %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
{% assign _rate_percent = 0 %}
|
||||||
|
{% if _rating_total > 0 %}
|
||||||
|
{% assign _rate_percent = _rate_count | times: 100.0 | divided_by: _rating_total %}
|
||||||
|
{% endif %}
|
||||||
|
<div class="star-row">
|
||||||
|
<span class="text-[13px] font-medium">{{ _star }}</span>
|
||||||
|
<span class="text-[#f9a000] text-[12px] leading-none">★</span>
|
||||||
|
<div class="star-bar">
|
||||||
|
<span
|
||||||
|
style="width:{% if _rate_percent > 100 %}100{% elsif _rate_percent < 0 %}0{% else %}{{ _rate_percent }}{% endif %}%"></span>
|
||||||
|
</div>
|
||||||
|
<span class="text-[13px] font-medium tracking-[-0.26px]">
|
||||||
|
{% if _rate_percent > 0 %}{{ _rate_percent | round: 1 }}%{% else %}0{% endif %}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
|
class="w-20 h-20 rounded-[4px] object-cover shrink-0"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
|
class="w-20 h-20 rounded-[4px] object-cover shrink-0"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
|
class="w-20 h-20 rounded-[4px] object-cover shrink-0"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||||
|
<div class="flex items-center gap-[6px]">
|
||||||
|
<p class="font-bold">Nguyễn Lê Tuấn</p>
|
||||||
|
<svg class="w-[15px] h-[15px] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||||
|
<circle cx="12" cy="12" r="9.5" stroke="#35b327" />
|
||||||
|
<path d="M8.5 12.5L11 15L15.5 9.8" stroke="#35b327" stroke-width="1.5" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-[#35b327] font-medium">Đã mua tại MIQ</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-[#f9a000] text-[12px] leading-none tracking-[1px]">★★★★★</span>
|
||||||
|
<span class="w-px h-[14px] bg-[#d5d5d5]"></span>
|
||||||
|
<span class="text-[#df0000] text-[12px] leading-none">♥</span>
|
||||||
|
<p class="font-medium">Sẽ giới thiệu cho bạn bè, người thân</p>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium">Tủ lạnh có ngăn chứa rất rộng rãi để được nhiều thực phẩm, có app theo dõi rất tiện
|
||||||
|
lợi,
|
||||||
|
mua được ngay dịp sale giá rẻ, có dịp mình sẽ ủng hộ nữa</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="h-px bg-[#e8e8e8] w-full"></div>
|
||||||
|
|
||||||
|
<div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
|
||||||
|
<div class="flex items-center gap-[6px]">
|
||||||
|
<p class="font-bold">Nguyễn Lê Tuấn</p>
|
||||||
|
<svg class="w-[15px] h-[15px] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||||
|
<circle cx="12" cy="12" r="9.5" stroke="#35b327" />
|
||||||
|
<path d="M8.5 12.5L11 15L15.5 9.8" stroke="#35b327" stroke-width="1.5" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-[#35b327] font-medium">Đã mua tại MIQ</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-[#f9a000] text-[12px] leading-none tracking-[1px]">★★★★★</span>
|
||||||
|
<span class="w-px h-[14px] bg-[#d5d5d5]"></span>
|
||||||
|
<span class="text-[#df0000] text-[12px] leading-none">♥</span>
|
||||||
|
<p class="font-medium">Sẽ giới thiệu cho bạn bè, người thân</p>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium">Tủ lạnh có ngăn chứa rất rộng rãi để được nhiều thực phẩm, có app theo dõi rất tiện
|
||||||
|
lợi,
|
||||||
|
mua được ngay dịp sale giá rẻ, có dịp mình sẽ ủng hộ nữa</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center gap-2">
|
||||||
|
<button
|
||||||
|
class="w-[231px] h-10 rounded-[4px] border border-[#8c8c8c] text-[#6b6b6b] text-[13px] font-medium">Xem {{
|
||||||
|
_rating_total }} đánh giá</button>
|
||||||
|
<button class="w-[231px] h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium">Viết đánh
|
||||||
|
giá</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<aside class="w-[392px] flex flex-col gap-3">
|
<aside class="w-[392px] shrink-0 flex flex-col gap-3">
|
||||||
<div class="bg-white rounded-[8px] px-3 py-[14px] flex flex-col gap-[11px]">
|
<div class="bg-white rounded-[8px] px-3 py-[14px] flex flex-col gap-[11px]">
|
||||||
<img src="{{ 'category_qc_lg.png' | asset_url }}" alt="" class="w-[367px] h-[144px] rounded-[8px] object-cover" />
|
<img src="{{ 'category_qc_lg.png' | asset_url }}" alt="" class="w-full h-[144px] rounded-[8px] object-cover" />
|
||||||
<img src="{{ 'category_qc_samsung.png' | asset_url }}" alt="" class="w-[367px] h-[144px] rounded-[8px] object-cover" />
|
<img src="{{ 'category_qc_samsung.png' | asset_url }}" alt=""
|
||||||
|
class="w-full h-[144px] rounded-[8px] object-cover" />
|
||||||
<div class="flex items-center gap-2 flex-wrap">
|
<div class="flex items-center gap-2 flex-wrap">
|
||||||
{% if _product.categoryInfo.size > 0 %}
|
{% if _product.categoryInfo.size > 0 %}
|
||||||
{% for _category in _product.categoryInfo limit:3 %}
|
{% for _category in _product.categoryInfo limit:3 %}
|
||||||
<a href="{{ _category.url }}" class="px-3 h-7 rounded-[4px] border {% if forloop.first %}border-[#50aaff] text-[#0084ff]{% else %}border-[#e8e8e8] text-black{% endif %} text-[13px] font-medium inline-flex items-center">{{ _category.name }}</a>
|
<a href="{{ _category.url }}"
|
||||||
|
class="px-3 h-7 rounded-[4px] border {% if forloop.first %}border-[#50aaff] text-[#0084ff]{% else %}border-[#e8e8e8] text-black{% endif %} text-[13px] font-medium inline-flex items-center">{{
|
||||||
|
_category.name }}</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="px-3 h-7 rounded-[4px] border border-[#50aaff] text-[#0084ff] text-[13px] font-medium inline-flex items-center">Sản phẩm</span>
|
<span
|
||||||
|
class="px-3 h-7 rounded-[4px] border border-[#50aaff] text-[#0084ff] text-[13px] font-medium inline-flex items-center">Sản
|
||||||
|
phẩm</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -257,25 +510,79 @@
|
|||||||
<div class="bg-white rounded-[6px] p-[11px] flex flex-col gap-3">
|
<div class="bg-white rounded-[6px] p-[11px] flex flex-col gap-3">
|
||||||
<p class="text-[13px] font-semibold tracking-[-0.26px]">Loại dịch vụ lắp đặt</p>
|
<p class="text-[13px] font-semibold tracking-[-0.26px]">Loại dịch vụ lắp đặt</p>
|
||||||
{% if _product.addon.size > 0 %}
|
{% if _product.addon.size > 0 %}
|
||||||
|
<input type="hidden" id="selected-addon-id" value="{{ _product.addon[0].addon_id | default: '' }}">
|
||||||
|
<div id="install-option-group" class="flex flex-col gap-2">
|
||||||
{% for _addon in _product.addon limit:3 %}
|
{% for _addon in _product.addon limit:3 %}
|
||||||
<div class="rounded-[8px] border {% if forloop.first %}border-[#e4057c] bg-[#fff6f6]{% else %}border-[#e2e2e2]{% endif %} p-[13px] grid grid-cols-2 gap-x-[12px] gap-y-2">
|
{% assign _addon_old_price = _addon.market_price | default: 0 | plus: 0 %}
|
||||||
|
{% assign _addon_price = _addon.price | default: 0 | plus: 0 %}
|
||||||
|
<div
|
||||||
|
class="js-install-option relative rounded-[8px] border p-[11px] h-[65px] transition-all cursor-pointer {% if forloop.first %}border-[#e4057c] bg-[#fff6f6] is-selected{% else %}border-[#e2e2e2] bg-white{% endif %}"
|
||||||
|
data-addon-id="{{ _addon.addon_id }}" role="radio" tabindex="0"
|
||||||
|
aria-checked="{% if forloop.first %}true{% else %}false{% endif %}">
|
||||||
|
<div class="flex items-center justify-between gap-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
class="js-install-radio w-3 h-3 rounded-full border {% if forloop.first %}border-[#a0045c]{% else %}border-[#a9a9a9]{% endif %} inline-flex items-center justify-center">
|
||||||
|
<span
|
||||||
|
class="js-install-radio-dot w-[5px] h-[5px] rounded-full bg-[#a0045c] {% unless forloop.first %}hidden{% endunless %}"></span>
|
||||||
|
</span>
|
||||||
|
<p class="text-[13px] font-semibold tracking-[-0.26px]">{{ _addon.title }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
{% if _addon_old_price > _addon_price and _addon_old_price > 0 %}
|
||||||
|
<p class="text-[11px] text-[#868686] line-through">{{ _addon_old_price | format_number }}đ</p>
|
||||||
|
{% endif %}
|
||||||
|
{% if _addon_price > 0 %}
|
||||||
|
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon_price | format_number }}đ</p>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-[14px] font-bold text-[#e40000]">Miễn phí</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1 ps-5 mt-1">
|
||||||
|
{% if forloop.first %}
|
||||||
|
<svg class="w-3 h-3 shrink-0 text-[#35b327]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||||
|
<circle cx="12" cy="12" r="9.5" stroke="currentColor" />
|
||||||
|
<path d="M8.5 12.5L11 15L15.5 9.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-[12px]">Gói tiêu chuẩn</p>
|
||||||
|
{% elsif forloop.index == 2 %}
|
||||||
|
<span class="text-[#ff7300] text-[10px] leading-none font-semibold">VIP</span>
|
||||||
|
<p class="text-[12px] text-[#ff7300]">Bảo hành 4 năm (2 năm chính hãng, 2 năm MIQ)</p>
|
||||||
|
{% else %}
|
||||||
|
<span class="text-[#ff7300] text-[10px] leading-none font-semibold">VIP</span>
|
||||||
|
<p class="text-[12px] text-[#ff7300]">Tuỳ chọn dịch vụ đi kèm</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="js-install-selected-dot absolute left-[17px] bottom-[8px] w-[6px] h-[6px] rounded-full bg-[#90004b] {% unless forloop.first %}hidden{% endunless %}"></span>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% comment %}
|
||||||
|
{% for _addon in _product.addon limit:3 %}
|
||||||
|
<div
|
||||||
|
class="rounded-[8px] border {% if forloop.first %}border-[#e4057c] bg-[#fff6f6]{% else %}border-[#e2e2e2]{% endif %} p-[13px] grid grid-cols-2 gap-x-[12px] gap-y-2">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<span class="w-3 h-3 rounded-full border border-[#a9a9a9]"></span>
|
<span class="w-3 h-3 rounded-full border border-[#a9a9a9]"></span>
|
||||||
<p class="text-[13px] font-semibold tracking-[-0.26px]">{{ _addon.title }}</p>
|
<p class="text-[13px] font-semibold tracking-[-0.26px]">{{ _addon.title }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-right">
|
<div class="text-right">
|
||||||
{% if _addon.price > 0 %}
|
{% if _addon.price > 0 %}
|
||||||
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon.price | number_format }}đ</p>
|
<p class="text-[14px] font-bold text-[#e40000]">{{ _addon.price | format_number }}đ</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-[14px] font-bold text-[#35b327]">Miễn phí</p>
|
<p class="text-[14px] font-bold text-[#35b327]">Miễn phí</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-2 flex items-center gap-1 ps-5">
|
<div class="col-span-2 flex items-center gap-1 ps-5">
|
||||||
<span class="text-[#35b327]">◉</span>
|
<span class="text-[#35b327]">◉</span>
|
||||||
<p class="text-[12px]">{% if forloop.first %}Gói tiêu chuẩn{% else %}Tuỳ chọn dịch vụ đi kèm{% endif %}</p>
|
<p class="text-[12px]">{% if forloop.first %}Gói tiêu chuẩn{% else %}Tuỳ chọn dịch vụ đi kèm{% endif %}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
{% endcomment %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="rounded-[8px] border border-[#e4057c] bg-[#fff6f6] p-[13px]">
|
<div class="rounded-[8px] border border-[#e4057c] bg-[#fff6f6] p-[13px]">
|
||||||
<p class="text-[13px] font-semibold tracking-[-0.26px]">Chưa có gói dịch vụ bổ sung</p>
|
<p class="text-[13px] font-semibold tracking-[-0.26px]">Chưa có gói dịch vụ bổ sung</p>
|
||||||
@@ -290,7 +597,9 @@
|
|||||||
<div class="p-[10px] flex flex-col gap-3">
|
<div class="p-[10px] flex flex-col gap-3">
|
||||||
{% for _offer in _product.specialOffer.all limit:3 %}
|
{% for _offer in _product.specialOffer.all limit:3 %}
|
||||||
<p class="text-[13px] tracking-[-0.26px] flex items-start gap-2">
|
<p class="text-[13px] tracking-[-0.26px] flex items-start gap-2">
|
||||||
<span class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#a0045c] text-white text-[13px] shrink-0">{{ forloop.index }}</span>
|
<span
|
||||||
|
class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#a0045c] text-white text-[13px] shrink-0">{{
|
||||||
|
forloop.index }}</span>
|
||||||
<span class="line-clamp-3">{{ _offer.title }}</span>
|
<span class="line-clamp-3">{{ _offer.title }}</span>
|
||||||
</p>
|
</p>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
@@ -309,7 +618,8 @@
|
|||||||
{% assign _gift_image = no_image_url %}
|
{% assign _gift_image = no_image_url %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="w-[128px] h-12 rounded-[4px] border border-[#ebebeb] p-[6px] flex items-center gap-1">
|
<div class="w-[128px] h-12 rounded-[4px] border border-[#ebebeb] p-[6px] flex items-center gap-1">
|
||||||
<img src="{{ _gift_image }}" alt="{{ _gift.title }}" class="w-9 h-9 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
<img src="{{ _gift_image }}" alt="{{ _gift.title }}" class="w-9 h-9 rounded-[4px] object-cover"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
<p class="text-[10px] font-medium leading-[14px] line-clamp-2">{{ _gift.title }}</p>
|
<p class="text-[10px] font-medium leading-[14px] line-clamp-2">{{ _gift.title }}</p>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
@@ -318,8 +628,30 @@
|
|||||||
|
|
||||||
<div class="h-px bg-[#ececec]"></div>
|
<div class="h-px bg-[#ececec]"></div>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<button class="w-[166px] h-12 rounded-[4px] border border-[#0084ff] text-[#0084ff] text-[25px] leading-4 pb-1">⍟<span class="block text-[13px] leading-4">Thêm vào giỏ</span></button>
|
<button id="btn-add-to-cart" type="button" data-product-name="{{ _product.productName }}"
|
||||||
<button class="w-[166px] h-12 rounded-[4px] bg-[#fc7600] text-white text-[20px] font-semibold">Mua ngay</button>
|
data-product-image="{{ _product.productImage.small | default: _product.productImage.large | default: no_image_url }}"
|
||||||
|
data-product-price="{% if _product.price > 0 %}{{ _product.price | format_number }}đ{% else %}Liên hệ{% endif %}"
|
||||||
|
class="w-[166px] h-12 rounded-[4px] border border-[#0084ff] bg-white text-[#0084ff] flex flex-col items-center justify-center gap-1 shrink-0">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||||
|
<path
|
||||||
|
d="M2.25 3.75H3.73C4.14 3.75 4.48 4.04 4.55 4.44L5.97 12.69C6.09 13.41 6.71 13.94 7.44 13.94H17.53C18.2 13.94 18.79 13.5 18.99 12.86L20.54 7.86C20.78 7.08 20.2 6.28 19.39 6.28H6.11"
|
||||||
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path
|
||||||
|
d="M9.25 20.25C9.94 20.25 10.5 19.69 10.5 19C10.5 18.31 9.94 17.75 9.25 17.75C8.56 17.75 8 18.31 8 19C8 19.69 8.56 20.25 9.25 20.25Z"
|
||||||
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path
|
||||||
|
d="M16.75 20.25C17.44 20.25 18 19.69 18 19C18 18.31 17.44 17.75 16.75 17.75C16.06 17.75 15.5 18.31 15.5 19C15.5 19.69 16.06 20.25 16.75 20.25Z"
|
||||||
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path d="M12.25 8.25V11.75" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round" />
|
||||||
|
<path d="M10.5 10H14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
<span class="block text-[13px] leading-none tracking-[-0.26px]">Thêm vào giỏ</span>
|
||||||
|
</button>
|
||||||
|
<button id="btn-buy-now"
|
||||||
|
class="w-[166px] h-12 rounded-[4px] bg-[#fc7600] text-white text-[13px] font-semibold tracking-[-0.26px] shrink-0">Mua
|
||||||
|
ngay</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -327,25 +659,32 @@
|
|||||||
<div class="bg-white rounded-[8px] p-3 flex flex-col gap-2">
|
<div class="bg-white rounded-[8px] p-3 flex flex-col gap-2">
|
||||||
<p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">Sản phẩm đã xem</p>
|
<p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">Sản phẩm đã xem</p>
|
||||||
<div class="grid grid-cols-2 gap-3">
|
<div class="grid grid-cols-2 gap-3">
|
||||||
<a href="{{ _product.productUrl }}" class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
<a href="{{ _product.productUrl }}"
|
||||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-[60px] h-[60px] rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
||||||
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
|
class="w-[60px] h-[60px] rounded-[4px] object-cover"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
<div class="flex-1 min-w-0">
|
<div class="flex-1 min-w-0">
|
||||||
<p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
|
<p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
|
||||||
{% if _product.price > 0 %}
|
{% if _product.price > 0 %}
|
||||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | number_format }}đ</p>
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | format_number }}đ</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="{{ _product.productUrl }}" class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
<a href="{{ _product.productUrl }}"
|
||||||
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-[60px] h-[60px] rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
|
||||||
|
<img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
|
||||||
|
class="w-[60px] h-[60px] rounded-[4px] object-cover"
|
||||||
|
onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
|
||||||
<div class="flex-1 min-w-0">
|
<div class="flex-1 min-w-0">
|
||||||
<p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
|
<p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
|
||||||
{% if _product.marketPrice > 0 %}
|
{% if _product.marketPrice > 0 %}
|
||||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.marketPrice | number_format }}đ</p>
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.marketPrice | format_number }}đ
|
||||||
|
</p>
|
||||||
{% elsif _product.price > 0 %}
|
{% elsif _product.price > 0 %}
|
||||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | number_format }}đ</p>
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | format_number }}đ</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
<p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@@ -356,76 +695,15 @@
|
|||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-white rounded-[12px] h-[431px] overflow-hidden flex gap-3 px-3 py-4">
|
|
||||||
<div class="flex flex-col gap-3 w-[885px] shrink-0 h-[399px]">
|
|
||||||
<h2 class="text-[28px] font-bold text-black tracking-tight">TIN KHUYẾN MẠI</h2>
|
|
||||||
<div class="flex gap-3 items-start">
|
|
||||||
<div class="w-[481px] shrink-0">
|
|
||||||
<div class="w-[481px] h-[300px] rounded-[4px] overflow-hidden">
|
|
||||||
<img src="{{ 'article_main_image.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
|
||||||
</div>
|
|
||||||
<p class="mt-2 text-[20px] font-bold text-black tracking-tight">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-3 flex-1">
|
|
||||||
<div class="flex gap-3 items-start">
|
|
||||||
<img src="{{ 'article_thumb_1.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
|
||||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-3 items-start">
|
|
||||||
<img src="{{ 'article_thumb_2.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
|
||||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-3 items-start">
|
|
||||||
<img src="{{ 'article_thumb_3.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
|
|
||||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-3 flex-1 h-[356px]">
|
|
||||||
<h2 class="text-[28px] font-bold text-black tracking-tight">VIDEO REVIEW</h2>
|
|
||||||
<div class="flex flex-col gap-3">
|
|
||||||
<div class="w-full h-[159px] rounded-[4px] overflow-hidden relative">
|
|
||||||
<img src="{{ 'video_main.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
|
||||||
<div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-3 items-start">
|
|
||||||
<div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
|
|
||||||
<img src="{{ 'video_thumb_1.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
|
||||||
<div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
|
|
||||||
</div>
|
|
||||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-3 items-start">
|
|
||||||
<div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
|
|
||||||
<img src="{{ 'video_thumb_2.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
|
|
||||||
<div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
|
|
||||||
</div>
|
|
||||||
<p class="text-[14px] text-black tracking-tight overflow-hidden">Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-white rounded-[12px] min-h-[231px] overflow-hidden flex flex-col gap-3 px-3 py-4">
|
<!-- Toast thêm vào giỏ -->
|
||||||
<h2 class="text-[24px] leading-[28px] font-bold text-black tracking-tight">Mọi người cũng tìm kiếm</h2>
|
<div id="cart-toast" class="fixed bottom-6 right-6 z-50 hidden transition-all">
|
||||||
<div class="bg-[#f3f4f7] rounded-[12px] min-h-[156px] overflow-hidden px-3 py-4 flex flex-wrap gap-5 text-[12px] text-black">
|
<div
|
||||||
<span>hút mùi hafele</span>
|
class="bg-[#35b327] text-white px-5 py-3 rounded-[8px] shadow-lg flex items-center gap-3 text-[14px] font-medium">
|
||||||
<span>bếp từ cheft</span>
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<span>nồi cơm điện Tiger</span>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
<span>máy cạo râu Enchen</span>
|
</svg>
|
||||||
<span>mũ bảo hiểm</span>
|
Đã thêm sản phẩm vào giỏ hàng!
|
||||||
<span>nồi cơm điện Cuckoo</span>
|
|
||||||
<span>iPhone 15</span>
|
|
||||||
<span>chảo chống dính Elmich</span>
|
|
||||||
<span>máy massage X5 Pro Omni</span>
|
|
||||||
<span>điều hòa Samsung</span>
|
|
||||||
<span>máy lọc nước Korihome Kangen K8</span>
|
|
||||||
<span>tông đơ cắt tóc</span>
|
|
||||||
<span>điều hoà Hisense</span>
|
|
||||||
<span>Máy chạy bộ</span>
|
|
||||||
<span>MacBook Air M4</span>
|
|
||||||
<span>điều hòa Nagakawa</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user