You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

how_to_customise_templates.rst 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. ==========================
  2. How to customise templates
  3. ==========================
  4. Assuming you want to use Oscar's templates in your project, there are two
  5. options. You don't have to though - you could write all your own templates if
  6. you like. If you do this, it's probably best to start with a straight copy of
  7. all of Oscar's templates so you know all the files that you need to
  8. re-implement.
  9. Anyway - here are the two options for customising.
  10. Method 1 - Forking
  11. ------------------
  12. One option is always just to fork the template into your local project so that
  13. it comes first in the include path.
  14. Say you want to customise ``base.html``. First you need a project-specific
  15. templates directory that comes first in the include path. You can set this up
  16. as so::
  17. TEMPLATE_LOADERS = (
  18. 'django.template.loaders.filesystem.Loader',
  19. 'django.template.loaders.app_directories.Loader',
  20. )
  21. import os
  22. location = lambda x: os.path.join(os.path.dirname(os.path.realpath(__file__)), '..', x)
  23. TEMPLATE_DIRS = (
  24. location('templates'),
  25. )
  26. Next copy Oscar's ``base.html`` into your templates directory and customise it
  27. to suit your needs.
  28. The downsides of this method are that it involves duplicating the file from
  29. Oscar in a way that breaks the link with upstream. Hence, changes to Oscar's
  30. ``base.html`` won't be picked up by your project as you will have your own
  31. version.
  32. Method 2 - Subclass parent but use same template path
  33. -----------------------------------------------------
  34. There is a trick you can perform whereby Oscar's templates can be accessed via
  35. two paths. This is outlined in the `Django wiki`_.
  36. .. _`Django wiki`: https://code.djangoproject.com/wiki/ExtendingTemplates
  37. This basically means you can have a ``base.html`` in your local templates folder
  38. that extends Oscar's ``base.html`` but only customises the blocks that it needs
  39. to.
  40. Oscar provides a helper variable to make this easy. First, set up your
  41. template configuration as so::
  42. TEMPLATE_LOADERS = (
  43. 'django.template.loaders.filesystem.Loader',
  44. 'django.template.loaders.app_directories.Loader',
  45. )
  46. import os
  47. location = lambda x: os.path.join(os.path.dirname(os.path.realpath(__file__)), '..', x)
  48. from oscar import OSCAR_MAIN_TEMPLATE_DIR
  49. TEMPLATE_DIRS = (
  50. location('templates'),
  51. OSCAR_MAIN_TEMPLATE_DIR,
  52. )
  53. The ``OSCAR_MAIN_TEMPLATE_DIR`` points to the directory above Oscar's normal
  54. templates directory. This means that ``path/to/oscar/template.html`` can also
  55. be reached via ``templates/path/to/oscar/template.html``.
  56. Hence to customise ``base.html``, you can have an implementation like::
  57. # base.html
  58. {% extends 'oscar/base.html' %}
  59. ...
  60. No real downsides to this one other than getting your front-end people to
  61. understand it.
  62. Overriding individual products partials
  63. ---------------------------------------
  64. Apart from overriding ``catalogue/partials/product.html`` to change the looks
  65. for all products, you can also override it for individual products by placing
  66. templates in ``catalogue/partials/product/upc-%s.html`` or
  67. ``catalogue/partials/product/class-%s.html``, where ``%s`` is the product's UPC
  68. or class's slug, respectively.
  69. Example: Changing the analytics package
  70. ---------------------------------------
  71. Support you want to use an alternative analytics package to Google analytics.
  72. We can achieve this by overriding templates where the analytics urchin is loaded
  73. and called.
  74. The main template ``base.html`` has a 'tracking' block which includes a Google
  75. Analytics partial. We want to replace this with our own code. To do this,
  76. create a new ``base.html`` in your project that subclasses the original::
  77. # yourproject/templates/base.html
  78. {% extends oscar/base.html %}
  79. {% block tracking %}
  80. <script type="javascript">
  81. ... [custom analytics here] ...
  82. </script>
  83. {% endblock %}
  84. Doing this will mean all templates that inherit from ``base.html`` will include
  85. your custom tracking.