added pagination

artel/artel/settings/base.py

@@ -170,3 +170,6 @@ WAGTAILSEARCH_BACKENDS = {
 # Base URL to use when referring to full URLs within the Wagtail admin backend -
 # e.g. in notification emails. Don't include '/admin' or a trailing slash
 WAGTAILADMIN_BASE_URL = "http://example.com"
+
+# STORE SETTINGS
+PRODUCTS_PER_PAGE = 6

artel/store/models.py

@@ -1,4 +1,9 @@
 from django.db import models
+from django.core.paginator import (
+    Paginator,
+    EmptyPage
+)
+from django.conf import settings
 
 from modelcluster.models import ClusterableModel
 from modelcluster.fields import ParentalKey
@@ -6,13 +11,9 @@ from wagtail.admin.panels import (
     FieldPanel,
     InlinePanel
 )
-from wagtail.models import (
-    Orderable,
-    Page
-)
+from wagtail.models import Page
 from wagtail import fields as wagtail_fields
 from taggit.managers import TaggableManager
-from taggit.models import Tag
 
 
 class ProductAuthor(models.Model):
@@ -62,17 +63,14 @@ class ProductTemplate(ClusterableModel):
     def __str__(self):
         return self.title
 
-    def get_images(self):
-        return self.images.objects.all().values_list("image")
-
     panels = [
         FieldPanel("category"),
         FieldPanel("author"),
-        FieldPanel("family"),
         FieldPanel('title'),
         FieldPanel('code'),
         FieldPanel('description'),
-        InlinePanel("images")
+        InlinePanel("images"),
+        FieldPanel("tags"),
     ]
 
 
@@ -92,9 +90,16 @@ class Product(ClusterableModel):
         FieldPanel("template"),
         FieldPanel("price"),
         InlinePanel("param_values"),
-        InlinePanel("available")
+        FieldPanel("available")
     ]
 
+    @property
+    def main_image(self):
+        images = self.template.images.all()
+        print(images)
+        if images:
+            return images.first().image
+
     @property
     def title(self):
         return f"{self.template.title} - {self.price}"
@@ -113,13 +118,24 @@ class ProductListPage(Page):
     tags = TaggableManager(blank=True)
 
     def _get_items(self):
-        if self.tags:
+        if self.tags.all():
             return Product.objects.filter(available=True, template__tags__in=self.tags.all())
         return Product.objects.filter(available=True)
 
     def get_context(self, request):
         context = super().get_context(request)
-        context["items"] = self._get_items()
+        items = self._get_items()
+        if not items:
+            return context
+        
+        paginator = Paginator(items, settings.PRODUCTS_PER_PAGE)
+        page_number = request.GET.get("page", 1)
+        try:
+            page = paginator.page(page_number)
+        except EmptyPage:
+            page = paginator.page(1)
+        context["items"] = page.object_list
+        context["page"] = page
         return context
 
     content_panels = Page.content_panels + [

artel/store/templates/store/partials/product_card.html

@@ -1,12 +1,18 @@
 {% load static %} 
 
-<div class="card" style="width: 15rem;">
-    <img class="card-img-top" src="..." alt="Card image cap">
+
+  <div class="card h-100" style="width: 15rem;">
+    <div class="card-header">{{item.title}}</div>
     <div class="card-body">
-        <h5 class="card-title">Card title</h5>
-        <a href="#" class="btn btn-primary">Details</a>
-        <a href="#" class="btn btn-success">
+      <img src="{{item.main_image.url}}" class="rounded mx-auto d-block" style="width: 10rem; height: 10 rem;">
+      <p class="card-text">{{item.description}}</p>
+              
+      <div class="text-end">
+        <a href="#" class="btn btn-outline-primary">Details</a>
+        <a href="#" class="btn btn-outline-success">
             <img src = "{% static 'images/icons/cart.svg' %}" alt="Koszyk"/>
         </a>
+      </div>
     </div>
   </div>
+  

artel/store/templates/store/product_list_page.html

@@ -3,17 +3,28 @@
 
 {% block content %}
 
-<div class="container">
-    <div class="row mb-3">
-        <div class="col-sm">
-            {% include 'store/partials/product_card.html' %}
-        </div>
-        <div class="col-sm">
-            {% include 'store/partials/product_card.html' %}
-        </div>
-        <div class="col-sm">
-            {% include 'store/partials/product_card.html' %}
-        </div>
+<div class="container mb-3">
+    <div class="row row-cols-1 row-cols-md-3 g-4">
+        {% for item in items %}
+            <div class="col">
+                {% include 'store/partials/product_card.html' %}
+            </div>
+        {% endfor %}
     </div>
+
 </div>
+
+<nav aria-label="Page navigation example">
+    <ul class="pagination justify-content-center">
+      <li class="page-item {% if not page.has_previous %} disabled {% endif %}">
+        <a class="page-link" href="?page={{page.number|add:-1}}" tabindex="-1" {% if not page.has_previous %}aria-disabled="true"{% endif %}>Previous</a>
+      </li>
+      {% for pg in page.paginator.get_elided_page_range %}
+        <li class="page-item {% if pg == page.number %}active{% endif %}"><a class="page-link" href="?page={{pg}}">{{pg}}</a></li>
+      {% endfor %}
+      <li class="page-item {% if not page.has_next %} disabled {% endif %}">
+        <a class="page-link" {% if not page.has_next %}aria-disabled="true"{% endif %} href="?page={{page.number|add:1}}">Next</a>
+      </li>
+    </ul>
+  </nav>
 {% endblock %}