-
+
@@ -50,7 +50,7 @@ export function createProductCard(
.replaceAll('{{ ID }}', product.id.toString())
.replace('{{ TITLE }}', product.name)
.replace('{{ PRICE }}', `£${(product.unitPrice / 100).toFixed(2)}`)
- .replace('{{ UNITS }}', `${product.quantity} ${product.unit}`)
+ .replace('{{ UNITS }}', `${product.quantity} ${product.unit === 'unit' ? (product.quantity === 1 ? 'unit' : 'units') : product.unit}`)
const thisProductCardTemplate = document.createElement('template')
thisProductCardTemplate.insertAdjacentHTML('beforeend', cardHTMLStr)
@@ -68,11 +68,12 @@ export function createProductCard(
}
const onInputBoxChanged = () => {
- if (inputBox.value === '0' || inputBox.value === '') {
+ if ((Number.parseInt(inputBox.value) || 0) <= 0) {
const addToBasketBtn = thisProductCard.querySelector('.addToBasket') as HTMLButtonElement
const adjustDiv = addToBasketBtn.nextElementSibling as HTMLDivElement
addToBasketBtn.classList.remove('d-none')
adjustDiv.classList.add('d-none')
+ onSetProductQuantity(product.id, 0)
}
else {
onSetProductQuantity(product.id, Number.parseInt(inputBox.value))
@@ -118,7 +119,7 @@ export function createProductCard(
swal({
icon: 'success',
- title: `${product.name} was added to basket.`,
+ title: `${product.name} ${product.name.endsWith('s') ? 'were' : 'was'} added to basket.`,
timer: 2000,
}).then()
},
diff --git a/src/js/shop.ts b/src/js/shop.ts
index 18c78a1..03bee69 100644
--- a/src/js/shop.ts
+++ b/src/js/shop.ts
@@ -2,18 +2,19 @@ import Cookies from 'js-cookie'
import LazyLoad from 'vanilla-lazyload'
import { products } from './products.ts'
import { createProductCard } from './productCard.ts'
-import type { Basket } from './typing'
+import { type Basket, SORT_METHOD } from './typing'
import { cookieOptions, readBasketCookie } from './shared'
let searchStr = ''
const basket: Basket = readBasketCookie()
-const allProductElements: Array = []
+let allProductElements: Array = []
addEventListener('DOMContentLoaded', () => init())
function init() {
setupSearchEventListeners()
setupCookieModalEventListeners()
+ setupSortingEventListeners()
setTimeout(async () => {
await asyncMakeProductCardElements()
@@ -69,6 +70,15 @@ function setupSearchEventListeners() {
})
}
+function setupSortingEventListeners() {
+ const sortMethodSelect = document.querySelector('#sortMethod') as HTMLSelectElement
+
+ sortMethodSelect?.addEventListener('change', () => {
+ sortAndUpdateProductCards(Number.parseInt(sortMethodSelect.value) as SORT_METHOD)
+ // TODO: Store sort method in a cookie
+ })
+}
+
function onAddToBasketClicked(productId: number, requestedQuantity: number) {
const currentQuantity = basket.get(productId) ?? 0
const newQuantity = currentQuantity + requestedQuantity
@@ -163,3 +173,19 @@ async function asyncMakeProductCardElements() {
return document.createElement('div')
}))
}
+
+async function sortAndUpdateProductCards(sortMethod: SORT_METHOD) {
+ if (sortMethod === SORT_METHOD.PRICE_ASC)
+ products.sort((a, b) => a.unitPrice - b.unitPrice)
+
+ else if (sortMethod === SORT_METHOD.PRICE_DESC)
+ products.sort((a, b) => b.unitPrice - a.unitPrice)
+
+ else
+ products.sort((a, b) => a.name.localeCompare(b.name))
+
+ allProductElements = []
+ await asyncMakeProductCardElements()
+ updateDisplayedProductCards()
+ onSearchSubmitted()
+}
diff --git a/src/js/typing.ts b/src/js/typing.ts
index 29ee9af..d20ed4b 100644
--- a/src/js/typing.ts
+++ b/src/js/typing.ts
@@ -9,3 +9,9 @@ export interface Product {
}
export type Basket = Map
+
+export enum SORT_METHOD {
+ ALPHABETICAL,
+ PRICE_ASC,
+ PRICE_DESC,
+}