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 4.0KB

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