Building a full ecommerce site part 2: handling Oscar's static files and templates

I realised today that if Mezzanine and Oscar share the same file names for a lot of templates and static files (in addition to urls, as mentioned in part 1), I should probably separate them more clearly. Especially since static files are collected into the same directory for production with collectstatic.

Step 1: create a dedicated shop app

So, I started a new app: django-admin startapp shop. I added shop to INSTALLED_APPS in settings.py.

Step 2: create directories for Oscar's static files and templates

The project's root directory is mezzanine_plus_oscar. The app is at mezzanine_plus_oscar/shop. I created a folder called templates and another one called static in the app folder.

Within mezzanine_plus_oscar/shop/templates, I created another folder called shop. I took all the Oscar templates that I'd previously copied from the Oscar package source directory and put into mezzanine_plus_oscar/templates and put them into this folder, mezzanine_plus_oscar/shop/templates/shop

I added the following to settings.py so that Django would be able to find this new location:

TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [
os.path.join(PROJECT_ROOT, "templates"),

# Add the following four lines for the new Oscar templates location.
os.path.join(
os.path.join(PROJECT_ROOT, "shop"),
os.path.join("templates", "shop")
),

OSCAR_MAIN_TEMPLATE_DIR
],
...

Within mezzanine_plus_oscar/shop/static, I created a folder called oscar. I think standard practice says to create mezzanine_plus_oscar/shop/static/shop instead. However, Oscar will look for its static files in a directory named oscar, not whatever else the app name is. That's why this folder has to be called oscar.

I cut and paste all Oscar's static files from mezzanine_plus_oscar/static/oscar into this folder, mezzanine_plus_oscar/shop/static/oscar. Then I deleted the whole mezzanine_plus_oscar/static so I could be really sure I got things right when I runserver.

Before running the server, I went back to settings.py and added the following, just under MEDIA_ROOT for convenience:

STATICFILES_DIRS = [
os.path.join(
os.path.join(
PROJECT_ROOT, "shop"),
os.path.join("static", "oscar")
),
]

According to the documentation, STATICFILES_DIRS defines a list of directories in which Django should look for static files.

Step 3: image_not_found.jpg not found

I tweaked a bit of the CSS in mezzanine_plus_oscar/shop/static/oscar/css so that if the changes loaded I would know that I'd done everything correctly. I could also figure out if things loaded correctly by looking at the django-debug-toolbar that comes with Mezzanine but it's slightly more tedious to me. So, I made all the text on the page red instead. Then I ran the server.

It worked!

With one exception. Earlier, I'd uploaded a product with an image. Now, I clicked on it to check if it was working fine too and the site broke with an error saying that image_not_found.jpg could not be found in mezzanine_plus_oscar/static/media.

I knew that this was not because I'd deleted the project's static directory because I'd gotten the same problem even with Oscar's static files in a folder called oscar in it earlier. My intuition was, if the point of programming is automating as many things as possible, requiring something as menial as copying a jpg from Oscar's source folder to this media folder must be bad practice. After all, there are other images in Oscar's img folder that the shop might need.

So I went a-googlin' and found this thread on GitHub. I don't fully understand the nature of the problem but the solution is to add this to settings.py: OSCAR_MISSING_IMAGE_URL = MEDIA_URL + 'image_not_found.jpg'.

I ran the server again and it worked.

The end. For static files and templates. For now.

Comments

There are currently no comments

New Comment

required

required (not published)

optional

required