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.

Sign up for GitHub

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 13 commits into
base: master
Choose a base branch
from
Open

Feature/v3 colors and tweaks #31

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
45c841f
Implemented primer and various tweaks
jordythevulder Dec 17, 2024
77391bd
V3 colors implementation and various tweaks
jordythevulder Dec 17, 2024
84064af
Fix item removal
Jade-GG Jan 3, 2025
29ae511
Carry attributes over to select input
Jade-GG Jan 6, 2025
bb96447
Only show slide-in when cart exists to avoid errors
Jade-GG Jan 6, 2025
0498648
Remove pickup address
Jade-GG Jan 6, 2025
c1a63cd
Show configured variant image in the cart (#33)
Jade-GG Jan 7, 2025
ccfd41f
Resolved feedback
jordythevulder Jan 9, 2025
71be9bd
Merge branch 'feature/v3-colors-and-tweaks' of github.com:rapidez/con…
jordythevulder Jan 9, 2025
245635f
Restructured inputs
jordythevulder Jan 10, 2025
a46a173
removed commented code
jordythevulder Jan 10, 2025
59c5191
resolved merge conflict
jordythevulder Jan 13, 2025
0b02065
Tweaked classes
jordythevulder Jan 29, 2025
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
View file
Open in desktop
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
3 changes: 2 additions & 1 deletion lang/nl.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@
"The Netherlands": "Nederland",
"Total products": "Totaal aantal producten",
"We will send a confirmation of your order :orderid to <strong>:email</strong>": "We sturen een bevestiging van uw bestelling :orderid naar <strong>:email</strong>",
"You ordered this": "U heeft dit besteld"
"You ordered this": "U heeft dit besteld",
"We'll email your order confirmation and check if you have an account for faster checkout.": "Op dit e-mailadres ontvang je de orderbevestiging. Ook checken we of je al een account hebt."
}
4 changes: 2 additions & 2 deletions resources/views/cart/cart.blade.php
View file
Open in desktop
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
View file
Open in desktop
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>
6 changes: 3 additions & 3 deletions resources/views/cart/partials/product/remove-button.blade.php
View file
Open in desktop
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="text-muted mt-1 text-xs hover:underline" :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
View file
Open in desktop
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')
2 changes: 1 addition & 1 deletion resources/views/cart/partials/sidebar/usps.blade.php
View file
Open in desktop
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">
@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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/address-cards-popup.blade.php
View file
Open in desktop
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>
</div>
8 changes: 4 additions & 4 deletions resources/views/checkout/partials/buttons/address.blade.php
View file
Open in desktop
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>
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/buttons/new-address.blade.php
View file
Open in desktop
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
View file
Open in desktop
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>
26 changes: 14 additions & 12 deletions resources/views/checkout/partials/sections/login/logged-out.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<checkout-login v-slot="checkoutLogin">
<fieldset partial-submit="go" class="contents">
<fieldset partial-submit="go" class="grid gap-4 sm:gap-5 md:items-end md:grid-cols-2">
<x-rapidez-ct::input
label="Email"
name="email"
Expand All @@ -11,19 +11,19 @@ class="justify-center"
:placeholder="__('Enter your e-mail address')"
/>

<p v-if="checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
@lang('We will send your order confirmation to this e-mail address. We will also check if you already have an account so you can checkout more efficiently.')
<p v-if="checkoutLogin.isEmailAvailable" class="self-end text-muted md:min-h-14 flex items-center">
@lang('We\'ll email your order confirmation and check if you have an account for faster checkout.')
Roene-JustBetter marked this conversation as resolved.
Show resolved Hide resolved
</p>

<template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
<x-rapidez-ct::input.password
label="Password"
placeholder="password"
name="password"
v-model="checkoutLogin.password"
required
/>
</template>
<p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
<p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-muted">
@lang('You already have an account with this e-mail address. Please log in to continue.')
<a href="{{ route('account.forgotpassword') }}" class="underline hover:no-underline">@lang('Forgot your password?')</a>
</p>
Expand All @@ -34,19 +34,21 @@ class="justify-center"
@endif
<template v-if="!loggedIn && checkoutLogin.createAccount">
<x-rapidez-ct::input.password
label="Repeat password"
placeholder="password repeat"
name="password_repeat"
v-model="checkoutLogin.password_repeat"
required
/>
<x-rapidez-ct::input
placeholder="Firstname"
label="Firstname"
name="firstname"
type="text"
v-model="checkoutLogin.firstname"
required
/>
<x-rapidez-ct::input
placeholder="lastname"
label="Lastname"
name="lastname"
type="text"
Expand All @@ -57,17 +59,17 @@ class="justify-center"

<template v-if="!loggedIn && checkoutLogin.isEmailAvailable">
<div class="col-span-full">
<x-rapidez-ct::input.checkbox v-model="checkoutLogin.createAccount" dusk="create_account">
<x-rapidez::input.checkbox v-model="checkoutLogin.createAccount" dusk="create_account">
@lang('Create an account')
</x-rapidez-ct::input.checkbox>
</x-rapidez::input.checkbox>
</div>
</template>

<x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="checkoutLogin.isEmailAvailable && checkoutLogin.createAccount" dusk="register">
<x-rapidez::button.primary type="button" v-on:click="checkoutLogin.go" v-if="checkoutLogin.isEmailAvailable && checkoutLogin.createAccount" dusk="register">
@lang('Register')
</x-rapidez-ct::button.accent>
<x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="!checkoutLogin.isEmailAvailable" dusk="register">
</x-rapidez::button.primary>
<x-rapidez::button.primary type="button" v-on:click="checkoutLogin.go" v-if="!checkoutLogin.isEmailAvailable" dusk="register">
@lang('Login')
</x-rapidez-ct::button.accent>
</x-rapidez::button.primary>
</fieldset>
</checkout-login>
10 changes: 0 additions & 10 deletions resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions resources/views/checkout/partials/sections/success/create-account-button.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<x-rapidez-ct::button.primary class="self-end justify-self-start" loader>
<x-rapidez::button.primary class="self-end justify-self-start" loader>
@lang('Create account')
</x-rapidez-ct::button.primary>
</x-rapidez::button.primary>
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/sections/success/create-account-title.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<p class="text-base text-ct-inactive font-medium">
<p class="text-base text-muted font-medium">
@lang('Register account')
</p>
4 changes: 2 additions & 2 deletions resources/views/checkout/partials/sections/success/logged-in.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<x-rapidez-ct::title.lg>
@lang('Already logged in')
</x-rapidez-ct::title.lg>
<x-rapidez-ct::button.primary class="mt-5" href="{{ route('account.overview') }}">
<x-rapidez::button.primary class="mt-5" href="{{ route('account.overview') }}">
@lang('Go to your account')
</x-rapidez-ct::button.primary>
</x-rapidez::button.primary>
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/sections/success/order-completed-note.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<p class="text-base text-ct-neutral font-medium">
<p class="text-base font-medium">
@lang('We will get to work for you right away')
</p>
<p class="mt-2 text-sm">
Expand Down
Loading