webshop/app/templates/product.html

{% extends "base.html" %}

{% block content %}
<main class="x xdc md-xdr md-xw">
  <section class="md-dn bdb-pink">
    {% with block = doc.blocks.images[0] %}
    {% include "partials/block-image.html" %}
    {% endwith %}
  </section>
  <section class="w100 md-w50 md-x md-xdc md-xo2 md-bdl-pink hg-x1">
    <div class="sticky-prod-info">
      <section class="bdb-gray pt0-75 pr0-75 pb3 pl0-75 copy-h-reset">
	<div class="bgc-bright-black fgc-dark-gray bd-dark-gray btn-product-code dib copy ">{{ doc.meta.code }}</div>
	<div class="pt0-5 pb1-7 copy">
	  <h2 class="pb1">{{ doc.meta.title }}</h2>
	  <span class="dib pb1">{{ doc.meta.price }} {{ cart.meta.currency }}</span>
	  {% for block in doc.blocks.texts %}
	  {% include "partials/block-text.html" %}
	  {% endfor %}
	</div>
	{% include "partials/product-form.html" %}
      </section>
      {% if size_guide %}
      <section class="pt0-75 pr0-75 pb0-75 pl0-75 copy-h-reset product-size-guide bdb-gray">
	<div class="copy">
	  {% for block in size_guide.blocks %}
	  {{  block.value | md | safe }}
	  {% endfor %}
	</div>
      </section>
      {% endif %}
    </div>
    <section class="dn md-db psr md-h100">
      <div class="psa t0 l50 md-h100 md-bdl-rubin"></div>
      <div class="dn md-db psa l0 b0 sunset" style="background-image: url('{{ url_for('static', path='images/sunset-green.png')}}')"></div>
    </section>
  </section>
  <section class="w100 md-w50 hg-w1200 md-xo1">
    {# we set the first image with hide / display class toggles #}
    {% for block in doc.blocks.images %}
    {% if loop.first %}{% set img_hide = True %}{% endif %}
    {% if loop.last %}{% set block_last = True %}{% endif %}
    {% include "partials/block-image.html" %}
    {% endfor %}
  </section>
  <section class="w100 md-xo3 pt7 copy-h-reset-weight bdt-gray">
    <h3 class="fs-big pr0-75 pl0-75 pb1-25">More hardware</h3>
    <div class="dg grid-2 related-products bdt-gray">
      {% for product in related_products %}
      {% set block = product.blocks.images[0] %}
      {% include "partials/grid-product.html" %}
      {% endfor %}
    </div>
  </section>
</main>
{% include "partials/footer.html" %}
{% endblock %}