将产品添加到 Djagno 的愿望清单

Question

我想通过单击心形将产品添加到愿望清单中，当产品位于愿望清单中时，心形就会变成红色。再次单击时，会将其删除。这是我的功能：

@login_required(login_url='login')
def favorie(request):
    if request.method == 'GET':
        query = request.GET.get('query', '')
        if query:
            products = Product.objects.filter(Q(nom__icontains=query) |   Q(description__icontains=query))
            return redirect(f'/products?query={query}')

    favories = Favorie.objects.filter(user=request.user)
    if favories :
        template = 'favorie.html'
    else:
        template = 'favorie_vide.html'
    return render(request, template , {'favories': favories})

def add_to_favorie(request,id):
    product = get_object_or_404(Product, id=id)
    favorie, created = Favorie.objects.get_or_create(user=request.user, product=product)
    if not created:
        favorie.delete()
    return redirect('detail', id=id)

def remove_from_favorie(request, id):
    product = get_object_or_404(Product, id=id)
    favorite = Favorie.objects.filter(user=request.user, product=product).first()
    if favorite:
        favorite.delete()
    return redirect('product_detail', id=id)

这是我要点击的模板：

<div class="produit p-4 d-flex flex-lg-row flex-column rounded-5 align-items-center justify-content-center">
      <span class="heart-box">
          <img src="{% static 'produit/images/heart-active.jpg' %}" class="heart1 d-none" alt="">
          <img class="heart" src="{% static 'produit/images/heart.jpg' %}" alt="">
        </span>

我尝试制作此按钮，但没有任何改变。

Answer 1

试试这个：

from django.http import HttpResponseRedirect
from django.urls import reverse

def toggle_favorie(request, id):
    product = get_object_or_404(Product, id=id)
    if not Favorie.objects.filter(user=request.user, product=product).exits():
        Favorie.objects.create(
            user=request.user, product=product
            )
    else:
        Favorie.objects.get(
            user=request.user, product=product
            ).delete()

    return HttpResponseRedirect(reverse('detail', kwargs={
                'id': id
            }))
# you'll need to change your urls

然后在模板中添加表单

  <form action="{%  url 'your_url_name' #your_product_id %}">
    {% csrf_token %}
  <button type="submit>
      <span class="heart-box">
          <img src="{% static 'produit/images/heart-active.jpg' %}" class="heart1 d-none" alt="">
          <img class="heart" src="{% static 'produit/images/heart.jpg' %}" alt="">
        </span>
  </button>
  </form>

或者您可以使用js来处理切换，并使用fetch api向您的端点发出请求，您只需将响应更改为JsonResponse即可。

Answer 2

检查一下： 视图.py

from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse  # Added for AJAX response

# ... your existing imports

@login_required(login_url='login')
def favorie(request):
    # ... your existing code for handling GET requests

def add_to_favorie(request, id):
    product = get_object_or_404(Product, id=id)
    favorie, created = Favorie.objects.get_or_create(user=request.user, product=product)

    if not created:
        favorie.delete()

    return JsonResponse({'in_favories': not created})  # Return AJAX response

# No need for a separate remove_from_favorie view as it's handled in add_to_favorie

模板

<span class="heart-box">
    <img src="{% static 'produit/images/heart-active.jpg' %}" class="heart1 d-none" alt="Heart filled">
    <img src="{% static 'produit/images/heart.jpg' %}" class="heart" alt="Heart outline">
</span>

<script>
    $(document).ready(function() {
        $('.heart').click(function() {
            var productId = {{ product.id }};  // Assuming you have product.id in context
            $.ajax({
                url: '/add_to_favorie/' + productId,
                success: function(response) {
                    if (response.in_favories) {
                        $('.heart').addClass('d-none');
                        $('.heart1').removeClass('d-none');
                    } else {
                        $('.heart').removeClass('d-none');
                        $('.heart1').addClass('d-none');
                    }
                }
            });
        });
    });
</script>