Template-Quelle: core/base/base.html

<!DOCTYPE html>
{% load i18n l10n hijack_tags canonical_tags %}
{% get_current_language as LANGUAGE_CODE %}

{% block language-definition %}
    {% if LANGUAGE_CODE == 'de' or LANGUAGE_CODE == 'fr' or LANGUAGE_CODE == 'it' %}
        <html lang="{{ LANGUAGE_CODE }}-CH" class="no-js">
    {% else %}
        <html lang="{{ LANGUAGE_CODE }}" class="no-js">
    {% endif %}
{% endblock %}

    <head>
        <title>{% block title %}{{ site.settings.page_title|default_if_none:"" }}{% endblock %}</title>

        {# Overwrite or add additional bot meta via block 'bots' #}
        {% block bots %}
            <meta name="robots" content="all,noodp">
        {% endblock %}

        {# Overwrite or add additional meta via block 'meta' #}
        {% block meta %}
            <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
            <meta name="application-name" content="{% block application-name %}{{ site.settings.application_name|default_if_none:site.settings.page_title|default_if_none:"" }}{% endblock %}">
            <meta name="theme-color" content="{% block theme-color %}{{ site.settings.application_color|default_if_none:"" }}{% endblock %}">
            <meta name="apple-mobile-web-app-capable" content="yes">
            {% if GOOGLE_SITE_VERIFICATION %}
                <meta name="google-site-verification" content="{{ GOOGLE_SITE_VERIFICATION }}">
            {% endif %}
        {% endblock %}

        {% block meta_opengraph %}{% endblock %}

        {% if is_pdf %}
            {% if base_url %}
                <base href="{{ base_url }}">
            {% endif %}
        {% endif %}

        {# CSRF Token #}
        <meta name="csrf-token" content="{{ csrf_token }}">

        {# Overwrite or add additional favicon via block 'favicon' #}
        {% block favicon %}
            <link rel="apple-touch-icon" sizes="57x57" href="{% static "images/favicon/apple-touch-icon-57x57.png" %}">
            <link rel="apple-touch-icon" sizes="114x114" href="{% static "images/favicon/apple-touch-icon-114x114.png" %}">
            <link rel="apple-touch-icon" sizes="72x72" href="{% static "images/favicon/apple-touch-icon-72x72.png" %}">
            <link rel="apple-touch-icon" sizes="144x144" href="{% static "images/favicon/apple-touch-icon-144x144.png" %}">
            <link rel="apple-touch-icon" sizes="60x60" href="{% static "images/favicon/apple-touch-icon-60x60.png" %}">
            <link rel="apple-touch-icon" sizes="120x120" href="{% static "images/favicon/apple-touch-icon-120x120.png" %}">
            <link rel="apple-touch-icon" sizes="76x76" href="{% static "images/favicon/apple-touch-icon-76x76.png" %}">
            <link rel="apple-touch-icon" sizes="152x152" href="{% static "images/favicon/apple-touch-icon-152x152.png" %}">

            <link rel="shortcut icon" type="image/x-icon" href="{% static "images/favicon/favicon.ico" %}">
            <link rel="icon" type="image/png" href="{% static "images/favicon/favicon-196x196.png" %}" sizes="196x196">
            <link rel="icon" type="image/png" href="{% static "images/favicon/favicon-96x96.png" %}" sizes="96x96">
            <link rel="icon" type="image/png" href="{% static "images/favicon/favicon-32x32.png" %}" sizes="32x32">
            <link rel="icon" type="image/png" href="{% static "images/favicon/favicon-16x16.png" %}" sizes="16x16">
            <link rel="icon" type="image/png" href="{% static "images/favicon/favicon-128.png" %}" sizes="128x128">
        {% endblock %}

        {# Overwrite or add additional css via block 'css' #}
        {% block external_css %}
            <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=greek">
        {% endblock %}

        {% block css %}
            <link rel="stylesheet" type="text/css" href="{% static "css/icons.css" %}?{{ ESHOP_VERSION }}{{ PRJ_VERSION }}{{ UI_VERSION }}">
            <link rel="stylesheet" type="text/css" href="{% static "css/app.css" %}?{{ ESHOP_VERSION }}{{ PRJ_VERSION }}{{ UI_VERSION }}">
        {% endblock %}

        {# Overwrite or add additional js via block 'js' #}
        {% block js %}
            <script>
                {# this ensures, that the CSS is loaded before DOMContentLoaded event happens. #}
                {# see https://molily.de/domcontentloaded/ #}
                {# see https://javascript.info/onload-ondomcontentloaded#domcontentloaded-and-styles #}
                var cssLoaded = true;
            </script>
            <script defer src="{% static "js/app.js" %}?{{ ESHOP_VERSION }}{{ PRJ_VERSION }}{{ UI_VERSION }}"></script>
        {% endblock %}

        {% block meta_alternate %}
            {% get_alternate_urls object True as alternates %}
            {% for lang_code, href in alternates %}
                <link {% if lang_code == LANGUAGE_CODE %}rel="canonical"{% else %}rel="alternate" hreflang="{{ lang_code }}"{% endif %} href="{{ request.is_secure|yesno:"https,http" }}://{{ request.META.HTTP_HOST }}{{ href }}">
            {% endfor %}
        {% endblock %}

        {# Add additional head informations via block 'extra-head' #}
        {% block extra-head %}
            {% if GOOGLE_ANALYTICS_ID or GOOGLE_ADWORDS_ID %}{# inject google analytics code #}
                {% block google-analytics %}
                    {% if GOOGLE_ANALYTICS_ID %}
                        <script async src="https://www.googletagmanager.com/gtag/js?id={{ GOOGLE_ANALYTICS_ID }}"></script>
                    {% else %}
                        <script async src="https://www.googletagmanager.com/gtag/js?id={{ GOOGLE_ADWORDS_ID }}"></script>
                    {% endif %}
                    <script>
                        window.dataLayer = window.dataLayer || [];
                        function gtag(){dataLayer.push(arguments);}
                        gtag('js', new Date());
                        {% if GOOGLE_ANALYTICS_ID %}gtag('config', '{{ GOOGLE_ANALYTICS_ID }}');{% endif %}
                        {% if GOOGLE_ADWORDS_ID %}gtag('config', '{{ GOOGLE_ADWORDS_ID }}');{% endif %}
                    </script>
                {% endblock %}
            {% endif %}
            {% if GOOGLE_TAG_MANAGER_ID %}{# inject google tag manager code #}
                {% block google-tag-manager-head %}
                    <script>
                        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                        })(window,document,'script','dataLayer','{{ GOOGLE_TAG_MANAGER_ID }}');
                    </script>
                {% endblock %}
            {% endif %}
            {% if FACEBOOK_PIXEL_ID %}
                <!-- Facebook Pixel Code -->
                <script>
                    !function(f,b,e,v,n,t,s)
                    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
                    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
                    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
                    n.queue=[];t=b.createElement(e);t.async=!0;
                    t.src=v;s=b.getElementsByTagName(e)[0];
                    s.parentNode.insertBefore(t,s)}(window,document,'script',
                    'https://connect.facebook.net/en_US/fbevents.js');
                    fbq('init', '{{ FACEBOOK_PIXEL_ID }}');
                    fbq('track', 'PageView');
                </script>
                <noscript>
                    <img height="1" width="1" src="https://www.facebook.com/tr?id={{ FACEBOOK_PIXEL_ID }}&ev=PageView&noscript=1"/>
                </noscript>
                <!-- End Facebook Pixel Code -->
            {% endif %}
        {% endblock %}
    </head>

    {# Add your own body classes via block 'bodyclass' #}
    <body class="{% block body-class %}{% endblock %}">

    {% if GOOGLE_TAG_MANAGER_ID %}{# inject google tag manager noscript code #}
        {% block google-tag-manager-body %}
            <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ GOOGLE_TAG_MANAGER_ID }}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        {% endblock %}
    {% endif %}

    {% block flash-messages %}
        <div data-flashmessages class="flashmessages">
            {% hijack_notification %}
            {% block endusermode-message %}
                {% if request.session.endusermode_enabled %}
                    <div class="flashmessage warning">
                        <div class="container">
                            <form action="{% url "logout" %}" method="POST">
                                {% csrf_token %}
                                {{ _('Sie befinden sich im Endkunden-Modus.') }}
                                <button class="button secondary tiny">{{ _('Abmelden') }}</button>
                            </form>
                        </div>
                    </div>
                {% endif %}
            {% endblock %}
            {% for message in messages %}
                <div class="flashmessage {{ message.tags }} {{ " "|join:message.extra_tags }}" data-closable>
                    <div class="container">
                        {{ message }}
                    </div>
                    <button class="close-button" type="button" data-close>
                        <i class="icon icon-close-fill" aria-hidden="true"></i>
                    </button>
                </div>
            {% endfor %}
            {% block callout_notifications %}
                {% for block in cms_notifications %}
                    {% if block.attributes.cms_text_content %}
                        <div class="flashmessage {{ block.attributes.cms_notification_type }}">
                            <div class="container">
                                {{ block.attributes.cms_text_content|safe }}
                            </div>
                            {% if block.attributes.cms_notification_closeable %}
                                <button class="close-button" type="button" data-close-notification="{{ block.id }}">
                                    <i class="icon icon-close-fill"></i>
                                </button>
                            {% endif %}
                        </div>
                    {% endif %}
                {% endfor %}
            {% endblock callout_notifications %}
            {% if show_cookie_tip %}
                <div class="flashmessage info">
                    <div class="container">
                        {{ _("Um Ihnen in unserem eShop den bestmöglichen Service zu gewährleisten verwenden wir Cookies.") }}
                        {% if cookie_tip_url %}
                            {% blocktrans trimmed with cookie_tip_url=cookie_tip_url %}
                                Erfahren Sie mehr über die <a href="{{ cookie_tip_url }}">Cookie-Nutzung</a>
                            {% endblocktrans %}
                        {% endif %}
                    </div>
                    <button class="close-button" type="button" data-cookie-close>
                        <i class="icon icon-close-fill" aria-hidden="true"></i>
                    </button>
                </div>
            {% endif %}
        </div>
    {% endblock %}

    {% block header %}
        {% include "core/base/shopheader.html" %}
        {% include "core/base/printheader.html" %}
    {% endblock %}

    {% block main %}
        <main id="app" class="{% block main-class %}bg-white{% endblock %}">
            {% block main-content %}{% endblock %}
        </main>
    {% endblock %}

    {% block footer %}
        {% include "core/base/shopfooter.html" %}
    {% endblock %}

    {% block confirm-reveal %}
        <div
            id="shop_confirm_reveal"
            class="reveal reveal--confirm"
            data-reveal
            data-confirm-reveal
            data-close-on-click="false"
            data-close-on-esc="false"
            data-reset-on-close="true"
        >
            <i class="icon loader reveal__state-icon reveal__state-icon--loading"></i>
            <i class="icon icon-check reveal__state-icon reveal__state-icon--loaded"></i>
            <div class="reveal__content h6" data-reveal-content>{{ _("Sind Sie sich sicher?") }}</div>
            <div class="reveal__footer">
                <button type="button" class="button hollow small" data-confirm-abort="{{ _("Nein") }}" data-close>
                    {{ _("Nein") }}
                </button>
                <button type="button" class="button small" data-confirm-ok="{{ _("Ja") }}">
                    {{ _("Ja") }}
                </button>
            </div>
        </div>
    {% endblock %}

    {% block scanner %}
        <div class="scanner-container loading hide" data-scanner-wrapper>
            <div id="scanner-picker" class="scanner-picker"></div>
            <i class="icon loader large"></i>
            {% csrf_token %}
        </div>
    {% endblock %}

    {% if SENTRY_JS_ENABLED or SENTRY_JS_ENABLE_FEEDBACK %}
        <script src="https://browser.sentry-cdn.com/4.2.3/bundle.min.js" crossorigin="anonymous"></script>
        <script>
            Sentry.init({
                dsn: '{{ SENTRY_DSN|escapejs }}',
                release: '{{ VERSION|escapejs }}',
                sendDefaultPii: true,
            });
            Sentry.configureScope((scope) => {
                scope.setUser({
                    username: '{{ user.username|escapejs }}',
                    email: '{{ user.email|escapejs }}',
                    id: '{{ user.pk|unlocalize|escapejs }}',
                });
            });
            {% if SENTRY_JS_ENABLE_FEEDBACK and sentry_event_id %}
                Sentry.showReportDialog({
                    lang: '{{ LANGUAGE_CODE|escapejs }}',
                    eventId: '{{ sentry_event_id|escapejs }}',
                    user: {
                        name: '{{ user.get_full_name|escapejs }}',
                        email: '{{ user.get_email|escapejs }}',
                    },
                });
            {% endif %}
        </script>
    {% endif %}

    {% block extra-body %}{% endblock %}
    </body>
</html>