Compare commits

..

No commits in common. "b1af8aadf6be2b6358c9caa021d8ec6e6de1361e" and "a66e549bee8de90a1a77476ddb0dfb1916a91389" have entirely different histories.

3 changed files with 54 additions and 151 deletions

View File

@ -10,7 +10,6 @@
"name":"Preis", "name":"Preis",
"type":"number", "type":"number",
"description":"", "description":"",
"attr":{"step":"0.01"},
"position":1, "position":1,
"required":1, "required":1,
"default_value":"" "default_value":""

View File

@ -67,8 +67,7 @@
<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"> <th colspan="3" class="text-end">2838,00 €
<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>
@ -103,22 +102,17 @@
@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));
let quantitys = objProducts.map(obj => obj.quantity); $('#count-products-in-bag').text(objProducts.length);
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">
@ -129,58 +123,39 @@
<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" data-id="${item.id}" style="width:125px;" aria-label="Default select example">`; <select class="form-select form-select-sm select-quantity" 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">${formatter.format(item.data_fields.preis)}</td> <td class="align-middle text-end">18,00€</td>
</tr>`; </tr>`;

$('#list-products-in-bag').append(elementProduct); $('#list-products-in-bag').append(elementProduct);
}); });
$('#total-price').text(formatter.format(totalPrice));
}); });
}else { }else $('#count-products-in-bag').hide();
$('#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){
let objProductInfo = objProducts.find(obj => obj.id == productId); if(objProducts.indexOf(productId) == -1) objProducts.push({id: productId, quantity: 1});
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(){
<<<<<<< HEAD
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();
=======


>>>>>>> refs/remotes/origin/master
}); });
}); });
</script> </script>

View File

@ -1,10 +1,12 @@
@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,
@ -13,59 +15,6 @@
<br> <br>
<br> <br>
</div> </div>
<div class="col-12 col-md-8">
<div class="card mt-1 mb-5" style="background-color: #f7fcf7;">
<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>
Persönliche Daten
</h5>
</div>
<<<<<<< HEAD
<div class="card-body">
<x-form id-name="anfrage" channels="bestaetigung,airtable">
<div class="mb-3">
<label for="" class="form-label">Anrede</label>
<select class="form-select" name="anrede" aria-label="Default select example">
<option selected>Herr</option>
<option>Frau</option>
<option>Firma</option>
</select>
</div>
<div class="mb-3">
<label for="" class="form-label">Vorname</label>
<input type="text" class="form-control" name="vorname" aria-describedby="" placeholder="Maximilian">
</div>
<div class="mb-3">
<label for="" class="form-label">Nachname</label>
<input type="text" class="form-control" name="nachname" aria-describedby="" placeholder="Meyer">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">E-Mail</label>
<input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="max.mustermann@areya.de">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Telefon</label>
<input type="text" class="form-control" name="telefon" aria-describedby="emailHelp" placeholder="0941467233">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Adresse</label>
<input type="text" class="form-control" name="adresse" placeholder="Neuenhammerstr. 44, 92714 Pleystein" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check mb-4">
<input type="checkbox" class="form-check-input" id="exampleCheck1" required>
<label class="form-check-label" for="exampleCheck1">Ich habe die Datenschutzbestimmungen gelesen und akzeptiert.</label>
</div>
<div class="d-block">
<button type="submit" class="btn btn-success d-block mx-auto">
Angebot anfragen
</button>

</div>
</x-form>
=======
<div class="col-12 col-md-7"> <div class="col-12 col-md-7">




@ -188,65 +137,45 @@


</div> </div>
</div> </div>
>>>>>>> refs/remotes/origin/master </div>
</div> </div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card" style="background-color: #f7fcf7;">
<div class="card-header">
<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 class="card-body">
<table class="table table-striped">
<tbody id="list-products"></tbody>
<tfoot>
<tr>
<th scope="col">Gesammt:</th>
<th colspan="2" class="text-end">2838,00 €
<br>
<small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
</th>
</tr>
</tfoot>
</table>
<a href="" class="text-muted text-decoration-none">Weitere Produkte hinzufügen</a>
</div>
</div>
<div class="card mt-4" style="background-color: #f7fcf7;">
<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>
Wie geht es weiter?</h5>
</div>
<div class="card-body">
<ol>
<li class="mb-3">Beratungsgespräch</li>
<li class="mb-3">Persönliches Angebot</li>
<li class="mb-3">Packen & Abholtermin</li>
<li class="mb-3">Rechnung / Barzahlung</li>
<li class="mb-3">Abholung in 92648 Vohenstrauß</li>
</ol>
</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"));
let ids = objProducts.map(obj => obj.id); $.ajax({
$.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
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">${formatter.format(item.data_fields.preis)}</td> <td class="align-middle text-end">18,00 €</td>
</tr>`); </tr>`);
}); });
},
error: function(error) {
console.log(error);
}
}); });


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