Skip to content

Commit

Permalink
Merge pull request #29 from FosterCommerce/feature/rounded-corners-br…
Browse files Browse the repository at this point in the history 
…anding

Feature/rounded corners branding
  • Loading branch information
@pseudoclass
pseudoclass authored Sep 15, 2024
2 parents 5028e4e + 7b53928 commit 2eedc15
Show file tree
Hide file tree
Showing 8 changed files with 39 additions and 7 deletions.
7 changes: 7 additions & 0 deletions src/config.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@

// Whether or not to show the "No Image" placeholder images
'enablePlaceholderImages' => false,

// Whether or not to enable CSS page transitions
//(see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility for browser compatibility)
'enablePageTransitions' => false,
],
// Branding Settings
'branding' => [
Expand All @@ -50,6 +54,9 @@
// (ex. '/assets/images/logo.svg')
'logo' => '',

// The general component styles. Either 'rounded' (default) or 'flat'
'style' => 'rounded',

// The first part of the text in the title meta tag.
// Leave blank to use the Craft's siteName
'title' => '',
Expand Down
2 changes: 2 additions & 0 deletions src/models/Settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ class Settings extends Model
'enableEstimatedShipping' => false,
'enableFreeShippingMessage' => false,
'enablePlaceholderImages' => false,
'enablePageTransitions' => false,
];

public array $branding = [
'color' => '#1F2937',
'font' => 'Rubik',
'style' => 'rounded',
'logo' => '',
'title' => '',
];
Expand Down
19 changes: 19 additions & 0 deletions src/templates/_layouts/default.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,17 @@
800: '#1F2937'
}
},
{% if craft.checkout.branding.style|default('rounded') == 'flat' %}
borderRadius: {
'xs' : 0,
'sm' : 0,
DEFAULT: '0',
'md': 0,
'lg': 0,
'xl': 0,
'2xl': 0
}
{% endif %}
}
}
}
Expand All @@ -46,6 +57,14 @@
[v-cloak] {
opacity: 0;
}
{% if craft.checkout.options.enablePageTransitions|default %}
@view-transition {
navigation: auto;
}
::view-transition-group(root) {
animation-duration: 0.5s;
}
{% endif %}
</style>
<style type="text/tailwindcss">
@layer utilities {
Expand Down
2 changes: 1 addition & 1 deletion src/templates/cart/index.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
</main>

<aside>
<div class="lg:p-6 lg:bg-white lg:rounded-xl lg:shadow-[0_4px_12px_0_rgba(0,0,0,0.16)]">
<div class="lg:p-6 lg:bg-white lg:rounded-xl {{ craft.checkout.branding.style|default('rounded') == 'flat' ? 'lg:border lg:border-gray-300' : 'lg:shadow-[0_4px_12px_0_rgba(0,0,0,0.16)]' }}">
{% include 'foster-checkout/_components/app/summary-cart' with {
postalCode: '90210',
couponCode: '121212'
Expand Down
2 changes: 1 addition & 1 deletion src/templates/checkout/address.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@
<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)]">
class="grid grid-cols-1 gap-10 lg:p-6 lg:bg-white lg:rounded-xl {{ craft.checkout.branding.style|default('rounded') == 'flat' ? 'lg:border lg:border-gray-300' : 'lg:shadow-[0_4px_12px_0_rgba(0,0,0,0.16)]' }}">

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

Expand Down
2 changes: 1 addition & 1 deletion src/templates/checkout/order.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@

<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)]">
class="grid grid-cols-1 gap-10 lg:p-6 lg:bg-white lg:rounded-xl {{ craft.checkout.branding.style|default('rounded') == 'flat' ? 'lg:border lg:border-gray-300' : 'lg:shadow-[0_4px_12px_0_rgba(0,0,0,0.16)]' }}">

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

Expand Down
10 changes: 7 additions & 3 deletions src/templates/checkout/payment.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,10 +223,14 @@
order: cart,
paymentFormType: 'elements',
appearance: {
theme: 'stripe',
theme: craft.checkout.branding.style|default('rounded') == 'flat' ? 'flat' : 'stripe',
labels: 'floating',
variables: {
colorPrimary: 'var(--brandColor)'
colorPrimary: craft.checkout.branding.color ?? '#1F2937',
borderRadius: craft.checkout.branding.style|default('rounded') == 'flat' ? '0px' : '6px',
gridColumnSpacing: '24px',
gridRowSpacing: '24px',
tabSpacing: '12px',
}
},
submitButtonText: buttonText,
Expand Down Expand Up @@ -270,7 +274,7 @@
<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)]">
class="grid grid-cols-1 gap-10 lg:p-6 lg:bg-white lg:rounded-xl {{ craft.checkout.branding.style|default('rounded') == 'flat' ? 'lg:border lg:border-gray-300' : 'lg:shadow-[0_4px_12px_0_rgba(0,0,0,0.16)]' }}">

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

Expand Down
2 changes: 1 addition & 1 deletion src/templates/checkout/shipping.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@
<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)]">
class="grid grid-cols-1 gap-10 lg:p-6 lg:bg-white lg:rounded-xl {{ craft.checkout.branding.style|default('rounded') == 'flat' ? 'lg:border lg:border-gray-300' : 'lg:shadow-[0_4px_12px_0_rgba(0,0,0,0.16)]' }}">

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

Expand Down

0 comments on commit 2eedc15

Please sign in to comment.