tieptk/admin_hura_8
2
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

update form product

Browse Source
This commit is contained in:
Tieptk
2024-05-06 15:55:58 +07:00
parent d9094447c8
commit d71cbe3065
18 changed files with 1660 additions and 620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/global-sprite.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 26 KiB

4
assets/script/jquery.js vendored
View File

File diff suppressed because one or more lines are too long

50
assets/script/pc_style.css
View File

@@ -746,6 +746,11 @@ input[type=radio]:focus:before {
height: 16px;
background-position: -259px -88px;
}
.icons.icon-copy {
width: 15px;
height: 15px;
background-position: -330px -88px;
}
.admin-header-container .menu-hide {
margin-left: 30px;
@@ -1230,11 +1235,54 @@ input[type=radio]:focus:before {
}
.style-checkbox .checkmark:after {
left: 7px;
left: 6px;
top: 1px;
width: 6px;
height: 13px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.box-note {
position: relative;
}
.box-note i {
cursor: pointer;
}
.box-note .content {
position: absolute;
left: 30px;
top: 6px;
width: 300px;
display: none;
font-size: 12px;
background: #e4b200;
color: #fff;
padding: 10px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1490196078);
border-radius: 6px;
z-index: 9;
}
.box-note .content::before {
position: absolute;
content: "";
left: -14px;
top: 0;
width: 20px;
height: 15px;
-webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
clip-path: polygon(0 0, 100% 100%, 100% 0);
background: #e4b200;
border-radius: 5px 0 0 0;
}
.box-note:hover .content {
display: block;
}
.list-category .style-checkbox .checkmark:after {
left: 6px;
}
.list-category .style-checkbox {
color: #919699;
}/*# sourceMappingURL=pc_style.css.map */

53
assets/script/pc_style.scss
View File

@@ -754,6 +754,11 @@ input[type="radio"] {
height: 16px;
background-position: -259px -88px;
}
&.icon-copy {
width: 15px;
height: 15px;
background-position: -330px -88px;
}
}
.admin-header-container {
@@ -1269,7 +1274,7 @@ input[type="radio"] {
display: block;
}
.style-checkbox .checkmark:after {
left: 7px;
left: 6px;
top: 1px;
width: 6px;
height: 13px;
@@ -1279,3 +1284,49 @@ input[type="radio"] {
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.box-note {
position: relative;
i {
cursor: pointer;
}
.content {
position: absolute;
left: 30px;
top: 6px;
width: 300px;
display: none;
font-size: 12px;
background: #e4b200;
color: #fff;
padding: 10px;
box-shadow: 0px 1px 1px 0px #00000026;
border-radius: 6px;
z-index: 9;
&::before {
position: absolute;
content: "";
left: -14px;
top: 0;
width: 20px;
height: 15px;
clip-path: polygon(0 0, 100% 100%, 100% 0);
background: #e4b200;
border-radius: 5px 0 0 0;
}
}
&:hover {
.content {
display: block;
}
}
}
.list-category {
.style-checkbox .checkmark:after {
left: 6px;
}
.style-checkbox {
color: #919699;
}
}

652
assets/script/select2.css Normal file
View File

@@ -0,0 +1,652 @@
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
}
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 28px;
user-select: none;
-webkit-user-select: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
display: block;
padding-left: 8px;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select2-container .select2-selection--single .select2-selection__clear {
position: relative;
}
.select2-container[dir="rtl"]
.select2-selection--single
.select2-selection__rendered {
padding-right: 8px;
padding-left: 20px;
}
.select2-container .select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
user-select: none;
-webkit-user-select: none;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap;
}
.select2-container .select2-search--inline {
float: left;
}
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
border: none;
font-size: 100%;
margin-top: 5px;
padding: 0;
}
.select2-container
.select2-search--inline
.select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-dropdown {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051;
}
.select2-results {
display: block;
}
.select2-results__options {
list-style: none;
margin: 0;
padding: 0;
}
.select2-results__option {
padding: 6px;
user-select: none;
-webkit-user-select: none;
}
.select2-results__option[aria-selected] {
cursor: pointer;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-search--dropdown {
display: block;
padding: 4px;
}
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
display: none;
}
.select2-close-mask {
border: 0;
margin: 0;
padding: 0;
display: block;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 99;
background-color: #fff;
filter: alpha(opacity=0);
}
.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
}
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-container--default
.select2-selection--single
.select2-selection__clear {
cursor: pointer;
float: right;
font-weight: 700;
}
.select2-container--default
.select2-selection--single
.select2-selection__placeholder {
color: #999;
}
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
}
.select2-container--default
.select2-selection--single
.select2-selection__arrow
b {
border-color: #888 transparent transparent;
border-style: solid;
border-width: 5px 4px 0;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0;
}
.select2-container--default[dir="rtl"]
.select2-selection--single
.select2-selection__clear {
float: left;
}
.select2-container--default[dir="rtl"]
.select2-selection--single
.select2-selection__arrow {
left: 1px;
right: auto;
}
.select2-container--default.select2-container--disabled
.select2-selection--single {
background-color: #eee;
cursor: default;
}
.select2-container--default.select2-container--disabled
.select2-selection--single
.select2-selection__clear {
display: none;
}
.select2-container--default.select2-container--open
.select2-selection--single
.select2-selection__arrow
b {
border-color: transparent transparent #888;
border-width: 0 4px 5px;
}
.select2-container--default .select2-selection--multiple {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__rendered {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0 5px;
width: 100%;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__rendered
li {
list-style: none;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__clear {
cursor: pointer;
float: right;
font-weight: 700;
margin-top: 5px;
margin-right: 10px;
padding: 1px;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: 700;
margin-right: 2px;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__choice__remove:hover {
color: #333;
}
.select2-container--default[dir="rtl"]
.select2-selection--multiple
.select2-selection__choice,
.select2-container--default[dir="rtl"]
.select2-selection--multiple
.select2-search--inline {
float: right;
}
.select2-container--default[dir="rtl"]
.select2-selection--multiple
.select2-selection__choice {
margin-left: 5px;
margin-right: auto;
}
.select2-container--default[dir="rtl"]
.select2-selection--multiple
.select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto;
}
.select2-container--default.select2-container--focus
.select2-selection--multiple {
border: solid #000 1px;
outline: 0;
}
.select2-container--default.select2-container--disabled
.select2-selection--multiple {
background-color: #eee;
cursor: default;
}
.select2-container--default.select2-container--disabled
.select2-selection__choice__remove {
display: none;
}
.select2-container--default.select2-container--open.select2-container--above
.select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above
.select2-selection--multiple {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--default.select2-container--open.select2-container--below
.select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below
.select2-selection--multiple {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
}
.select2-container--default .select2-search--inline .select2-search__field {
background: transparent;
border: none;
outline: 0;
box-shadow: none;
-webkit-appearance: textfield;
}
.select2-container--default .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
}
.select2-container--default .select2-results__option[role="group"] {
padding: 0;
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
color: #999;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
background-color: #ddd;
}
.select2-container--default .select2-results__option .select2-results__option {
padding-left: 1em;
}
.select2-container--default
.select2-results__option
.select2-results__option
.select2-results__group {
padding-left: 0;
}
.select2-container--default
.select2-results__option
.select2-results__option
.select2-results__option {
margin-left: -1em;
padding-left: 2em;
}
.select2-container--default
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option {
margin-left: -2em;
padding-left: 3em;
}
.select2-container--default
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option {
margin-left: -3em;
padding-left: 4em;
}
.select2-container--default
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option {
margin-left: -4em;
padding-left: 5em;
}
.select2-container--default
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option
.select2-results__option {
margin-left: -5em;
padding-left: 6em;
}
.select2-container--default
.select2-results__option--highlighted[aria-selected] {
background-color: #5897fb;
color: #fff;
}
.select2-container--default .select2-results__group {
cursor: default;
display: block;
padding: 6px;
}
.select2-container--classic .select2-selection--single {
background-color: #f7f7f7;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%);
background-image: -o-linear-gradient(top, #fff 50%, #eee 100%);
background-image: linear-gradient(to bottom, #fff 50%, #eee 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF',endColorstr='#FFEEEEEE',GradientType=0);
}
.select2-container--classic .select2-selection--single:focus {
border: 1px solid #5897fb;
}
.select2-container--classic
.select2-selection--single
.select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-container--classic
.select2-selection--single
.select2-selection__clear {
cursor: pointer;
float: right;
font-weight: 700;
margin-right: 10px;
}
.select2-container--classic
.select2-selection--single
.select2-selection__placeholder {
color: #999;
}
.select2-container--classic
.select2-selection--single
.select2-selection__arrow {
background-color: #ddd;
border: none;
border-left: 1px solid #aaa;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE',endColorstr='#FFCCCCCC',GradientType=0);
}
.select2-container--classic
.select2-selection--single
.select2-selection__arrow
b {
border-color: #888 transparent transparent;
border-style: solid;
border-width: 5px 4px 0;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0;
}
.select2-container--classic[dir="rtl"]
.select2-selection--single
.select2-selection__clear {
float: left;
}
.select2-container--classic[dir="rtl"]
.select2-selection--single
.select2-selection__arrow {
border: none;
border-right: 1px solid #aaa;
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
left: 1px;
right: auto;
}
.select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #5897fb;
}
.select2-container--classic.select2-container--open
.select2-selection--single
.select2-selection__arrow {
background: transparent;
border: none;
}
.select2-container--classic.select2-container--open
.select2-selection--single
.select2-selection__arrow
b {
border-color: transparent transparent #888;
border-width: 0 4px 5px;
}
.select2-container--classic.select2-container--open.select2-container--above
.select2-selection--single {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%);
background-image: -o-linear-gradient(top, #fff 0%, #eee 50%);
background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF',endColorstr='#FFEEEEEE',GradientType=0);
}
.select2-container--classic.select2-container--open.select2-container--below
.select2-selection--single {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%);
background-image: -o-linear-gradient(top, #eee 50%, #fff 100%);
background-image: linear-gradient(to bottom, #eee 50%, #fff 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE',endColorstr='#FFFFFFFF',GradientType=0);
}
.select2-container--classic .select2-selection--multiple {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
outline: 0;
}
.select2-container--classic .select2-selection--multiple:focus {
border: 1px solid #5897fb;
}
.select2-container--classic
.select2-selection--multiple
.select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px;
}
.select2-container--classic
.select2-selection--multiple
.select2-selection__clear {
display: none;
}
.select2-container--classic
.select2-selection--multiple
.select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
}
.select2-container--classic
.select2-selection--multiple
.select2-selection__choice__remove {
color: #888;
cursor: pointer;
display: inline-block;
font-weight: 700;
margin-right: 2px;
}
.select2-container--classic
.select2-selection--multiple
.select2-selection__choice__remove:hover {
color: #555;
}
.select2-container--classic[dir="rtl"]
.select2-selection--multiple
.select2-selection__choice {
float: right;
margin-left: 5px;
margin-right: auto;
}
.select2-container--classic[dir="rtl"]
.select2-selection--multiple
.select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto;
}
.select2-container--classic.select2-container--open
.select2-selection--multiple {
border: 1px solid #5897fb;
}
.select2-container--classic.select2-container--open.select2-container--above
.select2-selection--multiple {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--classic.select2-container--open.select2-container--below
.select2-selection--multiple {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0;
}
.select2-container--classic .select2-search--inline .select2-search__field {
outline: 0;
box-shadow: none;
}
.select2-container--classic .select2-dropdown {
background-color: #fff;
border: 1px solid transparent;
}
.select2-container--classic .select2-dropdown--above {
border-bottom: none;
}
.select2-container--classic .select2-dropdown--below {
border-top: none;
}
.select2-container--classic .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
}
.select2-container--classic .select2-results__option[role="group"] {
padding: 0;
}
.select2-container--classic .select2-results__option[aria-disabled="true"] {
color: grey;
}
.select2-container--classic
.select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
color: #fff;
}
.select2-container--classic .select2-results__group {
cursor: default;
display: block;
padding: 6px;
}
.select2-container--classic.select2-container--open .select2-dropdown {
border-color: #5897fb;
}

2
assets/script/select2.js Normal file
View File

File diff suppressed because one or more lines are too long

1
template/javascript/product_form.html
View File

@@ -37,4 +37,5 @@
});
$("#brandSelect").select2();
</script>

34
template/product/form.html
View File

@@ -7,17 +7,39 @@
</ul>
</div>
<div class="w-[1141px] m-auto">
<div
class="title py-[15px] bg-white rounded-[10px] text-center mt-[40px] mb-[15px] font-bold text-[18px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)]">
Cập nhật: {{ page.product_info.title }} (ID: {{ page.product_info.id }})</div>
<div class="bg-white p-[10px] rounded-[10px] shadow-[0_1px_1px_0px_#0000001A] mb-[15px]">
<div class="flex items-center justify-between">
<div>
<h1 class="text-[20px] font-[700]">Cập nhật #{{ page.product_info.id }}</h1>
</div>
<div class="flex items-center ">
<a href="/admin/customer/customer-add"
class="flex items-center border-[1px] border-[#ECECEC] rounded-[4px] p-[5px_10px_5px_10px]">
<span
class="w-[14px] h-[14px] border-[1px] rounded-[50%] border-[#6B7280] text-center leading-[11px] mr-[5px] text-[#6B7280]">+</span>
<span class="text-[#6B7280]">Thêm sp mới</span>
</a>
<a href="javascript:void(0)"
class="flex items-center border-[1px] border-[#ECECEC] rounded-[4px] p-[5px_10px_5px_10px] ml-[10px]">
<div class="icons icon-copy"></div>
<span class="text-[#6B7280] ml-[5px]">Tạo sp tương tự</span>
</a>
</div>
</div>
<span class="text-[#6B7280]">{{ page.product_info.title }}</span>
</div>
<div class="flex">
<div class="left w-[273px] mr-[15px]">
<div class="bg-white rounded-[10px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)]">
<div class="bg-white rounded-[10px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] overflow-hidden">
{% for _menu in page.product_menu %}
<a role="tab" href="/admin/product/form?id={{ page.product_info.id }}&part={{ _menu.id }}" title="{{ _menu.name }}"
class="py-[7px] px-[15px] text-[#919699] block border-b-[1px] border-[#fafafb] {% if _menu.is_current == 1 %}bg-[#0041E8] text-[#fff]{% endif %}">
<a role="tab" href="/admin/product/form?id={{ page.product_info.id }}&part={{ _menu.id }}"
title="{{ _menu.name }}"
class="py-[7px] px-[15px] block border-b-[1px] border-[#fafafb] {% if _menu.is_current == 1 %}bg-[#0041E8] text-[#fff]{% else %}text-[#919699]{% endif %}">
{{ _menu.name }}
</a>
{% endfor %}

22
template/product/form_components/accessory.html
View File

@@ -1,10 +1,22 @@
<!-- phu kien -->
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]">
<b>1.Các loại phụ kiện của sản phẩm</b>
<a href="" class="flex items-center">
<i class="fa-regular fa-pen-to-square text-[#0041E8]"></i>
<span class="ml-[5px] text-[#0041E8] font-[500]">Chọn Sản phẩm phụ kiện</span>
<div class="w-[100%]" role="tabpanel">
<div
class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
<div class="flex items-center justify-between">
<b class="text-[20px]">Các loại phụ kiện của sản phẩm</b>
<a href="" class="flex items-center border-[1px] border-[#0041E8] p-[8px] rounded-[4px] bg-[#F5F7FF]">
<span class="text-[#0041E8] font-[500]">Chọn Sản phẩm phụ kiện</span>
</a>
</div>
</div>
</div>
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]">
<div class="list-item-cate flex items-center flex-wrap mt-[10px] mb-[30px]">
<a href=""
class="border-[1px] border-dashed border-[#9E9E9E] px-[10px] py-[5px] rounded-[4px] mr-[10px] font-[14px] text-[#9E9E9E] mb-[10px]">

396
template/product/form_components/basic.html
View File

@@ -1,182 +1,310 @@
<!-- thong tin san pham -->
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]" role="tabpanel">
<div class="info-product">
<b>1. Thông tin cơ bản</b>
<div class="flex items-center mb-[12px]">
<label for="" class="w-[210px] mr-[15px]">Đặt tên Sản phẩm</label>
<input type="text" value="Máy in mã vạch MH241" placeholder="Đặt tên sản phẩm"
class="w-[440px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
<form method="post" enctype="multipart/form-data">
<div
class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
<b class="text-[20px] mb-[25px] block">Thông tin cơ bản</b>
<div class="mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Đặt tên Sản phẩm</label>
<div class="box-note" data-tip="">
<i class="fa-regular fa-circle-question text-[#FFC700]"></i>
<div class="content">
Bạn muốn Google tìm ra Sản phẩm này hoặc người xem hiểu ngay về Sản phẩm ? Hãy viết tên Sản phẩm
một cách cụ thể, đầy đủ
nhất. Thay vì viết Vaio ABC, hãy viết : Máy tính xách tay Sony Vaio ABC, 500GB, 4GB RAM, 2.4GHz,
USA, mới 100% Hoặc thay
vì viết Áo 123, hãy viết : Áo khoác nam Made In VietNam, màu đen, đủ size, mã 123
</div>
</div>
<div class="flex items-center mb-[12px]">
<label for="" class="w-[210px] mr-[15px]">Model (nếu có)</label>
<input type="text" value="MH241" placeholder="Model (nếu có)"
class="w-[440px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<input type="text" name="info[proName]" id="pro_name" value="Máy in mã vạch MH241"
placeholder="Đặt tên sản phẩm"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="flex items-center flex-wrap mr-[-12px]">
<div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Model (nếu có)</label>
<div class="box-note">
<i class="fa-regular fa-circle-question text-[#FFC700]"></i>
<div class="content">
Nhiều khách hàng tìm Sản phẩm theo Model, bạn có nhập model của Sản phẩm nếu có. Ví dụ:
Laptop Sony Vaio ABC/12 thì
ABC/12 là model Sản phẩm.
</div>
</div>
<div class="flex items-center mb-[12px]">
<label for="" class="w-[210px] mr-[15px]">Mã kho hàng - SKU (nếu có)</label>
<input type="text" value="MH241" placeholder="Mã kho hàng - SKU (nếu có)"
class="w-[440px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<input type="text" value="MH241" name="info[productModel]" id="productModel"
placeholder="Model (nếu có)"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Mã kho hàng - SKU (nếu
có)</label>
<div class="box-note">
<i class="fa-regular fa-circle-question text-[#FFC700]"></i>
<div class="content">
Nếu bạn có phần mềm quản lý kho hàng chuyên nghiệp và bạn muốn theo dõi các đơn hàng nhận từ
website của Sản phẩm trong
phần mềm này. Khi đó hãy nhập mã kho hàng của Sản phẩm được cung cấp bởi phần mềm kho hàng
vào đây.
</div>
</div>
<div class="flex items-center mb-[12px]">
<label for="" class="w-[210px] mr-[15px]">Trọng lượng (tính phí
</div>
<input type="text" name="info[storeSKU]" id="storeSKU" value="MH241"
placeholder="Mã kho hàng - SKU (nếu có)"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Trọng lượng (tính phí
shipping)</label>
<input type="text" value="0" placeholder="Trọng lượng (tính phí shipping)"
class="w-[440px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
<div class="box-note flex items-center">
<span class="mr-[10px]">gram</span>
<i class="fa-regular fa-circle-question text-[#FFC700]"></i>
</div>
</div>
<div class="flex items-center mb-[12px]">
<label for="" class="w-[210px] mr-[15px]">Thương hiệu</label>
<select name="" id=""
class="w-[215px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
<option value="">Chọn thương hiệu</option>
<option value="">ABS</option>
</select>
<div class="box-note flex items-center">
<span class="mr-[10px] text-[#0041E8]">Quản lý thương hiệu</span>
<i class="fa-regular fa-circle-question text-[#FFC700]"></i>
<div class="content">
Dùng tính phí Shipping cho Sản phẩm (nếu có). Đơn vị gram, nếu Sản phẩm 1,2kg = 1200 (gram).
</div>
</div>
<div class="flex items-center mb-[12px]">
<label for="" class="w-[210px] mr-[15px]">Tóm tắt đặc tính chính</label>
<textarea name="" id="" placeholder="Nhập tóm tắt đặt tính chính"
class="w-[440px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px] h-[75px]"></textarea>
</div>
<div class="flex items-center mb-[12px]">
<label for="" class="w-[210px] mr-[15px]">Phụ kiện đi kèm</label>
<input type="text" value="Test" placeholder="Phụ kiện đi kèm"
class="w-[440px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
<input type="text" name="info[weight]" id="weight" value="0"
placeholder="Trọng lượng (tính phí shipping)"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
</div>
<div class="product-sale-info mt-[25px]">
<b>1. Thông tin cơ bản</b>
<table class="mt-[10px] w-[100%] border-[1px]">
<tr>
<td class="w-[216px]">Giá bán lẻ</td>
<td>
<div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Thương hiệu</label>
<div class="flex items-center">
<input type="text" value="0" placeholder="Giá sản phẩm"
class="w-[176px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
<select name="" id=""
<a href="" class="mr-[10px] text-[#0041E8]">Quản lý thương hiệu</a>
</div>
</div>
<select name="brand" id="brandSelect"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
<option value="" class="text-[#6B7280]">--Chọn thương hiệu--</option>
<option value="">ABS</option>
<option value="83">ABS</option>
<option value="67">ACE GAMING</option>
<option value="8">ADATA</option>
<option value="9">AEROCOOL</option>
<option value="52">AIGO</option>
<option value="59">AKKO</option>
<option value="3">AMD</option>
<option value="10">ANTEC</option>
<option value="11">AOC</option>
<option value="70">AORUS</option>
<option value="12">ASROCK</option>
<option value="2">ASUS</option>
<option value="73">AVerMedia</option>
<option value="57">BE QUIET</option>
<option value="4">BENQ</option>
<option value="79">CISCO</option>
<option value="72">Colorful</option>
<option value="47">COOLER MASTER</option>
<option value="58">COOLMOON</option>
<option value="13">CORSAIR</option>
<option value="5">DAREU</option>
<option value="46">DEEP COOL</option>
<option value="14">DELL</option>
<option value="60">E-DRA</option>
<option value="15">EVGA</option>
<option value="68">EXTREME ZERO</option>
<option value="64">FUHLEN</option>
<option value="16">GALAX</option>
<option value="6">GIGABYTE</option>
<option value="82">Glee</option>
<option value="17">GSKILL</option>
<option value="18">HKC</option>
<option value="19">HP</option>
<option value="45">HUANANZHI</option>
<option value="20">HUNTKEY</option>
<option value="53">ID - COOLING</option>
<option value="21">INNO3D</option>
<option value="22">INTEL</option>
<option value="23">INWIN</option>
<option value="61">IROCKS</option>
<option value="24">JETEK</option>
<option value="54">JONSBO</option>
<option value="25">KINGSTON</option>
<option value="26">KINGVIEW</option>
<option value="69">LEADTEK</option>
<option value="48">LEXAR</option>
<option value="27">LG</option>
<option value="28">LOGITECH</option>
<option value="77">MICRON</option>
<option value="80">MICROSOFT</option>
<option value="7">MSI</option>
<option value="65">NEWMEN</option>
<option value="56">NOCTUA</option>
<option value="29">NVIDIA</option>
<option value="71">NZXT</option>
<option value="74">OCPC</option>
<option value="30">PHANTEKS</option>
<option value="78">PLANET</option>
<option value="49">PLEXTOR</option>
<option value="31">PNY</option>
<option value="66">PSEAT</option>
<option value="75">QNAP</option>
<option value="32">SAMA</option>
<option value="33">SAMSUNG</option>
<option value="36">SAPPHIRE</option>
<option value="50">SEAGATE</option>
<option value="34">SEASONIC</option>
<option value="35">SEGOTEP</option>
<option value="37">SUPERFLOWER</option>
<option value="38">SUPERMICRO</option>
<option value="39">TEAMGROUP</option>
<option value="55">THERMALRIGHT</option>
<option value="40">THERMALTAKE</option>
<option value="81">TOSHIBA</option>
<option value="76">TP LINK</option>
<option value="84">TSC</option>
<option value="41">VIEWSONIC</option>
<option value="42">VITRA</option>
<option value="62">WARRIOR</option>
<option value="51">WESTERN DIGITAL</option>
<option value="43">XIGMATEK</option>
<option value="63">ZIDLI</option>
<option value="44">ZOTAC</option>
</select>
</div>
</div>
<div class="mb-[25px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Tóm tắt đặc tính chính</label>
<textarea name="info[proSummary]" id="summary" placeholder="Nhập tóm tắt đặt tính chính"
class="w-[100%] h-[120px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
</div>
<div class="mb-[10px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Phụ kiện đi kèm</label>
<input type="text" id="accessory" name="info[accessory]" value="Test" placeholder="Phụ kiện đi kèm"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
</div>
<div class="bg-white p-[15px] border-[#FAFAFB] border-b-[6px] border-[#FAFAFB]">
<b class="block text-[20px] mb-[25px]">Thông tin bán hàng</b>
<div class="mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Giá bán lẻ</label>
<div class="box-note flex items-center text-[#6B7280]">
<i class="text-[#6B7280]">(* Nếu dùng USD thì theo chuẩn quốc tế v.d. $134.05).</i>
<span>Tỷ giá:</span>
<b class="mx-[5px]">1</b>
<a href="/admin/system/setup/option=general" class="ml-[2px]">
<i class="icons icon-edit"></i>
</a>
</div>
</div>
<div class="flex items-center">
<input type="text" name="info[price]" id="price" value="0" placeholder="Giá bán lẻ"
class="w-[400px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ">
<select name="currency" id="currency"
class="w-[88px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mx-[15px] ">
<option value="">VNĐ</option>
</select>
<span>/</span>
<select name="" id=""
<select name="price_unit" id="price_unit"
class="w-[88px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mx-[15px] ">
<option value="">Chiếc</option>
</select>
</div>
<div class="flex items-center pt-[8px]">
<i>(* Nếu dùng USD thì theo chuẩn quốc tế v.d. $134.05).</i>
<span>Tỷ giá:</span>
<b>1</b>
<a href="" class="ml-[5px]">
<i class="icons icon-edit"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Thuế VAT</td>
<td class="flex items-center">
<span class="mr-[20px]">Giá bán</span>
<div class="flex items-center mr-[20px]">
<div class="flex items-center mr-[30px]">
<input type="radio" name="tax_vat" value="0" checked>
<label for="" class="ml-[25px]">Không hiển thị VAT</label>
<div class="flex items-center mr-[-15px]">
<div class="w-[calc(50%_-_15px)] mr-[15px] mb-[25px]">
<div class="flex items-center mb-[5px]">
<label class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Giá nhập hàng</label>
<div class="box-note">
<i class="mr-[10px] text-[#6B7280]">vnd (để tham khảo khi cần)</i>
</div>
<div class="flex items-center mr-[20px]">
<input type="radio" name="tax_vat" value="1">
<label for="" class="ml-[25px]">Không hiển thị VAT</label>
</div>
<input type="text" name="info[purchase_price]" value="0" placeholder="Giá nhập hàng"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="w-[calc(50%_-_15px)] mr-[15px] mb-[25px]">
<div class="flex items-center mb-[5px]">
<label class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Giá thị trường</label>
<div class="box-note">
<i class="mr-[10px] text-[#6B7280]">vnd (để tham khảo khi cần)</i>
</div>
</div>
<input type="text" value="0" name="info[market_price]" placeholder="Giá thị trường"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
</div>
<div class="mb-[25px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Khuyến mại riêng</label>
<textarea name="info[specialOffer]" id="specialOffer" placeholder="Nhập tóm tắt đặt tính chính"
class="w-[100%] h-[120px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
</div>
<div class="mb-[25px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Thông tin bảo hành</label>
<input type="text" name="info[warranty]" id="warranty" value="Test" placeholder="Thông tin bảo hành"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="flex items-center mr-[-15px]">
<div class="w-[calc(50%_-_15px)] mr-[15px] mb-[25px]">
<label class="block mr-[5px] mb-[5px] font-[700] text-[14px] text-[#383C44]">Số lượng kho hàng</label>
<input type="text" value="0" name="info[quantity]" placeholder="Số lượng kho hàng"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="w-[calc(50%_-_15px)] mr-[15px] mb-[25px]">
<label class="block mr-[5px] mb-[5px] font-[700] text-[14px] text-[#383C44]">Tình trạng (Mới /
Cũ)</label>
<input type="text" name="info[cond]" value="" placeholder="Tình trạng (Mới / Cũ)"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
</div>
<div class="flex items-center mb-[25px]">
<label class="block w-[130px] font-[700] text-[14px] text-[#383C44]">Thuế VAT
</label>
<div class="flex items-center">
<input type="radio" name="tax_vat" value="2">
<div class="flex items-center mr-[30px] w-[150px]">
<input type="radio" name="info[hasVAT]" value="0" checked="">
<label for="" class="ml-[25px]">Không hiển thị VAT</label>
</div>
<div class="flex items-center mr-[20px]">
<input type="radio" name="info[hasVAT]" value="1">
<label for="" class="ml-[25px]">Có VAT</label>
</div>
<div class="flex items-center mr-[20px]">
<input type="radio" name="info[hasVAT]" value="2">
<label for="" class="ml-[25px]">Chưa có VAT</label>
</div>
</div>
</td>
</tr>
<tr>
<td>Giá nhập hàng</td>
<td>
<div class="flex items-center">
<input type="text" value="0" placeholder="Giá sản phẩm"
class="w-[176px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
<span>vnd (để tham khảo khi cần)</span>
</div>
</td>
</tr>
<tr>
<td>Giá thị trường</td>
<td>
<div class="flex items-center">
<input type="text" value="0" placeholder="Giá sản phẩm"
class="w-[176px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
<span>vnd (để tham khảo khi cần)</span>
</div>
</td>
</tr>
<tr>
<td>Số lượng kho hàng</td>
<td>
<label class="block w-[130px] font-[700] text-[14px] text-[#383C44]">Hiển thị
</label>
<div class="flex items-center">
<input type="text" value="0" placeholder="Giá sản phẩm"
class="w-[176px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
</td>
</tr>
<tr>
<td>Khuyến mại riêng</td>
<td>
<textarea type="text" placeholder="Nhập khuyến mại riêng"
class="w-[442px] h-[76px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
</td>
</tr>
<tr>
<td>Khuyến mại riêng</td>
<td>
<textarea type="text" placeholder="Nhập khuyến mại riêng"
class="w-[442px] h-[35px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
</td>
</tr>
<tr>
<td>Tình trạng (Mới / Cũ)</td>
<td>
<input type="text" value="" placeholder=""
class="w-[176px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</td>
</tr>
<tr>
<td>Hiển thị</td>
<td>
<div class="flex items-center">
<div class="flex items-center mr-[30px]">
<input type="radio" name="info[status]" value="1" checked>
<div class="flex items-center mr-[30px] w-[150px]">
<input type="radio" name="info[status]" value="0" checked="">
<label for="" class="ml-[25px]">Cho hiển thị</label>
</div>
<div class="flex items-center mr-[20px]">
<input type="radio" name="info[status]" value="0">
<input type="radio" name="info[status]" value="1">
<label for="" class="ml-[25px]">Ẩn hiển thị</label>
</div>
</div>
</td>
</tr>
</table>
<input class="w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] mt-[10px] text-white cursor-pointer" name="commit"
type="submit" value="Cập nhật">
</div>
</div>
<div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
<input class="w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer" id="submit-collection-btn"
name="commit" type="submit" value="Cập nhật" />
</div>
</form>

51
template/product/form_components/category.html
View File

@@ -1,9 +1,8 @@
<!-- danh muc san pham -->
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]"
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px] pb-[100px]"
role="tabpanel">
<b class="block mb-[5px]">Hiện tại Sản phẩm đang được đặt trong các danh mục sau :</b>
<ul>
<ul id="list-category">
<li><a href="" class="text-[#0041E8]">Màn hình máy tính</a></li>
<li><a href="" class="text-[#0041E8]">Màn hình máy tính</a></li>
</ul>
@@ -12,30 +11,26 @@
Bạn có thể chọn thêm danh mục khác cho Sản phẩm hoặc chỉnh lại.
</p>
<div class="list-category">
<div class="item flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]" />
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item flex items-center mb-[10px]">
<input type="checkbox"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]" />
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item flex items-center mb-[10px]">
<input type="checkbox"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]" />
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item flex items-center mb-[10px]">
<input type="checkbox"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]" />
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item flex items-center mb-[10px]">
<input type="checkbox"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]" />
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<label class="style-checkbox mb-[10px]">
Màn hình máy tính
<input type="checkbox" name="new" checked>
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[10px]">
Màn hình máy tính
<input type="checkbox" name="new">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[10px]">
Màn hình máy tính
<input type="checkbox" name="new">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[10px]">
Màn hình máy tính
<input type="checkbox" name="new">
<span class="checkmark"></span>
</label>
</div>
</div>

18
template/product/form_components/description.html
View File

@@ -1,23 +1,27 @@
<!-- mo ta -->
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]">
<div class="flex items-center">
<div class="flex items-center justify-between">
<b class="text-[18px] mr-[5px]">THƯ VIỆN ẢNH</b>
<span>Chưa có thư viện ảnh cho phần miêu tả</span>
</div>
<div class="list-btn flex items-center mt-[5px] mb-[20px]">
<a href="" class="flex items-center mr-[20px]">
<div class="list-btn flex items-center">
<a href=""
class="flex items-center mr-[20px] border-[1px] border-[#0041E8] p-[8px_10px] rounded-[4px] bg-[#F5F7FF]">
<i class="fa-solid fa-arrow-up-from-bracket text-[#0041E8]"></i>
<span class="text-[#0041E8] ml-[5px]">Upload ảnh</span>
</a>
<a href="" class="flex items-center mr-[20px]">
<a href=""
class="flex items-center mr-[20px] border-[1px] border-[#0041E8] p-[8px_10px] rounded-[4px] bg-[#F5F7FF]">
<i class="fa-regular fa-folder text-[#0041E8]"></i>
<span class="text-[#0041E8] ml-[5px]">Quản lý</span>
</a>
<a href="" class="flex items-center">
<a href="" class="flex items-center border-[1px] border-[#0041E8] p-[8px_10px] rounded-[4px] bg-[#F5F7FF]">
<i class="fa-regular fa-pen-to-square text-[#0041E8]"></i>
<span class="text-[#0041E8] ml-[5px]">Chọn ảnh trong kho ảnh chính</span>
</a>
</div>
</div>
<div class="list-image my-[10px]">
<span class="block text-[#6B7280]">Chưa có thư viện ảnh cho phần miêu tả</span>
</div>
<textarea id="product-desc"> </textarea>
<input class="btn w-[85px] h-[35px] min-h-[35px] bg-[#0041E8] rounded-[4px] mt-[10px] text-white cursor-pointer"

140
template/product/form_components/image.html
View File

@@ -1,14 +1,22 @@
<!-- hinh anh -->
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]" role="tabpanel">
<div class="flex items-center overflow-x-scroll">
<div class="item w-[50%] rounded-[10px] border-[1px] border-[#f6f6f6] p-[15px]">
<b class="text-center block">Ảnh chính</b>
<img src="./images/image-big.png" alt="">
<p class="text-center block">(Hình sản phẩm)</p>
<a href="" class="text-center flex justify-center">
<i class="icons icon-remove"></i>
</a>
<div class="flex items-center justify-between mt-[10px]">
<div class="w-100%" role="tabpanel">
<div
class="bg-white rounded-[15px_15px_0_0] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] p-[15px] border-b-[6px] border-[#FAFAFB]">
<b class="block text-[20px] font-[700] mb-[10px]">Cập nhật ảnh sản phẩm</b>
<div class="overflow-y-scroll max-h-[500px]">
<div
class="item flex w-[100%] rounded-[10px] shadow-[0_1px_1px_0_#0000001A] border-[1px] border-[#f6f6f6] p-[15px] mb-[15px]">
<div class="image w-[100px] h-[100px] mr-[15px]">
<img src="{{ 'image-big.png' | asset_url }}" alt="">
</div>
<div class="right-image w-[calc(100%_-_115px)]">
<div class="flex justify-between">
<div class="flex items-center w-[50%]">
<b class="text-center block">Hình sản phẩm</b>
<p class="text-center block text-[#6B7280] ml-[5px]">(Ảnh chính)</p>
</div>
<div class="flex items-center justify-between w-[50%]">
<div class="item flex items-center mr-[20px]">
<p class="whitespace-nowrap">STT</p>
<input type="text"
@@ -21,14 +29,25 @@
</div>
</div>
</div>
<div class="item w-[50%] rounded-[10px] border-[1px] border-[#f6f6f6] p-[15px]">
<b class="text-center block">Ảnh chính</b>
<img src="./images/image-big.png" alt="">
<p class="text-center block">(Hình sản phẩm)</p>
<a href="" class="text-center flex justify-center">
<a href=""
class="flex items-center w-[70px] h-[35px] p-[10px] border-[#ECECEC] border-[1px] rounded-[4px] mt-[15px]">
<i class="icons icon-remove"></i>
<p class="text-[#6B7280] ml-[5px] text-[12px] mt-[2px]">Xoá</p>
</a>
<div class="flex items-center justify-between mt-[10px]">
</div>
</div>
<div
class="item flex w-[100%] rounded-[10px] shadow-[0_1px_1px_0_#0000001A] border-[1px] border-[#f6f6f6] p-[15px] mb-[15px]">
<div class="image w-[100px] h-[100px] mr-[15px]">
<img src="{{ 'image-big.png' | asset_url }}" alt="">
</div>
<div class="right-image w-[calc(100%_-_115px)]">
<div class="flex justify-between">
<div class="flex items-center w-[50%]">
<b class="text-center block">Hình sản phẩm</b>
<p class="text-center block text-[#6B7280] ml-[5px]">(Ảnh chính)</p>
</div>
<div class="flex items-center justify-between w-[50%]">
<div class="item flex items-center mr-[20px]">
<p class="whitespace-nowrap">STT</p>
<input type="text"
@@ -41,14 +60,25 @@
</div>
</div>
</div>
<div class="item w-[50%] rounded-[10px] border-[1px] border-[#f6f6f6] p-[15px]">
<b class="text-center block">Ảnh chính</b>
<img src="./images/image-big.png" alt="">
<p class="text-center block">(Hình sản phẩm)</p>
<a href="" class="text-center flex justify-center">
<a href=""
class="flex items-center w-[70px] h-[35px] p-[10px] border-[#ECECEC] border-[1px] rounded-[4px] mt-[15px]">
<i class="icons icon-remove"></i>
<p class="text-[#6B7280] ml-[5px] text-[12px] mt-[2px]">Xoá</p>
</a>
<div class="flex items-center justify-between mt-[10px]">
</div>
</div>
<div
class="item flex w-[100%] rounded-[10px] shadow-[0_1px_1px_0_#0000001A] border-[1px] border-[#f6f6f6] p-[15px] mb-[15px]">
<div class="image w-[100px] h-[100px] mr-[15px]">
<img src="{{ 'image-big.png' | asset_url }}" alt="">
</div>
<div class="right-image w-[calc(100%_-_115px)]">
<div class="flex justify-between">
<div class="flex items-center w-[50%]">
<b class="text-center block">Hình sản phẩm</b>
<p class="text-center block text-[#6B7280] ml-[5px]">(Ảnh chính)</p>
</div>
<div class="flex items-center justify-between w-[50%]">
<div class="item flex items-center mr-[20px]">
<p class="whitespace-nowrap">STT</p>
<input type="text"
@@ -61,34 +91,72 @@
</div>
</div>
</div>
<a href=""
class="flex items-center w-[70px] h-[35px] p-[10px] border-[#ECECEC] border-[1px] rounded-[4px] mt-[15px]">
<i class="icons icon-remove"></i>
<p class="text-[#6B7280] ml-[5px] text-[12px] mt-[2px]">Xoá</p>
</a>
</div>
<div class="border-[1px] my-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] rounded-[10px] p-[15px]">
<b>Thêm ảnh cho sản phẩm</b>
<p>Bạn có thể: Chọn ảnh có sẵn trong kho ảnh, hoặc upload ảnh từ máy tính:</p>
</div>
<div
class="item flex w-[100%] rounded-[10px] shadow-[0_1px_1px_0_#0000001A] border-[1px] border-[#f6f6f6] p-[15px] mb-[15px]">
<div class="image w-[100px] h-[100px] mr-[15px]">
<img src="{{ 'image-big.png' | asset_url }}" alt="">
</div>
<div class="right-image w-[calc(100%_-_115px)]">
<div class="flex justify-between">
<div class="flex items-center w-[50%]">
<b class="text-center block">Hình sản phẩm</b>
<p class="text-center block text-[#6B7280] ml-[5px]">(Ảnh chính)</p>
</div>
<div class="flex items-center justify-between w-[50%]">
<div class="item flex items-center mr-[20px]">
<p class="whitespace-nowrap">STT</p>
<input type="text"
class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
</div>
<div class="item flex items-center">
<p class="whitespace-nowrap">ALT</p>
<input type="text"
class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
</div>
</div>
</div>
<a href=""
class="flex items-center w-[70px] h-[35px] p-[10px] border-[#ECECEC] border-[1px] rounded-[4px] mt-[15px]">
<i class="icons icon-remove"></i>
<p class="text-[#6B7280] ml-[5px] text-[12px] mt-[2px]">Xoá</p>
</a>
</div>
</div>
</div>
</div>
<div class="bg-white border-[1px] p-[15px] border-b-[6px] border-[#FAFAFB]">
<b class="text-[20px] block">Thêm ảnh cho sản phẩm</b>
<p class="text-[#6B7280]">Bạn có thể: Chọn ảnh có sẵn trong kho ảnh, hoặc upload ảnh từ máy tính:</p>
<div class="flex items-center mt-[10px]">
<a href=""
class="item flex items-center px-[15px] py-[8px] border-[1px] border-[#0041E8] rounded-[4px] mr-[15px]">
<i class="fa-solid fa-arrow-up-from-bracket text-[#0041E8]"></i>
<span class="pl-[5px] text-[#0041E8] font-[500]">Upload ảnh</span>
</a>
<a href="" class="item flex items-center px-[15px] py-[8px] border-[1px] border-[#0041E8] rounded-[4px]">
<i class="fa-regular fa-pen-to-square text-[#0041E8]"></i>
<span class="pl-[5px] text-[#0041E8] font-[500]">Chọn ảnh trong kho ảnh
chính</span>
</a>
</div>
<p class="text-[#E00000] italic mt-[10px]">Chú ý: Bạn có thể chọn nhiều ảnh cùng 1
<p class="text-[#6B7280] italic mt-[10px]"><b>Chú ý:</b> Bạn có thể chọn nhiều ảnh cùng 1
lúc:
Chấp nhận các file ảnh: jpg,gif</p>
<input class=" w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer py-[0] mt-[10px]"
name="commit" type="submit" value="Cập nhật">
</div>
<input class=" w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer py-[0]" name="commit"
type="submit" value="Cập nhật">
<div class="note mt-[15px] mb-[5px]">
<b>Chú ý:</b>
<div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
<b class="mb-[5px] block">Chú ý:</b>
<ul>
<li>- Ảnh Sản phẩm kích thước lớn sẽ được tự động co lại thành các ảnh
nhỏ hơn cho những vị trí liên quan. Tùy giao
diện website của bạn mà kích thước ảnh Sản phẩm khác nhau. Click vào đây để
diện website của bạn mà kích thước ảnh Sản phẩm khác nhau. <a href="/admin/system/setup"
class="text-[#0041E8] underline">Click
vào đây</a> để
quy định kích thước ảnh Sản phẩm.</li>
<li>
- Chỉ dùng file ảnh đuôi .jpg và .gif.

142
template/product/form_components/seo.html
View File

@@ -1,63 +1,87 @@
<!-- box seo -->
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]"
role="tabpanel">
<table class="w-[100%] table-seo">
<tr>
<td>
Link truy cập tại website
</td>
<td>
<a href="">https://demopc8.hurasoft.com/may-in-ma-vach-mh241</a>
</td>
</tr>
<tr>
<td>Tên index</td>
<td>
<input type="text"
class="border-[1px] border-[#D8D8D8] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] w-[100%] h-[32px] px-[10px]">
</td>
</tr>
<tr>
<td>Thay đổi link trung cập khi thay đổi tên index ?</td>
<td>
<div class="flex">
<input type="checkbox" name=""
class="checkbox checked:bg-[#0041E8] w-[15px] h-[15px] rounded-[3px] mt-[4px]">
<span class="ml-[7px]">
Có thay đổi (Tích chọn nếu bạn muốn hệ thống thay đổi link truy cập.
Cảnh báo: sẽ ảnh hưởng tới kết quả SEO)
</span>
<div class="w-[100%]" role="tabpanel">
<div
class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
<div class="mb-[25px]">
<label for="" class="mb-[5px] block font-[700] text-[14px] text-[#383C44]">Link truy cập tại website</label>
<input type="text" name="url_index"
value="https://demopc8.hurasoft.com/may-do-do-bong-horiba-ig-320-gloss-metergoc-do-60-khoang-do-00-1000-phan-do-..."
placeholder="Link truy cập tại website"
class="w-[100%] text-[#0041E8] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="mb-[25px]">
<label for="" class="mb-[5px] block font-[700] text-[14px] text-[#383C44]">Tên Index</label>
<input type="text" name="url_index" value="" placeholder="Tên Index"
class="w-[100%] text-[#0041E8] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
</td>
</tr>
<tr>
<td>Url canonical</td>
<td>
<input type="text"
class="border-[1px] border-[#D8D8D8] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] w-[100%] h-[32px] px-[10px]">
<i class="mt-[7px] block">* để trống sẽ dùng link mặc định của hệ thống</i>
</td>
</tr>
<tr>
<td>Meta Title</td>
<td>
<input type="text"
class="border-[1px] border-[#D8D8D8] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] w-[100%] h-[32px] px-[10px]">
<i class="mt-[7px] block">* 0 ký tự , 0 từ</i>
</td>
</tr>
<tr>
<td>Meta Description(nên tối đa 160 ký tự)</td>
<td>
<input type="text"
class="border-[1px] border-[#D8D8D8] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] w-[100%] h-[32px] px-[10px]">
<i class="mt-[7px] block">0 ký tự , 0 từ (Khuyến nghị: 160 ký tự)</i>
</td>
</tr>
</table>
<input
class=" w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] mt-[10px] text-white cursor-pointer py-[0]"
name="commit" type="submit" value="Cập nhật">
<div class="mb-[25px]">
<label for="" class="mb-[5px] block font-[700] text-[14px] text-[#383C44]">Thay đổi Link truy cập khi thay
đổi Tên index?</label>
<div class="flex items-center">
<label class="style-checkbox text-[#6B7280]">
Có thay đổi
<input type="checkbox" name="change_url_on_update" checked="">
<span class="checkmark"></span>
</label>
<i class="ml-[5px] text-[#6B7280]">(Tích chọn nếu bạn muốn hệ thống thay đổi link truy cập. Cảnh báo:
sẽ ảnh hưởng tới
kết quả SEO)
</i>
</div>
</div>
<div class="mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Url canonical</label>
<i class="text-[#6B7280] ml-[5px]">* để trống sẽ dùng link mặc định của hệ thống</i>
</div>
<input type="text" name="url_canonical" value="" placeholder="Url canonical"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Url canonical</label>
<i class="text-[#6B7280] ml-[5px]">* để trống sẽ dùng link mặc định của hệ thống</i>
</div>
<input type="text" name="url_canonical" value="" placeholder="Url canonical"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="flex items-center flex-wrap mr-[-12px]">
<div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Meta Title</label>
<i class="text-[#6B7280]">* 0 ký tự , 0 từ</i>
</div>
<input type="text" value="" name="meta_title" id="meta_title" placeholder="Meta Title"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Meta Keyword</label>
<i class="text-[#6B7280]">* 0 ký tự , 0 từ</i>
</div>
<input type="text" value="" name="meta_keyword" id="meta_keyword" placeholder="Meta Keyword"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
</div>
<div class="mb-[5px]">
<div class="flex items-center mb-[5px]">
<label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Meta Description(nên tối đa 160 ký
tự)</label>
<i class="text-[#6B7280] ml-[5px]">* 0 ký tự , 0 từ (Khuyến nghị: 160 ký tự)</i>
</div>
<textarea type="text" name="meta_description" value="" placeholder="Meta Description"
class="w-[100%] h-[120px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
</div>
</div>
<div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
<input class="w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer" id="submit-collection-btn"
name="commit" type="submit" value="Cập nhật" />
</div>
</div>

276
template/product/form_components/spec_group.html
View File

@@ -1,168 +1,150 @@
<!-- thuoc tinh -->
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]" role="tabpanel">
<table class="product-specifications">
<tr>
<td>
<b>Màu sắc 5</b>
<p>mau_sac_5</p>
<span class="text-[#E00000]">Dùng tạo lựa chọn SP</span>
</td>
<td>
<div class="flex items-center flex-wrap">
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
</div>
<div class="w-100%" role="tabpanel">
<div
class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
<b class="block mb-[5px] text-[20px] font-[700]">Cập nhật thuộc tính cho Sản phẩm</b>
<div class="flex items-center">
<b>Bổ sung giá trị:</b>
<p class="mx-[5px]">mỗi giá trị 1 dòng</p>
<a href="">
<i class="icons icon-edit"></i>
<span class="text-[#6B7280] mr-[5px]">Hoặc</span>
<a href="sell_product.php?id=2115&view=spec&noattr=1&l=vn&popup=0" class="text-[#0041E8]">Cập nhật thông số
kỹ thuật không cần
thuộc tính
</a>
</div>
<textarea type="text" name="" id=""
class="w-[450px] min-h-[50px] p-[5px] border-[1px] mt-[10px] rounded-[4px]"></textarea>
</td>
</tr>
<tr>
<td>
<b>Màu sắc 5</b>
<p>mau_sac_5</p>
<span class="text-[#E00000]">Dùng tạo lựa chọn SP</span>
</td>
<td>
<div class="flex items-center flex-wrap">
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="bg-white border-b-[6px] border-[#FAFAFB]">
<div class="item-attributes p-[10px_15px] border-b-[2px] border-[#FAFAFB]">
<b class="text-[#383C44]">Dòng cpu</b>
<p class="text-[#383C44]">dong-cpu</p>
<i class="text-[#6B7280]">Dùng là bộ lọc - Dùng tạo lựa chọn SP - Hiển thị ở tóm tắt</i>
<div class="flex flex-wrap mt-[15px]">
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
</div>
<div class="">
<div class="flex items-center">
<b>Bổ sung giá trị:</b>
<p class="mx-[5px]">mỗi giá trị 1 dòng</p>
<a href="">
<i class="icons icon-edit"></i>
</a>
<p class="px-[5px]">mỗi giá trị 1 dòng</p>
<a href="/admin/product/attribute-add&id=98#attr_value"><i class="icons icon-edit"></i></a>
</div>
<textarea type="text" name="" id=""
class="w-[450px] min-h-[50px] p-[5px] border-[1px] mt-[10px] rounded-[4px]"></textarea>
</td>
</tr>
<tr>
<td>
<b>Màu sắc 5</b>
<p>mau_sac_5</p>
<span class="text-[#E00000]">Dùng tạo lựa chọn SP</span>
</td>
<td>
<div class="flex items-center flex-wrap">
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
<textarea name="" id=""
class="w-[100%] h-[50px] border-[1px] border-[#D8D8D8] p-[5px_10px] rounded-[4px] mt-[7px]"></textarea>
</div>
</div>
<div class="item-attributes p-[10px_15px] border-b-[2px] border-[#FAFAFB]">
<b class="text-[#383C44]">Dòng cpu</b>
<p class="text-[#383C44]">dong-cpu</p>
<i class="text-[#6B7280]">Dùng là bộ lọc - Dùng tạo lựa chọn SP - Hiển thị ở tóm tắt</i>
<div class="flex flex-wrap mt-[15px]">
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
</div>
<div class="">
<div class="flex items-center">
<b>Bổ sung giá trị:</b>
<p class="mx-[5px]">mỗi giá trị 1 dòng</p>
<a href="">
<i class="icons icon-edit"></i>
</a>
<p class="px-[5px]">mỗi giá trị 1 dòng</p>
<a href="/admin/product/attribute-add&id=98#attr_value"><i class="icons icon-edit"></i></a>
</div>
<textarea type="text" name="" id=""
class="w-[450px] min-h-[50px] p-[5px] border-[1px] mt-[10px] rounded-[4px]"></textarea>
</td>
</tr>
<tr>
<td>
<b>Màu sắc 5</b>
<p>mau_sac_5</p>
<span class="text-[#E00000]">Dùng tạo lựa chọn SP</span>
</td>
<td>
<div class="flex items-center flex-wrap">
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
</div>
<div class="item w-[50%] flex items-center mb-[10px]">
<input type="checkbox" checked="checked"
class="checkbox checked:bg-[#0041E8] w-[20px] h-[20px] [--chkbg:theme(#0041E8)] [--chkfg:white] rounded-[4px]">
<span class="ml-[10px]">Màn hình máy tính</span>
<textarea name="" id=""
class="w-[100%] h-[50px] border-[1px] border-[#D8D8D8] p-[5px_10px] rounded-[4px] mt-[7px]"></textarea>
</div>
</div>
<div class="item-attributes p-[10px_15px] border-b-[2px] border-[#FAFAFB]">
<b class="text-[#383C44]">Dòng cpu</b>
<p class="text-[#383C44]">dong-cpu</p>
<i class="text-[#6B7280]">Dùng là bộ lọc - Dùng tạo lựa chọn SP - Hiển thị ở tóm tắt</i>
<div class="flex flex-wrap mt-[15px]">
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
<label class="style-checkbox mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
Core i3
<input type="checkbox" name="new" checked="">
<span class="checkmark"></span>
</label>
</div>
<div class="">
<div class="flex items-center">
<b>Bổ sung giá trị:</b>
<p class="mx-[5px]">mỗi giá trị 1 dòng</p>
<a href="">
<i class="icons icon-edit"></i>
</a>
<p class="px-[5px]">mỗi giá trị 1 dòng</p>
<a href="/admin/product/attribute-add&id=98#attr_value"><i class="icons icon-edit"></i></a>
</div>
<textarea type="text" name="" id=""
class="w-[450px] min-h-[50px] p-[5px] border-[1px] mt-[10px] rounded-[4px]"></textarea>
</td>
</tr>
</table>
<div class="flex items-center mt-[10px]">
<textarea name="" id=""
class="w-[100%] h-[50px] border-[1px] border-[#D8D8D8] p-[5px_10px] rounded-[4px] mt-[7px]"></textarea>
</div>
</div>
</div>
<div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
<div class="flex items-center">
<input class=" w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer py-[0]" name="commit"
type="submit" value="Cập nhật">
<a href="" class="px-[10px] py-[5px] rounded-[4px] border-[1px] border-[#0041E8] text-[#0041E8] ml-[7px]">
@@ -170,3 +152,5 @@
</a>
</div>
</div>
</div>

171
template/product/form_components/variant.html
View File

@@ -1,99 +1,144 @@
<!-- cau hinh -->
<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]">
<b>Chủng loại của sản phẩm</b>
<a href="" class="flex items-center py-[5px]">
<i class="icons icon-edit"></i>
<div class="w-[100%]" role="tabpanel">
<div
class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
<div class="flex items-center justify-between">
<b class="text-[20px]">Chủng loại của sản phẩm</b>
<a href="" class="flex items-center p-[8px_10px] border-[1px] border-[#0041E8] rounded-[4px]">
<i class="fa-regular fa-pen-to-square text-[#0041E8]"></i>
<span class="text-[#0041E8] ml-[5px]">
Sửa thuộc tính
</span>
</a>
<p class="text-[#E00000] italic pb-[7px]">* Chú ý: Giá bán của sản phẩm sẽ là giá của
chủng loại
được chọn. Nếu giá chủng
loại=0 thì sẽ mặc định dùng giá sản
phẩm. Cài đặt giá chung cho sản phẩm ở Tab "Cơ bản"</p>
<div
class="border-[1px] border-[#F6F6F6] shadow-[0_1px_1px_0_rgba(0,0,0,0.10)] rounded-[5px] p-[15px] flex items-center justify-between">
<p>Cài nhanh cho tất cả chủng loại:</p>
<div class="item flex items-center">
<p>Giá bán:</p>
<input type="text"
class="w-[190px] h-[32px] border-[1px] rounded-[4px] shadow-[0_1px_1px_0_rgba(0,0,0,0.12)] ml-[10px]">
</div>
<div class="item flex items-center">
<p>Số lượng:</p>
<input type="text"
class="w-[190px] h-[32px] border-[1px] rounded-[4px] shadow-[0_1px_1px_0_rgba(0,0,0,0.12)] ml-[10px]">
<div class="text-[#6B7280] mt-[10px]">
<b class="mr-[5px]">Chú ý:</b>
<span>Giá bán của sản phẩm sẽ là giá của chủng loại được chọn. Nếu giá chủng loại=0 thì sẽ mặc định dùng
giá sản phẩm.
Cài đặt giá chung cho sản phẩm ở Tab "Cơ bản"
</span>
</div>
<div class="border-[1px] border-[#F6F6F6] p-[10px] rounded-[10px] mt-[15px] shadow-[0_1px_1px_0_#0000001A]">
<b class="text-[20px] block mb-[15px]">Cài nhanh cho tất cả chủng loại</b>
<div class="flex items-center mr-[-15px] pb-[5px]">
<div class="w-[calc(50%_-_15px)] mr-[15px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Giá bán</label>
<input type="text" name="price" id="pro_name" value=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
<div class="w-[calc(50%_-_15px)] mr-[15px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Số lượng</label>
<input type="text" name="quantity" value=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
</div>
</div>
<table class="w-[100%] table-config">
<tbody>
<tr>
<th>Ảnh</th>
<th>Mã kho</th>
<th>Tên</th>
<th>Giá bán</th>
<th>SL</th>
<th>Linh ngoài</th>
<th>
<div class="flex items-center">
<input type="checkbox" class="w-[15px] h-[15px]">
<span class="ml-[3px]">Hiển thị</span>
</div>
</th>
<th>Quản lý</th>
<th class="w-[50px]">Ảnh</th>
<th>Chủng loại</th>
<th></th>
</tr>
</tbody>
<tbody>
<tr>
<td>
<a href="">
<i class="icons icon-edit"></i>
<td class="align-text-top text-center">
<a href="" class="m-0-auto">
<i class="icons icon-edit mx-auto"></i>
</a>
</td>
<td>
<input type="text" value="mh241"
class="w-[80px] h-[32px] py-[5px] px-[10px] border-[1px] border-[#D8D8D8] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
<div class="flex items-center mr-[-10px] mb-[10px]">
<div class="w-[calc(100%_/_3_-_10px)] mr-[10px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Tên</label>
<input type="text" name="info[new-1][label]" value=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</div>
<div class="w-[calc(100%_/_3_-_10px)] mr-[10px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Mã
kho</label>
<input type="text" name="info[new-1][sku]" value=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</div>
<div class="w-[calc(100%_/_3_-_10px)] mr-[10px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Giá
bán</label>
<input type="text" name="info[new-1][sale_price]" value=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
</div>
</div>
<div class="flex items-center">
<div class="w-[213px]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Link
ngoài</label>
<input type="text" name="info[new-1][url]" value=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</div>
<div class="flex items-center w-[calc(100%_-213px)]">
<div class="ml-[10px] w-[calc(100%_/4_-10px)]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Số
lượng</label>
<input type="text" name="info[new-1][stock_quantity]" value=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</div>
<div class="ml-[10px] w-[calc(100%_/4_-10px)]">
<label for=""
class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">STT</label>
<input type="text" name="info[new-1][ordering]" value=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</div>
<div class="ml-[10px] w-[calc(100%_/4_-10px)]">
<label for=""
class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Màu</label>
<select name="info[new-1][color]" id=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
<option value="">
Màu sắc</option>
</select>
</div>
<div class="ml-[15px] w-[calc(100%_/4_-15px)]">
<label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Kích
thước</label>
<select name="info[new-1][size]" id=""
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[6px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
<option value="">
kích thước</option>
</select>
</div>
</div>
</div>
</td>
<td>
<input type="text" value="mh241"
class="w-[112px] h-[32px] py-[5px] px-[10px] border-[1px] border-[#D8D8D8] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</td>
<td>
<input type="text" value="mh241"
class="w-[68px] h-[32px] py-[5px] px-[10px] border-[1px] border-[#D8D8D8] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</td>
<td>
<input type="text" value="mh241"
class="w-[42px] h-[32px] py-[5px] px-[10px] border-[1px] border-[#D8D8D8] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</td>
<td>
<input type="text" value="mh241"
class="w-[142px] h-[32px] py-[5px] px-[10px] border-[1px] border-[#D8D8D8] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</td>
<td>
<input type="checkbox" class="w-[15px] h-[15px]">
</td>
<td>
<span>STT</span>
<input type="text" value="0"
class="w-[46px] h-[32px] py-[5px] px-[10px] border-[1px] border-[#D8D8D8] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
</td>
<td>
<td class="align-text-top">
<div class="flex items-center">
<a href=""
class="w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] bg-white">
<i class="fa-regular fa-eye text-[#0041E8]"></i>
</a>
<a href=""
class="w-[32px] h-[32px] leading-[32px] text-center bg-[#ECECEC] flex items-center justify-center rounded-[4px]">
<i class="icons icon-remove"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
<a href="" class="my-[10px] flex items-center justify-center">
<span
class="w-[15px] h-[15px] rounded-[50%] border-[1px] border-[#0041E8] block leading-[12px] text-center text-[#0041E8]">+</span>
<span class="ml-[5px] text-[#0041E8] font-[500]">Thêm chủng loại</span>
</a>
</div>
<div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
<input class=" w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer py-[0]" name="commit"
type="submit" value="Cập nhật">
</div>
</div>

2
template/product/home.html
View File

@@ -14,7 +14,7 @@
</a>
</div>
<div class="btn-right flex items-center">
<a href="/?module=product&view=form"
<a href="/admin/product/form"
class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[15px] font-[500]">
<span
class="border-[1px] border-[#0041E8] h-[15px] w-[15px] leading-[12px] text-center rounded-[50%] mr-1">+</span>

10
template/theme.html
View File

@@ -15,18 +15,20 @@
<link rel="stylesheet" media="screen" href="{{ 'full.min.css' | asset_url }}?v12.11" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" media="screen" href="{{ 'fancybox.css' | asset_url }}" />
<link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v12.111" />
<link rel="stylesheet" media="screen" href="{{ 'select2.css' | asset_url }}?v2.1" />
<link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v2024.1" />
<script src="{{ 'tailwindcss.js' | asset_url }}"></script>
<script src="{{ 'fancybox.js' | asset_url }}"></script>
<script src="{{ 'jquery.js' | asset_url }}"></script>
<script src="{{ 'select2.js' | asset_url }}"></script>
</head>
<body>
<div class="admin-global-container">
<!-- Menu full -->
@@ -282,7 +284,6 @@
</div>
</div>
</div>
<!-- Content -->
{{ page_content }}
</div>
@@ -290,6 +291,9 @@
{% include javascript/index %}
<script src="{{ 'main.js' | asset_url }}"></script>
</body>
</html>