mohitj
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

refactor: add product custmizations modal on cart page

pagebuilder
abhisheks 2023-12-14 16:15:24 +05:30
parent d970b53502
commit eb7f48ff0c
3 changed files with 136 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
assets/css/theme.css
View File

@ -909,6 +909,10 @@ select {
margin-left: 1.5rem;
}
.ml-auto {
margin-left: auto;
}
.mr-4 {
margin-right: 1rem;
}
@ -949,10 +953,6 @@ select {
margin-top: 2rem;
}
.ml-auto {
margin-left: auto;
}
.block {
display: block;
}
@ -1227,10 +1227,6 @@ select {
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.justify-self-end {
justify-self: end;
}
.overflow-y-auto {
overflow-y: auto;
}
@ -1356,9 +1352,8 @@ select {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
.stroke-black {
stroke: #000;
}
.stroke-gray-500 {
@ -1373,26 +1368,10 @@ select {
stroke: inherit;
}
.stroke-gray-700 {
stroke: #374151;
}
.stroke-gray-400 {
stroke: #9ca3af;
}
.stroke-black {
stroke: #000;
}
.stroke-\[3px\] {
stroke-width: 3px;
}
.stroke-2 {
stroke-width: 2;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
@ -1407,6 +1386,10 @@ select {
padding: 0.5rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-4 {
padding: 1rem;
}
@ -1415,12 +1398,8 @@ select {
padding: 2rem;
}
.p-3 {
padding: 0.75rem;
}
.p-2\.5 {
padding: 0.625rem;
.p-1 {
padding: 0.25rem;
}
.px-2 {
@ -1512,6 +1491,14 @@ select {
padding-top: 1.5rem;
}
.pl-4 {
padding-left: 1rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.text-left {
text-align: left;
}
@ -1590,6 +1577,11 @@ select {
line-height: 1;
}
.text-blue-900 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
}
.text-blue-950 {
--tw-text-opacity: 1;
color: rgb(23 37 84 / var(--tw-text-opacity));
@ -1640,14 +1632,8 @@ select {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
.underline {
text-decoration-line: underline;
}
.line-through {
@ -1728,6 +1714,84 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.even\:bg-gray-100:nth-child(even) {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.even\:bg-gray-200\/70:nth-child(even) {
background-color: rgb(229 231 235 / 0.7);
}
.even\:bg-blue-200\/70:nth-child(even) {
background-color: rgb(191 219 254 / 0.7);
}
.even\:bg-blue-100:nth-child(even) {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.even\:bg-blue-100\/20:nth-child(even) {
background-color: rgb(219 234 254 / 0.2);
}
.even\:bg-blue-100\/50:nth-child(even) {
background-color: rgb(219 234 254 / 0.5);
}
.even\:bg-blue-950\/20:nth-child(even) {
background-color: rgb(23 37 84 / 0.2);
}
.even\:bg-gray-200\/50:nth-child(even) {
background-color: rgb(229 231 235 / 0.5);
}
.even\:bg-gray-200\/80:nth-child(even) {
background-color: rgb(229 231 235 / 0.8);
}
.even\:bg-gray-200\/60:nth-child(even) {
background-color: rgb(229 231 235 / 0.6);
}
.even\:bg-blue-900\/60:nth-child(even) {
background-color: rgb(30 58 138 / 0.6);
}
.even\:bg-blue-900\/10:nth-child(even) {
background-color: rgb(30 58 138 / 0.1);
}
.even\:bg-blue-800\/10:nth-child(even) {
background-color: rgb(30 64 175 / 0.1);
}
.even\:bg-blue-600\/10:nth-child(even) {
background-color: rgb(37 99 235 / 0.1);
}
.even\:bg-blue-500\/10:nth-child(even) {
background-color: rgb(59 130 246 / 0.1);
}
.even\:bg-blue-400\/10:nth-child(even) {
background-color: rgb(96 165 250 / 0.1);
}
.even\:bg-blue-600\/5:nth-child(even) {
background-color: rgb(37 99 235 / 0.05);
}
.even\:bg-blue-700\/5:nth-child(even) {
background-color: rgb(29 78 216 / 0.05);
}
.even\:bg-blue-700\/10:nth-child(even) {
background-color: rgb(29 78 216 / 0.1);
}
.hover\:border-blue-900:hover {
--tw-border-opacity: 1;
border-color: rgb(30 58 138 / var(--tw-border-opacity));
@ -1814,11 +1878,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
color: rgb(30 58 138 / var(--tw-text-opacity));
}
.group.-current .group-\[\.-current\]\:block {
.group.-complete .group-\[\.-complete\]\:block {
display: block;
}
.group.-complete .group-\[\.-complete\]\:block {
.group.-current .group-\[\.-current\]\:block {
display: block;
}
@ -2106,27 +2170,3 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
line-height: 1;
}
}
.\[\&\>\.content\\\]\:block>.content\undefined {
display: block;
}
.\[\&\>\.content\\\]\:hidden>.content\undefined {
display: none;
}
.\[\&\>\.content\]\:block>.content {
display: block;
}
.\[\&\>\.content\]\:hidden>.content {
display: none;
}
.\[\&\>div\\\]\:block>div\undefined {
display: block;
}
.\[\&\>p\\\]\:block>p\undefined {
display: block;
}

1
templates/_partials/stylesheets.tpl
View File

@ -27,6 +27,7 @@
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.36.0/tabler-icons.min.css">
<link rel="stylesheet" href="/themes/elegance/assets/js/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />
{foreach $stylesheets.external as $stylesheet}
<link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="{$stylesheet.media}">
{/foreach}

29
templates/checkout/_partials/cart-detailed-product-line.tpl
View File

@ -28,8 +28,35 @@
<img class="object-cover w-full h-full" src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}">
</div>
<div class="flex flex-1 flex-col gap-2">
<div class="product-line-info">
<div class="product-line-info flex flex-col">
<a class="label text-lg font-semibold" href="{$product.url}" data-id_customization="{$product.id_customization|intval}">{$product.name}</a>
{if is_array($product.customizations) && $product.customizations|count}
{block name='cart_detailed_product_line_customization'}
{foreach from=$product.customizations item="customization"}
<a href="#product-customizations-modal-{$customization.id_customization}" class="text-blue-900 font-medium" rel="modal:open" >{l s='Show customizations' d='Shop.Theme.Catalog'}</a>
<div class="modal bg-white p-4" id="product-customizations-modal-{$customization.id_customization}" >
<div class="w-full flex items-center justify-between mb-4">
<h4 class="modal-title text-xl font-bold">{l s='Customizations' d='Shop.Theme.Catalog'}</h4>
</div>
<div class="modal-body flex flex-col gap-2">
{foreach from=$customization.fields item="field"}
<div class="product-customization-line row">
<div class="col-sm-12 col-xs-8 value">
{if $field.type == 'text'}
{if (int)$field.id_module}
{$field.text nofilter}
{else}
{$field.text}
{/if}
{/if}
</div>
</div>
{/foreach}
</div>
</div>
{/foreach}
{/block}
{/if}
</div>
<div class="flex gap-4 product-line-info product-price h5 {if $product.has_discount}has-discount{/if}">
{if $product.has_discount}