List of Django-Oscar Page Template Blocks

Published 2021-03-06. Last modified 2021-03-15.
Time to read: 2 minutes.

This page is part of the django collection, categorized under Django-Oscar.

A Django template is a text document or a Python string marked-up using the Django template language.
– From djangoproject.com

This blog post shows the blocks defined in two of the most important django-oscar templates: base.html and a subclass, layout.html.

When overriding a value to a Django template block, the superclass value can be included with {{ block.super }}. The Django documentation discusses this and other details of template inheritance.

By using the same template name as you are inheriting from, {% extends %} can be used to inherit a template at the same time as overriding it. Combined with {{ block.super }}, this can be a powerful way to make small customizations. See Extending an overridden template in the Overriding templates How-to for a full example.
– Django documentation

base.html template

The django-oscar source code defines metadata for template contexts. This context defines variables that are used in the blocks that follow, because in the TEMPLATES / OPTIONS / context_processors section of settings, the context is referenced (and evaluated) like this: 'oscar.core.context_processors.metadata'. The variables are: shop_name, shop_tagline, homepage_url, language_neutral_url_path and google_analytics_id.

Blocks for src/oscar/templates/oscar/base.html are:

body_class

class attrribute for body tag. Default value: default.

body_id

id attrribute for body tag. Default value: default.

cdn_scripts

Default value:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
<script>window.jQuery || document.write('<script src="{% static "oscar/js/jquery/jquery.min.js" %}"><\/script>')</script>

description

Meta tag description. No default value.

extrahead

Additional markup for head tag. No default value.

extrascripts

JavaScript that is dependent on JavaScript loaded or defined in scripts. Could contain a script tag. No default value.

extrastyles

For more CSS, unclear which. No default value.

favicon

Default value:

<link rel="shortcut icon" href="{% static "oscar/favicon.ico" %}" />

html_class

class for the html tag.
Default value: no-js

layout

Main content goes in this block. No default value.

onbodyload

JavaScript to be executed after the web pages has loaded. No default value.

scripts

Could contain a script tag. No default value.

styles

For global CSS. No default value.

title

Default value:

{{ shop_name }} - {{ shop_tagline }}

tracking

Default value:

{# Default to using Google analytics #}
{% include "oscar/partials/google_analytics.html" %}

viewport

Meta tag viewport; Default value: width=device-width

layout.html template

Because src/oscar/templates/oscar/layout.html extends base.html, it inherits all the base.html blocks, and adds or overrides the following blocks:

breadcrumbs

No default value.

content

Main content for page. No default value.

content_wrapper

Default value:

<div class="container page">
    <div class="page_inner">
        {% block breadcrumbs %}{% endblock %}
        {% block header %}
            <div class="page-header">
                <h1>{% block headertext %}{% endblock %}</h1>
            </div>
        {% endblock %}
        {% include "oscar/partials/alert_messages.html" %}
        {% block subnavigation %}{% endblock %}
        <div class="content">
            {% block subheader %}{% endblock subheader %}

            {# Div exists for AJAX updates to entire content section #}
            <div id="content_inner">{% block content %}{% endblock %}</div>
        </div>
    </div>
</div>

extrascripts

Defined in base.html. New default value:

{% include "oscar/partials/extrascripts.html" %}
{{ block.super }}

header

Default value:

<div class="page-header">
<h1>{% block headertext %}{% endblock %}</h1>
</div>

headertext

No default value.

layout

Defined in base.html. New default value:

{# Top-horizontal bar with account, notifictions, dashboard links #}
{% include "oscar/partials/nav_accounts.html" %}

{# Site logo/title, mini-basket, browse dropdown and searchbox #}
<header class="header container">
    <div class="page_inner">
        <div class="row justify-content-between">
            {% include "oscar/partials/brand.html" %}
            {# Mini-basket wrapped in a block so some templates can now display it #}
            {% block mini_basket %}{% include "oscar/partials/mini_basket.html" %}{% endblock %}
            </div>
        </div>
        {% block navigation %}
            {% include "oscar/partials/nav_primary.html" %}
        {% endblock %}
    </header>

    {# Main content of page - other layout templates may override this block #}
    {% block content_wrapper %}
        <div class="container page">
            <div class="page_inner">
                {% block breadcrumbs %}{% endblock %}
                {% block header %}
                    <div class="page-header">
                        <h1>{% block headertext %}{% endblock %}</h1>
                    </div>
                {% endblock %}
                {% include "oscar/partials/alert_messages.html" %}
                {% block subnavigation %}{% endblock %}
                <div class="content">
                    {% block subheader %}{% endblock subheader %}

                    {# Div exists for AJAX updates to entire content section #}
                    <div id="content_inner">{% block content %}{% endblock %}</div>
                </div>
            </div>
        </div>
    {% endblock %}

    {% include "oscar/partials/footer.html" %}
{% endblock %}

navigation

Default value:

{% include "oscar/partials/nav_primary.html" %}

onbodyload

Defined in base.html. New default value:

{{ block.super }}
oscar.init();

styles

Defined in base.html. New default value:

<link rel="stylesheet" type="text/css" href="{% static "oscar/css/styles.css" %}" />

scripts

Defined in base.html. New default value:

{{ block.super }}
<!-- Twitter Bootstrap --%gt;
<script src="{% static "oscar/js/bootstrap4/bootstrap.bundle.js" %}"%gt;</script%gt;
<!-- Oscar --%gt;
<script src="{% static "oscar/js/oscar/ui.js" %}"%gt;</script%gt;

BTW, gulpfile.js/subtasks/copy.js copies node_modules/bootstrap/dist/js/bootstrap.bundle.js to oscar/js/bootstrap4/bootstrap.bundle.js.

subheader

No default value.

subnavigation

No default value.