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

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/base.html.twig' %}
  3. {% block base_stylesheets %}
  4.     {{ parent() }}
  5. {% endblock %}
  7. {% block base_body %}
  8.     {# PayOne does not set controllerName and controllerAction -> fix that for easier styling #}
  9.     {% if activeRoute starts with 'frontend.account.payone.card' %}
  10.         {% set controllerName = 'payone' %}
  11.         {% set controllerAction = activeRoute|split('.')|last %}
  12.     {% endif %}
  13.     {% if activeRoute starts with 'frontend.beefclub.membership' %}
  14.         {% set controllerName = 'accountprofile' %}
  15.         {% set controllerAction = activeRoute|split('.')|last %}
  16.     {% endif %}
  18.     {% set doncarneConfig = config("DonCarneTheme.config") %}
  19.     {{ parent() }}
  20. {% endblock %}
  22. {% block base_header_inner %}
  23.     {% sw_include '@Storefront/storefront/layout/header/top-bar.html.twig' %}
  24.     {{ parent() }}
  25. {% endblock %}
  27. {% block base_footer %}
  28.     {% sw_include '@Storefront/solution360/newsletter.html.twig' %}
  29.     {{ parent() }}
  30. {% endblock %}
  32. {% block base_offcanvas_navigation %}
  33.     {% if page.header.navigation %}
  34.         {# always start with is root #}
  35.         <div class="d-none js-navigation-offcanvas-initial-content is-root">
  36.             {% block base_offcanvas_navigation_inner %}
  37.                 {% sw_include '@Storefront/storefront/layout/navigation/offcanvas/navigation.html.twig' with { navigation: page.header.navigation } %}
  38.             {% endblock %}
  39.         </div>
  40.     {% endif %}
  41. {% endblock %}
  43. {% block base_script_hmr_mode %}
  44.     {{ parent() }}
  46.     {# Custom CSS - Nach allen anderen Styles laden #}
  47.     <style>
  48.         /* Wishlist Button transparent machen */
  49.         .product-wishlist.wishlist-inline .product-wishlist-action-circle {
  50.             background-color: transparent !important;
  51.         }
  53.         .product-wishlist.wishlist-inline .product-wishlist-action-circle:hover,
  54.         .product-wishlist.wishlist-inline .product-wishlist-action-circle:focus,
  55.         .product-wishlist.wishlist-inline .product-wishlist-action-circle:active {
  56.             background-color: transparent !important;
  57.         }
  59.         .product-wishlist.wishlist-inline .product-card__wishlist-btn {
  60.             background-color: transparent !important;
  61.             border: none !important;
  62.         }
  64.         .product-wishlist.wishlist-inline .product-wishlist-btn {
  65.             background-color: transparent !important;
  66.             border: none !important;
  67.         }
  69.         /* ====================================================================== */
  70.         /* PRODUKTKARTEN: PREIS UND BOOKMARK AM UNTEREN RAND FIXIEREN */
  71.         /* ====================================================================== */
  73.         /* Listing-Row als Flexbox-Container */
  74.         .cms-element-product-listing .cms-listing-row,
  75.         .cms-listing-row {
  76.             display: flex !important;
  77.             flex-wrap: wrap !important;
  78.         }
  80.         /* Listing-Spalte (Grid-Container) auf volle Höhe */
  81.         .cms-listing-col {
  82.             display: flex !important;
  83.             flex-direction: column !important;
  84.         }
  86.         /* Product-Box (ist gleichzeitig .card) auf volle Höhe der Spalte */
  87.         .product-box.card {
  88.             display: flex !important;
  89.             flex-direction: column !important;
  90.             height: 100% !important;
  91.         }
  93.         /* Produkt-Bild: Feste Höhe, nicht mitwachsen lassen */
  94.         .product-box.card .product-image-wrapper,
  95.         .product-box.card .card-img-top {
  96.             flex-shrink: 0 !important;
  97.             flex-grow: 0 !important;
  98.         }
  100.         /* Mobile Zweispalten-Ansicht: Bilder auf 181px Höhe setzen (überschreibt all.css 140px) */
  101.         @media (max-width: 767.98px) {
  102.             html.mobile-two-column-view .cms-listing-col .product-box .product-image,
  103.             html.mobile-two-column-view .cms-listing-col .product-box .product-image.is-standard {
  104.                 height: 181px !important;
  105.                 object-fit: cover !important;
  106.             }
  107.         }
  109.         /* Card-Body innerhalb Product-Box auf volle Höhe setzen und als Flex-Container */
  110.         .product-box.card > .card-body {
  111.             display: flex !important;
  112.             flex-direction: column !important;
  113.             height: 100% !important;
  114.             flex: 1 !important;
  115.         }
  117.         /* Product-Info innerhalb Product-Box als Flex-Container mit voller Höhe */
  118.         .product-box.card .product-info {
  119.             display: flex !important;
  120.             flex-direction: column !important;
  121.             flex: 1 !important;
  122.             height: 100% !important;
  123.         }
  125.         /* Preis-Wishlist-Wrapper am unteren Rand fixieren */
  126.         .product-box.card .product-price-wishlist-wrapper {
  127.             margin-top: auto !important;
  128.             padding-bottom: 0 !important;
  129.         }
  131.         /* Preis: 10px Abstand zum unteren Rand */
  132.         .product-box.card .product-price-wishlist-wrapper .product-price-wrapper {
  133.             padding-bottom: 10px !important;
  134.         }
  136.         /* Bookmark: 15px Abstand zum unteren Rand */
  137.         .product-box.card .product-price-wishlist-wrapper .product-wishlist.wishlist-inline {
  138.             padding-bottom: 15px !important;
  139.         }
  140.         .product-card__wishlist-btn {
  141.             bottom: 15px;
  142.         }
  144.         /* ====================================================================== */
  145.         /* USP-LISTING: EINHEITLICHE HÖHE */
  146.         /* ====================================================================== */
  148.         /* USP-Listing auf einheitliche min-height setzen, damit alle Karten gleich hoch sind */
  149.         @media (min-width: 992px) {
  150.             .product-detail__usps-listing {
  151.                 min-height: 96px !important;
  152.             }
  153.         }
  154.         .payment-method-label .payment-method-description, .payment-method-label .shipping-method-description, .shipping-method-label .payment-method-description, .shipping-method-label .shipping-method-description {
  155.             width: 75%;
  156.         }
  158.         /* ====================================================================== */
  159.         /* CHECKOUT: PSEUDO-BUTTON-LOOK FÜR ZAHLUNGS- UND VERSANDARTEN */
  160.         /* ====================================================================== */
  162.         .payment-method,
  163.         .shipping-method {
  164.             margin-bottom: 12px;
  165.         }
  167.         .payment-method .payment-form-group,
  168.         .shipping-method .shipping-form-group {
  169.             margin-bottom: 0;
  170.         }
  172.         .payment-method .payment-method-radio,
  173.         .shipping-method .shipping-method-radio {
  174.             border-radius: 8px;
  175.             padding: 16px;
  176.             background-color: #e8e8e8;
  177.             border: 2px solid transparent;
  178.             transition: all 0.2s ease-in-out;
  179.             cursor: pointer;
  180.         }
  182.         /* Radio Button Position korrigieren */
  183.         .payment-method .payment-method-radio input[type="radio"],
  184.         .shipping-method .shipping-method-radio input[type="radio"] {
  185.             left: 0rem !important;
  186.             margin-right: 0.5rem;
  187.         }
  189.         .payment-method .payment-method-radio:hover,
  190.         .shipping-method .shipping-method-radio:hover {
  191.             background-color: #dcdcdc;
  192.             border-color: #c2ba9c;
  193.         }
  195.         /* Aktive/ausgewählte Option - Hintergrund */
  196.         .payment-method .payment-method-radio:has(input[type="radio"]:checked),
  197.         .shipping-method .shipping-method-radio:has(input[type="radio"]:checked) {
  198.             background-color: #f0ede4;
  199.             border-color: #A89968;
  200.         }
  202.         .payment-method .payment-method-radio:has(input[type="radio"]:checked):hover,
  203.         .shipping-method .shipping-method-radio:has(input[type="radio"]:checked):hover {
  204.             background-color: #ebe7db;
  205.         }
  207.         /* Aktive Option - Goldene Farbe für Titel */
  208.         .payment-method .payment-method-radio input[type="radio"]:checked ~ label .payment-method-description strong,
  209.         .shipping-method .shipping-method-radio input[type="radio"]:checked ~ label .shipping-method-description strong {
  210.             color: #A89968;
  211.         }
  213.         .payment-method .payment-method-label,
  214.         .shipping-method .shipping-method-label {
  215.             cursor: pointer;
  216.             margin-bottom: 0;
  217.             width: 100%;
  218.         }
  220.         .payment-method .payment-method-description strong,
  221.         .shipping-method .shipping-method-description strong {
  222.             transition: color 0.2s ease-in-out;
  223.         }
  225.         /* Logos wieder an die richtige Position */
  226.         .payment-method-image,
  227.         .shipping-method-image {
  228.             margin-right: 0.75rem;
  229.         }
  231.         /* "Termin wählen" Button verbessern */
  232.         .delivery-calendar-toggle {
  233.             display: inline-flex !important;
  234.             align-items: center !important;
  235.             gap: 6px !important;
  236.             padding: 6px 12px !important;
  237.             border: 1px solid #A89968 !important;
  238.             border-radius: 6px !important;
  239.             background: #f0ede4 !important;
  240.             text-decoration: none !important;
  241.             color: #A89968 !important;
  242.             font-size: 13px !important;
  243.             font-weight: 600 !important;
  244.             cursor: pointer !important;
  245.             transition: all 0.2s ease !important;
  246.             flex-shrink: 0 !important;
  247.             white-space: nowrap !important;
  248.             margin-top: 6px !important;
  249.         }
  251.         .delivery-calendar-toggle:hover {
  252.             background: #A89968 !important;
  253.             color: #282828 !important;
  254.             border-color: #A89968 !important;
  255.             text-decoration: none !important;
  256.             transform: translateY(-1px);
  257.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  258.         }
  260.         .delivery-calendar-toggle span:first-child {
  261.             font-size: 16px !important;
  262.             line-height: 1 !important;
  263.         }
  264.     </style>
  266.     {# Accessibility Fixes #}
  267.     {% sw_include '@Storefront/storefront/layout/header/accessibility-fix.html.twig' %}
  269.     {# Customer Group Information #}
  270.     {% if page.extensions.customerGroupInfo is defined %}
  271.         {% set customerGroupData = page.extensions.customerGroupInfo.all() %}
  272.         <div id="customerGroupInfo"
  273.              class="d-none"
  274.              data-customer-group-id="{{ customerGroupData.id|default('')|e('html_attr') }}"
  275.              data-customer-group-name="{{ customerGroupData.name|default('')|e('html_attr') }}"
  276.              data-is-logged-in="{{ customerGroupData.isLoggedIn|default(false) ? 'true' : 'false' }}">
  277.         </div>
  278.         <script>
  279.             (function() {
  280.                 var customerGroupInfo = document.getElementById('customerGroupInfo');
  281.                 if (customerGroupInfo) {
  282.                     window.customerGroupInfo = {
  283.                         id: customerGroupInfo.getAttribute('data-customer-group-id'),
  284.                         name: customerGroupInfo.getAttribute('data-customer-group-name'),
  285.                         isLoggedIn: customerGroupInfo.getAttribute('data-is-logged-in') === 'true'
  286.                     };
  288.                     // Setze Cookie mit Kundengruppen-Information
  289.                     if (window.customerGroupInfo.isLoggedIn && window.customerGroupInfo.id) {
  290.                         document.cookie = 'customer_group_id=' + window.customerGroupInfo.id + '; path=/; Secure; SameSite=Lax';
  291.                         document.cookie = 'customer_group_name=' + encodeURIComponent(window.customerGroupInfo.name) + '; path=/; Secure; SameSite=Lax';
  292.                     } else {
  293.                         // Lösche Cookies wenn nicht eingeloggt
  294.                         document.cookie = 'customer_group_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax';
  295.                         document.cookie = 'customer_group_name=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax';
  296.                     }
  297.                 }
  298.             })();
  299.         </script>
  300.     {% endif %}
  302.     {# SCG Shopping Cart Goals - Flyout Fix #}
  303.     <script>
  304.     {% verbatim %}
  305.         (function() {
  306.             // Warte bis PluginManager verfügbar ist
  307.             if (!window.PluginManager) {
  308.                 document.addEventListener('DOMContentLoaded', initSCGFix);
  309.                 return;
  310.             }
  312.             initSCGFix();
  314.             function initSCGFix() {
  315.                 // SCG Plugin mit Selector registrieren
  316.                 setTimeout(function() {
  317.                     if (window.PluginManager.getPlugin('SCGPlugin')) {
  318.                         const SCGPluginClass = window.PluginManager.getPlugin('SCGPlugin').get('class');
  319.                         // Override mit Selector
  320.                         window.PluginManager.deregister('SCGPlugin');
  321.                         window.PluginManager.register('SCGPlugin', SCGPluginClass, '[data-scg-plugin]');
  323.                         // Initialisiere auf allen vorhandenen Elementen
  324.                         document.querySelectorAll('[data-scg-plugin]').forEach(function(el) {
  325.                             window.PluginManager.initializePlugin('SCGPlugin', el);
  326.                         });
  327.                     }
  328.                 }, 100);
  330.                 // Observer für dynamisch geladene SCG-Elemente
  331.                 const observer = new MutationObserver(function(mutations) {
  332.                     mutations.forEach(function(mutation) {
  333.                         mutation.addedNodes.forEach(function(node) {
  334.                             if (node.nodeType === 1) {
  335.                                 // Prüfe ob Node selbst data-scg-plugin hat
  336.                                 if (node.getAttribute && node.getAttribute('data-scg-plugin') !== null) {
  337.                                     setTimeout(function() {
  338.                                         if (window.PluginManager.getPlugin('SCGPlugin')) {
  339.                                             window.PluginManager.initializePlugin('SCGPlugin', node);
  340.                                         }
  341.                                     }, 50);
  342.                                 }
  343.                                 // Prüfe ob Kind-Elemente data-scg-plugin haben
  344.                                 else if (node.querySelectorAll) {
  345.                                     const scgElements = node.querySelectorAll('[data-scg-plugin]');
  346.                                     if (scgElements.length > 0) {
  347.                                         setTimeout(function() {
  348.                                             scgElements.forEach(function(el) {
  349.                                                 if (window.PluginManager.getPlugin('SCGPlugin')) {
  350.                                                     window.PluginManager.initializePlugin('SCGPlugin', el);
  351.                                                 }
  352.                                             });
  353.                                         }, 50);
  354.                                     }
  355.                                 }
  356.                             }
  357.                         });
  358.                     });
  359.                 });
  361.                 // Beobachte Body für Änderungen
  362.                 observer.observe(document.body, {
  363.                     childList: true,
  364.                     subtree: true
  365.                 });
  366.             }
  367.         })();
  368.     {% endverbatim %}
  369.     </script>
  370. {% endblock %}