forked from brooksbingham/theme-elegance
refactor: make checkout steps editable
parent
76d5cea40b
commit
bdba795292
|
|
@ -949,6 +949,10 @@ select {
|
|||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1223,6 +1227,10 @@ 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;
|
||||
}
|
||||
|
|
@ -1348,6 +1356,11 @@ 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-gray-500 {
|
||||
stroke: #6b7280;
|
||||
}
|
||||
|
|
@ -1360,6 +1373,18 @@ select {
|
|||
stroke: inherit;
|
||||
}
|
||||
|
||||
.stroke-gray-700 {
|
||||
stroke: #374151;
|
||||
}
|
||||
|
||||
.stroke-gray-400 {
|
||||
stroke: #9ca3af;
|
||||
}
|
||||
|
||||
.stroke-black {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
.stroke-\[3px\] {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
|
@ -1390,6 +1415,14 @@ select {
|
|||
padding: 2rem;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.p-2\.5 {
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
|
|
@ -1607,6 +1640,16 @@ 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));
|
||||
}
|
||||
|
||||
.line-through {
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
|
|
@ -1762,16 +1805,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.disabled\:text-gray-500:disabled {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.disabled\:text-gray-400:disabled {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -1781,6 +1814,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
|
|||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group.-current .group-\[\.-current\]\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.group.-complete .group-\[\.-complete\]\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.group.-complete .group-\[\.-complete\]\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.group.-current .group-\[\.-current\]\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media not all and (min-width: 1024px) {
|
||||
.max-lg\:flex-col {
|
||||
flex-direction: column;
|
||||
|
|
@ -2057,3 +2106,27 @@ 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@
|
|||
{extends file='checkout/_partials/steps/checkout-step.tpl'}
|
||||
|
||||
{block name='step_content'}
|
||||
{if !$step_is_complete}
|
||||
<div class="js-address-form p-4 flex flex-col gap-4">
|
||||
<form
|
||||
method="POST"
|
||||
|
|
@ -141,5 +140,4 @@
|
|||
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
|
|
|||
|
|
@ -30,15 +30,19 @@
|
|||
'-reachable' => $step_is_reachable,
|
||||
'-complete' => $step_is_complete,
|
||||
'js-current-step' => $step_is_current
|
||||
]|classnames}"
|
||||
]|classnames} group"
|
||||
>
|
||||
<div class="step-title font-semibold p-2 border border-gray-800 flex gap-2 items-center ">
|
||||
<i class="ti ti-square"></i>
|
||||
<div class="step-title font-semibold p-2.5 border border-gray-800 w-full flex gap-2 items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler stroke-black hidden group-[.-complete]:block icon-tabler-square-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M9 12l2 2l4 -4" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler stroke-black group-[.-complete]:hidden icon-tabler-square" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg>
|
||||
<span class="step-number">{$position}</span>
|
||||
{$title}
|
||||
<span class=" ml-auto text-sm text-gray-400 cursor-pointer group-[.-current]:hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="18" height="18" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="content hidden group-[.-current]:block">
|
||||
{block name='step_content'}DUMMY STEP CONTENT{/block}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
{extends file='checkout/_partials/steps/checkout-step.tpl'}
|
||||
|
||||
{block name='step_content'}
|
||||
{if !$step_is_complete}
|
||||
<div class="w-full flex flex-col gap-4 p-4">
|
||||
|
||||
{hook h='displayPaymentTop'}
|
||||
|
|
@ -161,6 +160,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/block}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
{extends file='checkout/_partials/steps/checkout-step.tpl'}
|
||||
|
||||
{block name='step_content'}
|
||||
{if !$step_is_complete}
|
||||
{if $customer.is_logged && !$customer.is_guest}
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col p-4">
|
||||
<span class="identity">
|
||||
{l s='Connected as [1]%firstname% %lastname%[/1].'
|
||||
d='Shop.Theme.Customeraccount'
|
||||
|
|
@ -27,7 +26,7 @@
|
|||
</span>
|
||||
</div>
|
||||
{else}
|
||||
<div class="flex w-full flex-col tabs">
|
||||
<div class="flex w-full flex-col tabs p-4">
|
||||
<ul class="tabs-list flex w-full">
|
||||
<li class="flex flex-1 p-4 items-center justify-center">
|
||||
<a
|
||||
|
|
@ -67,7 +66,6 @@
|
|||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{**
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@
|
|||
{extends file='checkout/_partials/steps/checkout-step.tpl'}
|
||||
|
||||
{block name='step_content'}
|
||||
{if !$step_is_complete}
|
||||
<div id="hook-display-before-carrier">
|
||||
{$hookDisplayBeforeCarrier nofilter}
|
||||
</div>
|
||||
|
|
@ -74,19 +73,10 @@
|
|||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row carrier-extra-content"{if $delivery_option != $carrier_id} style="display:none;"{/if}>
|
||||
{$carrier.extraContent nofilter}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/block}
|
||||
<div class="flex w-full">
|
||||
<div id="delivery" class="flex w-full flex-col gap-2">
|
||||
<label for="delivery_message" class="text-sm">{l s='If you would like to add a comment about your order, please write it in the field below.' d='Shop.Theme.Checkout'}</label>
|
||||
<textarea rows="2" id="delivery_message" name="delivery_message">{$delivery_message}</textarea>
|
||||
</div>
|
||||
|
||||
{if $recyclablePackAllowed}
|
||||
<span class="custom-checkbox">
|
||||
<input type="checkbox" id="input_recyclable" name="recyclable" value="1" {if $recyclable} checked {/if}>
|
||||
|
|
@ -124,5 +114,4 @@
|
|||
</div>
|
||||
|
||||
<div id="extra_carrier"></div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
{block name='step'}
|
||||
<section class="checkout-step -unreachable" id="{$identifier}">
|
||||
<div class="step-title font-semibold p-2 border border-gray-800 flex gap-2 items-center ">
|
||||
<i class="ti ti-lock-square"></i>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler stroke-black icon-tabler-lock-square" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 11m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" /><path d="M10 11v-2a2 2 0 1 1 4 0v2" /><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /></svg>
|
||||
<span class="step-number">{$position}</span>
|
||||
{$title}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue