2022-05-12 11:10:19 +00:00
<! doctype html >
2022-08-25 18:06:43 +00:00
< html lang = " { { str_replace('_', '-', app()->getLocale())}} " >
2022-05-12 11:10:19 +00:00
< head >
2022-09-01 17:12:48 +00:00
< meta name = " checkout " content = " { { url('/checkout')}} " >
2022-08-30 09:36:00 +00:00
< meta name = " get-contents " content = " { { url('/contents/all')}} " >
2022-08-25 18:06:43 +00:00
@ insert ( " content.includes.meta " )
@ insert ( " content.includes.css " )
2022-05-12 11:10:19 +00:00
@ yield ( 'head' )
</ head >
< body >
2022-05-12 13:00:22 +00:00
< nav style = " background-color: #546c8a " class = " pt-1 pb-1 " >
2022-05-12 11:10:19 +00:00
< div class = " container " >
2022-05-12 13:00:22 +00:00
< div class = " row " >
< div class = " col text-end text-light " >
2022-08-25 18:06:43 +00:00
< span >
< a href = " tel:+4996545529550 " class = " text-decoration-none " >
< svg style = " fill: currentColor; width:20px; margin-bottom: 2px; margin-right: 4px; " xmlns = " http://www.w3.org/2000/svg " viewBox = " 0 0 576 512 " >< path d = " M368 336h-32c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zm-48-80v32c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16zm112 144h32c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16zm0-96h32c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16zm80-272H269.06C262.45 13.4 244.87 0 224 0h-80c-20.87 0-38.45 13.4-45.06 32H64C28.65 32 0 60.65 0 96v352c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96c0-35.35-28.65-64-64-64zM144 48h80v320h-80V48zm384 400c0 8.82-7.18 16-16 16H64c-8.82 0-16-7.18-16-16V96c0-8.82 7.18-16 16-16h32v288c0 26.51 21.49 48 48 48h80c26.51 0 48-21.49 48-48V80h48v72c0 22.06 17.94 40 40 40h168v256zm0-304H368V80h144c8.82 0 16 7.18 16 16v48z " /></ svg >
09654 5529550
</ a >
</ span >
< span class = " ms-5 me-5 " >
< a href = " mailto:support@areya.energy " class = " text-decoration-none " > support @ areya . energy </ a >
</ span >
< span > Mo - Do : 9 - 17 Uhr , Fr : 9 - 15 Uhr </ span >
2022-05-12 13:00:22 +00:00
</ div >
</ div >
</ div >
</ nav >
2022-08-30 08:56:44 +00:00
< nav style = " background-color: #79b27f " class = " pt-5 pb-5 " >
2022-05-12 13:00:22 +00:00
< div class = " container " >
2022-09-04 10:05:04 +00:00
< nav class = " navbar navbar-expand-lg " >
< div class = " container-fluid " >
2022-05-12 19:06:28 +00:00
< svg style = " fill: beige; width: 50px; margin-top:-60px;margin-right: -10px; " xmlns = " http://www.w3.org/2000/svg " viewBox = " 0 0 512 512 " >< defs >< style >. fa - secondary { opacity :. 4 } </ style ></ defs >< path d = " M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z " class = " fa-secondary " />< path d = " M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z " class = " fa-primary " /></ svg >
2022-08-25 18:06:43 +00:00
< a href = " { { url('/')}} " class = " fs-2 fw-bold text-decoration-none " > Areya Energy </ a >
2022-09-04 10:05:04 +00:00
< button class = " navbar-toggler " type = " button " data - bs - toggle = " collapse " data - bs - target = " #navbarSupportedContent " aria - controls = " navbarSupportedContent " aria - expanded = " false " aria - label = " Toggle navigation " >
< span class = " navbar-toggler-icon " ></ span >
</ button >
< div class = " collapse navbar-collapse " id = " navbarSupportedContent " >
< ul class = " navbar-nav ms-auto mb-2 mb-lg-0 " >
< style >
. nav - item a {
font - weight : bold ;
color : white ;
font - size : 20 px ;
}
. nav - item a : hover , . nav - item a : active {
color : #546c8a;
}
. dropdown - item a {
color : red ;
}
</ style >
< li class = " nav-item mt-4 mt-md-0 " >
< a class = " nav-link mx-md-4 " href = " { { url('/balkonkraftwerke')}} " > Balkonkraftwerke </ a >
</ li >
< li class = " nav-item " >
< a class = " nav-link mx-md-4 " href = " { { url('/produkte')}} " > Produkte </ a >
</ li >
< li class = " nav-item dropdown mx-md-4 " >
< a class = " nav-link dropdown-toggle " href = " # " role = " button " data - bs - toggle = " dropdown " aria - expanded = " false " >
Servicef
< li class = " nav-item mx-md-4 " >
< a class = " nav-link " href = " { { url('/kontakt')}} " > Kontakt </ a >
</ li >
< li class = " nav-item ms-md-5 " >
< a href = " " data - bs - toggle = " modal " data - bs - target = " #ShoppingCart " class = " position-relative " >
< svg style = " fill: white; width: 30px; margin-top: 6px; " xmlns = " http://www.w3.org/2000/svg " viewBox = " 0 0 448 512 " >< path d = " M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z " /></ svg >
< span class = " position-absolute top-10 start-90 badge rounded-pill bg-danger " style = " display: none; right: -10px; " id = " count-products-in-bag " > 0 </ span >
</ a >
</ li >
</ ul >
2022-08-31 11:14:55 +00:00
2022-09-02 09:34:19 +00:00
</ div >
2022-09-04 10:05:04 +00:00
</ div >
</ nav >
</ div >
</ nav >
< div class = " modal fade " id = " ShoppingCart " tabindex = " -1 " aria - labelledby = " ShoppingCart " aria - hidden = " true " >
< div class = " modal-dialog modal-lg " >
< div class = " modal-content " >
< div class = " modal-header " style = " background-color: #546c8a; color: white; " >
< h5 class = " modal-title " id = " exampleModalLabel " >
< svg style = " fill: currentColor; width: 19px; margin-right: 8px; " xmlns = " http://www.w3.org/2000/svg " viewBox = " 0 0 448 512 " >< path d = " M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z " /></ svg >
Warenkorb
</ h5 >
< button type = " button " class = " btn-close " data - bs - dismiss = " modal " aria - label = " Close " ></ button >
</ div >
< div class = " modal-body " >
< div class = " row " >
< div style = " display: none; " class = " col-12 text-center " id = " no-products " >
< 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 >
< a class = " btn btn-success mb-3 " href = " { { url('/produkte')}} " > Jetzt Produkte entdecken </ a >
< br >
</ div >
< div class = " col-12 " >
< table class = " table table-striped " >
< tbody id = " list-products-in-bag " ></ tbody >
< tfoot >
< tr >
< th class = " text-start " scope = " col " > Gesammt :</ th >
< th colspan = " 3 " class = " text-end " >
< span id = " total-price " > 0 € </ span >
< br >
< small class = " text-end fw-light " > Preise inkl . 19 % Umsatzsteuer </ small >
</ th >
</ tr >
</ tfoot >
</ table >
2022-08-29 12:53:22 +00:00
</ div >
</ div >
2022-09-04 10:05:04 +00:00
</ div >
< div class = " modal-footer " >
<!-- Button trigger modal -->
< a href = " " class = " text-muted text-decoration-none " 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 >
2022-09-02 09:34:19 +00:00
2022-09-04 10:05:04 +00:00
< a href = " { { url('/checkout')}} " type = " button " class = " btn btn-primary " > Angebot unverbindlich anfragen </ a >
</ div >
2022-05-12 13:00:22 +00:00
</ div >
2022-05-12 11:10:19 +00:00
</ div >
2022-09-04 10:05:04 +00:00
</ div >
2022-08-25 18:06:43 +00:00
< div class = " container " >
2022-08-30 16:30:21 +00:00
< div class = " alert alert-warning mt-5 mb-2 alert-dismissible " style = " display: none; " role = " alert " >
2022-08-25 18:06:43 +00:00
< strong > Achtung :</ strong >
< br >
2022-08-29 12:53:22 +00:00
Aufgrund der erhöhten Nachfrage sind derzeit einige Produkte ausverkauft , bzw . nur schwer Lieferbar .
2022-08-25 18:06:43 +00:00
< br >
Bitte Telefonisch Lieferzeiten und Verfügbarkeiten klären .
2022-08-30 16:30:21 +00:00
< button type = " button " class = " btn-close " id = " btn-close-message " data - bs - dismiss = " alert " aria - label = " Close " ></ button >
2022-08-25 18:06:43 +00:00
</ div >
2022-08-29 12:53:22 +00:00
</ div >
2022-09-01 17:12:48 +00:00
< div class = " modal fade bd-example-modal-sm " id = " modal-confirm-addition-of-products " tabindex = " -1 " role = " dialog " aria - labelledby = " mySmallModalLabel " aria - hidden = " true " >
2022-09-01 19:37:21 +00:00
< div class = " modal-dialog " >
2022-09-01 17:12:48 +00:00
< div class = " modal-content " >
2022-09-01 19:37:21 +00:00
< div class = " modal-header " style = " background-color: #546c8a; color: white; " >
< h5 > Vorgefertigten Warenkorb ansehen ? </ h5 >
2022-09-01 17:12:48 +00:00
< button type = " button " class = " btn-close " data - bs - dismiss = " modal " aria - label = " Close " ></ button >
</ div >
< div class = " modal-body " >
2022-09-01 19:37:21 +00:00
< div class = " row " >
< div class = " col-12 " >
< script src = " https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js " ></ script >
< br >
< lottie - player src = " https://assets6.lottiefiles.com/packages/lf20_Ch6lCf.json " background = " transparent " speed = " 0.6 " style = " width: 180px; height: 180px; margin-left:30%; " loop autoplay ></ lottie - player >
< br >
Der angeklickte Link erhält einen vorgefertigten Warenkorb .< br > Sie können diesen importieren und dann die Produkte ansehen .
< br >
< br >
</ div >
</ div >
2022-09-01 17:12:48 +00:00
</ div >
< div class = " modal-footer " >
2022-09-01 19:37:21 +00:00
< button type = " button " class = " btn btn-link " data - bs - dismiss = " modal " > Abbrechen </ button >
< button type = " button " class = " btn btn-primary btn-confirm-product-link " data - bs - dismiss = " modal " > Warenkorb ansehen </ button >
2022-09-01 17:12:48 +00:00
</ div >
</ div >
</ div >
</ div >
< div class = " modal fade bd-example-modal-sm " id = " modal-confirm-product-replacement " tabindex = " -1 " role = " dialog " aria - labelledby = " mySmallModalLabel " aria - hidden = " true " >
2022-09-01 19:37:21 +00:00
< div class = " modal-dialog " >
2022-09-01 17:12:48 +00:00
< div class = " modal-content " >
2022-09-01 19:37:21 +00:00
< div class = " modal-header " style = " background-color: #546c8a; color: white; " >
< h5 > Bestehenden Warenkorb verwerfen ? </ h5 >
2022-09-01 17:12:48 +00:00
< button type = " button " class = " btn-close " data - bs - dismiss = " modal " aria - label = " Close " ></ button >
</ div >
< div class = " modal-body " >
2022-09-01 19:37:21 +00:00
< div class = " row " >
< div class = " col-12 " >
< script src = " https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js " ></ script >
< br >
< lottie - player src = " https://lottie.host/72251293-3f2d-45fe-859c-b967787a424b/XWNIgGYQEy.json " background = " transparent " speed = " 0.2 " style = " width: 180px; height: 180px; margin-left: 28%; " loop autoplay ></ lottie - player >
< br >
Es befinden sich bereits Waren in Ihrem Warenkorb . Durch den Import der neuen Einkaufsliste wird die bestehnde Liste ersetzt .
< br >
< br >
</ div >
</ div >
2022-09-01 17:12:48 +00:00
</ div >
< div class = " modal-footer " >
2022-09-01 19:37:21 +00:00
< div class = " row " >
< div class = " col-4 text-start " >
< button type = " button " class = " btn btn-link " data - bs - dismiss = " modal " > Abbrechen </ button >
</ div >
< div class = " col-8 " >
< button type = " button " class = " btn btn-primary btn-confirm-product-link " data - bs - dismiss = " modal " > Warenkorb ersetzen </ button >
</ div >
</ div >
2022-09-01 17:12:48 +00:00
</ div >
</ div >
</ div >
</ div >
2022-09-02 10:33:29 +00:00
< div class = " modal fade " id = " shareCart " tabindex = " -1 " aria - labelledby = " shareCart " aria - hidden = " true " >
< div class = " modal-dialog " >
< div class = " modal-content " >
< div class = " modal-header " style = " background-color: #546c8a; color: white; " >
< h5 class = " modal-title " id = " exampleModalLabel " > Warenkorb teilen </ h5 >
< button type = " button " class = " btn-close " data - bs - dismiss = " modal " aria - label = " Close " ></ button >
</ div >
< div class = " modal-body " >
< div class = " row " >
< div class = " col-12 " >
< p > Teilen Sie Ihre Einkaufsliste mit Freunden und Bekannten , damit diese Sie dann bei Ihrere Auswahl helfen können .</ p >
</ div >
</ div >
< div class = " input-group input-group-lg " >
2022-09-02 10:42:00 +00:00
2022-09-02 10:59:31 +00:00
< input type = " text " class = " form-control cart-link " aria - label = " Sizing example input " aria - describedby = " inputGroup-sizing-lg " style = " box-shadow: none; " readonly >
< span class = " input-group-text " id = " btn-copy-cart-link " >
2022-09-02 10:42:00 +00:00
< svg style = " fill: currentColor; width: 18px; " xmlns = " http://www.w3.org/2000/svg " viewBox = " 0 0 448 512 " >< path d = " M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM352 32.491a15.88 15.88 0 0 1 7.431 4.195l51.882 51.883A15.885 15.885 0 0 1 415.508 96H352V32.491zM288 464c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V144c0-8.822 7.178-16 16-16h80v240c0 26.51 21.49 48 48 48h112v48zm128-96c0 8.822-7.178 16-16 16H176c-8.822 0-16-7.178-16-16V48c0-8.822 7.178-16 16-16h144v72c0 13.2 10.8 24 24 24h72v240z " /></ svg >
</ span >
2022-09-02 10:33:29 +00:00
</ div >
< br >
2022-09-02 10:42:00 +00:00
< button class = " btn btn-share btn-primary mx-auto d-block " > 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 >
</ button >
2022-09-02 10:33:29 +00:00
</ div >
</ div >
</ div >
</ div >
2022-05-12 11:10:19 +00:00
@ yield ( 'content' )
2022-08-25 18:40:14 +00:00
@ insert ( " content.includes.footer " )
@ insert ( " content.includes.scripts " )
2022-08-29 19:16:36 +00:00
< script >
let objProducts = [];
2022-08-30 15:07:41 +00:00
let formatter = new Intl . NumberFormat ( 'de' , { style : 'currency' , currency : 'EUR' });
let totalPrice = 0 ;
2022-08-30 08:56:44 +00:00
function updateProductsInLocalStorage (){
localStorage . setItem ( " products " , JSON . stringify ( objProducts ));
2022-08-30 15:07:41 +00:00
let quantitys = objProducts . map ( obj => obj . quantity );
let quantityOfProducts = 0 ;
2022-09-03 09:12:22 +00:00
for ( let i = 0 ; i < quantitys . length ; i ++ ) { if ( Number . isInteger ( Number ( quantitys [ i ]))) quantityOfProducts += Number ( quantitys [ i ]); }
2022-08-30 15:07:41 +00:00
$ ( '#count-products-in-bag' ) . text ( quantityOfProducts );
2022-08-30 10:42:15 +00:00
$ ( '#list-products-in-bag' ) . html ( '' );
2022-09-01 15:40:34 +00:00
if ( typeof updateProducts === " function " ) $ ( '#list-products' ) . html ( '' );
2022-08-30 15:07:41 +00:00
totalPrice = 0 ;
2022-08-30 08:56:44 +00:00
if ( objProducts . length > 0 ) {
2022-09-01 18:07:45 +00:00
$ ( '.cart-link' ) . show ();
$ ( " .btn-share " ) . show ();
2022-08-30 10:42:15 +00:00
let ids = objProducts . map ( obj => obj . id );
$ . get ( $ ( 'meta[name="get-contents"]' ) . attr ( 'content' ) + " / " + ids . join ( " , " ), function ( response , status ){
2022-08-30 08:56:44 +00:00
response . contents . forEach ( function ( item ){
2022-08-30 10:42:15 +00:00
let objProductInfo = objProducts . find ( obj => obj . id == item . id );
let elementProduct = `
2022-08-30 08:56:44 +00:00
< 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 >
2022-08-30 15:07:41 +00:00
< select class = " form-select form-select-sm select-quantity " data - id = " ${ item.id } " style = " width:125px; " aria - label = " Default select example " > ` ;
2022-09-02 09:57:57 +00:00
for ( let i = 1 ; i <= 15 ; i ++ ){
2022-08-30 10:42:15 +00:00
if ( objProductInfo . quantity == i ) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>` ;
else elementProduct += `<option value="${i}">Anzahl: ${i}</option>` ;
}
2022-08-30 15:07:41 +00:00
totalPrice += item . data_fields . preis * objProductInfo . quantity ;
2022-08-30 10:42:15 +00:00
elementProduct += `
</ 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 >
2022-08-30 08:56:44 +00:00
</ td >
2022-08-30 15:07:41 +00:00
< td class = " align-middle text-end " > $ { formatter . format ( item . data_fields . preis )} </ td >
2022-08-30 10:42:15 +00:00
</ tr > ` ;
$ ( '#list-products-in-bag' ) . append ( elementProduct );
2022-09-01 19:39:40 +00:00
if ( typeof updateProducts === " function " ) {
elementProduct = `
< 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 select-quantity " data - id = " ${ item.id } " style = " width:125px; " aria - label = " Default select example " > ` ;
2022-09-02 09:57:57 +00:00
for ( let i = 1 ; i <= 15 ; i ++ ){
2022-09-01 19:39:40 +00:00
if ( objProductInfo . quantity == i ) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>` ;
else elementProduct += `<option value="${i}">Anzahl: ${i}</option>` ;
}
elementProduct += `
</ 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 >
</ td >
< td class = " align-middle text-end " > $ { formatter . format ( item . data_fields . preis )} </ td >
</ tr > ` ;
$ ( '#list-products' ) . append ( elementProduct );
}
2022-08-30 08:56:44 +00:00
});
2022-08-30 15:07:41 +00:00
$ ( '#total-price' ) . text ( formatter . format ( totalPrice ));
2022-09-01 15:40:34 +00:00
if ( typeof updateProducts === " function " ) $ ( '#total-checkout-price' ) . text ( formatter . format ( totalPrice ));
2022-08-30 08:56:44 +00:00
});
2022-09-01 10:20:30 +00:00
$ ( '#count-products-in-bag' ) . show ();
2022-08-31 10:48:12 +00:00
$ ( '#list-products-in-bag' ) . parent () . parent () . parent () . parent () . parent () . find ( '.modal-footer' ) . show ();
$ ( '#total-price' ) . parent () . parent () . parent () . show ();
$ ( '#no-products' ) . hide ();
2022-09-01 15:40:34 +00:00
if ( typeof updateProducts === " function " ){
$ ( '#form-section' ) . show ();
$ ( '#list-products' ) . parent () . parent () . parent () . parent () . parent () . find ( '.modal-footer' ) . show ();
$ ( '#total-checkout-price' ) . parent () . parent () . parent () . show ();
$ ( '#no-products-in-checkout' ) . hide ();
}
2022-08-30 15:07:41 +00:00
} else {
2022-09-01 10:20:30 +00:00
$ ( '#count-products-in-bag' ) . hide ();
2022-08-31 10:48:12 +00:00
$ ( '#list-products-in-bag' ) . parent () . parent () . parent () . parent () . parent () . find ( '.modal-footer' ) . hide ();
$ ( '#total-price' ) . parent () . parent () . parent () . hide ();
$ ( '#no-products' ) . show ();
2022-09-01 15:40:34 +00:00
if ( typeof updateProducts === " function " ){
$ ( '#form-section' ) . hide ();
$ ( '#list-products' ) . parent () . parent () . parent () . parent () . parent () . find ( '.modal-footer' ) . hide ();
$ ( '#total-checkout-price' ) . parent () . parent () . parent () . hide ();
2022-09-02 09:56:35 +00:00
@ if ( ! session () -> has ( 'success' ))
2022-09-01 15:40:34 +00:00
$ ( '#no-products-in-checkout' ) . show ();
2022-09-02 09:56:35 +00:00
@ endif
2022-09-01 15:40:34 +00:00
}
2022-09-01 18:07:45 +00:00
$ ( '.cart-link' ) . hide ();
$ ( " .btn-share " ) . hide ();
2022-08-30 15:07:41 +00:00
}
$ ( '#total-price' ) . text ( formatter . format ( totalPrice ));
2022-08-31 10:10:53 +00:00
let productId = $ ( 'meta[name="product-id"]' ) . attr ( 'content' );
if ( productId != undefined ){
2022-08-31 11:12:12 +00:00
let objProductInfo = objProducts . find ( obj => obj . id == productId );
if ( objProductInfo == undefined ) {
2022-08-31 10:10:53 +00:00
$ ( '#btn-add-to-bag' ) . show ();
$ ( '#btn-show-bag' ) . hide ();
2022-09-01 13:14:03 +00:00
if ( objProducts . length > 0 ) $ ( '#btn-check-out' ) . parent () . hide ();
else $ ( '#btn-check-out' ) . parent () . show ();
2022-08-31 10:10:53 +00:00
}
else {
$ ( '#btn-add-to-bag' ) . hide ();
$ ( '#btn-show-bag' ) . show ();
$ ( '#btn-check-out' ) . parent () . hide ();
2022-08-31 11:12:12 +00:00
$ ( '#count-items-in-bag' ) . html ( objProductInfo . quantity + `<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>` );
2022-08-31 10:10:53 +00:00
}
}
2022-09-02 10:03:27 +00:00
if ( objProducts . length > 0 ) {
let url = null ;
if ( window . location . origin == 'http://localhost' ) url = window . location . origin + '/areya-energy/public/' + btoa ( JSON . stringify ( objProducts ));
else url = window . location . origin + '/' + btoa ( JSON . stringify ( objProducts ));
2022-09-02 10:34:12 +00:00
$ ( '.cart-link' ) . val ( url );
2022-09-02 10:03:27 +00:00
const shareData = {
title : " Share cart list " ,
text : 'share cart list' ,
url : url ,
};
$ ( " .btn-share " ) . click ( async function () {
if ( navigator . share ) { try { await navigator . share ( shareData ); } catch ( err ) { console . warn ( err ); } }
else { console . warn ( 'Native Web Sharing not supported' ); }
});
} else {
$ ( '.cart-link' ) . hide ();
$ ( " .btn-share " ) . hide ();
}
2022-08-30 08:56:44 +00:00
}
2022-08-29 19:24:04 +00:00
function addToBag ( productId ){
2022-08-30 15:07:41 +00:00
let objProductInfo = objProducts . find ( obj => obj . id == productId );
let index = objProducts . indexOf ( objProductInfo );
if ( index == - 1 ) objProducts . push ({ id : productId , quantity : 1 });
2022-08-29 19:24:04 +00:00
updateProductsInLocalStorage ();
}
2022-09-01 17:12:48 +00:00
function isJson ( str ) {
try { JSON . parse ( str ); }
2022-09-01 17:33:34 +00:00
catch ( e ) { return false ; }
return true ;
}
function isEncoded ( str ){
try { atob ( str ); }
catch ( e ) { return false ; }
2022-09-01 17:12:48 +00:00
return true ;
}
2022-08-29 19:16:36 +00:00
$ ( window ) . on ( 'load' , function (){
2022-08-30 16:30:21 +00:00
if ( localStorage . getItem ( " dismiss-message " ) == 1 ) $ ( '.alert-dismissible' ) . remove ();
else $ ( '.alert-dismissible' ) . show ();
$ ( '#btn-close-message' ) . click ( function (){ localStorage . setItem ( " dismiss-message " , 1 ); });
2022-08-29 19:16:36 +00:00
if ( localStorage . getItem ( " products " ) != null ) objProducts = JSON . parse ( localStorage . getItem ( " products " ));
2022-09-01 17:12:48 +00:00
let urlPath = window . location . pathname ;
let code = urlPath . split ( " / " );
code = code [ code . length - 1 ];
2022-09-01 17:33:34 +00:00
if ( isEncoded ( code )){
let productLink = atob ( code );
if ( isJson ( productLink )){
if ( objProducts . length > 0 ) $ ( '#modal-confirm-product-replacement' ) . modal ( 'show' );
else $ ( '#modal-confirm-addition-of-products' ) . modal ( 'show' );
}
$ ( '.btn-confirm-product-link' ) . click ( function (){
objProducts = JSON . parse ( productLink );
updateProductsInLocalStorage ();
window . location . replace ( $ ( 'meta[name="checkout"]' ) . attr ( 'content' ));
});
2022-09-01 17:12:48 +00:00
}
2022-08-30 08:56:44 +00:00
updateProductsInLocalStorage ();
2022-08-30 10:42:15 +00:00
$ ( document ) . on ( 'click' , '.btn-remove-product' , function (){
let productId = $ ( this ) . attr ( 'data-id' );
2022-08-30 15:07:41 +00:00
let objProductInfo = objProducts . find ( obj => obj . id == productId );
2022-08-30 10:42:15 +00:00
let index = objProducts . indexOf ( objProductInfo );
if ( index != - 1 ) objProducts . splice ( index , 1 );
updateProductsInLocalStorage ();
});
$ ( document ) . on ( 'change' , '.select-quantity' , function (){
2022-08-30 15:07:41 +00:00
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 ();
2022-08-30 10:42:15 +00:00
});
2022-09-02 10:59:31 +00:00
$ ( '#btn-copy-cart-link' ) . click ( function (){
$ ( '.cart-link' ) . select ();
document . execCommand ( " copy " );
$ ( this ) . html ( `<svg style="fill: green; width: 18px;"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 32c8.823 0 16 7.178 16 16v352c0 8.822-7.177 16-16 16H48c-8.822 0-16-7.178-16-16V80c0-8.822 7.178-16 16-16h352m-34.301 98.293l-8.451-8.52c-4.667-4.705-12.265-4.736-16.97-.068l-163.441 162.13-68.976-69.533c-4.667-4.705-12.265-4.736-16.97-.068l-8.52 8.451c-4.705 4.667-4.736 12.265-.068 16.97l85.878 86.572c4.667 4.705 12.265 4.736 16.97.068l180.48-179.032c4.704-4.667 4.735-12.265.068-16.97z"/></svg>` );
});
2022-08-29 19:16:36 +00:00
});
</ script >
2022-05-12 11:10:19 +00:00
@ yield ( 'scripts' )
</ body >
2022-08-29 12:53:22 +00:00
</ html >