Compare commits

...

2 Commits

Author SHA1 Message Date
2b9695b9f2 search 2024-01-31 12:05:22 +07:00
37e4278d53 search 2024-01-31 11:59:25 +07:00
6 changed files with 229 additions and 85 deletions

View File

@@ -807,13 +807,13 @@ input[type=radio]:focus:before {
.order-page-table .icons {
width: 30px;
height: 30px;
border: 1px solid #ECECEC;
background-color: #F9F9F9;
border: 1px solid #ececec;
background-color: #f9f9f9;
border-radius: 5px;
}
.order-page-table .icon-edit {
border: 1px solid #0041E8;
background-color: #F5F7FF;
border: 1px solid #0041e8;
background-color: #f5f7ff;
background-position: -108px -82px;
margin-right: 6px;
}
@@ -892,4 +892,28 @@ input[type=radio]:focus:before {
.table-brand td {
padding: 7px 6px;
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 */

File diff suppressed because one or more lines are too long

View File

@@ -60,7 +60,7 @@ img {
max-width: 100%;
height: auto;
}
table{
table {
width: 100%;
}
a {
@@ -316,7 +316,8 @@ a {
align-items: center;
transition: 0.3s all;
position: relative;
&:hover, &.current{
&:hover,
&.current {
background: #81b5e4;
.icons {
filter: brightness(100);
@@ -824,13 +825,13 @@ input[type="radio"] {
.icons {
width: 30px;
height: 30px;
border: 1px solid #ECECEC;
background-color: #F9F9F9;
border: 1px solid #ececec;
background-color: #f9f9f9;
border-radius: 5px;
}
.icon-edit {
border: 1px solid #0041E8;
background-color: #F5F7FF;
border: 1px solid #0041e8;
background-color: #f5f7ff;
background-position: -108px -82px;
margin-right: 6px;
}
@@ -914,3 +915,29 @@ input[type="radio"] {
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;
}
}
}

View File

@@ -33,4 +33,12 @@
localStorage.setItem(hideMenuBig ? 'menu_big' : 'menu_small', 'hidden');
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>

View File

@@ -1,69 +1,137 @@
<script>
function _get_list_category() {
return {
"list_category": [
"list_product": [
{
'id': 1,
'title': 'Màn hình máy tính',
'url': '/?category=9&opt=product&parent=1',
'parentId': 0,
'isParent': 1,
'children': [
{
'id': 10,
'title': 'Màn hình theo khoảng giá',
'url': '/?category=148&opt=product',
'parentId': 1,
'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': 2105,
'title': 'Máy in mã vạch MH241',
'request_path': '/may-in-ma-vach-mh241',
'price': 0,
'market_price': 0,
'quantity': 1,
'image': {
'thumb': 'http://hura8.hurasoft.com/media/product/t-2105-2105_10_1.jpg',
'small': 'http://hura8.hurasoft.com/media/product/s-2105-2105_10_1.jpg',
'large': 'http://hura8.hurasoft.com/media/product/l-2105-2105_10_1.jpg',
'original': 'http://hura8.hurasoft.com/media/product/2105-2105_10_1.jpg',
}
},
{
'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>

View File

@@ -22,6 +22,7 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
</head>
<body>
{{ global|show_var }}
<div class="admin-global-container">
@@ -46,7 +47,7 @@
{% assign _type = _category[0] %}
{% assign _menuArray = _category[1].menu %}
{% if _category[1].enable == 1 %}
<details {% if _type == global.module %} open {% endif %}>
<details {% if _type==global.module %} open {% endif %}>
<summary class="item">
<div class="flex items-center">
@@ -72,7 +73,7 @@
<div class="sub-menu">
{% for _item in _menuArray %}
<a href="{{ _item.url }}" {% if _item.view == global.view and _item.module == global.module %}
<a href="{{ _item.url }}" {% if _item.view==global.view and _item.module==global.module %}
class="current" {% endif %}> {{ _item.name }} </a>
{% endfor %}
</div>
@@ -107,9 +108,11 @@
</div>
<!-- Menu collapse -->
<div class="admin-menu box-menu fixed top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh]" id="js-menu-small">
<div class="admin-menu box-menu fixed top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh]"
id="js-menu-small">
<div>
<div class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_!important]">
<div
class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_!important]">
<a href="/" class="">
<img src="{{ 'logo_small.png' | asset_url }}" alt="">
</a>
@@ -132,7 +135,8 @@
{% assign _menuArray = _category[1].menu %}
{% if _category[1].enable == 1 %}
<div class="item {% if _type == 'system' %} border-[rgba(255,255,255,0.15)] border-b{% endif %} {% if _type == global.module %} current {% endif %}">
<div
class="item {% if _type == 'system' %} border-[rgba(255,255,255,0.15)] border-b{% endif %} {% if _type == global.module %} current {% endif %}">
{% if _type == 'order' %} <i class="icons icon-sell"> </i>
{% elsif _type == 'product' %} <i class="icons icon-product"> </i>
{% elsif _type == 'customer' %}<i class="icons icon-user"> </i>
@@ -152,7 +156,7 @@
<div class="menu-list">
{% for _item in _menuArray %}
<a href="{{ _item.url }}" {% if _item.view == global.view %} class="current" {% endif %}>
<a href="{{ _item.url }}" {% if _item.view==global.view %} class="current" {% endif %}>
{{ _item.name }}
</a>
{% endfor %}
@@ -220,11 +224,20 @@
<!-- Header -->
<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">
<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>
</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>
<div class="admin-header-right flex items-center justify-end">