HTMX не работает при использовании paginate с бесконечной прокруткой

У меня в Django-приложении есть карточка товара, при нажатии на которую происходит добавление в корзину. Я использую infinite-scroll и django-pagination.

Однако проблема заключается в пагинации. Первая страница результатов прекрасно работает с HTMX. Однако вторая страница и все последующие страницы не работают при нажатии. При осмотре страницы html отображается правильно, и я вижу вызов hx-get с правильным url. Но при нажатии ничего не происходит.

Возможно, я упускаю что-то очевидное, но любая помощь будет оценена по достоинству!

HTML

        <div class="container"
    data-infinite-scroll='{ "path": ".pagination__next", "append": ".product-card", "history":"false"}'>
        {% block content %}
        {% include 'includes/cards.html' %}
        {% include 'includes/sidebar.html' %}
        {% endblock content %}
    </div>
        <ul class="pagination mt-50 mb-70">
            {% if products.has_previous %}
                 <li class="page-item"><a class="page-link" href="?page={{ products.previous_page_number }}"><i class="fa fa-angle-left"></i></a></li>
             {% endif %}
             <li class="page-item"><a class="page-link" href="#">{{ products.number }}</a></li>
              {% if products.has_next %}
             <li class="page-item"><a class="pagination__next" href="?page={{ products.next_page_number }}"><i class="fa fa-angle-right"></i></a></li>
             {% endif %}
        </ul>

views.py

def shop(request):
anabanner = AnaBanner.objects.all()
gender = Gender.objects.all()
categories = Category.objects.all()
colors = Color.objects.all()
materials = Material.objects.all()
query = request.GET.get('query','')
products = Product.objects.all().order_by('-pk')
if query:
    products = products.filter(
        Q(name__icontains=query)|
        Q(sub_name__icontains=query)
    ).distinct()
paginator = Paginator(products, 8)

page = request.GET.get('page')

products = paginator.get_page(page)
context = {'products':products,'categories':categories,'gender':gender,'anabanner':anabanner,'colors':colors,'materials':materials}
return render(request, 'shop.html', context)

Кнопка

    <div class="button">
  <div class="button-layer"></div>
  <button name="ekle" 
  href ="#"
  hx-get="{% url 'add_to_cart' product.id %}"
  hx-target="#menu-cart-button"
  hx-swap="outerHTML" 
  class="btn btn-outline-secondary add-btn update-cart">Sepete Ekle</button>
</div>

Вот мой Бесконечная прокрутка шаблон django с HTMX

urls.py

highlights_urls = [  
path('<slug:slug>/',  
     views.highlight_detail,  
     name='highlight_detail',  
     ),  
]  

urlpatterns = [  
     path('highlights/', include(highlights_urls)),  
]

views.py

def highlight_detail(request, slug: str):  
object: Highlight = get_object_or_404(Highlight, slug=slug)  

template_name = 'highlight/highlight-detail.html'  
if request.htmx:  
    template_name = 'highlight/partials/highlight-detail-partial-elements.html'  

page_number = request.GET.get('page', default=1)  
paginator = Paginator(object.products.all(), settings.PAGINATION_PAGE_SIZE)  
page_obj = paginator.get_page(page_number)  

context = {  
    'object': object,  
    'page_obj': page_obj  
}  

return TemplateResponse(request, template=template_name, context=context)

highlight-detail.html

<section class="padding-top">  
<div class="container">  

    <header class="section-heading">  
        <h3 class="section-title">{{ object.name }}</h3>  
    </header>  

    <div class="row" hx-indicator=".htmx-indicator">   
        {% include './partials/highlight-detail-partial-elements.html' %}  
    </div>  

</div> <!-- container end.// -->  

highlight-detail-partial-elements.html

{% for product in page_obj %}  
<div  
{% if forloop.last and page_obj.has_next %}  
    hx-get="{% url 'highlight_detail' object.slug %}?page={{ page_obj.number|add:1 }}"  
    hx-trigger="revealed"  
    hx-swap="afterend"  
    hx-target="this"  
{% endif %}  
class="col-6 col-sm-4 col-md-3 col-lg-3 col-xl-3">  
{% include 'highlight/includes/product-card.html' with object=product %}  
</div>  
{% endfor %}
Вернуться на верх