forked from brooksbingham/theme-elegance
refactor: add product custmizations modal on cart page
This commit is contained in:
parent
d970b53502
commit
eb7f48ff0c
@ -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;
|
||||
}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user