From b641341e03085a88d4082826e58af3605811c590 Mon Sep 17 00:00:00 2001 From: jamyoucn00 <114928221+jamyoucn00@users.noreply.github.com> Date: Wed, 21 Dec 2022 11:27:00 +0100 Subject: [PATCH 01/11] update the script --- assets/cart.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/assets/cart.js b/assets/cart.js index 4b0ed5ad..6ef649c2 100644 --- a/assets/cart.js +++ b/assets/cart.js @@ -92,23 +92,44 @@ async function removeItem(cartItemId, productVariantId) { } function moveQuantityWrapper() { + const cartItemsTable = document.querySelector('.cart-items-table'); + const cartItemsTableWidth = cartItemsTable ? cartItemsTable.offsetWidth : 0; + + const mobileBreakpoint = 768; + const quantityWrapper = document.querySelector('.quantity-wrapper'); const quantityOnDesktop = document.querySelector('.quantity-on-desktop'); const quantityOnMobile = document.querySelector('.quantity-on-mobile'); - if (window.innerWidth > 768) { + if (window.innerWidth > mobileBreakpoint || cartItemsTableWidth > 500) { quantityOnDesktop.appendChild(quantityWrapper); if (quantityOnMobile.contains(quantityWrapper)) { quantityOnMobile.removeChild(quantityWrapper); } + + if (cartItemsTable.classList.contains('mobile')) { + cartItemsTable.classList.remove('mobile'); + } + + if (!cartItemsTable.classList.contains('desktop')) { + cartItemsTable.classList.add('desktop'); + } } - if (window.innerWidth < 768) { + if (window.innerWidth < mobileBreakpoint || cartItemsTableWidth < 500) { quantityOnMobile.appendChild(quantityWrapper); if (quantityOnDesktop.contains(quantityWrapper)) { quantityOnDesktop.removeChild(quantityWrapper); } + + if (!cartItemsTable.classList.contains('mobile')) { + cartItemsTable.classList.add('mobile'); + } + + if (cartItemsTable.classList.contains('desktop')) { + cartItemsTable.classList.remove('desktop'); + } } } From 1367f45a1f7d3e9a7cd3b237f3d740776b8fa1b7 Mon Sep 17 00:00:00 2001 From: jamyoucn00 <114928221+jamyoucn00@users.noreply.github.com> Date: Wed, 21 Dec 2022 11:27:10 +0100 Subject: [PATCH 02/11] update styles --- assets/cart.css | 21 ++++++++++++++++++ assets/utils.css | 55 +++++++++++++++++++++++------------------------- styles/cart.scss | 35 ++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 29 deletions(-) diff --git a/assets/cart.css b/assets/cart.css index 3a68dbbf..42d2f891 100644 --- a/assets/cart.css +++ b/assets/cart.css @@ -9,6 +9,27 @@ max-width: 100%; min-width: 22rem; } +.yc-cart .cart-items-table .quantity-head, +.yc-cart .cart-items-table .quantity-on-desktop { + display: none; +} +.yc-cart .cart-items-table .quantity-on-mobile { + display: table-cell; +} +@media (min-width: 768px) { + .yc-cart .cart-items-table .quantity-on-desktop { + display: table-cell; + } + .yc-cart .cart-items-table .quantity-head { + display: block; + } +} +.yc-cart .cart-items-table.mobile .quantity-head { + display: none; +} +.yc-cart .cart-items-table.desktop .quantity-head { + display: block; +} .yc-cart .cart-table th { text-align: start; } diff --git a/assets/utils.css b/assets/utils.css index 0825d165..a1b5ba8f 100644 --- a/assets/utils.css +++ b/assets/utils.css @@ -264,18 +264,14 @@ video { margin-top: 0.25rem; } -.mt-7 { - margin-top: 1.75rem; +.mb-7 { + margin-bottom: 1.75rem; } .mt-5 { margin-top: 1.25rem; } -.mb-7 { - margin-bottom: 1.75rem; -} - .mt-24 { margin-top: 6rem; } @@ -284,6 +280,10 @@ video { margin-top: -0.25rem; } +.mt-7 { + margin-top: 1.75rem; +} + .mt-8 { margin-top: 2rem; } @@ -312,19 +312,24 @@ video { height: 100%; } -.h-9 { - height: 2.25rem; -} - .h-fit { height: -moz-fit-content; height: fit-content; } +.h-9 { + height: 2.25rem; +} + .w-full { width: 100%; } +.w-fit { + width: -moz-fit-content; + width: fit-content; +} + .w-9 { width: 2.25rem; } @@ -333,11 +338,6 @@ video { width: 6rem; } -.w-fit { - width: -moz-fit-content; - width: fit-content; -} - .table-auto { table-layout: auto; } @@ -370,18 +370,14 @@ video { gap: 3.5rem; } -.gap-6 { - gap: 1.5rem; +.gap-1 { + gap: 0.25rem; } .gap-3 { gap: 0.75rem; } -.gap-1 { - gap: 0.25rem; -} - .gap-2 { gap: 0.5rem; } @@ -390,6 +386,10 @@ video { gap: 2.5rem; } +.gap-6 { + gap: 1.5rem; +} + .self-baseline { align-self: baseline; } @@ -450,11 +450,6 @@ video { line-height: 2.5rem; } -.text-base { - font-size: 1rem; - line-height: 1.5rem; -} - .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -480,6 +475,11 @@ video { line-height: 1.75rem; } +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + .capitalize { text-transform: capitalize; } @@ -496,9 +496,6 @@ video { .md\:block { display: block; } - .md\:table-cell { - display: table-cell; - } .md\:hidden { display: none; } diff --git a/styles/cart.scss b/styles/cart.scss index d3dd7eb9..d023635f 100644 --- a/styles/cart.scss +++ b/styles/cart.scss @@ -1,3 +1,5 @@ +@import 'helpers/mixins'; + .yc-cart { margin: 4rem 0 2rem; @@ -13,6 +15,39 @@ min-width: 22rem; } + .cart-items-table { + .quantity-head, + .quantity-on-desktop { + display: none; + } + + .quantity-on-mobile { + display: table-cell; + } + + @include breakpoint('md') { + .quantity-on-desktop { + display: table-cell; + } + + .quantity-head { + display: block; + } + } + + &.mobile { + .quantity-head { + display: none; + } + } + + &.desktop { + .quantity-head { + display: block; + } + } + } + .cart-table { th { text-align: start; From 1cada31fcff3f7ad9a6c51c109d84a7c412f7202 Mon Sep 17 00:00:00 2001 From: jamyoucn00 <114928221+jamyoucn00@users.noreply.github.com> Date: Wed, 21 Dec 2022 11:27:21 +0100 Subject: [PATCH 03/11] update liquid --- sections/main-cart.liquid | 69 +---------------------------------- snippets/cart-table.liquid | 73 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 68 deletions(-) create mode 100644 snippets/cart-table.liquid diff --git a/sections/main-cart.liquid b/sections/main-cart.liquid index 17d85172..e9cfc24e 100644 --- a/sections/main-cart.liquid +++ b/sections/main-cart.liquid @@ -9,74 +9,7 @@ {{ 'cart.items_count' | t }}

-
- - - - - - - - - - {%- for item in cart.items %} - - - - - - {%- endfor %} - -
{{ 'cart.items.total' | t }}
- -
- product-name -
-
- {{ item.name }} -
-
{{ item.price | money }}
-
- -
- 		{{ item.price | times: item.quantity | money }}
- - - {{ 'cart.continue_shopping_cta' | t }} - -
+ {%- render 'cart-table', cart: cart -%}

{{ 'cart.summary.title' | t }}

diff --git a/snippets/cart-table.liquid b/snippets/cart-table.liquid new file mode 100644 index 00000000..fbd131f1 --- /dev/null +++ b/snippets/cart-table.liquid @@ -0,0 +1,73 @@ + +
+ + + + + + + + + + {%- for item in cart.items %} + + + + + + {%- endfor %} + +
+ {{ 'cart.items.quantity' | t }} + {{ 'cart.items.total' | t }}
+ +
+ product-name +
+
+ {{ item.name }} +
+
{{ item.price | money }}
+
+ +
+ 		+ {%- render 'quantity-input', item: item -%} + {{ item.price | times: item.quantity | money }}
+ + + {{ 'cart.continue_shopping_cta' | t }} + +
From 21de7b8f86d46c0d912b531a3f08a31f4960cd50 Mon Sep 17 00:00:00 2001 From: jamyoucn00 <114928221+jamyoucn00@users.noreply.github.com> Date: Wed, 21 Dec 2022 11:57:21 +0100 Subject: [PATCH 04/11] create independent style and script for the cart table --- assets/cart-table.css | 87 ++++++++++++++++++++++++++++++ assets/cart-table.js | 119 +++++++++++++++++++++++++++++++++++++++++ styles/cart-table.scss | 109 +++++++++++++++++++++++++++++++++++++ 3 files changed, 315 insertions(+) create mode 100644 assets/cart-table.css create mode 100644 assets/cart-table.js create mode 100644 styles/cart-table.scss diff --git a/assets/cart-table.css b/assets/cart-table.css new file mode 100644 index 00000000..8c83d845 --- /dev/null +++ b/assets/cart-table.css @@ -0,0 +1,87 @@ +.cart-items-table { + margin-top: 17px; +} +.cart-items-table th { + text-align: start; +} +.cart-items-table thead { + border-bottom: 1px solid #eaeaea; +} +.cart-items-table thead th { + padding: 1rem 0; + font-size: 0.9rem; + font-weight: 400 !important; +} +.cart-items-table tbody td { + vertical-align: top; + padding-top: 1.5rem; +} +.cart-items-table tbody .cart-item-loader-spinner { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 8; +} +.cart-items-table tbody .cart-item-loader-spinner.hidden { + display: none !important; +} +.cart-items-table .quantity-head, +.cart-items-table .quantity-on-desktop { + display: none; +} +.cart-items-table .quantity-on-mobile { + display: table-cell; +} +@media (min-width: 768px) { + .cart-items-table .quantity-on-desktop { + display: table-cell; + } + .cart-items-table .quantity-head { + display: block; + } +} +.cart-items-table.mobile .quantity-head { + display: none; +} +.cart-items-table.desktop .quantity-head { + display: block; +} +.cart-items-table .quantity-wrapper { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.11); + width: fit-content; + border: 1px solid var(--yc-primary-color); + display: flex; + align-items: center; +} +.cart-items-table .quantity-wrapper button { + width: 37px !important; + min-width: 37px !important; + max-width: 37px !important; + height: 37px !important; + min-height: 37px !important; + max-height: 37px !important; +} +.cart-items-table .quantity-wrapper input { + width: 37px !important; + min-width: 37px !important; + max-width: 37px !important; + height: 37px !important; + min-height: 37px !important; + max-height: 37px !important; + box-shadow: none !important; + border: 1px solid var(--yc-primary-color) !important; + border-top: none !important; + border-bottom: none !important; + margin: 0 !important; + padding: 0 !important; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} diff --git a/assets/cart-table.js b/assets/cart-table.js new file mode 100644 index 00000000..48903d26 --- /dev/null +++ b/assets/cart-table.js @@ -0,0 +1,119 @@ +function updateDOM(cartItemId, productVariantId, quantity) { + const inputHolder = document.getElementById(cartItemId); + const input = inputHolder.querySelector(`input[id="${productVariantId}"]`); + input.value = quantity; + const decrease = input.previousElementSibling; + const increase = input.nextElementSibling; + + decrease + .querySelector('button') + .setAttribute('onclick', `decreaseQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) - 1}')`); + increase + .querySelector('button') + .setAttribute('onclick', `increaseQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) + 1}')`); +} + +async function updateQuantity(cartItemId, productVariantId, quantity) { + load(`#loading__${cartItemId}`); + try { + await youcanjs.cart.updateItem({ cartItemId, productVariantId, quantity }); + } catch (e) { + notify(e.message, 'error'); + } finally { + stopLoad(`#loading__${cartItemId}`); + } + updateDOM(cartItemId, productVariantId, quantity); +} + +async function updateOnchange(cartItemId, productVariantId) { + const inputHolder = document.getElementById(cartItemId); + const input = inputHolder.querySelector(`input[id="${productVariantId}"]`); + const quantity = input.value; + + await updateQuantity(cartItemId, productVariantId, quantity); + updateDOM(cartItemId, productVariantId, quantity); +} + +async function decreaseQuantity(cartItemId, productVariantId, quantity) { + if (quantity < 1) { + return; + } + await updateQuantity(cartItemId, productVariantId, quantity); +} + +async function increaseQuantity(cartItemId, productVariantId, quantity) { + await updateQuantity(cartItemId, productVariantId, quantity); +} + +async function removeItem(cartItemId, productVariantId) { + load(`#loading__${cartItemId}`); + try { + await youcanjs.cart.removeItem({ cartItemId, productVariantId }); + document.getElementById(cartItemId).remove(); + + const cartItemsBadge = document.getElementById('cart-items-badge'); + + const cartItems = document.querySelectorAll('.cart__item'); + + if (cartItemsBadge) { + cartItemsBadge.innerText = parseInt(cartItemsBadge.innerText) + 1; + } + + if (cartItems.length === 0) { + if (cartItemsBadge) { + cartItemsBadge.innerText = 0; + } + document.querySelector('.cart-table').remove(); + document.querySelector('.empty-cart').classList.remove('hidden'); + } + } catch (e) { + notify(e.message, 'error'); + } finally { + stopLoad(`#loading__${cartItemId}`); + } +} + +function moveQuantityWrapper() { + const cartItemsTable = document.querySelector('.cart-items-table'); + const cartItemsTableWidth = cartItemsTable ? cartItemsTable.offsetWidth : 0; + + const mobileBreakpoint = 768; + + const quantityWrapper = document.querySelector('.quantity-wrapper'); + const quantityOnDesktop = document.querySelector('.quantity-on-desktop'); + const quantityOnMobile = document.querySelector('.quantity-on-mobile'); + + if (window.innerWidth > mobileBreakpoint || cartItemsTableWidth > 500) { + quantityOnDesktop.appendChild(quantityWrapper); + + if (quantityOnMobile.contains(quantityWrapper)) { + quantityOnMobile.removeChild(quantityWrapper); + } + + if (cartItemsTable.classList.contains('mobile')) { + cartItemsTable.classList.remove('mobile'); + } + + if (!cartItemsTable.classList.contains('desktop')) { + cartItemsTable.classList.add('desktop'); + } + } + if (window.innerWidth < mobileBreakpoint || cartItemsTableWidth < 500) { + quantityOnMobile.appendChild(quantityWrapper); + + if (quantityOnDesktop.contains(quantityWrapper)) { + quantityOnDesktop.removeChild(quantityWrapper); + } + + if (!cartItemsTable.classList.contains('mobile')) { + cartItemsTable.classList.add('mobile'); + } + + if (cartItemsTable.classList.contains('desktop')) { + cartItemsTable.classList.remove('desktop'); + } + } +} + +moveQuantityWrapper(); +window.addEventListener('resize', moveQuantityWrapper); diff --git a/styles/cart-table.scss b/styles/cart-table.scss new file mode 100644 index 00000000..4cfa8894 --- /dev/null +++ b/styles/cart-table.scss @@ -0,0 +1,109 @@ +@import 'helpers/mixins'; + +.cart-items-table { + margin-top: 17px; + + th { + text-align: start; + } + + thead { + border-bottom: 1px solid #eaeaea; + th { + padding: 1rem 0; + font-size: 0.9rem; + font-weight: 400 !important; + } + } + + tbody { + td { + vertical-align: top; + padding-top: 1.5rem; + } + + .cart-item-loader-spinner { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 8; + + &.hidden { + display: none !important; + } + } + } + + .quantity-head, + .quantity-on-desktop { + display: none; + } + + .quantity-on-mobile { + display: table-cell; + } + + @include breakpoint('md') { + .quantity-on-desktop { + display: table-cell; + } + + .quantity-head { + display: block; + } + } + + &.mobile { + .quantity-head { + display: none; + } + } + + &.desktop { + .quantity-head { + display: block; + } + } + + .quantity-wrapper { + box-shadow: 0 2px 4px rgb(0 0 0 / 11%); + width: fit-content; + border: 1px solid var(--yc-primary-color); + display: flex; + align-items: center; + + button { + width: 37px !important; + min-width: 37px !important; + max-width: 37px !important; + height: 37px !important; + min-height: 37px !important; + max-height: 37px !important; + } + + input { + width: 37px !important; + min-width: 37px !important; + max-width: 37px !important; + height: 37px !important; + min-height: 37px !important; + max-height: 37px !important; + box-shadow: none !important; + border: 1px solid var(--yc-primary-color) !important; + border-top: none !important; + border-bottom: none !important; + margin: 0 !important; + padding: 0 !important; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + } + } +} From 9dd0fd8d9b4fe4807d6786788777e3dded66923e Mon Sep 17 00:00:00 2001 From: jamyoucn00 <114928221+jamyoucn00@users.noreply.github.com> Date: Wed, 21 Dec 2022 11:58:02 +0100 Subject: [PATCH 05/11] remove cart table logic from the cart assets --- assets/cart.css | 87 ---------------------------------- assets/cart.js | 120 ----------------------------------------------- styles/cart.scss | 112 ------------------------------------------- 3 files changed, 319 deletions(-) diff --git a/assets/cart.css b/assets/cart.css index 42d2f891..78dddbc9 100644 --- a/assets/cart.css +++ b/assets/cart.css @@ -9,90 +9,3 @@ max-width: 100%; min-width: 22rem; } -.yc-cart .cart-items-table .quantity-head, -.yc-cart .cart-items-table .quantity-on-desktop { - display: none; -} -.yc-cart .cart-items-table .quantity-on-mobile { - display: table-cell; -} -@media (min-width: 768px) { - .yc-cart .cart-items-table .quantity-on-desktop { - display: table-cell; - } - .yc-cart .cart-items-table .quantity-head { - display: block; - } -} -.yc-cart .cart-items-table.mobile .quantity-head { - display: none; -} -.yc-cart .cart-items-table.desktop .quantity-head { - display: block; -} -.yc-cart .cart-table th { - text-align: start; -} -.yc-cart .cart-table thead { - border-bottom: 1px solid #eaeaea; -} -.yc-cart .cart-table thead th { - padding: 1rem 0; - font-size: 0.9rem; - font-weight: 400 !important; -} -.yc-cart .cart-table tbody td { - vertical-align: top; - padding-top: 1.5rem; -} -.yc-cart .cart-table tbody .cart-item-loader-spinner { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.8); - display: flex; - justify-content: center; - align-items: center; - z-index: 8; -} -.yc-cart .cart-table tbody .cart-item-loader-spinner.hidden { - display: none !important; -} -.yc-cart table { - margin-top: 17px; -} -.yc-cart .quantity-wrapper { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.11); - width: fit-content; - border: 1px solid var(--yc-primary-color); - display: flex; - align-items: center; -} -.yc-cart .quantity-wrapper button { - width: 37px !important; - min-width: 37px !important; - max-width: 37px !important; - height: 37px !important; - min-height: 37px !important; - max-height: 37px !important; -} -.yc-cart .quantity-wrapper input { - width: 37px !important; - min-width: 37px !important; - max-width: 37px !important; - height: 37px !important; - min-height: 37px !important; - max-height: 37px !important; - box-shadow: none !important; - border: 1px solid var(--yc-primary-color) !important; - border-top: none !important; - border-bottom: none !important; - margin: 0 !important; - padding: 0 !important; - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} diff --git a/assets/cart.js b/assets/cart.js index 6ef649c2..77bcc0ae 100644 --- a/assets/cart.js +++ b/assets/cart.js @@ -15,123 +15,3 @@ async function addPromo(e) { stopLoad('#loading__coupon'); } } - -function updateDOM(cartItemId, productVariantId, quantity) { - const inputHolder = document.getElementById(cartItemId); - const input = inputHolder.querySelector(`input[id="${productVariantId}"]`); - input.value = quantity; - const decrease = input.previousElementSibling; - const increase = input.nextElementSibling; - - decrease - .querySelector('button') - .setAttribute('onclick', `decreaseQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) - 1}')`); - increase - .querySelector('button') - .setAttribute('onclick', `increaseQuantity('${cartItemId}', '${productVariantId}', '${Number(quantity) + 1}')`); -} - -async function updateQuantity(cartItemId, productVariantId, quantity) { - load(`#loading__${cartItemId}`); - try { - await youcanjs.cart.updateItem({ cartItemId, productVariantId, quantity }); - } catch (e) { - notify(e.message, 'error'); - } finally { - stopLoad(`#loading__${cartItemId}`); - } - updateDOM(cartItemId, productVariantId, quantity); -} - -async function updateOnchange(cartItemId, productVariantId) { - const inputHolder = document.getElementById(cartItemId); - const input = inputHolder.querySelector(`input[id="${productVariantId}"]`); - const quantity = input.value; - - await updateQuantity(cartItemId, productVariantId, quantity); - updateDOM(cartItemId, productVariantId, quantity); -} - -async function decreaseQuantity(cartItemId, productVariantId, quantity) { - if (quantity < 1) { - return; - } - await updateQuantity(cartItemId, productVariantId, quantity); -} - -async function increaseQuantity(cartItemId, productVariantId, quantity) { - await updateQuantity(cartItemId, productVariantId, quantity); -} - -async function removeItem(cartItemId, productVariantId) { - load(`#loading__${cartItemId}`); - try { - await youcanjs.cart.removeItem({ cartItemId, productVariantId }); - document.getElementById(cartItemId).remove(); - - const cartItemsBadge = document.getElementById('cart-items-badge'); - - const cartItems = document.querySelectorAll('.cart__item'); - - if (cartItemsBadge) { - cartItemsBadge.innerText = parseInt(cartItemsBadge.innerText) + 1; - } - - if (cartItems.length === 0) { - if (cartItemsBadge) { - cartItemsBadge.innerText = 0; - } - document.querySelector('.cart-table').remove(); - document.querySelector('.empty-cart').classList.remove('hidden'); - } - } catch (e) { - notify(e.message, 'error'); - } finally { - stopLoad(`#loading__${cartItemId}`); - } -} - -function moveQuantityWrapper() { - const cartItemsTable = document.querySelector('.cart-items-table'); - const cartItemsTableWidth = cartItemsTable ? cartItemsTable.offsetWidth : 0; - - const mobileBreakpoint = 768; - - const quantityWrapper = document.querySelector('.quantity-wrapper'); - const quantityOnDesktop = document.querySelector('.quantity-on-desktop'); - const quantityOnMobile = document.querySelector('.quantity-on-mobile'); - - if (window.innerWidth > mobileBreakpoint || cartItemsTableWidth > 500) { - quantityOnDesktop.appendChild(quantityWrapper); - - if (quantityOnMobile.contains(quantityWrapper)) { - quantityOnMobile.removeChild(quantityWrapper); - } - - if (cartItemsTable.classList.contains('mobile')) { - cartItemsTable.classList.remove('mobile'); - } - - if (!cartItemsTable.classList.contains('desktop')) { - cartItemsTable.classList.add('desktop'); - } - } - if (window.innerWidth < mobileBreakpoint || cartItemsTableWidth < 500) { - quantityOnMobile.appendChild(quantityWrapper); - - if (quantityOnDesktop.contains(quantityWrapper)) { - quantityOnDesktop.removeChild(quantityWrapper); - } - - if (!cartItemsTable.classList.contains('mobile')) { - cartItemsTable.classList.add('mobile'); - } - - if (cartItemsTable.classList.contains('desktop')) { - cartItemsTable.classList.remove('desktop'); - } - } -} - -moveQuantityWrapper(); -window.addEventListener('resize', moveQuantityWrapper); diff --git a/styles/cart.scss b/styles/cart.scss index d023635f..f73b8bfa 100644 --- a/styles/cart.scss +++ b/styles/cart.scss @@ -14,116 +14,4 @@ max-width: 100%; min-width: 22rem; } - - .cart-items-table { - .quantity-head, - .quantity-on-desktop { - display: none; - } - - .quantity-on-mobile { - display: table-cell; - } - - @include breakpoint('md') { - .quantity-on-desktop { - display: table-cell; - } - - .quantity-head { - display: block; - } - } - - &.mobile { - .quantity-head { - display: none; - } - } - - &.desktop { - .quantity-head { - display: block; - } - } - } - - .cart-table { - th { - text-align: start; - } - - thead { - border-bottom: 1px solid #eaeaea; - th { - padding: 1rem 0; - font-size: 0.9rem; - font-weight: 400 !important; - } - } - - tbody { - td { - vertical-align: top; - padding-top: 1.5rem; - } - - .cart-item-loader-spinner { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.8); - display: flex; - justify-content: center; - align-items: center; - z-index: 8; - - &.hidden { - display: none !important; - } - } - } - } - - table { - margin-top: 17px; - } - - .quantity-wrapper { - box-shadow: 0 2px 4px rgb(0 0 0 / 11%); - width: fit-content; - border: 1px solid var(--yc-primary-color); - display: flex; - align-items: center; - - button { - width: 37px !important; - min-width: 37px !important; - max-width: 37px !important; - height: 37px !important; - min-height: 37px !important; - max-height: 37px !important; - } - - input { - width: 37px !important; - min-width: 37px !important; - max-width: 37px !important; - height: 37px !important; - min-height: 37px !important; - max-height: 37px !important; - box-shadow: none !important; - border: 1px solid var(--yc-primary-color) !important; - border-top: none !important; - border-bottom: none !important; - margin: 0 !important; - padding: 0 !important; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - } - } } From 03392e327fed7ff7ae2c75aa30258a12d1b5c884 Mon Sep 17 00:00:00 2001 From: jamyoucn00 <114928221+jamyoucn00@users.noreply.github.com> Date: Wed, 21 Dec 2022 11:59:35 +0100 Subject: [PATCH 06/11] update cart section and cart-table snippet --- sections/main-cart.liquid | 16 ++++- snippets/cart-table.liquid | 129 +++++++++++++++++-------------------- 2 files changed, 73 insertions(+), 72 deletions(-) diff --git a/sections/main-cart.liquid b/sections/main-cart.liquid index e9cfc24e..fbc3eff6 100644 --- a/sections/main-cart.liquid +++ b/sections/main-cart.liquid @@ -1,4 +1,5 @@ {{ 'cart.css' | asset_url | stylesheet_tag }} +{{ 'cart-table.css' | asset_url | stylesheet_tag }}
{%- if cart and cart.items %} @@ -9,7 +10,19 @@ {{ 'cart.items_count' | t }}

- {%- render 'cart-table', cart: cart -%} +
+ {%- render 'cart-table', cart: cart -%} + + + {{ 'cart.continue_shopping_cta' | t }} + +

{{ 'cart.summary.title' | t }}

@@ -84,6 +97,7 @@
{{ 'cart.js' | asset_url | script_tag_deferred }} +{{ 'cart-table.js' | asset_url | script_tag_deferred }} {% schema %} { diff --git a/snippets/cart-table.liquid b/snippets/cart-table.liquid index fbd131f1..7556baef 100644 --- a/snippets/cart-table.liquid +++ b/snippets/cart-table.liquid @@ -1,73 +1,60 @@ - -
- - - - - - - - - - {%- for item in cart.items %} - - + + + + {%- endfor %} + +
- {{ 'cart.items.quantity' | t }} - {{ 'cart.items.total' | t }}
- + + {{ 'cart.items.remove_cta' | t }} + + + + {%- render 'quantity-input', item: item -%} + {{ item.price | times: item.quantity | money }}
+ +{{ 'cart-table.js' | asset_url | script_tag_deferred }} From 2987076e8dc375ed96e167a7f4b4d0730ee8a42a Mon Sep 17 00:00:00 2001 From: jamyoucn00 <114928221+jamyoucn00@users.noreply.github.com> Date: Wed, 21 Dec 2022 12:04:44 +0100 Subject: [PATCH 07/11] remove unused styles --- assets/utils.css | 19 ++++++++----------- sections/main-cart.liquid | 2 +- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/assets/utils.css b/assets/utils.css index a1b5ba8f..39dd3889 100644 --- a/assets/utils.css +++ b/assets/utils.css @@ -264,14 +264,14 @@ video { margin-top: 0.25rem; } -.mb-7 { - margin-bottom: 1.75rem; -} - .mt-5 { margin-top: 1.25rem; } +.mb-7 { + margin-bottom: 1.75rem; +} + .mt-24 { margin-top: 6rem; } @@ -370,6 +370,10 @@ video { gap: 3.5rem; } +.gap-2 { + gap: 0.5rem; +} + .gap-1 { gap: 0.25rem; } @@ -378,10 +382,6 @@ video { gap: 0.75rem; } -.gap-2 { - gap: 0.5rem; -} - .gap-10 { gap: 2.5rem; } @@ -493,9 +493,6 @@ video { } @media (min-width: 768px) { - .md\:block { - display: block; - } .md\:hidden { display: none; } diff --git a/sections/main-cart.liquid b/sections/main-cart.liquid index fbc3eff6..ed31445e 100644 --- a/sections/main-cart.liquid +++ b/sections/main-cart.liquid @@ -10,7 +10,7 @@ {{ 'cart.items_count' | t }}

-
+
{%- render 'cart-table', cart: cart -%} Date: Wed, 21 Dec 2022 15:27:55 +0100 Subject: [PATCH 08/11] update functionality --- assets/cart-drawer.css | 4 ++++ assets/main.js | 12 ++++++++++-- assets/navbar.css | 1 - config/settings_schema.json | 2 +- layouts/theme.liquid | 1 + sections/main-navbar.liquid | 7 ++++--- snippets/cart-drawer.liquid | 5 +++++ snippets/cart-table.liquid | 3 ++- styles/cart-drawer.scss | 6 ++++++ styles/navbar.scss | 1 - 10 files changed, 33 insertions(+), 9 deletions(-) create mode 100644 assets/cart-drawer.css create mode 100644 snippets/cart-drawer.liquid create mode 100644 styles/cart-drawer.scss diff --git a/assets/cart-drawer.css b/assets/cart-drawer.css new file mode 100644 index 00000000..584c1dd4 --- /dev/null +++ b/assets/cart-drawer.css @@ -0,0 +1,4 @@ +.cart-drawer, +.cart-drawer *:not(.yc-btn):not(ion-icon) { + color: var(--yc-primary-color) !important; +} diff --git a/assets/main.js b/assets/main.js index 54d4a47c..253825d8 100644 --- a/assets/main.js +++ b/assets/main.js @@ -78,25 +78,33 @@ function notify(msg, type = 'success', timeout = 3000) { /* ----- navigation-drawer ----- */ /* ----------------------------- */ const overlay = document.querySelector('.global-overlay'); -const drawer = document.querySelector('.navigation-drawer'); +const drawers = document.querySelectorAll('.navigation-drawer'); if (overlay) { overlay.addEventListener('click', function (e) { if (e.target === overlay) { overlay.style.visibility = 'hidden'; overlay.style.opacity = '0'; - drawer.style.transform = 'translateX(-150vw)'; + + drawers.forEach((drawer) => { + drawer.style.transform = 'translateX(-150vw)'; + drawer.style.opacity = '0'; + drawer.style.visibility = 'hidden'; + }); } }); } function openDrawer(el) { const targetedDrawer = document.querySelector(`.navigation-drawer${el}`); + if (targetedDrawer) { overlay.style.visibility = 'visible'; overlay.style.opacity = '1'; + targetedDrawer.style.transform = 'none'; targetedDrawer.style.opacity = '1'; + targetedDrawer.style.visibility = 'visible'; } } diff --git a/assets/navbar.css b/assets/navbar.css index fc0e9182..87628661 100644 --- a/assets/navbar.css +++ b/assets/navbar.css @@ -178,7 +178,6 @@ .navigation-drawer { background-color: var(--yc-drawer-background); transition-duration: 0.2s; - transition-property: opacity, transform; transform: translateX(-150vw); position: fixed; left: 0; diff --git a/config/settings_schema.json b/config/settings_schema.json index 973f68e7..dd4a0f33 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -731,7 +731,7 @@ "label": "Bottom left" } ], - "default": "top-right" + "default": "bottom-left" }, { "type": "range", diff --git a/layouts/theme.liquid b/layouts/theme.liquid index c393f963..7cf6bca2 100644 --- a/layouts/theme.liquid +++ b/layouts/theme.liquid @@ -13,6 +13,7 @@ {%- render 'overlay' -%} {%- render 'alert' -%} + {%- render 'cart-drawer' -%} {{ content_for_layout }} diff --git a/sections/main-navbar.liquid b/sections/main-navbar.liquid index 60f5e3db..fa2d5264 100644 --- a/sections/main-navbar.liquid +++ b/sections/main-navbar.liquid @@ -56,15 +56,16 @@
- {{- cart.items | size -}} - +
diff --git a/snippets/cart-table.liquid b/snippets/cart-table.liquid index 7556baef..c9d7c815 100644 --- a/snippets/cart-table.liquid +++ b/snippets/cart-table.liquid @@ -50,8 +50,9 @@ {%- render 'quantity-input', item: item -%} +

{{ item.quantity }}

- {{ item.price | times: item.quantity | money }} + {{ item.price | times: item.quantity }} {%- endfor %} diff --git a/styles/cart-drawer.scss b/styles/cart-drawer.scss new file mode 100644 index 00000000..81a6f446 --- /dev/null +++ b/styles/cart-drawer.scss @@ -0,0 +1,6 @@ +.cart-drawer { + &, + *:not(.yc-btn):not(ion-icon) { + color: var(--yc-primary-color) !important; + } +} diff --git a/styles/navbar.scss b/styles/navbar.scss index 9b6861cd..9b3d1f8e 100644 --- a/styles/navbar.scss +++ b/styles/navbar.scss @@ -205,7 +205,6 @@ .navigation-drawer { background-color: var(--yc-drawer-background); transition-duration: 0.2s; - transition-property: opacity, transform; transform: translateX(-150vw); position: fixed; left: 0; From af8797e43effe9971fa25a989ef2da75a8b347d6 Mon Sep 17 00:00:00 2001 From: jamyoucn00 <114928221+jamyoucn00@users.noreply.github.com> Date: Thu, 22 Dec 2022 16:46:32 +0100 Subject: [PATCH 09/11] add default data --- config/settings_data.json | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/config/settings_data.json b/config/settings_data.json index cc934403..d2e98d83 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -1,14 +1,10 @@ { "current": { - "font_family": "Cairo", - "theme_direction": "ltr", - "primary_color": "#030303FF", - "navbar_logo": "xkQ9K8c7A4PKLqgcZlsMC5zcCwMxDl4B46DJhudA-2IqyMhNuxyIpY6fTgnIwkOhpR7T.png", - "navbar_background_color": "#000000FF", - "navbar_links_color": "#FFFFFFFF", - "navbar_height": 85 + "font_family": "Cairo" }, "presets": { - "Default": {} + "Default": { + "font_family": "Cairo" + } } } From 1ca811d94d59d8c424666fbddcfc2e5350d7b037 Mon Sep 17 00:00:00 2001 From: jamyoucn00 <114928221+jamyoucn00@users.noreply.github.com> Date: Mon, 26 Dec 2022 14:43:56 +0100 Subject: [PATCH 10/11] update functionality --- .gitignore | 1 + assets/add-to-cart.js | 45 +++++++++++++++++++++++++++++++++++++ assets/cart-drawer.css | 4 ++++ assets/main.js | 5 ++++- assets/navbar.css | 5 +++++ sections/product.liquid | 2 +- snippets/cart-drawer.liquid | 2 +- snippets/cart-table.liquid | 5 ++--- styles/cart-drawer.scss | 3 +++ styles/navbar.scss | 6 +++++ 10 files changed, 72 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 0783cf6a..4bc66b23 100644 --- a/.gitignore +++ b/.gitignore @@ -90,4 +90,5 @@ sw.* styles/utils.scss styles/_utils.css eyeliner.js +driver.js tailwind.config.cjs diff --git a/assets/add-to-cart.js b/assets/add-to-cart.js index 3327f5ca..0f592c5e 100644 --- a/assets/add-to-cart.js +++ b/assets/add-to-cart.js @@ -18,8 +18,11 @@ async function addToCart() { if (cart) { let cartBadgeBudge = Number(cart.innerHTML); + const newAddedItem = response.items.find((item) => item.productVariant.id === variantId); cart.innerHTML = ++cartBadgeBudge; + + addCartitemToDOM(newAddedItem); } stopLoad('#loading__checkout'); @@ -29,3 +32,45 @@ async function addToCart() { notify(err.message, 'error'); } } + +function addCartitemToDOM(cartItem) { + const cartItemsTable = document.querySelector('.cart-items-table'); + const cartItemsTableBody = cartItemsTable.querySelector('tbody'); + const cartItemsBadge = document.getElementById('cart-items-badge'); + + const cartItemTemplate = document.querySelector('.cart__item'); + const cartItemClone = cartItemTemplate.cloneNode(true); + + cartItemClone.classList.remove('hidden'); + cartItemClone.classList.remove('cart__item'); + cartItemClone.id = cartItem.id; + + const cartItemName = cartItemClone.querySelector('.cart__item-name'); + cartItemName.innerText = cartItem.productVariant.product.name; + console.log(cartItem); + cartItemName.setAttribute('href', cartItem.url); + + const cartItemPrice = cartItemClone.querySelector('.cart__item-price'); + cartItemPrice.innerText = cartItem.price; + + const quantityWrapper = cartItemClone.querySelector('.quantity-wrapper'); + quantityWrapper.innerHTML = ` +
+ +
+ +
+ +
+ `; + + cartItemsTableBody.appendChild(cartItemClone); +} diff --git a/assets/cart-drawer.css b/assets/cart-drawer.css index 584c1dd4..f5d4bde2 100644 --- a/assets/cart-drawer.css +++ b/assets/cart-drawer.css @@ -1,3 +1,7 @@ +.cart-drawer { + width: 80vw !important; + max-width: 500px !important; +} .cart-drawer, .cart-drawer *:not(.yc-btn):not(ion-icon) { color: var(--yc-primary-color) !important; diff --git a/assets/main.js b/assets/main.js index 253825d8..15b32454 100644 --- a/assets/main.js +++ b/assets/main.js @@ -87,7 +87,10 @@ if (overlay) { overlay.style.opacity = '0'; drawers.forEach((drawer) => { - drawer.style.transform = 'translateX(-150vw)'; + drawer.classList.contains('right') + ? (drawer.style.transform = 'translateX(150vw)') + : (drawer.style.transform = 'translateX(-150vw)'); + drawer.style.opacity = '0'; drawer.style.visibility = 'hidden'; }); diff --git a/assets/navbar.css b/assets/navbar.css index 87628661..2b9ee892 100644 --- a/assets/navbar.css +++ b/assets/navbar.css @@ -187,6 +187,11 @@ opacity: 0; z-index: 99; } +.navigation-drawer.right { + left: auto; + right: 0; + transform: translateX(150vw); +} .navigation-drawer .logo { padding: 3rem 1rem; } diff --git a/sections/product.liquid b/sections/product.liquid index 484e274f..0f2a2caa 100644 --- a/sections/product.liquid +++ b/sections/product.liquid @@ -163,7 +163,7 @@ "label": "Sticky button", "id": "is_sticky", "type": "checkbox", - "default": true + "default": false }, { "label": "Padding", diff --git a/snippets/cart-drawer.liquid b/snippets/cart-drawer.liquid index 7109f5be..797d6d64 100644 --- a/snippets/cart-drawer.liquid +++ b/snippets/cart-drawer.liquid @@ -1,5 +1,5 @@ {{ 'cart-drawer.css' | asset_url | stylesheet_tag }} -
+
{%- render 'cart-table', cart: cart -%}
diff --git a/snippets/cart-table.liquid b/snippets/cart-table.liquid index c9d7c815..2b686ab4 100644 --- a/snippets/cart-table.liquid +++ b/snippets/cart-table.liquid @@ -31,10 +31,10 @@ class='w-24 object-cover' >
-
+
{{ item.name }}
-
{{ item.price | money }}
+
{{ item.price | money }}
-
- -
- -
- `; + quantityWrapper.innerHTML = ` +
+ +
+ +
+ +
+ `; - cartItemsTableBody.appendChild(cartItemClone); + cartItemsTableBody.appendChild(cartItemClone); + }); } diff --git a/assets/cart-drawer.css b/assets/cart-drawer.css index f5d4bde2..ac01dc19 100644 --- a/assets/cart-drawer.css +++ b/assets/cart-drawer.css @@ -1,6 +1,7 @@ .cart-drawer { width: 80vw !important; max-width: 500px !important; + padding: 0 20px !important; } .cart-drawer, .cart-drawer *:not(.yc-btn):not(ion-icon) { diff --git a/assets/cart-table.js b/assets/cart-table.js index 48903d26..81cb0c6e 100644 --- a/assets/cart-table.js +++ b/assets/cart-table.js @@ -1,6 +1,7 @@ function updateDOM(cartItemId, productVariantId, quantity) { const inputHolder = document.getElementById(cartItemId); const input = inputHolder.querySelector(`input[id="${productVariantId}"]`); + console.log(input, productVariantId); input.value = quantity; const decrease = input.previousElementSibling; const increase = input.nextElementSibling; diff --git a/snippets/head-config.liquid b/snippets/head-config.liquid index ed13152a..ede19b6f 100644 --- a/snippets/head-config.liquid +++ b/snippets/head-config.liquid @@ -138,6 +138,11 @@ {%- endif -%} } {%- endstyle -%} + {%- if settings.favicon %}