Areya
/
areya-energy
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
areya-energy/content/pages/checkout.blade.php

357 lines
20 KiB
PHP
Raw Normal View History

added shopping cart and checkout page
2022-08-29 12:53:22 +00:00
@layout('content.master')
add phone and adress libs
2022-09-01 10:14:05 +00:00
@section('head')
<link rel="stylesheet" href="{{storage('assets/libs/intl-tel-input/css/intlTelInput.min.css')}}">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQj1N9Mj-OzOiUjt5QUDRkcDonXz4O85A&v=3.exp&sensor=false&libraries=places"></script>
@stop
added shopping cart and checkout page
2022-08-29 12:53:22 +00:00
@section('content')
count all products
2022-08-30 15:07:41 +00:00
<div class="container">
.
2022-09-01 15:03:06 +00:00
@if(session()->has('success'))
added success message
2022-09-01 14:48:18 +00:00
<div class="row">
<div class="col-12">
updated pages
2022-09-01 17:14:02 +00:00
<div class="alert alert-success mt-5" role="alert">
added success message
2022-09-01 14:48:18 +00:00
<div class="row">
<div class="col-1">
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_mddh5ano.json" background="transparent" speed="1" style="width: 120px; height: 120px;" autoplay></lottie-player>
</div>
<div class="col-10">
<br>
<h2 class="mt-3 ms-3 fs-3">Anfrage erfolgreich abgesendet!</h2>
</div>
</div>
</div>
</div>
<div class="col-12">
<h1 class="mt-5 mb-4">Kostenloses Beratungsgespräch</h1>
<h5 class="mt-5 mb-4">Wann haben Sie Zeit um zu telefonieren?</h5>
<p class="fs-5">Wenn Sie wünschen können wir unverbindlich über Ihre Auswahl sprechen, bevor ich Ihnen ein Angebot zuschicke.
<br>
So können Sie alle Fragen und etwaige Unklarheiten direkt mit mir klären.
</p>
</div>
.
2022-09-02 08:29:11 +00:00
added success message
2022-09-01 14:48:18 +00:00
<div class="col-12" style="min-height:800px; ">
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" style="width:1200px;;height:100%;" data-auto-load="false">
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/areya/beratung-solar?hide_gdpr_banner=1',
prefill: {
.
2022-09-02 08:29:11 +00:00
name: "{{session()->get('entry')['vorname']}} {{session()->get('entry')['nachname']}}",
email: "{{session()->get('entry')['email']}}",
.
2022-09-02 08:36:35 +00:00
location: "{{session()->get('entry')['telefon']}}"
added success message
2022-09-01 14:48:18 +00:00
}
});
</script>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<!-- Calendly inline widget end -->
</div>
.
2022-08-31 11:42:08 +00:00
@else
.
2022-09-01 20:27:37 +00:00
<div style="display: none;" class="col-12 text-center" id="no-products-in-checkout">
<br>
<br>
<br>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_3VDN1k.json" background="transparent" speed="1" style="width: 150px; height: 150px; margin-left: 40%" loop autoplay></lottie-player>
<br>
<br>
<br>
<i>Es befinden sich keine Produkte im Warenkorb</i>
<br>
<br>
<br>
<br>
<a class="btn btn-success mb-3" href="{{url('/produkte')}}">Jetzt Produkte entdecken</a>
<br>
<br>
<br>
<br>
<br>
</div>
.
2022-09-01 14:49:45 +00:00
<section id="form-section" style="display: none;">
count all products
2022-08-30 15:07:41 +00:00
<div class="row">
<div class="col-12">
<h1 class="mb-5">Angebot anfragen</h1>
<p class="fs-5">
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,
quaerat quisquam, sapiente vitae voluptas!
</p>
<br>
<br>
</div>
.
2022-08-30 15:51:02 +00:00
<div class="col-12 col-md-7">
.
2022-08-30 16:16:30 +00:00
<div class="card mb-5 shadow-lg" style="background-color: #f7fcf7;">
.
2022-08-30 15:51:02 +00:00
<div class="card-header" style="background-color: #546c8a; color: white;">
flush cart after checkout and show cart success
2022-08-31 11:36:20 +00:00
<h5>
<svg style="fill:currentColor; 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>
added shopping cart and checkout page
2022-08-29 12:53:22 +00:00
</div>
count all products
2022-08-30 15:07:41 +00:00
<div class="card-body">
.
2022-08-30 15:51:02 +00:00
<div class="row">
<div class="col-12 col-md-10 offset-md-1">
flush cart after checkout and show cart success
2022-08-31 11:36:20 +00:00
@if(session()->has('error'))
<br>
<div class="alert alert-danger">{{session()->get('error')}}</div>
<br>
@endif
<x-form id="anfrage" id-name="anfrage" channels="bestaetigung,airtable">
.
2022-09-01 20:16:13 +00:00
<div class="mb-4">
.
2022-08-30 15:51:02 +00:00
<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>
added shopping cart and checkout page
2022-08-29 12:53:22 +00:00
</div>
.
2022-09-01 20:16:13 +00:00
<div class="mb-4">
.
2022-08-30 15:51:02 +00:00
<label for="" class="form-label">Vorname</label>
<input type="text" class="form-control" name="vorname" aria-describedby="" placeholder="Maximilian">
</div>
.
2022-09-01 20:16:13 +00:00
<div class="mb-4">
.
2022-08-30 15:51:02 +00:00
<label for="" class="form-label">Nachname</label>
.
2022-09-01 20:16:13 +00:00
<input type="text" class="form-control" name="nachname" aria-describedby="" placeholder="Mustermann">
.
2022-08-30 15:51:02 +00:00
</div>
.
2022-09-01 20:16:13 +00:00
<div class="mb-4">
.
2022-08-30 15:51:02 +00:00
<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>
.
2022-09-01 20:16:13 +00:00
<div class="mb-4">
.
2022-08-30 15:51:02 +00:00
<label for="exampleInputEmail1" class="form-label">Telefon</label>
add phone and adress libs
2022-09-01 10:14:05 +00:00
<input type="text" class="form-control" name="telefon" id="ctelefon" aria-describedby="emailHelp" placeholder="0941467233">
.
2022-08-30 15:51:02 +00:00
</div>
.
2022-09-01 20:16:13 +00:00
<div class="mb-4">
.
2022-08-30 15:51:02 +00:00
<label for="exampleInputPassword1" class="form-label">Adresse</label>
.
2022-09-04 17:28:39 +00:00
<input type="text" class="form-control fieldLocation mb-3" id="field_location" name="adresse" placeholder="Musterstrasse. 12, 12345 Musterstadt" id="exampleInputPassword1" required autocomplete="off">
.
2022-09-01 12:37:35 +00:00
<div id="address-components" style="display: none;">
.
2022-09-01 20:16:13 +00:00
<div class="row mb-4">
<div class="col-8">
<div class="input-group input-group-sm mb-2">
<span class="input-group-text" id="basic-addon3">Straße:</span>
<input type="text" class="form-control" id="route" disabled>
</div>
</div>
<div class="col-4">
<div class="input-group input-group-sm mb-2">
<span class="input-group-text" id="basic-addon3">Nr.:</span>
<input type="text" class="form-control" id="street-number" disabled required>
</div>
</div>
<div class="col-4">
<div class="input-group input-group-sm mb-2">
<span class="input-group-text" id="basic-addon3">Postleitzahl</span>
<input type="text" class="form-control" id="postal-code" disabled>
</div>
</div>
<div class="col-8">
<div class="input-group input-group-sm mb-2">
<span class="input-group-text" id="basic-addon3">Ort:</span>
<input type="text" class="form-control" id="locality" disabled>
</div>
</div>
.
2022-09-01 12:37:35 +00:00
</div>
.
2022-09-01 20:16:13 +00:00
add phone and adress libs
2022-09-01 10:14:05 +00:00
</div>
.
2022-08-30 15:51:02 +00:00
</div>
.
2022-09-01 20:16:13 +00:00
<div class="mb-4 form-check mt-5">
.
2022-08-30 15:51:02 +00:00
<input type="checkbox" class="form-check-input" id="exampleCheck1" required>
.
2022-09-04 17:28:39 +00:00
<label class="form-check-label" for="exampleCheck1">Ich habe die <a href="{{url('/agb')}}" target="_blank" class="text-decoration-none">AGB</a> und <a href="{{url('datenschutz')}}" target="_blank" class="text-decoration-none">Datenschutzbestimmungen</a> gelesen und akzeptiert.</label>
.
2022-08-30 15:51:02 +00:00
</div>
<div class="text-end">
<button type="submit" class="btn-success btn mt-3">
Anfrage abschicken
</button>
added shopping cart and checkout page
2022-08-29 12:53:22 +00:00
.
2022-08-30 15:51:02 +00:00
</div>
</x-form>
added shopping cart and checkout page
2022-08-29 12:53:22 +00:00
</div>
</div>
.
2022-08-30 15:51:02 +00:00
</div>
</div>
added shopping cart and checkout page
2022-08-29 12:53:22 +00:00
</div>
.
2022-08-30 15:51:02 +00:00
<div class="col-12 col-md-4 offset-md-1">
<div class="card shadow-sm" style="background-color: #f7fcf7;">
<div class="card-header" style="background-color: #546c8a; color: white;">
<h5><svg style="fill:currentColor; 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>
count all products
2022-08-30 15:07:41 +00:00
</div>
<div class="card-body">
<table class="table table-striped">
.
2022-08-30 15:51:02 +00:00
<tbody id="list-products">
</tbody>
count all products
2022-08-30 15:07:41 +00:00
<tfoot>
flush cart after checkout and show cart success
2022-08-31 11:36:20 +00:00
<tr>
<th scope="col">Gesammt:</th>
.
2022-09-01 13:31:02 +00:00
<th colspan="2" class="text-end">
<span id="total-checkout-price">0 €</span>
flush cart after checkout and show cart success
2022-08-31 11:36:20 +00:00
<br>
<small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
</th>
</tr>
count all products
2022-08-30 15:07:41 +00:00
</tfoot>
</table>
.
2022-09-02 09:34:19 +00:00
<a href="{{url('/produkte')}}" class="text-muted text-decoration-none">Weitere Produkte hinzufügen</a>
count all products
2022-08-30 15:07:41 +00:00
</div>
</div>
.
2022-08-30 15:51:02 +00:00
<div class="card mt-5 shadow-sm" style="background-color: #f7fcf7;">
<div class="card-header" style="background-color: #546c8a; color: white;">
<h5><svg style="fill:currentColor; 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>
count all products
2022-08-30 15:07:41 +00:00
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>
.
2022-09-02 10:33:29 +00:00
<div class="text-center mt-4">
<a href="" class="text-muted text-decoration-none text-center" data-bs-toggle="modal" data-bs-target="#shareCart">
Warenkorb teilen
<svg style="fill: currentColor; width: 19px; margin-left: 4px; margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564.907 196.35L388.91 12.366C364.216-13.45 320 3.746 320 40.016v88.154C154.548 130.155 0 160.103 0 331.19c0 94.98 55.84 150.231 89.13 174.571 24.233 17.722 58.021-4.992 49.68-34.51C100.937 336.887 165.575 321.972 320 320.16V408c0 36.239 44.19 53.494 68.91 27.65l175.998-184c14.79-15.47 14.79-39.83-.001-55.3zm-23.127 33.18l-176 184c-4.933 5.16-13.78 1.73-13.78-5.53V288c-171.396 0-295.313 9.707-243.98 191.7C72 453.36 32 405.59 32 331.19 32 171.18 194.886 160 352 160V40c0-7.262 8.851-10.69 13.78-5.53l176 184a7.978 7.978 0 0 1 0 11.06z"/></svg>
</a>
</div>
count all products
2022-08-30 15:07:41 +00:00
</div>
.
2022-08-31 11:42:08 +00:00
</div>
count all products
2022-08-30 15:07:41 +00:00
</section>
.
2022-08-31 11:42:08 +00:00
@endif
count all products
2022-08-30 15:07:41 +00:00
</div>
added shopping cart and checkout page
2022-08-29 12:53:22 +00:00
@stop
add loca storage scripts
2022-08-29 19:16:36 +00:00
@section('scripts')
add phone and adress libs
2022-09-01 10:14:05 +00:00
<script src="{{storage('assets/libs/intl-tel-input/js/intlTelInput.min.js')}}"></script>
add loca storage scripts
2022-08-29 19:16:36 +00:00
<script>
add phone and adress libs
2022-09-01 10:14:05 +00:00
function clearAddressFields() {
.
2022-09-01 12:37:35 +00:00
$('#address-components').hide();
add phone and adress libs
2022-09-01 10:14:05 +00:00
$('#street-number').val('');
.
2022-09-01 12:37:35 +00:00
$('#street-number').prop('disabled', true);
add phone and adress libs
2022-09-01 10:14:05 +00:00
$('#route').val('');
.
2022-09-01 12:37:35 +00:00
$('#locality').val('');
$('#postal-code').val('');
add phone and adress libs
2022-09-01 10:14:05 +00:00
}
function getAddressFiedlValue(addressComponents, $field){
let field = addressComponents.find(obj => obj.types.indexOf($field) > -1);
return field != undefined?field.long_name:'';
}
function initialize() {
add restrictions country de in address result
2022-09-01 11:27:25 +00:00
let input = document.getElementById('field_location');
updated pages
2022-09-01 17:14:02 +00:00
let options = {
.
2022-09-01 12:37:35 +00:00
types: ['address'],
componentRestrictions: { country: "de" }
};
add restrictions country de in address result
2022-09-01 11:27:25 +00:00
var autocomplete = new google.maps.places.Autocomplete(input, options);
add phone and adress libs
2022-09-01 10:14:05 +00:00
autocomplete.addListener("place_changed", () => {
.
2022-09-01 12:37:35 +00:00
clearAddressFields();
add phone and adress libs
2022-09-01 10:14:05 +00:00
const place = autocomplete.getPlace();
if (!place.geometry) return;
var componentMap = {
country: 'country',
locality: 'locality',
administrative_area_level_1 : 'administrative_area_level_1',
administrative_area_level_2 : 'administrative_area_level_2',
postal_code: 'postal_code',
route: 'route',
street_number : 'street_number',
};
.
2022-09-01 12:37:35 +00:00
$('#address-components').show();
add phone and adress libs
2022-09-01 10:14:05 +00:00
let addressComponents = autocomplete.getPlace().address_components;
.
2022-09-01 12:37:35 +00:00
let streetNumber = getAddressFiedlValue(addressComponents, 'street_number');
if(streetNumber == '') {
$('#street-number').prop('disabled', false);
$('#street-number').focus();
}
else {
$('#street-number').prop('disabled', true);
$('#street-number').val(streetNumber);
}
let country = getAddressFiedlValue(addressComponents, 'country');
let route = getAddressFiedlValue(addressComponents, 'route');
$('#route').val(route);
let locality = getAddressFiedlValue(addressComponents, 'locality');
$('#locality').val(locality);
let postalCode = getAddressFiedlValue(addressComponents, 'postal_code');
$('#postal-code').val(postalCode);
$('#street-number').blur(function(){
if($('#street-number').val() == '') $('#street-number').focus();
else{
$('#street-number').prop('disabled', true);
$('#field_location').val(route+' '+$('#street-number').val()+', '+locality+', '+country);
}
});
count all products
2022-08-30 15:07:41 +00:00
});
add phone and adress libs
2022-09-01 10:14:05 +00:00
}
$(window).on('load', google.maps.event, initialize);
let input = document.querySelector("#ctelefon");
let iti = window.intlTelInput(input, {
.
2022-09-02 09:37:06 +00:00
initialCountry: "de",
preferredCountries: ["de"],
geoIpLookup: function(callback) {
add phone and adress libs
2022-09-01 10:14:05 +00:00
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
let countryCode = (resp && resp.country)?resp.country:"us";
callback(countryCode);
});
},
utilsScript: "{{storage('assets/libs/intl-tel-input/js/utils.min.js')}}",
add loca storage scripts
2022-08-29 19:16:36 +00:00
});
.
2022-09-02 09:37:06 +00:00
// iti.getNumber();
.
2022-09-01 14:49:45 +00:00
.
2022-09-01 15:40:34 +00:00
function updateProducts(){}
.
2022-09-01 13:31:02 +00:00
.
2022-09-01 14:49:45 +00:00
$(window).on('load', function(){
add phone and adress libs
2022-09-01 10:14:05 +00:00
$('#anfrage').submit(function(){
objProducts = [];
updateProductsInLocalStorage();
});
flush cart after checkout and show cart success
2022-08-31 11:36:20 +00:00
});
add loca storage scripts
2022-08-29 19:16:36 +00:00
</script>
.
2022-08-30 10:01:04 +00:00
@stop