HTMX not working when using paginate with infinite-scroll - django

Question

I have a product card in my Django Application, when clicked, adds to cart. I'm using infinite-scroll and django-pagination.
The issue is with the pagination, however. The first page of results works wonderfully with HTMX. However, the second page and all pages beyond does not work on click. Upon inspecting the page, the html does appear to be rendered properly and I can see the hx-get call with the proper url. But upon clicking, nothing happens.
Maybe I'm missing something obvious here, but any help would be appreciated!
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)
Button
<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>

Answer 1

Here i my Infinite scroll pattern django with 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 %}