search
This commit is contained in:
@@ -794,13 +794,13 @@ input[type=radio]:focus:before {
|
|||||||
.order-page-table .icons {
|
.order-page-table .icons {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border: 1px solid #ECECEC;
|
border: 1px solid #ececec;
|
||||||
background-color: #F9F9F9;
|
background-color: #f9f9f9;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
.order-page-table .icon-edit {
|
.order-page-table .icon-edit {
|
||||||
border: 1px solid #0041E8;
|
border: 1px solid #0041e8;
|
||||||
background-color: #F5F7FF;
|
background-color: #f5f7ff;
|
||||||
background-position: -108px -82px;
|
background-position: -108px -82px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
@@ -867,4 +867,28 @@ input[type=radio]:focus:before {
|
|||||||
.table-brand td {
|
.table-brand td {
|
||||||
padding: 7px 6px;
|
padding: 7px 6px;
|
||||||
border: 1px solid #ececec;
|
border: 1px solid #ececec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-suggestions .item {
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
}
|
||||||
|
.autocomplete-suggestions .item .info {
|
||||||
|
width: calc(100% - 108px);
|
||||||
|
margin-right: 48px;
|
||||||
|
}
|
||||||
|
.autocomplete-suggestions .item img {
|
||||||
|
width: 60px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.autocomplete-suggestions .item .name {
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.autocomplete-suggestions .item .price {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fb4e4e;
|
||||||
|
line-height: 20px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
}/*# sourceMappingURL=pc_style.css.map */
|
}/*# sourceMappingURL=pc_style.css.map */
|
||||||
File diff suppressed because one or more lines are too long
@@ -48,7 +48,7 @@ img {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
table{
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
@@ -304,7 +304,8 @@ a {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
transition: 0.3s all;
|
transition: 0.3s all;
|
||||||
position: relative;
|
position: relative;
|
||||||
&:hover, &.current{
|
&:hover,
|
||||||
|
&.current {
|
||||||
background: #81b5e4;
|
background: #81b5e4;
|
||||||
.icons {
|
.icons {
|
||||||
filter: brightness(100);
|
filter: brightness(100);
|
||||||
@@ -812,13 +813,13 @@ input[type="radio"] {
|
|||||||
.icons {
|
.icons {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border: 1px solid #ECECEC;
|
border: 1px solid #ececec;
|
||||||
background-color: #F9F9F9;
|
background-color: #f9f9f9;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
.icon-edit {
|
.icon-edit {
|
||||||
border: 1px solid #0041E8;
|
border: 1px solid #0041e8;
|
||||||
background-color: #F5F7FF;
|
background-color: #f5f7ff;
|
||||||
background-position: -108px -82px;
|
background-position: -108px -82px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
@@ -888,3 +889,29 @@ input[type="radio"] {
|
|||||||
border: 1px solid #ececec;
|
border: 1px solid #ececec;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.autocomplete-suggestions {
|
||||||
|
.item {
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
.info {
|
||||||
|
width: calc(100% - 108px);
|
||||||
|
margin-right: 48px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 60px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fb4e4e;
|
||||||
|
line-height: 20px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -33,4 +33,12 @@
|
|||||||
localStorage.setItem(hideMenuBig ? 'menu_big' : 'menu_small', 'hidden');
|
localStorage.setItem(hideMenuBig ? 'menu_big' : 'menu_small', 'hidden');
|
||||||
localStorage.removeItem(hideMenuBig ? 'menu_small' : 'menu_big');
|
localStorage.removeItem(hideMenuBig ? 'menu_small' : 'menu_big');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function formatCurrency(a) {
|
||||||
|
var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
|
||||||
|
var len = b.length;
|
||||||
|
b = b.substring(0, len - 3);
|
||||||
|
return b;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -1,69 +1,139 @@
|
|||||||
<script>
|
<script>
|
||||||
function _get_list_category() {
|
function _get_list_category() {
|
||||||
return {
|
return {
|
||||||
"list_category": [
|
"list_product": [
|
||||||
{
|
{
|
||||||
'id': 1,
|
'id': 2105,
|
||||||
'title': 'Màn hình máy tính',
|
'title': 'Máy in mã vạch MH241',
|
||||||
'url': '/?category=9&opt=product&parent=1',
|
'request_path': '/may-in-ma-vach-mh241',
|
||||||
'parentId': 0,
|
'price': 0,
|
||||||
'isParent': 1,
|
'market_price': 0,
|
||||||
'children': [
|
'quantity': 1,
|
||||||
{
|
'image': {
|
||||||
'id': 10,
|
'thumb': 'http://hura8.hurasoft.com/media/product/t-2105-2105_10_1.jpg',
|
||||||
'title': 'Màn hình theo khoảng giá',
|
'small': 'http://hura8.hurasoft.com/media/product/s-2105-2105_10_1.jpg',
|
||||||
'url': '/?category=148&opt=product',
|
'large': 'http://hura8.hurasoft.com/media/product/l-2105-2105_10_1.jpg',
|
||||||
'parentId': 1,
|
'original': 'http://hura8.hurasoft.com/media/product/2105-2105_10_1.jpg',
|
||||||
'isParent': 0,
|
|
||||||
'totalProduct': 0,
|
|
||||||
'children': []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'id': 11,
|
|
||||||
'title': 'Màn Hình Theo Kích Thước',
|
|
||||||
'url': '/?category=54&opt=product&parent=1',
|
|
||||||
'parentId': 1,
|
|
||||||
'isParent': 0,
|
|
||||||
'totalProduct': 0,
|
|
||||||
'children': [
|
|
||||||
{
|
|
||||||
'id': 148,
|
|
||||||
'title': '17 inch - 21.5 inch',
|
|
||||||
'url': '/?category=148&opt=product',
|
|
||||||
'parentId': 11,
|
|
||||||
'isParent': 0,
|
|
||||||
'totalProduct': 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'id': 66,
|
|
||||||
'title': '22 inch - 24 inch',
|
|
||||||
'url': '?category=66&opt=product',
|
|
||||||
'parentId': 11,
|
|
||||||
'isParent': 0,
|
|
||||||
'totalProduct': 41,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'id': 67,
|
|
||||||
'title': '25 inch - 27 inch',
|
|
||||||
'url': '/?category=67&opt=product',
|
|
||||||
'parentId': 11,
|
|
||||||
'isParent': 0,
|
|
||||||
'totalProduct': 42,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'id': 68,
|
|
||||||
'title': '28 inch - 32 inch',
|
|
||||||
'url': '/?category=68&opt=product',
|
|
||||||
'parentId': 11,
|
|
||||||
'isParent': 0,
|
|
||||||
'totalProduct': 11,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 2104,
|
||||||
|
'title': '[Mới 100%] Dell Gaming G16 7620 (Intel core i7-12700H, 16GB, 1TB, RTX 3060 6GB, 16″ QHD+ 165Hz IPS)',
|
||||||
|
'request_path': '/acer-gaming-predator-helios-neo-16-2023',
|
||||||
|
'price': 28500000,
|
||||||
|
'market_price': 0,
|
||||||
|
'quantity': 1,
|
||||||
|
'image':
|
||||||
|
{
|
||||||
|
'thumb': 'http://hura8.hurasoft.com/media/product/t-2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
|
||||||
|
'small': 'http://hura8.hurasoft.com/media/product/s-2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
|
||||||
|
'large': 'http://hura8.hurasoft.com/media/product/l-2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
|
||||||
|
'original': 'http://hura8.hurasoft.com/media/product/2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 2100,
|
||||||
|
'title': 'Chăn hè đũi xơ đậu nành mã 32 Gấu xanh',
|
||||||
|
'request_path': '/chan-he-dui-xo-dau-nanh-ma-32-gau-xanh',
|
||||||
|
'price': 220000,
|
||||||
|
'market_price': 340000,
|
||||||
|
'quantity': 1,
|
||||||
|
'image':
|
||||||
|
{
|
||||||
|
'thumb': 'http://hura8.hurasoft.com/media/product/t-2100-2100_8640_m32___g___u_xanh.jpg',
|
||||||
|
'small': 'http://hura8.hurasoft.com/media/product/s-2100-2100_8640_m32___g___u_xanh.jpg',
|
||||||
|
'large': 'http://hura8.hurasoft.com/media/product/l-2100-2100_8640_m32___g___u_xanh.jpg',
|
||||||
|
'original': 'http://hura8.hurasoft.com/media/product/2100-2100_8640_m32___g___u_xanh.jpg',
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 2098,
|
||||||
|
'title': 'Chăn hè đũi xơ đậu nành mã 35 Tròn chấm pi',
|
||||||
|
'request_path': '/bo-ga-goi-chun-chan-xo-dau-nanh-ma-36-tho-cherry-1',
|
||||||
|
'price': 225000,
|
||||||
|
'market_price': 350000,
|
||||||
|
'quantity': 1,
|
||||||
|
'image':
|
||||||
|
{
|
||||||
|
'thumb': 'http://hura8.hurasoft.com/media/product/t-2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
|
||||||
|
'small': 'http://hura8.hurasoft.com/media/product/s-2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
|
||||||
|
'large': 'http://hura8.hurasoft.com/media/product/l-2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
|
||||||
|
'original': 'http://hura8.hurasoft.com/media/product/2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 2097,
|
||||||
|
'title': 'Bộ ga gối chun chần xơ đậu nành mã 36 Thỏ Cherry',
|
||||||
|
'request_path': '/bo-ga-goi-chun-chan-xo-dau-nanh-ma-36-tho-cherry',
|
||||||
|
'price': 280000,
|
||||||
|
'market_price': 350000,
|
||||||
|
'quantity': 1,
|
||||||
|
'image':
|
||||||
|
{
|
||||||
|
'thumb': 'http://hura8.hurasoft.com/media/product/t-2097-2097_8695_m36___th____cherry.jpg',
|
||||||
|
'small': 'http://hura8.hurasoft.com/media/product/s-2097-2097_8695_m36___th____cherry.jpg',
|
||||||
|
'large': 'http://hura8.hurasoft.com/media/product/l-2097-2097_8695_m36___th____cherry.jpg',
|
||||||
|
'original': ' http://hura8.hurasoft.com/media/product/2097-2097_8695_m36___th____cherry.jpg',
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayProductList(products) {
|
||||||
|
var productListElement = $("#js-show-search");
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
$.each(products, function (index, product) {
|
||||||
|
var price = product.price
|
||||||
|
if (price > 0) {
|
||||||
|
price = `<span class="price">` + formatCurrency(price) + ` đ</span>`;
|
||||||
|
} else {
|
||||||
|
price = '<span class="price">0</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
html += `
|
||||||
|
<a href="`+ product.request_path + `" class="flex items-center justify-between item">
|
||||||
|
<span class="info">
|
||||||
|
<span class="name">`+ product.title + `</span>
|
||||||
|
`+ price + `
|
||||||
|
</span>
|
||||||
|
<img src="`+ product.image.thumb + `" alt="` + product.title + `">
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
productListElement.html(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchProduct() {
|
||||||
|
var searchTerm = $("#js-input-search").val().toLowerCase();
|
||||||
|
var allProducts = _get_list_category().list_product;
|
||||||
|
|
||||||
|
// Filter products based on the search term
|
||||||
|
var filteredProducts = $.grep(allProducts, function (product) {
|
||||||
|
return product.title.toLowerCase().includes(searchTerm);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Display the filtered products
|
||||||
|
displayProductList(filteredProducts);
|
||||||
|
|
||||||
|
if (filteredProducts.length > 0 && searchTerm !== "") {
|
||||||
|
$("#js-show-search").show();
|
||||||
|
displayProductList(filteredProducts);
|
||||||
|
} else {
|
||||||
|
$("#js-show-search").hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
$("#js-input-search").on("input", searchProduct);
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
@@ -220,11 +220,19 @@
|
|||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">
|
<div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">
|
||||||
<form class="max-w-[420px] relative w-[100%] menu-hide" id="js-form-search">
|
<form class="max-w-[420px] relative w-[100%] menu-hide" id="js-form-search">
|
||||||
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
<div class="content w-[100%] flex items-center border rounded-[5px]">
|
||||||
|
<div class="inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
||||||
<i class="icons icon-search"></i>
|
<i class="icons icon-search"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="search" class="block border h-[36px] ps-10 rounded w-full" placeholder="Tìm kiếm">
|
<input type="search" class="block h-[36px] rounded w-full" id="js-input-search"
|
||||||
|
placeholder="Tìm kiếm">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="autocomplete-suggestions absolute bg-white p-[5px] w-[100%] shadow-[0_2px_7px_0_rgb(177_177_177)] hidden"
|
||||||
|
id="js-show-search">
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="admin-header-right flex items-center justify-end">
|
<div class="admin-header-right flex items-center justify-end">
|
||||||
|
|||||||
Reference in New Issue
Block a user