# Szablon: katalog nagród listing

# W katalogu

|--src/                           →  Pliki źródłowe
|  |--templates/                  →  Szablony: katalog główny
|  |  |--pages/                   →  Szablony: podstrony
|  |  |  |--katalog-nagrod-listing.twig       

# HTML

{% extends '../layouts/default.twig' %}
{% set head_title = 'Katalog nagród' %}
{% set body_class = '' %}
{% block pagecss %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" integrity="sha256-g7HgoMySZyonuPwHTORf+uGHEeOm7VRI2kfXWXlJnco=" crossorigin="anonymous" />
{% endblock %}
{% block page %}
{% include '../../modules/top/top.twig' %}
<div class="container">
  <div class="row">
    <div class="col-12 col-lg-3 col-hd-2">
      {% include '../../modules/sidebar/sidebar.twig' %}
    </div>
    <div class="col-12 col-lg-9 col-hd-10">
      <div class="titleBar titleBar__button">
        <div>
          <div class="titleBar__title">Katalog nagród</div>
        </div>
        <div class="button-sets button-sets__np">
          <a href="" class="btn btn-shopping btn-shopping__basket">
            <div class="btn-shopping__basketCount">2</div>
            <div>
              <img src="./img/icon__shopping-cart.svg" alt="">
              <span class="btn-shopping__title">Koszyk</span>
            </div>
            <div>
              <span class="btn-shopping__subtitle">2 produkty</span>
              <div class="points">1200 <sup>pkt</sup></div>
            </div>
          </a>
          <a href="" class="btn btn-shopping btn-shopping__history">
            <div>
              <img src="./img/icon__clock.svg" alt="">
              <span class="btn-shopping__title">Historia</span>
            </div>
            <div>
              <span class="btn-shopping__subtitle">3 produkty</span>
            </div>
          </a>
        </div>
      </div>
      <div class="page-container">
        {% include '../../modules/filters/filters.twig' %}
        {% include '../../modules/productList/productList.twig' %}
      </div>
      {% include '../../modules/pagination/pagination.twig' %}
      {% include '../components/footer.twig' with { 'container': false } %}
    </div>
  </div>
</div>


{% endblock %}

{% block pagejs %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js" integrity="sha256-Z639rJO57BiZzQDlWsGyF+EJ3Fs3nD4pQPkfimTy3S8=" crossorigin="anonymous"></script>
<script>
  if($(".price-range-slider").length > 0) {
      var $priceRangeSlider = $(".price-range-slider").ionRangeSlider({
        skin: "big"
      });
      $('#priceRangeSliderTrigger').on('click', function() {
        var from = $priceRangeSlider.data("ionRangeSlider").result.from;
        var to = $priceRangeSlider.data("ionRangeSlider").result.to;
        window.location = window.location.protocol + "//" + window.location.hostname + window.location.pathname + "?price=" + from + "-" + to
      });
    }
</script>
{% endblock %}

# Korzysta z: