Пример того, что я имел в виду в моих комментариях.Помимо селекторов, мы передаем все соответствующие данные в функцию.
Таким образом, функция render () берет коллекцию, которую она должна отобразить, место, где она должна отображаться, и дополнительные.
Обработчики событий принимают объект события.
Вы заметили, что функции, которые не принимают параметров, fetch_cart (), это функция, которая фактически что-то возвращает.
Теперь вывсе это можно использовать для написания функции document.onload, которая будет использовать функцию рендеринга с любыми параметрами.
ps: localStorage не работает с фрагментами стека, поэтому я копирую / вставляю и тестирую в chrome.
const stock = [
{ "id": 1, "title": "shoes", "price": 99.99, "image": "/path/1.png", "available": 75 },
{ "id": 2, "title": "shirt", "price": 67.14, "image": "/path/2.png", "available": 2 },
{ "id": 3, "title": "shoes", "price": 85.25, "image": "/path/3.png", "available": 0 },
{ "id": 4, "title": "hats", "price": 15.2, "image": "/path/4.png", "available": 18 }
];
const render = ( collection, list, button_type ) => {
const items = collection.map( item => `
<li>
<span>${ item.title }</span>
<span>${ item.price }</span>
<span>${ item.available }</span>
<button data-type="${ button_type }" data-reference="${ item.id }">${ button_type }</button>
</li>
`);
list.innerHTML += items.join( '' );
};
const fetch_cart = () => {
return Array.from({ length: localStorage.length - 1 }, ( _, index ) => {
const item_key = localStorage.key( index );
return JSON.parse( localStorage.getItem( item_key ));
});
};
const add_to_cart = event => {
const id = parseInt( event.target.getAttribute( 'data-reference' ), 10 );
const item = stock.find( item => item.id === id );
if ( !item.available > 0 ) alert( 'item is sold out' );
else {
item.available -= 1;
const clone = Object.assign({}, item );
localStorage.setItem( `order_${ Date.now() }`, JSON.stringify( clone ));
render( [ clone ], list_cart, 'delete' );
}
};
const delete_from_cart = event => {
console.log( 'TODO' );
// basically the reverse of add_to_cart
};
const list_stock = document.querySelector( '#stock' );
const list_cart = document.querySelector( '#cart' );
list_stock.addEventListener( 'click', add_to_cart );
list_cart.addEventListener( 'click', delete_from_cart );
render( stock, list_stock, 'add' );
render( fetch_cart(), list_cart, 'delete' );
ul {
border: 1px solid grey;
margin-bottom: 20px;
}
<label>Your order</label>
<ul id="cart"></ul>
<label>Available</label>
<ul id="stock"></ul>