refactoring html and css
This commit is contained in:
parent
8194cea85e
commit
a91b196e64
16 changed files with 1299 additions and 1383 deletions
|
|
@ -3,41 +3,40 @@ function changeCake(id, name, price, delta) {
|
|||
if (input != null) {
|
||||
var qty = Number(input.value) + delta;
|
||||
if (qty <= 0) {
|
||||
var item = input.closest('.summary-item');
|
||||
var item = input.closest('li');
|
||||
if (item) item.remove();
|
||||
updateTotals();
|
||||
updateCatalogueQty(id, 0);
|
||||
return;
|
||||
}
|
||||
input.value = qty;
|
||||
var item = input.closest('.summary-item');
|
||||
item.querySelector('.cake-qty').innerText = qty;
|
||||
item.querySelector('.cake-total').innerText = (price * qty) + ' PLN';
|
||||
var item = input.closest('li');
|
||||
item.querySelector('.qty').innerText = qty;
|
||||
item.querySelector('.price').innerText = (price * qty) + ' PLN';
|
||||
updateTotals();
|
||||
updateCatalogueQty(id, qty);
|
||||
return;
|
||||
}
|
||||
if (delta <= 0) return;
|
||||
var item = document.createElement('div');
|
||||
item.className = 'summary-item';
|
||||
var item = document.createElement('li');
|
||||
item.setAttribute('data-cake-id', id);
|
||||
item.innerHTML =
|
||||
'<div class="summary-item-info">' +
|
||||
'<div class="summary-item-name cake-name">' + name + '</div>' +
|
||||
'<div class="summary-item-detail cake-price">' + price + ' PLN × <span class="cake-qty">1</span></div>' +
|
||||
'<div style="flex:1;min-width:0;padding-right:0.5rem">' +
|
||||
'<div class="name">' + name + '</div>' +
|
||||
'<div class="detail">' + price + ' PLN × <span class="qty">1</span></div>' +
|
||||
'</div>' +
|
||||
'<div class="summary-item-price cake-total">' + price + ' PLN</div>' +
|
||||
'<button type="button" class="summary-item-remove" onclick="removeCake(this)">' +
|
||||
'<div class="price">' + price + ' PLN</div>' +
|
||||
'<button type="button" class="remove" onclick="removeCake(this)">' +
|
||||
'<span class="material-symbols-outlined">close</span>' +
|
||||
'</button>' +
|
||||
'<input type="hidden" name="cake[' + id + ']" value="1">';
|
||||
document.getElementById('basket_items').appendChild(item);
|
||||
document.getElementById('basket-items').appendChild(item);
|
||||
updateTotals();
|
||||
updateCatalogueQty(id, 1);
|
||||
}
|
||||
|
||||
function removeCake(btn) {
|
||||
var item = btn.closest('.summary-item');
|
||||
var item = btn.closest('li');
|
||||
var id = item.getAttribute('data-cake-id');
|
||||
item.remove();
|
||||
updateTotals();
|
||||
|
|
@ -46,11 +45,11 @@ function removeCake(btn) {
|
|||
|
||||
function updateTotals() {
|
||||
var subtotal = 0;
|
||||
var items = document.querySelectorAll('#basket_items .summary-item');
|
||||
var items = document.querySelectorAll('#basket-items li');
|
||||
items.forEach(function(item) {
|
||||
var priceText = item.querySelector('.cake-price').innerText;
|
||||
var priceText = item.querySelector('.detail').innerText;
|
||||
var price = Number(priceText.split(' ')[0]);
|
||||
var qty = Number(item.querySelector('.cake-qty').innerText);
|
||||
var qty = Number(item.querySelector('.qty').innerText);
|
||||
subtotal += price * qty;
|
||||
});
|
||||
var paid = Number(document.querySelector('[name="paid"]')?.value || 0);
|
||||
|
|
@ -66,7 +65,7 @@ function updateCatalogueQty(id, qty) {
|
|||
|
||||
function filterCatalogue(input) {
|
||||
var query = input.value.toLowerCase();
|
||||
var items = document.querySelectorAll('.catalogue-item');
|
||||
var items = document.querySelectorAll('#catalogue-grid > li');
|
||||
items.forEach(function(item) {
|
||||
var name = item.getAttribute('data-name').toLowerCase();
|
||||
item.style.display = name.includes(query) ? '' : 'none';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue