From eeb02f1e1a6e024b58270229a65041ad91c0a948 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Tue, 20 Feb 2024 19:51:24 +0100 Subject: [PATCH 1/6] WIP --- assets/scss/components/_cart-content.scss | 121 ++++++++++ assets/scss/components/_components.scss | 1 + lang/en.json | 1 + templates/components/cart/content.html | 261 ++++++++-------------- templates/pages/cart.html | 107 +++++---- 5 files changed, 274 insertions(+), 217 deletions(-) create mode 100644 assets/scss/components/_cart-content.scss diff --git a/assets/scss/components/_cart-content.scss b/assets/scss/components/_cart-content.scss new file mode 100644 index 000000000..35349b202 --- /dev/null +++ b/assets/scss/components/_cart-content.scss @@ -0,0 +1,121 @@ +.c-cart__item-wrapper { + display: flex; + flex-direction: column; + gap: 3rem; +} + +.c-cart__item { + display: flex; +} + +.c-cart__item-image { + position: relative; + display: block; + aspect-ratio: 17.75 / 26.5; + width: 100%; + height: auto; + max-width: 17.75rem; + object-fit: cover; + + img { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + } +} + +.c-cart__item-information { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.c-cart__item-title { + color: $color-black; + font-family: $font-semi-bold; + font-size: 2rem; + font-style: normal; + font-weight: 600; + line-height: 2.5rem; + text-decoration: none; +} + +.c-cart__item-options { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.c-cart__option-name { + color: $color-black; + font-family: $font-semi-bold; + font-size: 1rem; + font-style: normal; + font-weight: 600; + line-height: 1.5rem; + margin: 0; +} + +.c-cart__option-value { + color: $color-neutrals-500; + font-family: $font-regular; + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: 1.5rem; + margin: 0; +} + +.c-cart__item-actions { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1.5rem; +} + +.c-cart__item-inputs { + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + background-color: $color-white; + border-radius: 0.25rem; + border: 1px solid $color-neutrals-75; +} + +.c-cart__item-total { + display: flex; + justify-content: center; + align-items: center; + gap: 1.5rem; +} + +.c-cart__button-remove { + background: none; + border: 0; + outline: none; + padding: 0; + margin: 0; + cursor: pointer; +} + +.c-cart__item-qty-input { + color: $color-neutrals-500; + text-align: center; + font-family: $font-regular; + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: 1.5rem; + width: 1.75rem; + border: 0; +} + +.c-cart__item-qty-btn { + border: 0; + background: none; + outline: none; + cursor: pointer; +} diff --git a/assets/scss/components/_components.scss b/assets/scss/components/_components.scss index f34a12342..981f3d8c9 100644 --- a/assets/scss/components/_components.scss +++ b/assets/scss/components/_components.scss @@ -43,3 +43,4 @@ @import 'cta-panel'; @import 'product-compare'; @import 'blog'; +@import 'cart-content'; diff --git a/lang/en.json b/lang/en.json index fa9a8ab15..7a48f0fde 100755 --- a/lang/en.json +++ b/lang/en.json @@ -68,6 +68,7 @@ "checkout_multiple": "or check out with multiple addresses", "view_cart": "View Cart" }, + "title": "Cart", "label": "Your Cart ({quantity, plural, one {# item} other {# items}})", "is_empty": "Your cart is empty", "invalid_entry_message": "[ENTRY] is not a valid entry", diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html index 24b23492e..71ed20059 100644 --- a/templates/components/cart/content.html +++ b/templates/components/cart/content.html @@ -1,14 +1,8 @@
-
-
{{lang 'cart.checkout.item'}}
-
{{lang 'cart.checkout.price'}}
-
{{lang 'cart.checkout.quantity'}}
-
{{lang 'cart.checkout.total'}}
-
-
+
{{#each cart.items}} -
-
+
+
{{#if type '==' 'GiftCertificate'}} -
- {{#if brand.name}} -

{{brand.name}}

- {{/if}} - - {{#if release_date}} -

({{release_date}})

- {{/if}} +
+ + {{name}} + {{#if options}} -
+
{{#each options}} -
{{name}}:
-
- {{#if is_file}} - - {{value}} - - {{else}} - {{> components/common/product-options}} - {{/if}} -
+

+ {{name}} + * +

+

{{> components/common/product-options}}

{{/each}} -
- - - {{lang 'common.change'}} - - {{/if}} - {{#if type '==' 'GiftCertificate'}} - - {{lang 'common.change'}} - + + {{lang 'common.change'}} + +
{{/if}} - {{> components/cart/item-giftwrap this}} - - {{#if event_date}} -
-
- {{event_date.name}} -
-
- {{event_date.date}} -
-
- {{/if}} -
- -
- {{lang 'cart.checkout.price'}} - - {{#or ../customer (unless ../settings.hide_price_from_guests) (if type '==' 'GiftCertificate')}} - - {{price.formatted}} - - - {{#if price_discounted}} - - {{price_discounted.formatted}} - - {{/if}} - {{else}} - {{> components/common/login-for-pricing}} - {{/or}} -
- -
- - -
- {{#if can_modify}} - - {{/if}} - - {{#if can_modify}} - + {{/if}} + - - {{lang 'products.quantity_increase' name=name}} - - - - - - {{/if}} + data-action="manualQtyChange" + aria-label="{{name}}" + aria-live="polite"{{#unless can_modify}} disabled{{/unless}}> + {{#if can_modify}} + + {{/if}} +
+
+ {{#or ../customer (unless ../settings.hide_price_from_guests) (if type '==' 'GiftCertificate')}} + + {{total.formatted}} + + + {{#if total_discounted}} + + {{total_discounted.formatted}} + + {{/if}} + {{else}} + -- + {{/or}} + {{#or can_modify (if type '==' 'GiftCertificate')}} + + {{/or}} +
- -
- - {{lang 'cart.checkout.total'}} - - - {{#or ../customer (unless ../settings.hide_price_from_guests) (if type '==' 'GiftCertificate')}} - - {{total.formatted}} - - - {{#if total_discounted}} - - {{total_discounted.formatted}} - - {{/if}} - {{else}} - -- - {{/or}} - {{#or can_modify (if type '==' 'GiftCertificate')}} - - {{/or}} -
{{/each}}
diff --git a/templates/pages/cart.html b/templates/pages/cart.html index 8767be70b..3e449a606 100644 --- a/templates/pages/cart.html +++ b/templates/pages/cart.html @@ -5,76 +5,75 @@ {{#partial "page"}} {{inject 'invalidEntryMessage' (lang 'cart.invalid_entry_message')}} -
-
- {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} +{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} - {{> components/cart/page-title}} +

{{lang 'cart.title'}}

-
- {{> components/cart/status-messages}} -
+
- {{#if cart.items.length}} -
+
+ {{> components/cart/status-messages}} +
-
- {{> components/cart/content}} -
+ {{#if cart.items.length}} +
-
- {{> components/cart/totals}} -
+
+ {{> components/cart/content}} +
- {{{region name="cart_below_totals"}}} +
+ {{> components/cart/totals}} +
- {{#or customer (unless settings.hide_price_from_guests)}} - {{#if cart.additional_checkout_buttons}} -
- {{/if}} + {{{region name="cart_below_totals"}}} - {{#if cart.show_primary_checkout_button}} -
- - {{lang 'cart.checkout.button'}} - - {{#if cart.show_multiple_address_shipping}} - - {{lang 'cart.preview.checkout_multiple'}} - - {{/if}} -
- {{else}} - - {{/if}} + {{#or customer (unless settings.hide_price_from_guests)}} + {{#if cart.additional_checkout_buttons}} +
+ {{/if}} - {{#if cart.additional_checkout_buttons}} -
- {{> components/cart/additional-checkout-buttons}} -
- {{/if}} + {{#if cart.show_primary_checkout_button}} +
+ + {{lang 'cart.checkout.button'}} + + {{#if cart.show_multiple_address_shipping}} + + {{lang 'cart.preview.checkout_multiple'}} + + {{/if}} +
{{else}} - {{/or}} + {{/if}} + {{#if cart.additional_checkout_buttons}} +
+ {{> components/cart/additional-checkout-buttons}} +
+ {{/if}} {{else}} -
- {{lang 'cart.checkout.empty_cart'}} + - {{/if}} -
+ {{/or}} + + {{else}} +
+ {{lang 'cart.checkout.empty_cart'}} +
+ {{/if}}
{{/partial}} {{> layout/base}} From e50ed98cbb655afbc042b2ee9d353f600d41e625 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Wed, 6 Mar 2024 11:55:01 +0100 Subject: [PATCH 2/6] XCORNER-21 cart page --- assets/js/theme/cart.js | 5 + assets/js/theme/cart/shipping-estimator.js | 9 +- assets/js/theme/common/state-country.js | 52 +++--- assets/js/theme/common/utils/form-utils.js | 15 +- .../theme/custom/add-reviews-to-cart-items.js | 62 +++++++ .../{_cart-content.scss => _cart.scss} | 59 ++++++- assets/scss/components/_components.scss | 4 + assets/scss/components/_coupon-form.scss | 5 + .../scss/components/_shipping-estimator.scss | 7 + assets/scss/components/_totals.scss | 47 ++++++ assets/scss/pages/cart.scss | 5 + assets/scss/pages/pages.scss | 4 + lang/en.json | 2 +- templates/components/cart/content.html | 18 +- templates/components/cart/coupon-input.html | 21 +-- .../components/cart/shipping-estimator.html | 154 ++++++++---------- templates/components/cart/totals.html | 146 +++++++---------- templates/pages/cart.html | 18 +- 18 files changed, 390 insertions(+), 243 deletions(-) create mode 100644 assets/js/theme/custom/add-reviews-to-cart-items.js rename assets/scss/components/{_cart-content.scss => _cart.scss} (69%) create mode 100644 assets/scss/components/_coupon-form.scss create mode 100644 assets/scss/components/_shipping-estimator.scss create mode 100644 assets/scss/components/_totals.scss create mode 100644 assets/scss/pages/cart.scss diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js index a0fdd6f8a..113d51728 100644 --- a/assets/js/theme/cart.js +++ b/assets/js/theme/cart.js @@ -10,6 +10,7 @@ import CartItemDetails from './common/cart-item-details' import q$, { q$$ } from './global/selector' import trigger from './common/utils/trigger' import toggle from './global/toggle' +import addReviewsToCartItems from './custom/add-reviews-to-cart-items' export default class Cart extends PageManager { onReady() { @@ -30,6 +31,10 @@ export default class Cart extends PageManager { this.setApplePaySupport() this.bindEvents() + + const { storefrontApiToken } = this.context + + addReviewsToCartItems(storefrontApiToken) } setApplePaySupport() { diff --git a/assets/js/theme/cart/shipping-estimator.js b/assets/js/theme/cart/shipping-estimator.js index 5fd0138b1..1699c6664 100644 --- a/assets/js/theme/cart/shipping-estimator.js +++ b/assets/js/theme/cart/shipping-estimator.js @@ -27,7 +27,7 @@ export default class ShippingEstimator { tap: announceInputErrorMessage, }) - q$('.js-shipping-estimate-submit', this.$element)?.addEventListener('click', (event) => { + q$('.js-shipping-estimate-submit', this.$element).addEventListener('click', (event) => { // estimator error messages are being injected in html as a result // of user submit; clearing and adding role on submit provides // regular announcement of these error messages @@ -140,7 +140,10 @@ export default class ShippingEstimator { // When you change a country, you swap the state/province between an input and a select dropdown // Not all countries require the province to be filled // We have to remove this class when we swap since nod validation doesn't cleanup for us - q$(this.shippingEstimator).querySelector('.js-form-field-success').classList.remove('js-form-field-success') + const shippingEstimator = q$(this.shippingEstimator) + if (shippingEstimator) { + shippingEstimator.querySelector('.js-form-field-success')?.classList.remove('js-form-field-success') + } }) } @@ -177,7 +180,7 @@ export default class ShippingEstimator { event.preventDefault() utils.api.cart.getShippingQuotes(params, 'cart/shipping-quotes', (err, response) => { - q$('.js-shipping-quotes').innerHTML = response.content + q$('.js-shipping-quotes').innerHTML = response?.content // bind the select button q$('.js-select-shipping-quote').addEventListener('click', (clickEvent) => { diff --git a/assets/js/theme/common/state-country.js b/assets/js/theme/common/state-country.js index c61b4e0fc..0eae5eeca 100644 --- a/assets/js/theme/common/state-country.js +++ b/assets/js/theme/common/state-country.js @@ -8,26 +8,27 @@ import q$, { q$$ } from '../global/selector' * If there are no options from bcapp, a text field will be sent. This will create a select element to hold options after the remote request. * @returns {HTMLElement} */ -function makeStateRequired(stateElement, context) { +function makeStateRequired(stateElement) { /* eslint-disable no-param-reassign */ - stateElement.innerHTML = ` - - ` + const selectElement = document.createElement('select') + + selectElement.className = 'c-form__input c-form__input--select u-width-full' + + selectElement.id = stateElement.id + selectElement.name = stateElement.getAttribute('name') + selectElement.setAttribute('data-label', stateElement.dataset.label) + selectElement.setAttribute('data-field-type', stateElement.dataset.fieldType) + + stateElement.replaceWith(selectElement) const $hiddenInput = q$$('[name*="FormFieldIsText"]') $hiddenInput.forEach(($hi) => $hi.remove()) const $newElement = q$('[data-field-type="State"]') const $prevElement = $newElement.previousElementSibling - if ($prevElement.querySelector('small') === null) { + if ($prevElement?.querySelector('small') === null) { // String is injected from localizer - $prevElement.insertAdjacentHTML('beforeend', `${context.required}`) + $prevElement.insertAdjacentHTML('beforeend', `*`) } else { $prevElement.querySelector('small').style.display = 'block' } @@ -43,22 +44,25 @@ function makeStateRequired(stateElement, context) { */ function makeStateOptional(stateElement) { /* eslint-disable no-param-reassign */ - stateElement.innerHTML = ` - - ` + const inputElement = document.createElement('input') + inputElement.type = 'text' + + inputElement.className = 'js-form-input c-form__input u-width-full' + + inputElement.id = stateElement.id + inputElement.name = stateElement.getAttribute('name') + inputElement.setAttribute('data-label', stateElement.dataset.label) + inputElement.setAttribute('data-field-type', stateElement.dataset.fieldType) + + stateElement.replaceWith(inputElement) const $newElement = q$('[data-field-type="State"]') if ($newElement !== null) { insertStateHiddenField($newElement) - $newElement.previousElementSibling.querySelector('small').style.display = 'none' + if ($newElement.previousElementSibling?.querySelector('small')) { + $newElement.previousElementSibling.querySelector('small').style.display = 'none' + } } return $newElement @@ -75,7 +79,7 @@ function addOptions(statesArray, $selectElement, options) { container.push(``) - if (!isEmpty($selectElement)) { + if (isEmpty($selectElement)) { statesArray.states.forEach((stateObj) => { if (options.useIdForStates) { container.push(``) diff --git a/assets/js/theme/common/utils/form-utils.js b/assets/js/theme/common/utils/form-utils.js index e1986e57c..e97efffa0 100644 --- a/assets/js/theme/common/utils/form-utils.js +++ b/assets/js/theme/common/utils/form-utils.js @@ -321,13 +321,14 @@ const Validators = { * @param field */ cleanUpStateValidation: (field) => { - const $fieldClassElement = q$(`[data-type="${field.dataset.fieldType}"]`) - - Object.keys(nod.classes).forEach((value) => { - if ($fieldClassElement.classList.contains(nod.classes[value])) { - $fieldClassElement.classList.remove(nod.classes[value]) - } - }) + if (field.dataset.fieldType) { + const $fieldClassElement = q$(`[data-field-type="${field.dataset.fieldType}"]`) + Object.keys(nod.classes).forEach((value) => { + if ($fieldClassElement.classList.contains(nod.classes[value])) { + $fieldClassElement.classList.remove(nod.classes[value]) + } + }) + } }, } diff --git a/assets/js/theme/custom/add-reviews-to-cart-items.js b/assets/js/theme/custom/add-reviews-to-cart-items.js new file mode 100644 index 000000000..7eafe8a95 --- /dev/null +++ b/assets/js/theme/custom/add-reviews-to-cart-items.js @@ -0,0 +1,62 @@ +/** + * Add reviews to cart items via GraphQL + */ +export default function addReviewsToCartItems(storefrontApiToken) { + const cartItems = document.querySelectorAll('.js-item-row') + if (cartItems.length > 0) { + cartItems.forEach((product) => { + const productId = product.getAttribute('data-type-product-id') + fetch('/graphql', { + method: 'POST', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${storefrontApiToken}`, + }, + body: JSON.stringify({ + query: ` + query getProductRating { + site { + product(entityId: ${productId}) { + reviewSummary { + numberOfReviews + summationOfRatings + } + } + } + } + `, + }), + }) + .then((res) => res.json()) + .then((data) => { + const summationOfRatings = data?.data?.site?.product?.reviewSummary?.summationOfRatings + const numberOfReviews = data?.data?.site?.product?.reviewSummary?.numberOfReviews + const ratingElement = document.querySelector(`[data-type-product-id="${productId}"] .c-cart__item-rating`) + const ratingLink = document.querySelector(`[data-type-product-id="${productId}"] .c-cart__item-rating-link`) + + ratingLink.innerHTML = `${numberOfReviews} reviews` + + const filledStarSVG = ` + + + ` + + const unfilledStarSVG = ` + + + ` + + if (ratingElement) { + for (let i = 1; i <= 5; i++) { + if (i <= summationOfRatings) { + ratingElement.insertAdjacentHTML('beforeend', filledStarSVG) + } else { + ratingElement.insertAdjacentHTML('beforeend', unfilledStarSVG) + } + } + } + }) + }) + } +} diff --git a/assets/scss/components/_cart-content.scss b/assets/scss/components/_cart.scss similarity index 69% rename from assets/scss/components/_cart-content.scss rename to assets/scss/components/_cart.scss index 35349b202..c70d2fcb8 100644 --- a/assets/scss/components/_cart-content.scss +++ b/assets/scss/components/_cart.scss @@ -1,3 +1,7 @@ +.c-cart__content { + margin-bottom: rem-calc(24px); +} + .c-cart__item-wrapper { display: flex; flex-direction: column; @@ -6,25 +10,36 @@ .c-cart__item { display: flex; + flex-direction: column; + gap: rem-calc(24px); + + @include bp(small) { + flex-direction: row; + gap: rem-calc(48px); + } } -.c-cart__item-image { +.c-cart__item-image-wrapper { position: relative; display: block; aspect-ratio: 17.75 / 26.5; - width: 100%; + width: 50%; height: auto; max-width: 17.75rem; object-fit: cover; - img { - position: absolute; + @include bp(small) { width: 100%; - height: 100%; - object-fit: cover; } } +.c-cart__item-image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; +} + .c-cart__item-information { display: flex; flex-direction: column; @@ -119,3 +134,35 @@ outline: none; cursor: pointer; } + +.c-cart__checkout-button-wrapper { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.c-cart__item-rating-wrapper { + display: flex; + align-items: center; + gap: rem-calc(8px); +} + +.c-cart__item-rating-link { + color: $color-primary-300; + font-family: $font-semi-bold; + font-size: rem-calc(14px); + line-height: rem-calc(16px); + font-weight: 600; + letter-spacing: 0; + text-align: center; + + &:hover { + color: $color-primary-300; + } +} + +.c-cart__item-head { + display: flex; + flex-direction: column; + gap: rem-calc(12px); +} diff --git a/assets/scss/components/_components.scss b/assets/scss/components/_components.scss index 981f3d8c9..0ee2164d0 100644 --- a/assets/scss/components/_components.scss +++ b/assets/scss/components/_components.scss @@ -44,3 +44,7 @@ @import 'product-compare'; @import 'blog'; @import 'cart-content'; +@import 'cart'; +@import 'totals'; +@import 'shipping-estimator'; +@import 'coupon-form'; diff --git a/assets/scss/components/_coupon-form.scss b/assets/scss/components/_coupon-form.scss new file mode 100644 index 000000000..c69e77754 --- /dev/null +++ b/assets/scss/components/_coupon-form.scss @@ -0,0 +1,5 @@ +.c-coupon-form { + display: flex; + flex-direction: column; + gap: rem-calc(12px); +} diff --git a/assets/scss/components/_shipping-estimator.scss b/assets/scss/components/_shipping-estimator.scss new file mode 100644 index 000000000..d73dbae59 --- /dev/null +++ b/assets/scss/components/_shipping-estimator.scss @@ -0,0 +1,7 @@ +.c-shipping-estimator { + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: right; + gap: rem-calc(12px); +} diff --git a/assets/scss/components/_totals.scss b/assets/scss/components/_totals.scss new file mode 100644 index 000000000..6bb573ce1 --- /dev/null +++ b/assets/scss/components/_totals.scss @@ -0,0 +1,47 @@ +.c-totals__subtotal { + display: flex; + justify-content: flex-end; + align-items: center; + gap: rem-calc(24px); +} + +.c-totals__shipping-total { + display: flex; + justify-content: flex-end; + align-items: center; + gap: rem-calc(24px); + margin-bottom: rem-calc(12px); +} + +.c-totals__label { + color: $color-neutrals-300; + font-family: $font-semi-bold; + font-size: rem-calc(20px); + line-height: rem-calc(24px); + font-weight: 600; + letter-spacing: 0; + text-align: center; +} + +.c-totals__value { + @extend .c-totals__label; + color: $color-black; +} + +.c-totals__shipping-estimator { + margin-bottom: rem-calc(24px); +} + +.c-totals__cart-total { + font-size: rem-calc(32px); + line-height: rem-calc(40px); + text-align: right; + margin-block: rem-calc(24px); +} + +.c-totals__checkout-button { + display: flex; + justify-content: center; + align-items: center; + gap: rem-calc(8px); +} diff --git a/assets/scss/pages/cart.scss b/assets/scss/pages/cart.scss new file mode 100644 index 000000000..da2456fae --- /dev/null +++ b/assets/scss/pages/cart.scss @@ -0,0 +1,5 @@ +.p-cart__totals { + display: flex; + flex-direction: column; + align-items: flex-end; +} diff --git a/assets/scss/pages/pages.scss b/assets/scss/pages/pages.scss index 7f9060b95..129fe5cd9 100644 --- a/assets/scss/pages/pages.scss +++ b/assets/scss/pages/pages.scss @@ -3,3 +3,7 @@ @import './login'; @import './create-account'; @import './forgot-password'; +@import './page'; +@import './blog'; +@import './product'; +@import './cart'; diff --git a/lang/en.json b/lang/en.json index 7a48f0fde..5ff7e34c7 100755 --- a/lang/en.json +++ b/lang/en.json @@ -48,7 +48,7 @@ "multiple": "check out with multiple addresses", "or": "or" }, - "button": "Check out", + "button": "Go to checkout", "empty_cart": "Your cart is empty", "title": "Click here to proceed to checkout", "item": "Item", diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html index 71ed20059..3c32f93f4 100644 --- a/templates/components/cart/content.html +++ b/templates/components/cart/content.html @@ -1,26 +1,34 @@
{{#each cart.items}} -
-
+
+
{{#if type '==' 'GiftCertificate'}} {{lang 'cart.gift_certificates.gift_certificate'}} {{else}} {{> components/common/image image=image fallback_size=../theme_settings.product_thumb_size default_image=../theme_settings.default_image_product + class="c-cart__item-image" }} {{/if}}
- - {{name}} - +
+ + {{name}} + +
+ + +
+
{{#if options}}
diff --git a/templates/components/cart/coupon-input.html b/templates/components/cart/coupon-input.html index 69b7010b6..4063b0064 100644 --- a/templates/components/cart/coupon-input.html +++ b/templates/components/cart/coupon-input.html @@ -1,20 +1,7 @@ -
- - - -
- - +
-
- -
-
- -
+
+ + +
-
- -
-
- -
- - - +
+ + +
+ +
-
  • -
    - {{lang 'cart.checkout.subtotal'}}: -
    -
    - {{#or customer (unless settings.hide_price_from_guests)}} - - {{cart.sub_total.formatted}} - - {{else}} - {{> components/common/login-for-pricing}} - {{/or}} -
    -
    • +
    +
    + {{lang 'cart.checkout.subtotal'}}: + {{#or customer (unless settings.hide_price_from_guests)}} + + {{cart.sub_total.formatted}} + + {{else}} + {{> components/common/login-for-pricing}} + {{/or}} +
    {{#if cart.gift_wrapping_cost.value}} -
  • -
    - {{lang 'cart.checkout.gift_wrapping'}}: -
    -
    - - {{cart.gift_wrapping_cost.formatted}} - -
    -
    • +
    + {{lang 'cart.checkout.gift_wrapping'}}: + + {{cart.gift_wrapping_cost.formatted}} + +
    {{/if}} {{#if cart.shipping_handling.show_estimator}} -
  • -
    - {{lang 'cart.checkout.shipping'}}: -
    +
    {{> components/cart/shipping-estimator cart.shipping_handling}} -
    • +
    {{/if}} {{#each cart.taxes}} {{#unless included}} -
  • -
    - {{name}}: -
    -
    - {{cost.formatted}} -
    -
    • +
    + {{name}}: + {{cost.formatted}} +
    {{/unless}} {{/each}} {{#if cart.discount }} -
  • -
    - {{lang 'cart.discount'}}: -
    -
    +
    + {{lang 'cart.discount'}}: + {{cart.discount.formatted}} -
    -
    • + +
    {{/if}} {{#if cart.coupons}} {{#each cart.coupons}} -
  • +
    - + {{lang 'cart.coupons.code_label' code=code}}
    @@ -70,68 +53,53 @@
    -
    - {{discount.formatted}} -
    -
    • + {{discount.formatted}} +
    {{/each}} {{else}} -
  • -
    - {{lang 'cart.coupon_code'}}: -
    +
    {{> components/cart/coupon-input}} -
    • +
    {{/if}} {{#if settings.gift_certificates_enabled}} {{#each cart.gift_certificates}} -
  • +
    - + {{lang 'cart.gift_certificates.code_label' code=code}} - + {{remaining.formatted}} | {{lang 'cart.gift_certificates.remove'}}
    -
    +
    {{used.formatted}}
    -
    • - {{/each}} -
  • -
    - {{lang 'cart.gift_certificates.gift_certificate'}}:
    + {{/each}} +
    + {{lang 'cart.gift_certificates.gift_certificate'}}: {{> components/cart/gift-certificate-input}} -
    • +
    {{/if}} -
  • -
    - {{lang 'cart.checkout.grand_total'}}: -
    -
    - {{#or customer (unless settings.hide_price_from_guests)}} - - {{cart.grand_total.formatted}} - - {{else}} - {{> components/common/login-for-pricing}} - {{/or}} -
    -
    • +
    + {{lang 'cart.checkout.grand_total'}}: + {{#or customer (unless settings.hide_price_from_guests)}} + + {{cart.grand_total.formatted}} + + {{else}} + {{> components/common/login-for-pricing}} + {{/or}} +
    {{#each cart.taxes}} {{#if included}} -
  • -
    - {{concat name (lang 'cart.included_in_total')}}: -
    -
    - {{cost.formatted}} -
    -
    • +
    + {{concat name (lang 'cart.included_in_total')}}: + {{cost.formatted}} +
    {{/if}} {{/each}} - +
    diff --git a/templates/pages/cart.html b/templates/pages/cart.html index 3e449a606..897be2531 100644 --- a/templates/pages/cart.html +++ b/templates/pages/cart.html @@ -4,6 +4,7 @@ {{inject 'cancelButtonText' (lang 'common.cancel')}} {{#partial "page"}} {{inject 'invalidEntryMessage' (lang 'cart.invalid_entry_message')}} +{{inject 'storefrontApiToken' settings.storefront_api.token}} {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} @@ -18,11 +19,11 @@

    {{lang 'cart.title'}}

    {{#if cart.items.length}}
    -
    +
    {{> components/cart/content}}
    -
    +
    {{> components/cart/totals}}
    @@ -34,12 +35,15 @@

    {{lang 'cart.title'}}

    {{/if}} {{#if cart.show_primary_checkout_button}} -
    +
    + + + {{lang 'cart.checkout.button'}} {{#if cart.show_multiple_address_shipping}} @@ -49,8 +53,8 @@

    {{lang 'cart.title'}}

    {{/if}}
    {{else}} -
    - +
    + {{lang 'cart.continue_shopping'}}
    @@ -63,7 +67,7 @@

    {{lang 'cart.title'}}

    {{/if}} {{else}} From 24b02dab0622f779260a76567ed7abe369f0e15f Mon Sep 17 00:00:00 2001 From: martibelegu Date: Wed, 6 Mar 2024 14:02:46 +0100 Subject: [PATCH 3/6] Fix cart quantity increase functionality --- assets/js/theme/cart.js | 13 +++++++------ assets/scss/components/_cart.scss | 3 +++ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js index 113d51728..274075ef3 100644 --- a/assets/js/theme/cart.js +++ b/assets/js/theme/cart.js @@ -266,15 +266,16 @@ export default class Cart extends PageManager { let preVal // cart update - q$('.js-cart-update', this.$cartContent)?.addEventListener('click', (event) => { - const $target = event.currentTarget + q$$('.js-cart-update', this.$cartContent)?.forEach(($btn) => { + $btn.addEventListener('click', (event) => { + const $target = event.currentTarget - event.preventDefault() + event.preventDefault() - // update cart quantity - cartUpdate($target) + // update cart quantity + cartUpdate($target) + }) }) - // cart qty manually updates q$$('.js-cart-item-qty-input', this.$cartContent).forEach(($input) => { $input.addEventListener('focus', function onQtyFocus() { diff --git a/assets/scss/components/_cart.scss b/assets/scss/components/_cart.scss index c70d2fcb8..d6ea7b871 100644 --- a/assets/scss/components/_cart.scss +++ b/assets/scss/components/_cart.scss @@ -133,6 +133,9 @@ background: none; outline: none; cursor: pointer; + display: flex; + justify-content: center; + align-items: center; } .c-cart__checkout-button-wrapper { From 5606f50ba67b091ebe5006b3e764754649433844 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Tue, 12 Mar 2024 10:30:18 +0100 Subject: [PATCH 4/6] CR feedback --- .eslintcache | 1 - assets/icons/decrease-quantity.svg | 1 + assets/icons/increase-quantity.svg | 1 + assets/icons/trash.svg | 1 + assets/img/icon-sprite.svg | 113 +++++++++++++++++- .../theme/custom/add-reviews-to-cart-items.js | 24 ++-- assets/scss/components/_cart.scss | 11 +- assets/scss/components/_components.scss | 1 + assets/scss/components/_order-total.scss | 6 + assets/scss/components/_totals.scss | 6 + assets/scss/pages/cart.scss | 5 - assets/scss/pages/pages.scss | 1 - templates/components/cart/content.html | 54 ++++++--- templates/pages/cart.html | 2 +- 14 files changed, 184 insertions(+), 43 deletions(-) delete mode 100644 .eslintcache create mode 100644 assets/icons/decrease-quantity.svg create mode 100644 assets/icons/increase-quantity.svg create mode 100644 assets/icons/trash.svg create mode 100644 assets/scss/components/_order-total.scss delete mode 100644 assets/scss/pages/cart.scss diff --git a/.eslintcache b/.eslintcache deleted file mode 100644 index cd006ada5..000000000 --- a/.eslintcache +++ /dev/null @@ -1 +0,0 @@ -[{"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/hooks/faceted-search.js":"1","/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/faceted-search.js":"2","/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/custom/category-filters.js":"3","/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/carousel.js":"4","/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/swiper-carousel/index.js":"5"},{"size":754,"mtime":1707849697163,"results":"6","hashOfConfig":"7"},{"size":15986,"mtime":1707835370540,"results":"8","hashOfConfig":"7"},{"size":1062,"mtime":1707834649422,"results":"9","hashOfConfig":"7"},{"size":2785,"mtime":1708944127430,"results":"10","hashOfConfig":"11"},{"size":2190,"mtime":1708944127430,"results":"12","hashOfConfig":"11"},{"filePath":"13","messages":"14","suppressedMessages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1gd3vyx",{"filePath":"16","messages":"17","suppressedMessages":"18","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","suppressedMessages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","suppressedMessages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1hal5ky",{"filePath":"25","messages":"26","suppressedMessages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/hooks/faceted-search.js",[],[],"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/faceted-search.js",[],["28","29"],"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/custom/category-filters.js",[],[],"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/carousel.js",[],["30","31","32","33","34","35","36"],"/Users/martibelegu/Documents/Xfive/xcorner/assets/js/theme/common/swiper-carousel/index.js",[],["37","38","39","40"],{"ruleId":"41","severity":2,"message":"42","line":236,"column":17,"nodeType":"43","messageId":"44","endLine":236,"endColumn":25,"suppressions":"45"},{"ruleId":"41","severity":2,"message":"42","line":238,"column":17,"nodeType":"43","messageId":"44","endLine":238,"endColumn":25,"suppressions":"46"},{"ruleId":"47","severity":2,"message":"48","line":5,"column":8,"nodeType":"49","endLine":5,"endColumn":21,"suppressions":"50"},{"ruleId":"47","severity":2,"message":"51","line":6,"column":8,"nodeType":"49","endLine":6,"endColumn":32,"suppressions":"52"},{"ruleId":"47","severity":2,"message":"53","line":7,"column":8,"nodeType":"49","endLine":7,"endColumn":31,"suppressions":"54"},{"ruleId":"55","severity":2,"message":"56","line":34,"column":9,"nodeType":"57","messageId":"58","endLine":34,"endColumn":58,"suppressions":"59"},{"ruleId":"55","severity":2,"message":"56","line":92,"column":9,"nodeType":"57","messageId":"58","endLine":92,"endColumn":58,"suppressions":"60"},{"ruleId":"55","severity":2,"message":"56","line":96,"column":9,"nodeType":"57","messageId":"58","endLine":96,"endColumn":53,"suppressions":"61"},{"ruleId":"55","severity":2,"message":"56","line":100,"column":9,"nodeType":"57","messageId":"58","endLine":100,"endColumn":64,"suppressions":"62"},{"ruleId":"47","severity":2,"message":"48","line":5,"column":8,"nodeType":"49","endLine":5,"endColumn":21,"suppressions":"63"},{"ruleId":"47","severity":2,"message":"51","line":6,"column":8,"nodeType":"49","endLine":6,"endColumn":32,"suppressions":"64"},{"ruleId":"47","severity":2,"message":"53","line":7,"column":8,"nodeType":"49","endLine":7,"endColumn":31,"suppressions":"65"},{"ruleId":"47","severity":2,"message":"66","line":8,"column":8,"nodeType":"49","endLine":8,"endColumn":25,"suppressions":"67"},"no-param-reassign","Assignment to property of function parameter '$element'.","Identifier","assignmentToFunctionParamProp",["68"],["69"],"import/no-unresolved","Unable to resolve path to module 'swiper/scss'.","Literal",["70"],"Unable to resolve path to module 'swiper/scss/navigation'.",["71"],"Unable to resolve path to module 'swiper/css/pagination'.",["72"],"no-new","Do not use 'new' for side effects.","ExpressionStatement","noNewStatement",["73"],["74"],["75"],["76"],["77"],["78"],["79"],"Unable to resolve path to module 'swiper/css/grid'.",["80"],{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},{"kind":"81","justification":"82"},"directive",""] \ No newline at end of file diff --git a/assets/icons/decrease-quantity.svg b/assets/icons/decrease-quantity.svg new file mode 100644 index 000000000..a3b8095b5 --- /dev/null +++ b/assets/icons/decrease-quantity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/increase-quantity.svg b/assets/icons/increase-quantity.svg new file mode 100644 index 000000000..f48a512dc --- /dev/null +++ b/assets/icons/increase-quantity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/trash.svg b/assets/icons/trash.svg new file mode 100644 index 000000000..1a5f51f49 --- /dev/null +++ b/assets/icons/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/icon-sprite.svg b/assets/img/icon-sprite.svg index 53e6139c4..9dcadbdc0 100644 --- a/assets/img/icon-sprite.svg +++ b/assets/img/icon-sprite.svg @@ -1 +1,112 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/js/theme/custom/add-reviews-to-cart-items.js b/assets/js/theme/custom/add-reviews-to-cart-items.js index 7eafe8a95..b8d93be46 100644 --- a/assets/js/theme/custom/add-reviews-to-cart-items.js +++ b/assets/js/theme/custom/add-reviews-to-cart-items.js @@ -37,23 +37,17 @@ export default function addReviewsToCartItems(storefrontApiToken) { ratingLink.innerHTML = `${numberOfReviews} reviews` - const filledStarSVG = ` - - - ` + if (ratingElement) { + ratingElement.setAttribute('data-product-rating', summationOfRatings) + const filledStars = ratingElement.querySelectorAll('.c-cart-item__filled-stars svg') + const unfilledStars = ratingElement.querySelectorAll('.c-cart-item__unfilled-stars svg') - const unfilledStarSVG = ` - - - ` + for (let i = 0; i < summationOfRatings; i++) { + filledStars[i].classList.remove('u-hidden') + } - if (ratingElement) { - for (let i = 1; i <= 5; i++) { - if (i <= summationOfRatings) { - ratingElement.insertAdjacentHTML('beforeend', filledStarSVG) - } else { - ratingElement.insertAdjacentHTML('beforeend', unfilledStarSVG) - } + for (let i = 0; i < 5 - summationOfRatings; i++) { + unfilledStars[i].classList.remove('u-hidden') } } }) diff --git a/assets/scss/components/_cart.scss b/assets/scss/components/_cart.scss index d6ea7b871..c3d0ae20d 100644 --- a/assets/scss/components/_cart.scss +++ b/assets/scss/components/_cart.scss @@ -87,6 +87,7 @@ justify-content: space-between; align-items: center; gap: 1.5rem; + width: fit-content; } .c-cart__item-inputs { @@ -100,14 +101,10 @@ border: 1px solid $color-neutrals-75; } -.c-cart__item-total { +.c-cart__button-remove { display: flex; justify-content: center; align-items: center; - gap: 1.5rem; -} - -.c-cart__button-remove { background: none; border: 0; outline: none; @@ -169,3 +166,7 @@ flex-direction: column; gap: rem-calc(12px); } + +.c-cart__icon { + max-width: rem-calc(24px); +} \ No newline at end of file diff --git a/assets/scss/components/_components.scss b/assets/scss/components/_components.scss index 0ee2164d0..acf43ae3f 100644 --- a/assets/scss/components/_components.scss +++ b/assets/scss/components/_components.scss @@ -48,3 +48,4 @@ @import 'totals'; @import 'shipping-estimator'; @import 'coupon-form'; +@import 'order-total'; \ No newline at end of file diff --git a/assets/scss/components/_order-total.scss b/assets/scss/components/_order-total.scss new file mode 100644 index 000000000..afe570b06 --- /dev/null +++ b/assets/scss/components/_order-total.scss @@ -0,0 +1,6 @@ +.c-order-total { + display: flex; + justify-content: center; + align-items: center; + gap: 1.5rem; +} \ No newline at end of file diff --git a/assets/scss/components/_totals.scss b/assets/scss/components/_totals.scss index 6bb573ce1..c095540a6 100644 --- a/assets/scss/components/_totals.scss +++ b/assets/scss/components/_totals.scss @@ -1,3 +1,9 @@ +.c-totals { + display: flex; + flex-direction: column; + align-items: flex-end; +} + .c-totals__subtotal { display: flex; justify-content: flex-end; diff --git a/assets/scss/pages/cart.scss b/assets/scss/pages/cart.scss deleted file mode 100644 index da2456fae..000000000 --- a/assets/scss/pages/cart.scss +++ /dev/null @@ -1,5 +0,0 @@ -.p-cart__totals { - display: flex; - flex-direction: column; - align-items: flex-end; -} diff --git a/assets/scss/pages/pages.scss b/assets/scss/pages/pages.scss index 129fe5cd9..ee8f3e965 100644 --- a/assets/scss/pages/pages.scss +++ b/assets/scss/pages/pages.scss @@ -6,4 +6,3 @@ @import './page'; @import './blog'; @import './product'; -@import './cart'; diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html index 3c32f93f4..42a9bbbbb 100644 --- a/templates/components/cart/content.html +++ b/templates/components/cart/content.html @@ -25,7 +25,42 @@ {{name}}
    - +
    @@ -62,10 +97,7 @@ {{lang 'products.quantity_decrease' name=name}} - - - - + {{/if}} {{lang 'products.quantity_increase' name=name}} - - - - - + {{/if}}
    -
    +
    {{#or ../customer (unless ../settings.hide_price_from_guests) (if type '==' 'GiftCertificate')}} {{total.formatted}} @@ -122,9 +150,7 @@ data-confirm-delete="{{lang 'cart.confirm_delete'}}" aria-label="{{lang 'cart.remove_item' name=name}}" > - - - + {{/or}}
    diff --git a/templates/pages/cart.html b/templates/pages/cart.html index 897be2531..b9225dc15 100644 --- a/templates/pages/cart.html +++ b/templates/pages/cart.html @@ -23,7 +23,7 @@

    {{lang 'cart.title'}}

    {{> components/cart/content}}
    -
    +
    {{> components/cart/totals}}
    From ba1c6dccc48e8717a726e0023d94c0783849342c Mon Sep 17 00:00:00 2001 From: martibelegu Date: Wed, 13 Mar 2024 11:59:09 +0100 Subject: [PATCH 5/6] rebase fixes --- assets/scss/components/_components.scss | 3 +-- assets/scss/pages/pages.scss | 3 --- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/assets/scss/components/_components.scss b/assets/scss/components/_components.scss index acf43ae3f..af9a0f220 100644 --- a/assets/scss/components/_components.scss +++ b/assets/scss/components/_components.scss @@ -43,9 +43,8 @@ @import 'cta-panel'; @import 'product-compare'; @import 'blog'; -@import 'cart-content'; @import 'cart'; @import 'totals'; @import 'shipping-estimator'; @import 'coupon-form'; -@import 'order-total'; \ No newline at end of file +@import 'order-total'; diff --git a/assets/scss/pages/pages.scss b/assets/scss/pages/pages.scss index ee8f3e965..7f9060b95 100644 --- a/assets/scss/pages/pages.scss +++ b/assets/scss/pages/pages.scss @@ -3,6 +3,3 @@ @import './login'; @import './create-account'; @import './forgot-password'; -@import './page'; -@import './blog'; -@import './product'; From fc3a1e82ab62145b01f34730dfdcac9c64e08e54 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Wed, 13 Mar 2024 13:56:25 +0100 Subject: [PATCH 6/6] Star component --- assets/icons/star-filled.svg | 1 + assets/icons/star-unfilled.svg | 1 + assets/img/icon-sprite.svg | 4 +++ assets/scss/components/_cart.scss | 8 ++++- assets/scss/components/_components.scss | 1 + assets/scss/components/_star.scss | 5 ++++ assets/scss/components/_totals.scss | 6 ---- templates/components/cart/content.html | 40 +++++++------------------ templates/components/common/star.html | 9 ++++++ templates/pages/cart.html | 2 +- 10 files changed, 39 insertions(+), 38 deletions(-) create mode 100644 assets/icons/star-filled.svg create mode 100644 assets/icons/star-unfilled.svg create mode 100644 assets/scss/components/_star.scss create mode 100644 templates/components/common/star.html diff --git a/assets/icons/star-filled.svg b/assets/icons/star-filled.svg new file mode 100644 index 000000000..06dba74d4 --- /dev/null +++ b/assets/icons/star-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/star-unfilled.svg b/assets/icons/star-unfilled.svg new file mode 100644 index 000000000..271f39a5a --- /dev/null +++ b/assets/icons/star-unfilled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/icon-sprite.svg b/assets/img/icon-sprite.svg index 9dcadbdc0..c043e003b 100644 --- a/assets/img/icon-sprite.svg +++ b/assets/img/icon-sprite.svg @@ -95,6 +95,10 @@ + + + + diff --git a/assets/scss/components/_cart.scss b/assets/scss/components/_cart.scss index c3d0ae20d..fcbd6ca52 100644 --- a/assets/scss/components/_cart.scss +++ b/assets/scss/components/_cart.scss @@ -1,3 +1,9 @@ +.c-cart__totals { + display: flex; + flex-direction: column; + align-items: flex-end; +} + .c-cart__content { margin-bottom: rem-calc(24px); } @@ -169,4 +175,4 @@ .c-cart__icon { max-width: rem-calc(24px); -} \ No newline at end of file +} diff --git a/assets/scss/components/_components.scss b/assets/scss/components/_components.scss index af9a0f220..2f918c12c 100644 --- a/assets/scss/components/_components.scss +++ b/assets/scss/components/_components.scss @@ -48,3 +48,4 @@ @import 'shipping-estimator'; @import 'coupon-form'; @import 'order-total'; +@import 'star'; diff --git a/assets/scss/components/_star.scss b/assets/scss/components/_star.scss new file mode 100644 index 000000000..3c924c27b --- /dev/null +++ b/assets/scss/components/_star.scss @@ -0,0 +1,5 @@ +.c-star { + max-width: rem-calc(12px); + max-height: rem-calc(12px); + fill: transparent; +} diff --git a/assets/scss/components/_totals.scss b/assets/scss/components/_totals.scss index c095540a6..6bb573ce1 100644 --- a/assets/scss/components/_totals.scss +++ b/assets/scss/components/_totals.scss @@ -1,9 +1,3 @@ -.c-totals { - display: flex; - flex-direction: column; - align-items: flex-end; -} - .c-totals__subtotal { display: flex; justify-content: flex-end; diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html index 42a9bbbbb..5d1a232da 100644 --- a/templates/components/cart/content.html +++ b/templates/components/cart/content.html @@ -27,38 +27,18 @@
    diff --git a/templates/components/common/star.html b/templates/components/common/star.html new file mode 100644 index 000000000..0c7df5f61 --- /dev/null +++ b/templates/components/common/star.html @@ -0,0 +1,9 @@ +{{#if status '===' 'filled'}} + + + +{{else}} + + + +{{/if}} \ No newline at end of file diff --git a/templates/pages/cart.html b/templates/pages/cart.html index b9225dc15..dc7a6e1d2 100644 --- a/templates/pages/cart.html +++ b/templates/pages/cart.html @@ -23,7 +23,7 @@

    {{lang 'cart.title'}}

    {{> components/cart/content}}
    -
    +
    {{> components/cart/totals}}