add loca storage scripts

master
Gustavo Luigi 2022-08-29 21:16:36 +02:00
parent a6b08e1683
commit 49bbacd4d1
3 changed files with 88 additions and 50 deletions

View File

@ -81,18 +81,13 @@
@stop @stop
@section('scripts') @section('scripts')
<script> <script>
/* let objProducts = []; $(window).on('load', function(){
function updateProductsInLocalStorage(){ $('#btn-check-out').click(function(){
localStorage.setItem("products", JSON.stringify(objProducts)); let product = {};
} if(objProducts.indexOf($(this).attr("data-id")) == -1) objProducts.push($(this).attr("data-id"));
$(window).load(function(){ updateProductsInLocalStorage();
let product = {}; window.location.replace("{{url('/checkout')}}");
product["id"] = database.attr("data-id"); });
product["name"] = database.attr("data-name"); });
objProducts.push(product);
objProducts.splice(index, 1);
updateProductsInLocalStorage();
if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
}); */
</script> </script>
@stop @stop

View File

@ -76,9 +76,9 @@
<div class="col-12"> <div class="col-12">
<table class="table table-striped"> <table class="table table-striped">


<tbody> <tbody id="list-products-in-bag">


<tr> <!-- <tr>
<td class="text-start"> <td class="text-start">
<img class="rounded img-fluid" src="https://picsum.photos/100/100"> <img class="rounded img-fluid" src="https://picsum.photos/100/100">


@ -100,8 +100,7 @@


<td class="align-middle text-end">18,00€</td> <td class="align-middle text-end">18,00€</td>


</tr> </tr> -->





</tbody> </tbody>
@ -145,6 +144,46 @@
@yield('content') @yield('content')
@insert("content.includes.footer") @insert("content.includes.footer")
@insert("content.includes.scripts") @insert("content.includes.scripts")
<script>
let objProducts = [];
function updateProductsInLocalStorage(){ localStorage.setItem("products", JSON.stringify(objProducts)); }
$(window).on('load', function(){
if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
$.ajax({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
url: "{{url('admin/contents/all')}}/"+objProducts.join(","),
type: "get",
cache : false,
processData: false,
contentType: false,
success: function (response) {
response.contents.forEach(function(item){
$('#list-products-in-bag').append(`
<tr>
<td class="text-start">
<img class="rounded img-fluid" src="https://picsum.photos/120/120">
</td>
<td class="text-start">
<span class="fs-5">${item.title}</span>
<br>
<small class="text-success">sofort verfügbar</small>
<br>
<select class="form-select form-select-sm" aria-label="Default select example">
<option selected value="1">Anzahl: 1</option>
<option value="2">Anzahl: 2</option>
<option value="3">Anzahl: 3</option>
</select>
</td>
<td class="align-middle text-end">18,00€</td>
</tr>`);
});
},
error: function(error) {
console.log(error);
}
});
});
</script>
@yield('scripts') @yield('scripts')
</body> </body>
</html> </html>

View File

@ -77,44 +77,15 @@
<div class="card-body"> <div class="card-body">


<table class="table table-striped"> <table class="table table-striped">

<tbody id="list-products">
<tbody> <!-- <tr>
<tr>


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


</td> </td>
<td class="align-middle text-end">18,00 €</td> <td class="align-middle text-end">18,00 €</td>
</tr> </tr> -->
<tr>

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

</td>
<td class="align-middle text-end">18,00 €</td>

</tr>
<tr>

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

</td>
<td class="align-middle text-end">18,00 €</td>

</tr>

<tr>
<div class="input-group mb-3 input-group-sm">
<span class="input-group-text" id="basic-addon1"><svg style="width: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M544 224h32V112c0-26.51-21.49-48-48-48H48C21.49 64 0 85.49 0 112v112h32c17.673 0 32 14.327 32 32s-14.327 32-32 32H0v112c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V288h-32c-17.673 0-32-14.327-32-32s14.327-32 32-32zm0 96v80c0 8.823-7.177 16-16 16H48c-8.823 0-16-7.177-16-16v-80c35.29 0 64-28.71 64-64s-28.71-64-64-64v-80c0-8.823 7.177-16 16-16h480c8.823 0 16 7.177 16 16v80c-35.29 0-64 28.71-64 64s28.71 64 64 64z"/></svg></span>
<input type="text" class="form-control" placeholder="Gutscheincode" aria-label="Username" aria-describedby="basic-addon1">
</div>

</tr>


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

$('.btn-remove-product').click(function(){
// let index = objProducts.indexOf(value);
// if(index != -1) objProducts.splice(index, 1);
});
});
</script>
@stop