Areya
/
areya-energy
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

count all products

master
Gustavo Luigi 2022-08-30 17:07:41 +02:00
parent e7e2dce094
commit 3c059e045c
2 changed files with 141 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
content/master.blade.php
View File

@ -67,7 +67,8 @@
<tfoot> <tfoot>
<tr> <tr>
<th class="text-start" scope="col">Gesammt:</th> <th class="text-start" scope="col">Gesammt:</th>
<th colspan="3" class="text-end">2838,00 € <th colspan="3" class="text-end">
<span id="total-price">0 €</span>
<br> <br>
<small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small> <small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
</th> </th>
@ -102,17 +103,22 @@
@insert("content.includes.scripts") @insert("content.includes.scripts")
<script> <script>
let objProducts = []; let objProducts = [];
let formatter = new Intl.NumberFormat('de', {style: 'currency', currency: 'EUR'});
let totalPrice = 0;
function updateProductsInLocalStorage(){ function updateProductsInLocalStorage(){
localStorage.setItem("products", JSON.stringify(objProducts)); localStorage.setItem("products", JSON.stringify(objProducts));
$('#count-products-in-bag').text(objProducts.length); let quantitys = objProducts.map(obj => obj.quantity);
let quantityOfProducts = 0;
for(let i = 0; i < quantitys.length; i++) { quantityOfProducts += Number(quantitys[i]); }
$('#count-products-in-bag').text(quantityOfProducts);
$('#list-products-in-bag').html(''); $('#list-products-in-bag').html('');
totalPrice = 0;
if(objProducts.length > 0) { if(objProducts.length > 0) {
$('#count-products-in-bag').show(); $('#count-products-in-bag').show();
let ids = objProducts.map(obj => obj.id); let ids = objProducts.map(obj => obj.id);
$.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){ $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
response.contents.forEach(function(item){ response.contents.forEach(function(item){
let objProductInfo = objProducts.find(obj => obj.id == item.id); let objProductInfo = objProducts.find(obj => obj.id == item.id);

let elementProduct = ` let elementProduct = `
<tr> <tr>
<td class="text-start"> <td class="text-start">
@ -123,39 +129,54 @@
<br> <br>
<small class="text-success">sofort verfügbar</small> <small class="text-success">sofort verfügbar</small>
<br> <br>
<select class="form-select form-select-sm select-quantity" style="width:125px;" aria-label="Default select example">`; <select class="form-select form-select-sm select-quantity" data-id="${item.id}" style="width:125px;" aria-label="Default select example">`;
for(let i = 1; i <= 5; i++){ for(let i = 1; i <= 5; i++){
if(objProductInfo.quantity == i) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>`; if(objProductInfo.quantity == i) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>`;
else elementProduct += `<option value="${i}">Anzahl: ${i}</option>`; else elementProduct += `<option value="${i}">Anzahl: ${i}</option>`;
} }
totalPrice += item.data_fields.preis*objProductInfo.quantity;
elementProduct += ` elementProduct += `
</select> </select>
<button data-id="${item.id}" class="btn-remove-product text-muted small text-decoration-none" style="padding: 0; border: none; background: transparen;">Löschen</button> <button data-id="${item.id}" class="btn-remove-product text-muted small text-decoration-none" style="padding: 0; border: none; background: transparen;">Löschen</button>
</td> </td>
<td class="align-middle text-end">18,00€</td> <td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
</tr>`; </tr>`;

$('#list-products-in-bag').append(elementProduct); $('#list-products-in-bag').append(elementProduct);
}); });
$('#total-price').text(formatter.format(totalPrice));
}); });
}else $('#count-products-in-bag').hide(); }else {
$('#list-products-in-bag').html(`
<tr>
<td class="text-start" colspan="3"><p>keine Produkte hinzugefügt.</p></td>
</tr>`);
$('#count-products-in-bag').hide();
}
$('#total-price').text(formatter.format(totalPrice));
} }
function addToBag(productId){ function addToBag(productId){
if(objProducts.indexOf(productId) == -1) objProducts.push({id: productId, quantity: 1}); let objProductInfo = objProducts.find(obj => obj.id == productId);
let index = objProducts.indexOf(objProductInfo);
if(index == -1) objProducts.push({id: productId, quantity: 1});
updateProductsInLocalStorage(); updateProductsInLocalStorage();
} }
$(window).on('load', function(){ $(window).on('load', function(){
if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products")); if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
updateProductsInLocalStorage(); updateProductsInLocalStorage();
$(document).on('click', '.btn-remove-product', function(){ $(document).on('click', '.btn-remove-product', function(){
let objProductInfo = objProducts.find(obj => obj.id == $(this).attr('data-id'));
let productId = $(this).attr('data-id'); let productId = $(this).attr('data-id');
let objProductInfo = objProducts.find(obj => obj.id == productId);
let index = objProducts.indexOf(objProductInfo); let index = objProducts.indexOf(objProductInfo);
if(index != -1) objProducts.splice(index, 1); if(index != -1) objProducts.splice(index, 1);
updateProductsInLocalStorage(); updateProductsInLocalStorage();
}); });
$(document).on('change', '.select-quantity', function(){ $(document).on('change', '.select-quantity', function(){
let quantity = $(this).val();
let productId = $(this).attr('data-id');
let objProductInfo = objProducts.find(obj => obj.id == productId);
let index = objProducts.indexOf(objProductInfo);
objProducts[index].quantity = quantity;
updateProductsInLocalStorage();
}); });
}); });
</script> </script>

72
content/pages/checkout.blade.php
View File

@ -1,12 +1,10 @@
@layout('content.master') @layout('content.master')
@section('content') @section('content')
<div class="container"> <div class="container">
<section> <section>

<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h1 class="mb-5">Angebot anfragen</h1> <h1 class="mb-5">Angebot anfragen</h1>

<p class="fs-5"> <p class="fs-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam asperiores Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam asperiores
consectetur dicta eaque et eveniet ex illo ipsa iste maiores maxime, modi optio perferendis, consectetur dicta eaque et eveniet ex illo ipsa iste maiores maxime, modi optio perferendis,
@ -16,16 +14,16 @@
<br> <br>
</div> </div>
<div class="col-12 col-md-8"> <div class="col-12 col-md-8">


<div class="card mt-1 mb-5" style="background-color: #f7fcf7;"> <div class="card mt-1 mb-5" style="background-color: #f7fcf7;">
<div class="card-header"> <div class="card-header">
<h5> <svg style="width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm128 421.6c-35.9 26.5-80.1 42.4-128 42.4s-92.1-15.9-128-42.4V416c0-35.3 28.7-64 64-64 11.1 0 27.5 11.4 64 11.4 36.6 0 52.8-11.4 64-11.4 35.3 0 64 28.7 64 64v13.6zm30.6-27.5c-6.8-46.4-46.3-82.1-94.6-82.1-20.5 0-30.4 11.4-64 11.4S204.6 320 184 320c-48.3 0-87.8 35.7-94.6 82.1C53.9 363.6 32 312.4 32 256c0-119.1 96.9-216 216-216s216 96.9 216 216c0 56.4-21.9 107.6-57.4 146.1zM248 120c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 144c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"/></svg> <h5>
Persönliche Daten</h5> <svg style="width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm128 421.6c-35.9 26.5-80.1 42.4-128 42.4s-92.1-15.9-128-42.4V416c0-35.3 28.7-64 64-64 11.1 0 27.5 11.4 64 11.4 36.6 0 52.8-11.4 64-11.4 35.3 0 64 28.7 64 64v13.6zm30.6-27.5c-6.8-46.4-46.3-82.1-94.6-82.1-20.5 0-30.4 11.4-64 11.4S204.6 320 184 320c-48.3 0-87.8 35.7-94.6 82.1C53.9 363.6 32 312.4 32 256c0-119.1 96.9-216 216-216s216 96.9 216 216c0 56.4-21.9 107.6-57.4 146.1zM248 120c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 144c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"/>
</svg>
Persönliche Daten
</h5>
</div> </div>
<div class="card-body"> <div class="card-body">


<x-form id-name="anfrage" channels="bestaetigung,airtable"> <x-form id-name="anfrage" channels="bestaetigung,airtable">
<div class="mb-3"> <div class="mb-3">
<label for="" class="form-label">Anrede</label> <label for="" class="form-label">Anrede</label>
@ -66,16 +64,8 @@


</div> </div>
</x-form> </x-form>



</div> </div>
</div> </div>





</div> </div>
<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
<div class="card" style="background-color: #f7fcf7;"> <div class="card" style="background-color: #f7fcf7;">
@ -83,18 +73,8 @@
<h5><svg style="width: 25px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564 192h-76.875L347.893 37.297c-5.91-6.568-16.027-7.101-22.596-1.189s-7.101 16.028-1.189 22.596L444.075 192h-312.15L251.893 58.703c5.912-6.567 5.379-16.685-1.189-22.596-6.569-5.912-16.686-5.38-22.596 1.189L88.875 192H12c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h16.444L58.25 438.603C61.546 462.334 81.836 480 105.794 480h364.412c23.958 0 44.248-17.666 47.544-41.397L547.556 224H564c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12zm-77.946 242.201c-1.093 7.867-7.906 13.799-15.848 13.799H105.794c-7.942 0-14.755-5.932-15.848-13.799L60.752 224h454.497l-29.195 210.201zM304 280v112c0 8.837-7.163 16-16 16-8.836 0-16-7.163-16-16V280c0-8.837 7.164-16 16-16 8.837 0 16 7.163 16 16zm112 0v112c0 8.837-7.163 16-16 16s-16-7.163-16-16V280c0-8.837 7.163-16 16-16s16 7.163 16 16zm-224 0v112c0 8.837-7.164 16-16 16s-16-7.163-16-16V280c0-8.837 7.164-16 16-16s16 7.163 16 16z"/></svg> Warenkorb</h5> <h5><svg style="width: 25px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564 192h-76.875L347.893 37.297c-5.91-6.568-16.027-7.101-22.596-1.189s-7.101 16.028-1.189 22.596L444.075 192h-312.15L251.893 58.703c5.912-6.567 5.379-16.685-1.189-22.596-6.569-5.912-16.686-5.38-22.596 1.189L88.875 192H12c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h16.444L58.25 438.603C61.546 462.334 81.836 480 105.794 480h364.412c23.958 0 44.248-17.666 47.544-41.397L547.556 224H564c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12zm-77.946 242.201c-1.093 7.867-7.906 13.799-15.848 13.799H105.794c-7.942 0-14.755-5.932-15.848-13.799L60.752 224h454.497l-29.195 210.201zM304 280v112c0 8.837-7.163 16-16 16-8.836 0-16-7.163-16-16V280c0-8.837 7.164-16 16-16 8.837 0 16 7.163 16 16zm112 0v112c0 8.837-7.163 16-16 16s-16-7.163-16-16V280c0-8.837 7.163-16 16-16s16 7.163 16 16zm-224 0v112c0 8.837-7.164 16-16 16s-16-7.163-16-16V280c0-8.837 7.164-16 16-16s16 7.163 16 16z"/></svg> Warenkorb</h5>
</div> </div>
<div class="card-body"> <div class="card-body">

<table class="table table-striped"> <table class="table table-striped">
<tbody id="list-products"> <tbody id="list-products"></tbody>
<!-- <tr>

<td>
<img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">Balkonkraftwerk 600

</td>
<td class="align-middle text-end">18,00 €</td>
</tr> -->
</tbody>
<tfoot> <tfoot>
<tr> <tr>
<th scope="col">Gesammt:</th> <th scope="col">Gesammt:</th>
@ -102,74 +82,46 @@
<br> <br>
<small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small> <small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
</th> </th>

</tr> </tr>
</tfoot> </tfoot>

</table> </table>

<a href="" class="text-muted text-decoration-none">Weitere Produkte hinzufügen</a> <a href="" class="text-muted text-decoration-none">Weitere Produkte hinzufügen</a>

</div> </div>
</div> </div>

<div class="card mt-4" style="background-color: #f7fcf7;"> <div class="card mt-4" style="background-color: #f7fcf7;">
<div class="card-header"> <div class="card-header">
<h5><svg style="width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"/></svg> <h5><svg style="width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"/></svg>
Wie geht es weiter?</h5> Wie geht es weiter?</h5>
</div> </div>
<div class="card-body"> <div class="card-body">

<ol> <ol>
<li class="mb-3">Beratungsgespräch</li> <li class="mb-3">Beratungsgespräch</li>
<li class="mb-3">Persönliches Angebot</li> <li class="mb-3">Persönliches Angebot</li>
<li class="mb-3">Packen & Abholtermin</li> <li class="mb-3">Packen & Abholtermin</li>
<li class="mb-3">Rechnung / Barzahlung</li> <li class="mb-3">Rechnung / Barzahlung</li>
<li class="mb-3">Abholung in 92648 Vohenstrauß</li> <li class="mb-3">Abholung in 92648 Vohenstrauß</li>

</ol> </ol>

</div> </div>
</div> </div>
</div> </div>
</div> </div>

</div>
</div>
</div>






</section> </section>
</div> </div>
@stop @stop
@section('scripts') @section('scripts')
<script> <script>
$(window).on('load', function(){ $(window).on('load', function(){
if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products")); if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
$.ajax({ let ids = objProducts.map(obj => obj.id);
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
url: "{{url('/contents/all')}}/"+objProducts.join(","),
type: "get",
cache : false,
processData: false,
contentType: false,
success: function (response) {
response.contents.forEach(function(item){ response.contents.forEach(function(item){
$('#list-products').append(`<tr> $('#list-products').append(`<tr>
<td> <td>
<img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">${item.title} <img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">${item.title}
</td> </td>
<td class="align-middle text-end">18,00 €</td> <td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
</tr>`); </tr>`);
}); });
},
error: function(error) {
console.log(error);
}
}); });


$('.btn-remove-product').click(function(){ $('.btn-remove-product').click(function(){