Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/v3 colors and tweaks #31

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 0 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,32 +16,6 @@ Before installing this package, make sure you have:
composer require rapidez/confira
```

Confira adds the `ct-primary-100` color, which should be added to your tailwind config alongside the other checkout-theme colors like so:

```diff
colors: {
ct: {
enhanced: {
DEFAULT: '#40C42A',
},
inactive: {
DEFAULT: '#8A8275',
100: '#F6F4EE',
},
disabled: '#EBE8DE',
primary: {
DEFAULT: '#FEAB05',
+ 100: '#FEE8C3'
},
neutral: {
DEFAULT: '#625B50',
},
border: '#EAE7DC',
error: '#DF241D',
},
},
```

## Layout Configuration

For the best experience with this theme, it's recommended to have a clean checkout page layout without header and footer. To achieve this, modify your project's `app.blade.php`:
Expand Down
7 changes: 5 additions & 2 deletions lang/nl.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
{
":count of the requested quantity will be backordered": ":count van de aangevraagde hoeveelheid zal worden nageleverd",
"Apply discount code": "Kortingscode toepassen",
"Create account": "Account aanmaken",
"Disclaimer": "Disclaimer",
"Discount": "Korting",
"Enter code": "Code invoeren",
"Overview": "Overzicht",
"My order": "Mijn bestelling",
"Privacy & security": "Privacy & beveiliging",
"Show all products": "Meer producten tonen",
"Show less products": "Minder producten tonen",
"Step :step / :total": "Stap :step / :total",
"Terms and Conditions": "Algemene voorwaarden",
"The Netherlands": "Nederland",
"Total products": "Totaal aantal producten",
Expand Down
4 changes: 2 additions & 2 deletions resources/views/cart/cart.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</x-rapidez-ct::sections>

<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline href="/" class="max-lg:hidden">
<x-rapidez::button.outline href="/" class="max-lg:hidden">
@lang('Continue shopping')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>
</x-rapidez-ct::toolbar>
6 changes: 3 additions & 3 deletions resources/views/cart/coupon.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
:error-callback="checkResponseForExpiredCart"
v-slot="{ mutate }"
>
<form v-on:submit.prevent="mutate" class="text-ct-inactive mt-1 flex items-center gap-x-2">
<form v-on:submit.prevent="mutate" class="text-muted mt-1 flex items-center gap-x-2">
<button type="submit">
<x-heroicon-s-x-mark class="size-4 text-black-400"/>
</button>
Expand All @@ -19,8 +19,8 @@
</graphql-mutation>
</template>
</div>
<x-rapidez-ct::button.outline class="w-full" v-show="!isOpen" @click="toggle">
<x-rapidez::button.outline class="w-full" v-show="!isOpen" @click="toggle">
@lang('Coupon code')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>
</div>
</toggler>
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<graphql-mutation
:query="'mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id }) { ...cart } } ' + config.fragments.cart"
:query="'mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id }) { cart { ...cart } } } ' + config.fragments.cart"
:variables="{ cart_id: mask, cart_item_id: item.id }"
:notify="{ message: item.product.name+' '+config.translations.cart.remove }"
:callback="updateCart"
:error-callback="checkResponseForExpiredCart"
v-slot="{ mutate }"
>
<button v-on:click="mutate" class="text-ct-inactive mt-1 text-xs hover:underline" :dusk="'item-delete-' + index" title="{{ __('Remove') }}">
<x-heroicon-o-trash class="text-inactive w-5"/>
<button v-on:click="mutate" class="mt-1 text-xs" :dusk="'item-delete-' + index" title="{{ __('Remove') }}">
<x-heroicon-o-trash class="text-muted w-5"/>
</button>
</graphql-mutation>
8 changes: 4 additions & 4 deletions resources/views/cart/partials/sidebar/summary.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

<x-rapidez-ct::summary />

<x-rapidez-ct::button.enhanced :href="route('checkout')" class="flex w-full items-center justify-center gap-1 !mt-0" dusk="checkout">
<x-rapidez::button.conversion :href="route('checkout')" class="flex w-full items-center justify-center gap-1 !mt-0" dusk="checkout">
@lang('To checkout')
</x-rapidez-ct::button.enhanced>
</x-rapidez::button.conversion>

@include('rapidez-ct::cart.coupon')

<x-rapidez-ct::button.outline href="/" class="lg:hidden w-full">
<x-rapidez::button.outline href="/" class="lg:hidden w-full">
@lang('Continue shopping')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>

@include('rapidez-ct::cart.partials.sidebar.payment')
@include('rapidez-ct::cart.partials.sidebar.usps')
4 changes: 2 additions & 2 deletions resources/views/cart/partials/sidebar/usps.blade.php
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<ul class="mt-4 flex flex-col gap-1 text-sm [&>li]:flex [&>li]:gap-x-2">
<ul class="mt-4 flex flex-col gap-1 text-sm *:flex *:gap-x-2">
@foreach (['Ordered before 7:00 PM, delivered tomorrow', 'Free shipping from €65', 'Free and easy returns', 'Rated 8.7/10'] as $usp)
<li>
<x-heroicon-o-check stroke-width="3.2" class="mt-0.5 h-4 shrink-0 text-ct-primary" />
<x-heroicon-o-check stroke-width="3.2" class="mt-0.5 h-4 shrink-0 text-primary" />
<span>@lang($usp)</span>
</li>
@endforeach
Expand Down
12 changes: 6 additions & 6 deletions resources/views/checkout/pages/credentials.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

@section('content')
<div class="overflow-clip">
<div class="container">
<div class="lg:container xl:max-w-screen-xl">
<x-rapidez-ct::layout.checkout>
<x-slot:header>
@include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
Expand All @@ -26,14 +26,14 @@ class="contents"
}"
>
@include('rapidez-ct::checkout.steps.credentials')
<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline :href="route('cart')">
<x-rapidez-ct::toolbar class="*:flex-1 max-sm:flex-col-reverse">
<x-rapidez::button.outline :href="route('cart')">
@lang('Back to cart')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>

<x-rapidez-ct::button.enhanced loader>
<x-rapidez::button.conversion loader>
@lang('Next')
</x-rapidez-ct::button.enhanced>
</x-rapidez::button.conversion>
</x-rapidez-ct::toolbar>
</form>
<x-slot:sidebar>
Expand Down
12 changes: 6 additions & 6 deletions resources/views/checkout/pages/login.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

@section('content')
<div class="overflow-clip">
<div class="container">
<div class="lg:container xl:max-w-screen-xl">
<x-rapidez-ct::layout.checkout>
<x-slot:header>
@include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
Expand All @@ -28,14 +28,14 @@ class="max-w-md mx-auto"
v-cloak
>
@include('rapidez-ct::checkout.steps.login')
<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline :href="route('cart')">
<x-rapidez-ct::toolbar class="*:flex-1 max-sm:flex-col-reverse">
<x-rapidez::button.outline :href="route('cart')">
@lang('Back to cart')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>

<x-rapidez-ct::button.enhanced loader type="submit" dusk="continue" >
<x-rapidez::button.conversion loader type="submit" dusk="continue" >
@lang('Next')
</x-rapidez-ct::button.enhanced>
</x-rapidez::button.conversion>
</x-rapidez-ct::toolbar>
</form>
</x-rapidez-ct::layout.checkout>
Expand Down
16 changes: 7 additions & 9 deletions resources/views/checkout/pages/payment.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

@section('content')
<div class="overflow-clip">
<div class="container">
<div class="lg:container xl:max-w-screen-xl">
<x-rapidez-ct::layout.checkout>
<x-slot:header>
@include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
Expand All @@ -27,10 +27,10 @@ class="contents"
}"
>
@include('rapidez::checkout.steps.payment_method')
<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline :href="route('checkout', ['step' => 'credentials'])">
<x-rapidez-ct::toolbar class="*:flex-1 max-sm:flex-col-reverse">
<x-rapidez::button.outline :href="route('checkout', ['step' => 'credentials'])">
@lang('Back to credentials')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>
<graphql-mutation
:query="config.queries.placeOrder"
:variables="{ cart_id: mask }"
Expand All @@ -40,11 +40,9 @@ class="contents"
redirect="{{ route('checkout.success') }}"
v-slot="{ mutate, variables }"
>
<fieldset>
<x-rapidez-ct::button.enhanced class="relative" type="submit" dusk="continue" loader>
@lang('Place order')
</x-rapidez-ct::button.enhanced>
</fieldset>
<x-rapidez::button.conversion class="relative" type="submit" dusk="continue" loader>
@lang('Place order')
</x-rapidez::button.conversion>
</graphql-mutation>
</x-rapidez-ct::toolbar>
</form>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@
@include('rapidez-ct::checkout.partials.address-card')
</x-rapidez-ct::card.inactive>
</x-rapidez-ct::sections>
<label class="absolute cursor-pointer inset-0 bg-ct-neutral/60" for="popup"></label>
<label class="absolute cursor-pointer inset-0 bg-black/60" for="popup"></label>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a backdrop? In that case we do have a backdrop color for that.

</div>
8 changes: 4 additions & 4 deletions resources/views/checkout/partials/buttons/address.blade.php
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="flex flex-wrap items-center gap-3 mt-5">
<x-rapidez-ct::button.inactive v-on:click.prevent="toggleEdit">
<x-rapidez::button v-on:click.prevent="toggleEdit">
@lang('Use a new address')
</x-rapidez-ct::button.inactive>
<x-rapidez-ct::button.inactive tag="label" for="popup" class="cursor-pointer" v-if="$root.user.addresses.length">
</x-rapidez::button>
<x-rapidez::button tag="label" for="popup" class="cursor-pointer" v-if="data?.customer?.addresses?.length">
@lang('My addresses')
</x-rapidez-ct::button.inactive>
</x-rapidez::button>
</div>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-inactive font-medium bg-ct-inactive-100 rounded-xl max-md:hidden">
<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-muted font-medium bg rounded-md max-md:hidden">
<span>+</span>
<span>@lang('Add new address')</span>
</button>
14 changes: 7 additions & 7 deletions resources/views/checkout/partials/header.blade.php
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
<div class="lg:hidden">
@include('rapidez-ct::components.slide-in.receipt')
</div>
<div class="flex flex-wrap gap-y-3 max-xl:-mt-5 xl:mr-20">
<div class="flex flex-wrap gap-y-3 xl:mr-20 max-xl:justify-center">
@isset($href)
<x-rapidez-ct::button.outline class="flex items-center justify-center !p-0 size-12 lg:hidden" :$href>
<x-rapidez::button.outline class="flex items-center justify-center !p-0 size-12 lg:hidden" :$href>
<x-heroicon-o-arrow-long-left class="size-6"/>
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>
@endif

<div class="flex lg:w-24 *:w-auto *:h-auto max-lg:flex-1 max-lg:h-12">
<div class="flex lg:w-16 xl:w-24 *:w-auto *:h-auto max-lg:flex-1 max-lg:h-12">
<a href="{{ url('/') }}" class="sticky top-0 max-lg:mx-5 flex items-center lg:self-start max-lg:flex-1 lg:pt-4 max-w-full">
<div class="w-inherit flex-1 *:w-auto *:h-auto *:max-w-full max-w-full h-full *:max-h-full">
<x-rapidez-ct::logo />
</div>
</a>
</div>
<x-rapidez-ct::button.inactive for="slide-in" class="lg:hidden">
<x-rapidez::button for="slide-in" class="gap-x-2.5 lg:hidden cursor-pointer">
<span class="relative">
<span class="absolute flex items-center font-semibold justify-center size-4 -right-2 -top-1.5 rounded-full bg-ct-primary text-white text-xs">
<span class="absolute flex items-center font-bold justify-center size-4 -right-2 -top-1.5 rounded-full bg-primary text-white text-xs">
@{{ Math.round(cart.total_quantity) }}
</span>
<x-heroicon-o-shopping-cart class="size-6"/>
</span>
@lang('My order')
</x-rapidez-ct::button.inactive>
</x-rapidez::button>
</div>
Loading