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