/

Includes and Extends

Learn about Includes and Extends in Donation Store templates

Includes

Sometimes you may want to add functionality to every page, or every page in a particular set of pages but you don't want to have to add it to every single page and whats more, you don't want to have to change it on every single page if you make changes to whatever it is you want to include.

Instead of adding it to each page, you can create a new HTML file within your template. Note that HTML templates should be named all lower case, separated by hyphens. Once you have created it, you can add whatever HTML you want to that file and then include it in any other file using:

{% include 'my-template/custom.html' %}

The contents of that file will now be injected anywhere that include tag is. This is great as it allows you to change it only in that custom HTML file and it will reflect across all pages.

An example of this maybe if you want to add your own live chat support widget to the site. You want it on all pages, but you want to be able to edit it if you need to make changes and don't want to have to edit it across the entire store. For this, you can create the custom HTML template

<p>My Live Chat Widget<p>
<!-- Insert Widget Code Here -->

Now when you want to include that widget on certain pages, you can just include it using:

{% include 'my-template/support-widget.html' %}

And the contents of the support widget HTML file will be placed there. Note that you still have access to template variables within your included HTML files. You also have access to the modules and other template tags, as long as they have been loaded at the top of the include file like:

{% load cart %}
{% load modules %}
{% load currency %}

Extends

Extends works slightly differently to Includes. Instead of including the content of another HTML file within another HTML file, extends aims to continue adding content within a pre-determined area. It adds content to the parent template in which it extends. This best example of this is how a Donation Store webstore extends the base template in each of its other templates that represent pages.

For example, a base template might look like:

<html>
<head>
<title>My Awesome Store</title>
<body>
{% block content %}{% endblock content %}
</body>
</html>

The block content section is the most important part to note here. This is what will interact with the template that extends it. Lets assume that the above template is named base.html

Now if we have a template named, let's say home.html, with a basic message that extends the base template, like this:

{% extends 'base.html' %}

{% block content %}
<h1>Hello World!</h1>

{% endblock %}

As this extends the base.html file, and it defines content within the two block content and endblock tags, when rendered to the user, the resulting page would look like

<html>
<head>
<title>My Awesome Store</title>
<body>
<h1>Hello World!</h1>
</body>
</html>

The HTML we defined in the block content section is injected into the base template. Any template that then extends the base template in this way will now be surrounded by the HTML defined in the base template

Have Questions? Open a Support Ticket

View Common Issues on the Knowledgebase

Video Guides on YouTube

Other clients and Donation Store developers hang out on our Discord server, where you can ask for support in #ds-chat, or if you are a Client and you don't uet have your Client role on Discord, let us know and we can add it. Once added you get access to our private Client's support channel.