Skip to content

Commit

Permalink
Shopping list quantity improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrlarano
jrlarano committed Jun 3, 2024
1 parent a318497 commit 45a152e
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 48 deletions.
12 changes: 8 additions & 4 deletions lib/kits/core-ui/components/common/shopping-list.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,12 +94,17 @@
display flex
flex 1
align-items center
gap 0.5rem

.sgn-shopping-list-content-heading
flex 1

.sgn-shopping-list-content-price
font-weight 500
font-size 1.2rem

.sgn-offer-product-quantity-content
display inline-block
display flex
border 1px solid rgba(0, 0, 0, 0.12)
border-radius 19.5px
overflow hidden
Expand Down Expand Up @@ -131,12 +136,11 @@
cursor pointer

.sgn-shopping-list-item-container-ticked
opacity 0.5

.sgn-shopping-list-content-heading
text-decoration line-through
color rgb(139, 140, 143)

.sgn-offer-product-quantity
opacity 0.5

.sgn__theme-dark
.sgn-shopping-popup
Expand Down
101 changes: 57 additions & 44 deletions lib/kits/core-ui/components/common/shopping-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,19 +72,7 @@ const defaultTemplateV2 = `\
</div>
<div class="sgn-menu-share">
<button class="sgn-shopping-share-list-btn sgn-hide-print">
<svg
aria-hidden="true"
class="sgn-share-icon-svg"
role="img"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
>
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="sgn-share-icon-svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M352 224H305.5c-45 0-81.5 36.5-81.5 81.5c0 22.3 10.3 34.3 19.2 40.5c6.8 4.7 12.8 12 12.8 20.3c0 9.8-8 17.8-17.8 17.8h-2.5c-2.4 0-4.8-.4-7.1-1.4C210.8 374.8 128 333.4 128 240c0-79.5 64.5-144 144-144h80V34.7C352 15.5 367.5 0 386.7 0c8.6 0 16.8 3.2 23.2 8.9L548.1 133.3c7.6 6.8 11.9 16.5 11.9 26.7s-4.3 19.9-11.9 26.7l-139 125.1c-5.9 5.3-13.5 8.2-21.4 8.2H384c-17.7 0-32-14.3-32-32V224zM80 96c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16H400c8.8 0 16-7.2 16-16V384c0-17.7 14.3-32 32-32s32 14.3 32 32v48c0 44.2-35.8 80-80 80H80c-44.2 0-80-35.8-80-80V112C0 67.8 35.8 32 80 32h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H80z"/></svg>
</button>
</div>
<div class="sgn-clearfix"></div>
Expand All @@ -94,8 +82,10 @@ const defaultTemplateV2 = `\
<li class="sgn-shopping-list-item-container" data-id="{{index}}" data-offer-product-id="{{id}}">
<div class="sgn-shopping-list-content-container">
<div class="sgn-shopping-list-content">
<div class="sgn-shopping-list-content-ticker sgn-hide-print">
<input type="checkbox" id="sgn-offer-product-id-{{id}}" name="sgn-offer-product-id-{{id}}" value="{{index}}" checked="true" class="sgn-shopping-list-content-ticker-box"/>
</div>
<div class="sgn-shopping-list-content-heading sgn-truncate-elipsis">
{{#price}}<span class="sgn-shopping-list-content-price">{{price}}</span><span> - </span>{{/price}}
<span>{{name}}</span>
</div>
<div id="sgn-offer-product-quantity-{{id}}" class="sgn-offer-product-quantity">
Expand All @@ -109,9 +99,11 @@ const defaultTemplateV2 = `\
</button>
</div>
</div>
<div class="sgn-shopping-list-content-ticker sgn-hide-print">
<input type="checkbox" id="sgn-offer-product-id-{{id}}" name="sgn-offer-product-id-{{id}}" value="{{index}}" checked="true" class="sgn-shopping-list-content-ticker-box"/>
{{#price}}
<div class="sgn-shopping-list-content-price">
<span>{{price}}</span>
</div>
{{/price}}
</div>
</div>
</li>
Expand All @@ -120,8 +112,11 @@ const defaultTemplateV2 = `\
<li class="sgn-shopping-list-item-container sgn-shopping-list-item-container-ticked" data-id="{{index}}">
<div class="sgn-shopping-list-content-container">
<div class="sgn-shopping-list-content">
<div class="sgn-shopping-list-content-ticker sgn-hide-print">
<input type="checkbox" id="sgn-offer-product-id-{{id}}" name="sgn-offer-product-id-{{id}}" value="{{index}}" class="sgn-shopping-list-content-ticker-box"/>
</div>
<div class="sgn-shopping-list-content-heading sgn-truncate-elipsis">
<span>{{#price}}{{price}} - {{/price}}{{name}}</span>
<span>{{name}}</span>
</div>
<div id="sgn-offer-product-quantity-{{id}}" class="sgn-offer-product-quantity">
<div class="sgn-offer-product-quantity-content">
Expand All @@ -134,9 +129,11 @@ const defaultTemplateV2 = `\
</button>
</div>
</div>
<div class="sgn-shopping-list-content-ticker sgn-hide-print">
<input type="checkbox" id="sgn-offer-product-id-{{id}}" name="sgn-offer-product-id-{{id}}" value="{{index}}" class="sgn-shopping-list-content-ticker-box"/>
{{#price}}
<div class="sgn-shopping-list-content-price">
<span>{{price}}</span>
</div>
{{/price}}
</div>
</div>
</li>
Expand Down Expand Up @@ -382,49 +379,65 @@ const ShoppingList = ({template, version}) => {
action: 'plus' | 'minus'
) => {
const {localeCode} = translations;
const index = Number(productEl.dataset.id);
const productId = productEl.dataset.offerProductId;
const priceEl = productEl.querySelector<HTMLElement>(
'.sgn-shopping-list-content-price'
);
const quantityTxt = productEl.querySelector<HTMLInputElement>(
'.sgn-offer-product-quantity-text'
);

const storedPublicationOffers = clientLocalStorage.get(
let storedPublicationOffers = clientLocalStorage.get(
'publication-saved-offers'
);

let quantity = Number(quantityTxt?.value ?? 1);

if (
quantityTxt &&
!(quantityTxt?.value === '1' && action === 'minus')
) {
quantityTxt.value =
action === 'plus' ? `${++quantity}` : `${--quantity}`;
if (quantityTxt) {
if (quantityTxt?.value === '1' && action === 'minus') {
storedPublicationOffers = storedPublicationOffers.filter(
(product) => product.id !== productId
);
productEl.remove();
} else {
storedPublicationOffers = storedPublicationOffers.map(
(product) => {
if (product.id === productId) {
quantityTxt.value =
action === 'plus'
? `${++quantity}`
: `${--quantity}`;

if (
priceEl &&
product?.pricing?.price &&
quantity
) {
const priceNum =
product?.pricing?.price * (quantity || 1);

priceEl.innerHTML = formatPrice(
priceNum,
localeCode,
product?.pricing?.currency
);
}

return {
...product,
quantity: quantityTxt.value
};
}
return product;
}
);
}

storedPublicationOffers[index].quantity = quantityTxt.value;
clientLocalStorage.setWithEvent(
'publication-saved-offers',
storedPublicationOffers,
'tjek_shopping_list_update'
);

if (
priceEl &&
storedPublicationOffers[index]?.pricing?.price &&
quantity
) {
const priceNum =
storedPublicationOffers[index]?.pricing?.price *
Number(storedPublicationOffers[index].quantity || 1);

priceEl.innerHTML = formatPrice(
priceNum,
localeCode,
storedPublicationOffers[index]?.pricing?.currency
);
}
}
};

Expand Down

0 comments on commit 45a152e

Please sign in to comment.