Django & algolia - conditional statements using hogan + {% verbatim %} tag

Question

I'm hoping this isn't too obscure a question - I'm integrating the Algolia search platform into one of my projects to be able to search seamlessly and effortlessly yadda yadda. Essentially, I'm looking for a mixture of layouts for premium and low position of a business directory within the #hit-template element for Algolia ... Using {% if %} inside verbatim doesn't quite work...so there's clearly something I'm not understand/missing. Could it be purely in the javascript that I need to edit certain things? Not sure! What is {% verbatim %} ?? Not sure?! Can I have a mixture of javascript and html inside a script of type="text/template" ?

{% verbatim %}
    <script id="hit-template" type="text/template">
      {% if _highlightResult.is_premium %}
      <div class="card text-center mb-3">
        <div class="crop-height bg-image-card card-header" style="background-image: url('{{ MEDIA_URL }}{{ get_image_url }}'); height: 160px !important;"></div>
        <div class="card-header" style="color: #fff !important; background-color: {{ brand_colour }} !important; font-size: 1.3rem;">
          {{{ _highlightResult.name.value }}}
        </div>
        <div class="card-body">
          <p class="card-text" style="color: {{ business.brand_colour }} !important;"><a href="https://www.google.co.uk/maps/search/{{ google_maps_location }}" style="color: {{ brand_colour }};"><i class="fas fa-map-marker fa-2x" data-fa-transform="down-6"></i></a></p>
          <p class="card-text"><small>{{ get_full_address }}</small></p>
          <p class="card-text p-2">{{ description }}</p>
          <a href="{{ absolute_url }}" class="btn btn-primary" style="background-color: {{ brand_colour }} !important; border-color: {{ brand_colour }} !important; color: #fff;">Visit Website</a>
        </div>
        <div class="card-footer text-muted">
          <small>
            <i class="fas fa-envelope" data-fa-transform="shrink-2"></i> {{ email }}
            <i class="fas fa-phone" data-fa-transform="shrink-2"></i> {{ telephone }}</small></div>
        <div style="display: none;">{{{ _highlightResult.sector.value }}}</div>
      </div>
      {% else %}
      {% endif %}
    </script>
  {% endverbatim %}

Answer 1

{% verbatim %} forces Django to not interpret { and } characters in the template file, so {% if %} and {% endif %} won't work inside a verbatim tag. You can still use Django template syntax outside of a verbatim tag, and only use {% verbatim %} where you want Django to ignore {} (i.e. in your Javascript syntax).

When mixing different template syntaxes, it can be difficult to resolve ambiguities with special characters like {. Interpreter engines can't resolve your intentions. One solution here is to use Django to store which variables you need to Javascript variables and use hogan.js with them.

<script>
    window.MEDIA_URL = {{ MEDIA_URL }}
    window.image_url = {{ get_image_url }}
</script>
{% if _highlightResult.is_premium %}
{% verbatim %}
    <script id="hit-template" type="text/template">
        // your Hogan.js stuff here, using `window` variables from Django stored as JS variables...
        // Django will no longer interpret `{` and `}`, only Hogan.js will
    </script>
{% endverbatim %}
{% endif %}

I don't know enough about Hogan.js to guide you further into the specifics.