Skip to content

Commit

Permalink
payment screen layout fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@peteeveleigh
peteeveleigh committed Aug 21, 2024
1 parent 6ccbaa7 commit de0df7a
Showing 1 changed file with 121 additions and 121 deletions.
242 changes: 121 additions & 121 deletions src/templates/checkout/payment.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@

<div class="grid grid-cols-1 gap-6 xl:gap-8 xl:p-6">
<div>

<h3 class="px-4 mb-4 font-semibold xl:px-0">
{{ 'Billing address'|t('foster-checkout') }}
</h3>
Expand All @@ -51,60 +50,60 @@

{# Address book #}
{# {% if currentUser and addresses|length %}
<div class="p-4 border-t" :class="{ 'bg-gray-100': parseInt(addressBookBillingAddress) === 1 }">
<div class="radio">
<input
v-model="addressBookBillingAddress"
id="addressBookBillingAddress"
name="billingAddress"
type="radio"
class="sr-only"
value="1"
@change="newBillingAddress=0;billingSameAsShipping=0;"
/>
<label
for="addressBookBillingAddress"
class="flex justify-start items-center gap-4 cursor-pointer"
>
<span class="block">
<span class="block" :class="{ 'font-medium text-black': parseInt(addressBookBillingAddress) === 1 }">{{ 'Use an address from your address book'|t('foster-checkout') }}</span>
</span>
</label>
</div>
<div v-cloak v-if="parseInt(addressBookBillingAddress) === 1" class="p-4">
<div class=" xl:rounded-lg xl:overflow-hidden">
{% for address in addresses %}
{% set newAddress = cart.sourceBillingAddressId == address.id %}
<div class="p-4 border-t bg-white" :class="{ 'bg-gray-100': parseInt(billingAddressId) === {{ address.id }} }"
{{ cart.sourceBillingAddressId == address.id ? ' selected' : ''}}>
<div class="flex justify-between items-center gap-4 radio">
<input
v-model="billingAddressId"
id="address_{{ address.id }}"
name="billingAddressId"
type="radio"
class="sr-only"
value="{{ address.id }}"
/>
<label
for="address_{{ address.id }}"
class="inline-flex justify-start items-center gap-4 cursor-pointer"
:class="{ 'font-medium text-black': parseInt(billingAddressId) === 1 }"
>
{% include'foster-checkout/_components/app/formatted-address' with { 'address': address} %}
</label>
</div>
<div class="p-4 border-t" :class="{ 'bg-gray-100': parseInt(addressBookBillingAddress) === 1 }">
<div class="radio">
<input
v-model="addressBookBillingAddress"
id="addressBookBillingAddress"
name="billingAddress"
type="radio"
class="sr-only"
value="1"
@change="newBillingAddress=0;billingSameAsShipping=0;"
/>
<label
for="addressBookBillingAddress"
class="flex justify-start items-center gap-4 cursor-pointer"
>
<span class="block">
<span class="block" :class="{ 'font-medium text-black': parseInt(addressBookBillingAddress) === 1 }">{{ 'Use an address from your address book'|t('foster-checkout') }}</span>
</span>
</label>
</div>
<div v-cloak v-if="parseInt(addressBookBillingAddress) === 1" class="p-4">
<div class=" xl:rounded-lg xl:overflow-hidden">
{% for address in addresses %}
{% set newAddress = cart.sourceBillingAddressId == address.id %}
<div class="p-4 border-t bg-white" :class="{ 'bg-gray-100': parseInt(billingAddressId) === {{ address.id }} }"
{{ cart.sourceBillingAddressId == address.id ? ' selected' : ''}}>
<div class="flex justify-between items-center gap-4 radio">
<input
v-model="billingAddressId"
id="address_{{ address.id }}"
name="billingAddressId"
type="radio"
class="sr-only"
value="{{ address.id }}"
/>
<label
for="address_{{ address.id }}"
class="inline-flex justify-start items-center gap-4 cursor-pointer"
:class="{ 'font-medium text-black': parseInt(billingAddressId) === 1 }"
>
{% include'foster-checkout/_components/app/formatted-address' with { 'address': address} %}
</label>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %} #}
</div>
{% endif %} #}
{# end address book #}


Expand Down Expand Up @@ -206,98 +205,99 @@
</div>
</div>

{% set note = craft.checkout.note('payment') %}
{% if note %}
<div class="mt-6 p-4 border border-gray-250 rounded-lg xl:p-6">
{{ note|raw }}
</div>
{% endif %}
</div>

</main>
</div>
</div>
{% set note = craft.checkout.note('payment') %}
{% if note %}
<div class="mt-6 p-4 border border-gray-250 rounded-lg xl:p-6">
{{ note|raw }}
</div>
{% endif %}
</main>

<aside>
<aside>

<div class="grid grid-cols-1 gap-10 lg:p-6 lg:bg-white lg:rounded-xl lg:shadow-[0_4px_12px_0_rgba(0,0,0,0.16)]">
<div class="grid grid-cols-1 gap-10 lg:p-6 lg:bg-white lg:rounded-xl lg:shadow-[0_4px_12px_0_rgba(0,0,0,0.16)]">

<div class="grid grid-cols-1 gap-6">
<div class="grid grid-cols-1 gap-6">

<div class="flex justify-between items-center gap-4">
<h2 class="text-xl font-bold text-gray-800 leading-snug">
{{ 'Item(s)'|t('foster-checkout') }}
</h2>
<a href="{{ craft.fostercheckout.getPath('cart') }}" class="inline-block text-[var(--brandColor)] underline">
{{ 'Edit'|t('foster-checkout') }}
</a>
</div>
<div class="flex justify-between items-center gap-4">
<h2 class="text-xl font-bold text-gray-800 leading-snug">
{{ 'Item(s)'|t('foster-checkout') }}
</h2>
<a href="{{ craft.fostercheckout.getPath('cart') }}" class="inline-block text-[var(--brandColor)] underline">
{{ 'Edit'|t('foster-checkout') }}
</a>
</div>

<ul class="grid grid-cols-1 gap-4">
{% for lineItem in cart.lineItems %}
<li>
{% include 'foster-checkout/_components/app/line-item-checkout' with {
<ul class="grid grid-cols-1 gap-4">
{% for lineItem in cart.lineItems %}
<li>
{% include 'foster-checkout/_components/app/line-item-checkout' with {
lineItem: lineItem
} %}
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>

</div>
</div>

{% include 'foster-checkout/_components/app/summary-cart' with {
{% include 'foster-checkout/_components/app/summary-cart' with {
postalCode: '90210',
couponCode: '121212',
step: 'payment'
} %}

{# <button
type="submit"
form="paymentForm"
class="hidden justify-between items-center gap-4 w-full px-4 py-3 font-medium text-white text-center bg-[var(--brandColor)] border border-[var(--brandColor)] rounded-xl lg:flex"
>
<span class="inline-block">{{ 'Place Order'|t('foster-checkout') }}</span>
<span class="inline-block">{{ cart.totalAsCurrency }}</span>
</button> #}

{# <button
type="submit"
form="paymentForm"
class="hidden justify-between items-center gap-4 w-full px-4 py-3 font-medium text-white text-center bg-[var(--brandColor)] border border-[var(--brandColor)] rounded-xl lg:flex"
>
<span class="inline-block">{{ 'Place Order'|t('foster-checkout') }}</span>
<span class="inline-block">{{ cart.totalAsCurrency }}</span>
</button> #}

</div>

</aside>
</div>

</div>
</aside>

</div>

{% endblock %}
</div>

{% block mobileFooter %}
{% endblock %}

{# {% if cart.lineItems|length > 0 %}
<div class="p-4 bg-gray-200 sm:p-6">
<button
type="submit"
class="flex justify-between items-center gap-4 w-full px-4 py-3 font-medium text-white text-center bg-[var(--brandColor)] border border-[var(--brandColor)] rounded-xl"
>
<span class="inline-block">{{ 'Place Order'|t('foster-checkout') }}</span>
<span class="inline-block">$165.15</span>
</button>
</div>
{% endif %} #}

{% js %}
var $paymentForms = document.querySelectorAll('.paymentForm');
if ($paymentForms.length) {
$paymentForms.forEach(($paymentForm) => {
// Only allow the payment form submit to be triggered once.
$paymentForm.addEventListener('submit', function(ev) {
if ($paymentForm.dataset.processing) {
ev.preventDefault();
return false;
}

$paymentForm.dataset.processing = true;
});
});
}
{% endjs %}

{% endblock %}
{% block mobileFooter %}

{# {% if cart.lineItems|length > 0 %}
<div class="p-4 bg-gray-200 sm:p-6">
<button
type="submit"
class="flex justify-between items-center gap-4 w-full px-4 py-3 font-medium text-white text-center bg-[var(--brandColor)] border border-[var(--brandColor)] rounded-xl"
>
<span class="inline-block">{{ 'Place Order'|t('foster-checkout') }}</span>
<span class="inline-block">$165.15</span>
</button>
</div>
{% endif %} #}

{% js %}
var $paymentForms = document.querySelectorAll('.paymentForm');
if ($paymentForms.length) {
$paymentForms.forEach(($paymentForm) => {
// Only allow the payment form submit to be triggered once.
$paymentForm.addEventListener('submit', function(ev) {
if ($paymentForm.dataset.processing) {
ev.preventDefault();
return false;
}

$paymentForm.dataset.processing = true;
});
});
}
{% endjs %}

{% endblock %}

0 comments on commit de0df7a

Please sign in to comment.