Edit the shop/base.html template of the shop application. Make sure that you load the i18n tag at the top of the template and mark strings for translation as follows:
{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
{% block title %}{% trans "My shop" %}{% endblock %}
</title>
<link href="{% static "css/base.css" %}" rel="stylesheet">
</head>
<body>
<div id="header">
<a href="/" class="logo">{% trans "My shop" %}</a>
</div>
<div id="subheader">
<div class="cart">
{% with total_items=cart|length %}
{% if cart|length > 0 %}
{% trans "Your cart" %}:
<a href="{% url "cart:cart_detail" %}">
{% blocktrans with total_items_plural=total_items|pluralize
total_price=cart.get_total_price %}
{{ total_items }} item{{ total_items_plural }},
${{ total_price }}
{% endblocktrans %}
</a>
{% else %}
{% trans "Your cart is empty." %}
{% endif %}
{% endwith %}
</div>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Notice the {% blocktrans %} tag to display the cart's summary. The cart's summary was previously as follows:
{{ total_items }} item{{ total_items|pluralize }},
${{ cart.get_total_price }}
We used {% blocktrans with ... %} to set up placeholders for total_items|pluralize (template tag applied here) and cart.get_total_price (object method called here), resulting in the following:
{% blocktrans with total_items_plural=total_items|pluralize
total_price=cart.get_total_price %}
{{ total_items }} item{{ total_items_plural }},
${{ total_price }}
{% endblocktrans %}
Next, edit the shop/product/detail.html template of the shop application and load the i18n tags at the top of it, but after the {% extends %} tag, which always has to be the first tag in the template:
{% load i18n %}
Then, find the following line:
<input type="submit" value="Add to cart">
Replace it with the following:
<input type="submit" value="{% trans "Add to cart" %}">
Now, translate the orders application templates. Edit the orders/order/create.html template of the orders application and mark text for translation, as follows:
{% extends "shop/base.html" %}
{% load i18n %}
{% block title %}
{% trans "Checkout" %}
{% endblock %}
{% block content %}
<h1>{% trans "Checkout" %}</h1>
<div class="order-info">
<h3>{% trans "Your order" %}</h3>
<ul>
{% for item in cart %}
<li>
{{ item.quantity }}x {{ item.product.name }}
<span>${{ item.total_price }}</span>
</li>
{% endfor %}
{% if cart.coupon %}
<li>
{% blocktrans with code=cart.coupon.code
discount=cart.coupon.discount %}
"{{ code }}" ({{ discount }}% off)
{% endblocktrans %}
<span>- ${{ cart.get_discount|floatformat:"2" }}</span>
</li>
{% endif %}
</ul>
<p>{% trans "Total" %}: ${{
cart.get_total_price_after_discount|floatformat:"2" }}</p>
</div>
<form action="." method="post" class="order-form">
{{ form.as_p }}
<p><input type="submit" value="{% trans "Place order" %}"></p>
{% csrf_token %}
</form>
{% endblock %}
Take a look at the following files in the code that accompany this chapter to see how strings have been marked for translation:
- The shop application: Template shop/product/list.html
- The orders application: Template orders/order/created.html
- The cart application: Template cart/detail.html
Let's update the message files to include the new translation strings. Open the shell and run the following command:
django-admin makemessages --all
The .po files are inside the locale directory of the myshop project and you'll see that the orders application now contains all the strings that we marked for translation.
Edit the .po translation files of the project and the orders application and include Spanish translations in the msgstr. You can also use the translated .po files in the source code that accompanies this chapter.
Run the following command to compile the translation files:
django-admin compilemessages
You will see the following output:
processing file django.po in myshop/locale/en/LC_MESSAGES
processing file django.po in myshop/locale/es/LC_MESSAGES
processing file django.po in myshop/orders/locale/en/LC_MESSAGES
processing file django.po in myshop/orders/locale/es/LC_MESSAGES
A .mo file containing compiled translations has been generated for each .po translation file.