Pagination Issue

johndifazio · ‎06-30-2024

I have an issue trying to create a page. I have the collection brought in, and I can access all of the product manually entering in ?page="whatever number"
The pagination on the bottom just shows 1-0 and the arrows don't do anything
here is the page in question https://ripnshipsingles.com/pages/pokemon-binder

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <meta name="theme-color" content="#7796a8">
  <meta content="telephone=no" name="format-detection">
  <link rel="canonical" href="{{ canonical_url }}">
  <title>{{ page_title }}</title>
  {{ content_for_header }}

  <!-- Stylesheets -->
  <link href="{{ 'binderVariables.css' | asset_url }}" rel="stylesheet" type="text/css">
  <link href="{{ 'base.css' | asset_url }}" rel="stylesheet" type="text/css">
  <link href="{{ 'custom.css' | asset_url }}" rel="stylesheet" type="text/css">

  <style>
    .custom-collection .collection-header,
    .custom-collection .collection-footer,
    .breadcrumb-container,
    .site-header,
    .site-footer {
      display: none !important;
    }

    .custom-collection .collection-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
    }

    .custom-collection .collection-item {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: center;
    }

    .custom-collection .product-image img {
      max-width: 100%;
      height: auto;
    }

    .custom-collection .product-info {
      margin-top: 10px;
    }
  </style>
</head>
<body class="template-page pokemoninstock">
  <div class="custom-collection">
    <div class="collection-header">
      <h1>All In Stock Singles</h1>
      <p>Description of your collection.</p>
    </div>
    <div class="collection-grid">
      {% paginate collections['pokemon-in-stock-singles'].products by 25 %}
        {% if paginate.items == 0 %}
          <div class="collection collection--empty" id="main-collection-product-grid" data-id="{{ section.id }}">
            <div class="loading-overlay">
              <div class="loading-overlay__spinner">
                <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </div>
            <div class="title-wrapper center">
              <div class="title alert-danger alert">
                No Products Found
              </div>
              <a class="btn" href="{{ collection.url }}">Clear All</a>
            </div>
          </div>
        {% else %}
          {% for product in collections['pokemon-in-stock-singles'].products %}
            {% for variant in product.variants %}
              {% if variant.inventory_quantity > 0 %}
                <div class="collection-item">
                  <div class="product-image">
                    <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
                  </div>
                  <div class="product-info">
                    <h2 class="product-title">{{ product.title }}</h2>
                    <div class="product-meta">
                      <p class="product-price">{{ variant.price | money }}</p>
                      <p class="product-condition">Condition: {{ variant.option1 }}</p>
                      <p class="product-quantity">QTY: {{ variant.inventory_quantity }}</p>
                      <p class="product-SKU">SKU: {{ variant.sku }}</p>
                    </div>
                    <div class="product-qr-code">
                      <img src="https://api.qrserver.com/v1/create-qr-code/?data={{ variant.sku | url_encode }}&size=100x100" alt="QR Code for SKU {{ variant.sku }}">
                    </div>
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          {% endfor %}
        {% endif %}
       
      {% endpaginate %}
      
    </div>
     {% render 'pagination' %}
    <div class="collection-footer">
      
    </div>
  </div>

  {{ content_for_footer }}
</body>
</html>