JoonWeb Theme Guide

Pagination is a component of template which can be used to limit number of items to show, it can be either used in Product listing, Blog Listing or any other listing.
Everything can be controlled by designers using the documentation and a sample below.

pagination file should be created in components folder, so that it can be used anywhere in template using "import", in below example we have made pagination in macros also known as function in JW.

 

pagination.jw [last update - 05-10-2023]

{% macro pagination(total, current, pageQueryParam = 'page', nearbyPagesLimit = 4) %}
  {% if total is not null and current is not null %}
    {% if total > 1 %}
     {% set query = query | default({}) %}
      <ul class="pagination my-4 d-flex justify-content-center">
        {% for i in 1..total %}
          {% if 0 == (current - nearbyPagesLimit) - loop.index %}
            <li class="page-item"><a href="{{ (current_url ~ '?' ~ (query | default({}) | merge({(pageQueryParam): 1})| url_encode)) }}" class="page-link">1</a></li>
            {% if 1 != loop.index %}
              <li class="page-item">
                <a href="javascript:void(0)" class="page-link">...</a>
              </li>
            {% endif %}
          {% elseif 0 == (current + nearbyPagesLimit) - loop.index and (current + nearbyPagesLimit) < total %}
            <li class="page-item">
              <a href="javascript:void(0)" class="page-link">...</a>
            </li>
          {% elseif 0 < (current - nearbyPagesLimit) - loop.index %}
          {% elseif 0 > (current + nearbyPagesLimit) - loop.index %}
          {% else %}
            <li class="page-item{{ current == loop.index ? ' active' }}">
              <a href="{{ (current_url ~ '?' ~ (query | default({}) | merge({(pageQueryParam): loop.index})| url_encode)) }}" class="page-link">{{ loop.index }}</a>
            </li>
          {% endif %}
        {% endfor %}
        {% if current != total and (current + nearbyPagesLimit) < total %}
          <li class="page-item"><a href="{{ (current_url ~ '?' ~ (query | default({}) | merge({(pageQueryParam): total})| url_encode)) }}" class="page-link">{{ total | round }}</a></li>
        {% endif %}
      </ul>
      <style>
        .pagination { justify-content: center; }
        .page-item .page-link { padding: 0.5rem 1rem; background: var(--color2); border-radius: 0 !important; margin: 0 0.2rem; font-size: 1.2rem; border-color: unset; color: var(--color5); }
        .page-item.active .page-link { background: var(--color1); }
      </style>
    {% endif %}
  {% endif %}
{% endmacro %}

You can import this on where you want to implement for example blog listing.

 {% if blog.items %}
            <div class="recent-post-wrapper mySlides see-list-slider">
              {% set dataLimit = 12 %}
                {% set dataTotal = blog.items | length %}
                {% set blogpagination = blog.items|paginate(dataLimit, (query.page ? query.page : 1)) %}
              
             {% for itemkey, blog in blogpagination %}
                <div class="recent-post see-list-item see-second-color">
                    {% if blog.img %}<div class="post-img"><img src="{{blog.img}}" alt="{{blog.img.alt}}"></div>{% endif %}
                    <div class="recent-post-content">
                        <div class="recent-text-div">
                            <div class="recent-text-div-text">
                              {% if blog.title %}<a href="{{blog.url}}">{{blog.title}}</a>{% endif %}
                          {% if blog.description %}<div class="dp-txt para">{{blog.description}}</div> {% endif %}
                          </div>
                            
                            <div class="blog-status">
                                <ul>
                                    <li>
                                        <a href="javascript:void(0)">
                                            <i class="far fa-eye"></i> {{blog.views}}
                                        </a>
                                    </li>
                                  <li>
                                        <a href="javascript:void(0)">
                                            <i class="far fa-user"></i> {{blog.author}}
                                        </a>
                                    </li>
                                    <li>
                                  {% if blog.created %}<div class="see-button-prime article-btn">
                                                {{blog.created}}
                                              </div>{% endif %}
                                     </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
               {% endfor %}
              {% import "components/pagination.jw" as pagination %}
              {% set total_page =  ((dataTotal - 1) / dataLimit) + 1 %}
              {{ pagination.pagination( total_page | ceil , ( query.page ?query.page : 1 )) }}
              
            </div>
          {% endif %}

Adding Reviews in Product Page & Product listing is quite easy via product-review app, you can include review in comoponenets.
Below are the list of json data which you can fetch to make review work.

json provided will be rendered automatically in "review":
you can access it like: {{ review.total_reviews }} .

{
  "total_reviews": 0,
  "total_ratings": 0,
  "rating_avg": "4.5",
  "form": "Please Log into share review",
  "rating.1": 0,
  "rating.2": 0,
  "rating.3": 0,
  "rating.4": 0,
  "rating.5": 0,
  "items": [{
    "rate_count":"4",
    "title": "Awesome Product",
    "review": "Very awesome product, it is sample details of review",
    "author": "MyAuthor",
    "date": "12 May 2023"
  },
  {
    "rate_count":"3",
    "title": "Nice Product",
    "review": "Great another work",
    "author": "Author2",
    "date": "14 May 2023"
  }]
}

Above are the data contains in "review".


You can include "product-review.jw" in Product Page (store-product.jw) only if not exists, at bottom using sytanx:
 

{% include 'components/product-review' %}

Also you need to Add rating count and avg rating in product feed & listing.
In Product Feed Sections, below data is achived via "review", you can access like review.total_reviews.

{
  "total_reviews": 0,
  "total_ratings": 0,
  "rating_avg": 4.5
}

Example of usage:

{% if review.total_ratings %}
  <div class="product-rating">
    {{review.rating_avg}}
    <span><i class="bx bxs-star"></i></span>
    <span class="review">
      {% if review.total_ratings %} 
        {{ review.total_ratings ~ "Ratings" }} 
      {% endif %}
      {% if review.total_reviews %} 
        {{ review.total_reviews ~ " & Reviews" }} 
      {% endif %}
    </span>
  </div>
{% endif %}