Skip to content

Commit

Permalink
Update checkout block and add dropins.js file
Browse files Browse the repository at this point in the history
  • Loading branch information
@OscarMerino
OscarMerino committed Nov 6, 2024
1 parent b0d77c9 commit 6a54a78
Show file tree
Hide file tree
Showing 7 changed files with 1,109 additions and 445 deletions.
305 changes: 202 additions & 103 deletions blocks/commerce-checkout/commerce-checkout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,131 +2,125 @@
/* stylelint-disable selector-class-pattern */

/* https://cssguidelin.es/#bem-like-naming */

.checkout__content {
display: grid;
align-items: start;
grid-template-columns: repeat(var(--grid-4-columns), 1fr);
gap: var(--spacing-big) var(--grid-4-gutters);
}

.checkout__heading-title {
font: var(--type-headline-1-font);
letter-spacing: var(--type-headline-1-letter-spacing);
color: var(--color-neutral-800);
}

.checkout__overlay-spinner {
align-items: center;
background: var(--color-neutral-50);
display: none;
height: 100vh;
justify-content: center;
left: 0;
opacity: 0.5;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
grid-template-columns: 1fr;
gap: var(--spacing-big) 0;
}

.checkout__overlay-spinner--shown {
display: flex;
.checkout__main {
display: grid;
row-gap: var(--spacing-xbig);
margin-top: var(--spacing-medium);
}

.checkout__error-banner {
.checkout__aside {
display: grid;
grid-column: 1 / span 12;
gap: var(--spacing-xbig);
}

.checkout__error-banner:has(> div:empty) {
display: none;
/* Block dividers */
.checkout__block.checkout__heading .dropin-header-container {
gap: var(--spacing-xsmall);
}

.checkout__merged-cart-banner {
display: grid;
grid-column: 1 / span 12;
.checkout__shipping-form {
padding-top: var(--spacing-xbig);
border-top: var(--shape-border-width-3) solid var(--color-neutral-400);
}

.checkout__merged-cart-banner:has(> div:empty) {
display: none;
.checkout__payment-methods {
padding-top: var(--spacing-xbig);
border-top: var(--shape-border-width-3) solid var(--color-neutral-400);
}

.checkout__main {
display: grid;
grid-column: 1 / span 7;
row-gap: var(--spacing-xbig);
/* Hide empty blocks */
.checkout__block:empty {
display: none;
}

.checkout__aside {
display: grid;
grid-column: 9 / span 4;
gap: var(--spacing-xbig);
/* Hide blocks with empty divs */
.checkout__server-error:has(> :empty),
.checkout__out-of-stock:has(> :empty),
.checkout__delivery:has(> :empty),
.checkout__bill-to-shipping:has(> :empty) {
display: none;
}

.checkout-empty-cart {
display: grid;
grid-template-columns: 1fr;
/* Hide main containers when the cart is empty or there is a server error */
.checkout__content--error .checkout__out-of-stock,
.checkout__content--error .checkout__login,
.checkout__content--error .checkout__shipping-form,
.checkout__content--error .checkout__bill-to-shipping,
.checkout__content--error .checkout__delivery,
.checkout__content--error .checkout__payment-methods,
.checkout__content--error .checkout__billing-form,
.checkout__content--empty .checkout__server-error,
.checkout__content--empty .checkout__out-of-stock,
.checkout__content--empty .checkout__login,
.checkout__content--empty .checkout__shipping-form,
.checkout__content--empty .checkout__bill-to-shipping,
.checkout__content--empty .checkout__delivery,
.checkout__content--empty .checkout__payment-methods,
.checkout__content--empty .checkout__billing-form {
display: none !important;
}

/* Out of stock */
.checkout__out-of-stock:has(> div:empty) {
/* Hide aside containers when the cart is empty or there is a server error */
.checkout__content--error .checkout__aside,
.checkout__content--empty .checkout__aside {
display: none;
}

.checkout__billing-form:has(> div > div[style*='display: none;']) {
/* Hide the place order button when the cart is empty or there is a server error */
.checkout__content--error .checkout__place-order,
.checkout__content--empty .checkout__place-order {
display: none;
}

.checkout__place-order {
display: grid;
grid-column: 1 / span 12;
justify-items: center;
}

.checkout__banner {
margin-bottom: var(--spacing-xsmall);
.checkout__loader {
align-items: center;
background: var(--color-neutral-50);
display: flex;
height: 100vh;
justify-content: center;
left: 0;
opacity: 0.5;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}

/* hide all the consecutive dividers because of missing blocks */
.dropin-divider + .dropin-divider {
.checkout__loader:empty {
display: none;
}

.checkout__content .dropin-divider {
margin: 0;
.checkout__error-banner,
.checkout__merged-cart-banner {
grid-column: 1;
}

/* To add into the cart dropin **/
.cart-order-summary__taxes.dropin-accordion .dropin-divider {
margin: var(--spacing-medium) auto;
/* Integrate place order button into Order Summary - mobile */
.checkout__place-order {
grid-column: unset;
justify-items: unset;
margin-top: calc(var(--spacing-big) * -1);
}

@media only screen and (width >= 320px) and (width <= 768px) {
.checkout__content {
grid-template-columns: 1fr;
gap: var(--spacing-big) 0;
}

.checkout__heading,
.checkout__error-banner,
.checkout__merged-cart-banner {
grid-column: 1;
}

/* Integrate place order button into Order Summary - mobile */
.checkout__place-order {
grid-column: unset;
justify-items: unset;
margin-top: calc(var(--spacing-big) * -1);
}
/* remove margin from the heading divider */
.checkout__heading .dropin-divider {
margin: 0;
}

/* CartSummaryList */

.cart-summary-list {
/* Cart Summary */
.checkout__block .cart-cart-summary-list {
padding: var(--spacing-medium);
background-color: var(--color-neutral-200);
}

/* temporary fix to hide the default cart heading */
[data-testid='default-cart-heading'] {
display: none;
}

.cart-summary-list__heading {
Expand Down Expand Up @@ -156,13 +150,8 @@
letter-spacing: var(--type-body-2-strong-letter-spacing);
}

.cart-cart-summary-list__content {
margin-top: var(--spacing-small);
}

/* temporary fix to hide the default cart heading */
[data-testid='default-cart-heading'] {
display: none;
.checkout__block .cart-cart-summary-list .cart-cart-summary-list__footer-divider {
margin: var(--spacing-small) 0;
}

/* Sign-in modal */
Expand All @@ -183,22 +172,132 @@
width: 800px;
}

/* Extra small devices (phones, 600px and down) */
/* Address form */
.checkout__shipping-form .account-address-form-wrapper__title,
.checkout__shipping-form .dropin-header-container__title,
.checkout__billing-form .account-address-form-wrapper__title,
.checkout__billing-form .dropin-header-container__title {
font: var(--type-headline-2-default-font);
letter-spacing: var(--type-headline-2-default-letter-spacing);
color: var(--color-neutral-800);
margin: 0 0 var(--spacing-medium) 0;
}

.checkout__shipping-form .dropin-header-container .dropin-divider,
.checkout__billing-form .dropin-header-container .dropin-divider {
display: none;
}

/* Order confirmation */
.order-confirmation {
display: grid;
align-items: start;
grid-template-columns: repeat(var(--grid-4-columns), 1fr);
grid-template-areas: 'main aside';
grid-column-gap: var(--grid-4-gutters);
margin-bottom: var(--spacing-xbig);
padding-top: var(--spacing-xxlarge);
}

.order-confirmation__main {
display: grid;
grid-row-gap: var(--spacing-xbig);
grid-column: 1 / span 7;
}

.order-confirmation__aside {
display: grid;
grid-row-gap: var(--spacing-xbig);
grid-column: 9 / span 4;
}

.order-confirmation__footer {
display: grid;
gap: var(--spacing-small);
text-align: center;
}

.order-confirmation__footer p {
margin: 0;
}

.order-confirmation__footer .order-confirmation-footer__continue-button {
margin: 0 auto;
text-align: center;
display: inline-block;
}

.order-confirmation-footer__contact-support {
font: var(--type-body-2-default-font);
letter-spacing: var(--type-body-2-default-letter-spacing);
color: var(--color-neutral-700);
}

.order-confirmation-footer__contact-support a {
font: var(--type-body-2-strong-font);
letter-spacing: var(--type-body-2-strong-letter-spacing);
color: var(--color-brand-500);
cursor: pointer;
}

/* Hide empty blocks */
.order-confirmation__block:empty {
display: none;
}

@media only screen and (width >= 320px) and (width <= 768px) {
.order-confirmation {
grid-template-columns: repeat(var(--grid-1-columns), 1fr);
padding-top: 0;
}

/* @media only screen and (max-width: 600px) { } */
.order-confirmation__main, .order-confirmation__aside {
grid-row-gap: var(--spacing-medium);
}

/* Small devices (portrait tablets and large phones, 600px and up) */
.order-confirmation > div {
grid-column: 1 / span 4;
}

/* @media only screen and (min-width: 600px) { } */
.order-confirmation__block .dropin-card {
border: 0;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (width >= 768px) {
.checkout__content {
display: grid;
align-items: start;
grid-template-columns: repeat(var(--grid-4-columns), 1fr);
gap: var(--spacing-big) var(--grid-4-gutters);
}

/* @media only screen and (min-width: 768px) { } */
.checkout__content--error,
.checkout__content--empty {
display: grid;
grid-template-columns: 1fr;
}

/* Large devices (laptops/desktops, 992px and up) */
.checkout__main {
grid-column: 1 / span 7;
row-gap: var(--spacing-xbig);
}

/* @media only screen and (min-width: 992px) { } */
.checkout__aside {
grid-column: 9 / span 4;
gap: var(--spacing-xbig);
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
.checkout__error-banner,
.checkout__merged-cart-banner {
display: grid;
grid-column: 1 / span 12;
}

/* @media only screen and (min-width: 1200px) { } */
.checkout__place-order {
display: grid;
grid-column: 1 / span 12;
justify-items: center;
margin-top: 0;
}
}
Loading

0 comments on commit 6a54a78

Please sign in to comment.