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 %}