Mike Slinn
Mike Slinn

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.