custom/plugins/DreiwmBrandstetterPlugin/src/Resources/views/storefront/base.html.twig line 1

Open in your IDE?
  1. {% sw_extends "@Storefront/storefront/base.html.twig" %}
  3. {% block base_main %}
  4.     {% set currentRoute = app.request.attributes.get('_route') %}
  5.     {% set isLoginRoute = currentRoute in ['frontend.account.login.page', 'frontend.account.login'] %}
  6.     {{ parent() }}
  7.     {% if not isLoginRoute %}
  8.     {# Ein modales Fenster zum Zurücksetzen der Lieferoptionen #}
  9.     <div class="modal" id="resetDeliveryOptionsModal" tabindex="-1" role="dialog">
  10.         <div class="modal-dialog" role="document">
  11.             <div class="modal-content">
  12.                 <div class="modal-body">
  13.                     <div class="deliverySelectorModal">
  14.                         <img src="{{ asset('/assets/DALL·E 2023-11-21 13.37.49 - Ausrufebrot.svg', 'theme') }}"
  15.                              alt="Lieferart zurücksetzen Bild" id="reset-delivery-options-spinner">
  16.                         <div class="deliverySelectorModalContent">
  17.                             <div class="deliverySelectorModalHeadline">{{ "brandstetter.desiredDeliveryResetDescription"|trans|sw_sanitize }}</div>
  18.                             <button class="deliverySelectorButton" type="button"
  19.                                     data-dismiss="modal">{{ "brandstetter.desiredDeliveryResetCancel"|trans|sw_sanitize }}</button>
  20.                             <button class="deliverySelectorButton" type="submit"
  21.                                     id="deliverySelectorReset">{{ "brandstetter.desiredDeliveryReset"|trans|sw_sanitize }}</button>
  22.                         </div>
  23.                     </div>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.     </div>
  29.     {# Hier wird der DeliverySelector angezeigt #}
  30.     <div class="deliverySelector" id="deliverySelector">
  31.         {% sw_include '@DreiwmBrandstetterPlugin/storefront/component/brandstetter/delivery-selector/loading-spinner.html.twig' %}
  32.         <div class="deliverySelectorContent" id="deliverySelectorContent">
  33.             {% if app.request.cookies.get('CustomerHasSelectedDelivery') == 'true' and app.request.cookies.get('CustomerHasSelectedDelivery')!= 'false' and app.request.cookies.get('customerSelectedDeliveryId') %}
  34.                 {% sw_include '@DreiwmBrandstetterPlugin/storefront/component/brandstetter/delivery-selector/user-has-selected-delivery.html.twig' %}
  35.             {% else %}
  36.                 {% sw_include '@DreiwmBrandstetterPlugin/storefront/component/brandstetter/delivery-selector/user-has-not-selected-delivery.html.twig' %}
  37.             {% endif %}
  38.         </div>
  39.     </div>
  40.     <script>
  41.         (function () {
  42.             'use strict';
  44.             // ===== Helpers =====
  45.             const WRAP_ID = 'delivery-selector-wrapper';
  46.             const SPIN_ID = 'delivery-selector-spinner';
  48.             function readCookies() {
  49.                 return document.cookie.split('; ').reduce((acc, c) => {
  50.                     const i = c.indexOf('=');
  51.                     if (i > -1) acc[decodeURIComponent(c.slice(0, i))] = decodeURIComponent(c.slice(i + 1));
  52.                     return acc;
  53.                 }, {});
  54.             }
  55.             function hasSelectedDeliveryCookie() {
  56.                 const c = readCookies();
  57.                 const v = (c['CustomerHasSelectedDelivery'] || '').toLowerCase();
  58.                 return v === 'true' || v === '1' || v === 'yes' || !!c['customerSelectedDeliveryId'];
  59.             }
  60.             // Großes "nicht gewählt"-Widget zuverlässig erkennen (beide Varianten + Fallback-Klasse)
  61.             function domShowsNotSelected() {
  62.                 const camel = document.getElementById('deliverySelectorContent');
  63.                 return !!(
  64.                     document.getElementById('delivery-selector-content') ||
  65.                     (camel && camel.querySelector && camel.querySelector('#delivery-selector-content')) ||
  66.                     document.querySelector('.delivery-selector-content')
  67.                 );
  68.             }
  69.             function isBackForward(evt) {
  70.                 const nav = (performance.getEntriesByType && performance.getEntriesByType('navigation')[0]) || null;
  71.                 return (evt && evt.persisted === true) || (nav && nav.type === 'back_forward');
  72.             }
  73.             function isPDS() {
  74.                 return document.body.classList.contains('is-ctl-product') || !!document.querySelector('.product-detail');
  75.             }
  76.             function isListing() {
  77.                 const b = document.body.classList;
  78.                 return b.contains('is-ctl-navigation') || b.contains('is-ctl-search') || !!document.querySelector('.cms-element-product-listing');
  79.             }
  80.             function restoreDeliverySelectorUI() {
  81.                 const wrap = document.getElementById(WRAP_ID);
  82.                 const spin = document.getElementById(SPIN_ID);
  83.                 if (wrap) wrap.style.visibility = 'visible';
  84.                 if (spin) spin.style.display = 'none';
  85.             }
  87.             // Cookies/URL-Helpers (auch global verfügbar)
  88.             function getCookie(name) {
  89.                 const m = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1') + '=([^;]*)'));
  90.                 return m ? decodeURIComponent(m[1]) : undefined;
  91.             }
  92.             function setCookie(name, value) {
  93.                 const date = new Date();
  94.                 date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
  95.                 document.cookie = name + '=' + (value || '') + '; expires=' + date.toUTCString() + '; path=/; SameSite=None; Secure';
  96.             }
  97.             function deleteCookie(name) {
  98.                 document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
  99.             }
  100.             function updateURLParameter(url, param, val) {
  101.                 const [base, query = ''] = url.split('?');
  102.                 const parts = query ? query.split('&').filter(p => p.split('=')[0] !== param) : [];
  103.                 parts.push(param + '=' + encodeURIComponent(val));
  104.                 return base + '?' + parts.join('&');
  105.             }
  106.             window.updateURLParameter = updateURLParameter;
  107.             window.setCookie = setCookie;
  108.             window.deleteCookie = deleteCookie;
  110.             // ===== Positions & Drag =====
  111.             function updatePositions() {
  112.                 const positions = JSON.parse(localStorage.getItem('positions') || '{}');
  113.                 document.querySelectorAll('.deliverySelector').forEach(el => {
  114.                     const pos = positions[el.id];
  115.                     if (pos) {
  116.                         let newLeft = (parseFloat(pos.left) * window.innerWidth) / 100;
  117.                         let newTop  = (parseFloat(pos.top)  * window.innerHeight) / 100;
  118.                         newLeft = Math.min(window.innerWidth  - el.clientWidth,  Math.max(0, newLeft));
  119.                         newTop  = Math.min(window.innerHeight - el.clientHeight, Math.max(0, newTop));
  120.                         el.style.left = newLeft + 'px';
  121.                         el.style.top  = newTop  + 'px';
  122.                     }
  123.                 });
  124.             }
  125.             window.addEventListener('resize', updatePositions);
  127.             document.addEventListener('DOMContentLoaded', function () {
  128.                 updatePositions();
  130.                 const positions = JSON.parse(localStorage.getItem('positions') || '{}');
  131.                 const els = document.querySelectorAll('.deliverySelector');
  133.                 els.forEach(el => {
  134.                     const pos = positions[el.id];
  135.                     if (pos) {
  136.                         el.style.left = (parseFloat(pos.left) * window.innerWidth / 100)  + 'px';
  137.                         el.style.top  = (parseFloat(pos.top)  * window.innerHeight / 100) + 'px';
  138.                     } else {
  139.                         const elementWidth = 350, elementHeight = 420;
  140.                         el.style.left = (window.innerWidth  - elementWidth)  + 'px';
  141.                         el.style.top  = (window.innerHeight - elementHeight) + 'px';
  142.                     }
  143.                 });
  145.                 els.forEach(el => {
  146.                     let isDragging = false, startX = 0, startY = 0, initialLeft = 0, initialTop = 0;
  147.                     el.addEventListener('mousedown', ev => {
  148.                         isDragging = true;
  149.                         startX = ev.clientX; startY = ev.clientY;
  150.                         initialLeft = parseFloat(el.style.left) || 0;
  151.                         initialTop  = parseFloat(el.style.top)  || 0;
  152.                     });
  153.                     document.addEventListener('mousemove', ev => {
  154.                         if (!isDragging) return;
  155.                         let newLeft = initialLeft + (ev.clientX - startX);
  156.                         let newTop  = initialTop  + (ev.clientY - startY);
  157.                         newLeft = Math.min(window.innerWidth  - el.clientWidth,  Math.max(0, newLeft));
  158.                         newTop  = Math.min(window.innerHeight - el.clientHeight, Math.max(0, newTop));
  159.                         el.style.left = newLeft + 'px';
  160.                         el.style.top  = newTop  + 'px';
  161.                     });
  162.                     document.addEventListener('mouseup', () => {
  163.                         if (!isDragging) return;
  164.                         isDragging = false;
  165.                         positions[el.id] = {
  166.                             left: (100 * (parseFloat(el.style.left) / window.innerWidth))  + '%',
  167.                             top:  (100 * (parseFloat(el.style.top)  / window.innerHeight)) + '%'
  168.                         };
  169.                         localStorage.setItem('positions', JSON.stringify(positions));
  170.                     });
  171.                 });
  173.                 // "Lieferart zurücksetzen"
  174.                 const resetBtn = document.getElementById('deliverySelectorReset');
  175.                 if (resetBtn) {
  176.                     resetBtn.addEventListener('click', function () {
  177.                         const spinner = document.getElementById('reset-delivery-options-spinner');
  178.                         if (spinner) spinner.style.animation = 'spin 1s linear infinite';
  180.                         const xhr = new XMLHttpRequest();
  181.                         xhr.open('POST', '/resetCustomerDeliveryChoice', true);
  182.                         xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
  183.                         xhr.onload = function () {
  184.                             if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
  185.                                 const content = document.getElementById('deliverySelectorContent');
  186.                                 if (content) content.innerHTML = xhr.responseText;
  187.                                 setCookie('CustomerHasSelectedDelivery', 'false');
  188.                                 setCookie('customerSelectedDeliveryId', '');
  189.                                 setCookie('customerSelectedDate', '');
  190.                             }
  191.                             location.reload();
  192.                         };
  193.                         xhr.send(JSON.stringify({ date: 'inputValue' }));
  194.                     });
  195.                 }
  196.             });
  198.             // ===== Auto-Add nach Overlay-Flow =====
  199.             window.addEventListener('load', function () {
  200.                 // Back-Reload-Flag für diese URL bei normalem Load zurücksetzen (neuer Zyklus)
  201.                 const backKey = 'backReloadedOnce:' + location.pathname + location.search;
  202.                 sessionStorage.removeItem(backKey);
  204.                 if (sessionStorage.getItem('detailAutoAdd') !== '1') return;
  205.                 sessionStorage.removeItem('detailAutoAdd');
  207.                 // (1) Shopware-Buy-Form (häufigster Fall)
  208.                 let form = document.querySelector('form.buy-widget[data-add-to-cart]');
  209.                 // (2) Fallback: generischer Add-to-Cart Endpoint
  210.                 if (!form) form = document.querySelector('form[action*="/checkout/line-item/add"]');
  212.                 if (form) {
  213.                     form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
  214.                     return;
  215.                 }
  216.                 // (3) Fallback: Button klicken
  217.                 let btn = document.querySelector('form.buy-widget button.btn-buy, button.btn-buy, button[name="add-to-cart"]');
  218.                 if (btn) {
  219.                     btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
  220.                     return;
  221.                 }
  222.                 console.warn('Auto-Add: Kein Buy-Form/-Button gefunden.');
  223.             });
  225.             // ===== Nur bei Zurück/Vorwärts: Reload, wenn DOM ≠ Cookies =====
  226.             function scheduleBackFix(trigger) {
  227.                 if (!(isPDS() || isListing())) return;
  229.                 const key = 'backReloadedOnce:' + location.pathname + location.search;
  230.                 const already = sessionStorage.getItem(key) === '1';
  232.                 function needReloadNow() {
  233.                     return hasSelectedDeliveryCookie() && domShowsNotSelected();
  234.                 }
  235.                 function doReload() {
  236.                     if (already) return;
  237.                     sessionStorage.setItem(key, '1'); // Loop verhindern
  238.                     location.reload();                // EIN Reload; Verlauf bleibt korrekt
  239.                 }
  241.                 // 1) Sofort prüfen
  242.                 if (needReloadNow()) { doReload(); return; }
  244.                 // 2) Kurze Nachchecks (DOM/BFCACHE Timing)
  245.                 const delays = [0, 120, 350, 900];
  246.                 let i = 0;
  247.                 (function again(){
  248.                     if (needReloadNow()) { doReload(); return; }
  249.                     if (i < delays.length) setTimeout(() => { i++; again(); }, delays[i]);
  250.                 })();
  252.                 // 3) DOM-Mutationen kurz beobachten
  253.                 const obs = new MutationObserver(() => {
  254.                     if (needReloadNow()) { obs.disconnect(); doReload(); }
  255.                 });
  256.                 obs.observe(document.documentElement, { childList: true, subtree: true });
  257.                 setTimeout(() => obs.disconnect(), 1500);
  258.             }
  260.             // Back/Forward & Normal-Show unterscheiden
  261.             window.addEventListener('pageshow', function (e) {
  262.                 if (isBackForward(e)) {
  263.                     // Nur bei Back/Forward: Auto-Flags aufräumen & ggf. Back-Fix starten
  264.                     sessionStorage.removeItem('autoAddProductName');
  265.                     sessionStorage.removeItem('autoClickOnReload');
  266.                     sessionStorage.removeItem('detailAutoAdd');
  267.                     scheduleBackFix('pageshow');
  268.                 } else {
  269.                     // Normaler Load: pfadbezogenes Back-Flag löschen (neuer Zyklus)
  270.                     const backKey = 'backReloadedOnce:' + location.pathname + location.search;
  271.                     sessionStorage.removeItem(backKey);
  272.                 }
  273.                 restoreDeliverySelectorUI();
  274.             });
  276.             window.addEventListener('popstate', () => scheduleBackFix('popstate'));
  278.             // Fallback: wenn Tab wieder sichtbar wird
  279.             document.addEventListener('visibilitychange', function () {
  280.                 if (document.visibilityState === 'visible') restoreDeliverySelectorUI();
  281.             });
  283.             // ===== Optional: Listing-Filter p=1 setzen =====
  284.             window.setfilter = function (name, value) {
  285.                 setCookie(name, value);
  286.                 const isListingPage = ({{ page.cmsPage.type|json_encode()|raw }}) === 'product_list';
  287.                 if (isListingPage) {
  288.                     location.href = updateURLParameter(window.location.href, 'p', 1);
  289.                 }
  290.             };
  291.         })();
  292.     </script>
  293.     {% endif %}
  295. {% endblock %}
  296. {# Der Scroll-up-Button soll nur im Footer erscheinen #}
  297. {% block base_scroll_up %}
  298. {% endblock %}
  300. {% block base_pseudo_modal %}
  301.     {#    Muss in ein include sein und kein sw_include, da sonst Shopware die Original-Datei auch lädt und das
  302. Pseudo-Modal leine Blöcke zum Überschreiben hat für BFSG #}
  303.     {% include "@DreiwmBrandstetterPlugin/storefront/component/pseudo-modal.html.twig" %}
  304. {% endblock %}