44.Django(장고) - ecommerce 프로젝트 - 쇼핑몰 - 장바구니 보기(summary) 페이지

1.templates\store\product.html

제품상세 페이지에 개수(수량) 추가

                <strike> ${{ product.price }} </strike>
                &nbsp; ${{product.sale_price}} 
                {% else %} 
                  ${{ product.price }} 
                {%endif%}
                <br/><br>
                <!-- 수량 추가-->
                <div class="row justify-content-center">
                  <div class="col-md-2">갯수:</div>
                  <div class="col-md-2">
                    <select class="form-select form-select-sm" id="qty-cart" aria-label="Default select example">
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                  </div>
                </div>
                <!-- 수량 추가끝-->
                <br><br><a class="btn btn-secondary" href="{% url 'store:home' %}">홈으로</a>
                <button type="button" value="{{product.id}}" id="add-cart" class="btn btn-secondary">장바구니 담기</button>
              </center>
              
     (... 생략 ...)           
  <script>
    $(document).on('click', '#add-cart',function(e){
      $.ajax({
        type:"POST",
        url:"{% url 'cart:cart_add' %}",
        data:{
          product_id: $('#add-cart').val(),
          product_qty: $('#qty-cart option:selected').text(),
          csrfmiddlewaretoken:'{{  csrf_token }}',
          action: 'post'
        },
        success : function(json){
          console.log(json)
          $('#cart_quantity').text(json.qty)
        },
        error : function(e){
          console.log(e)
        }
      })
    });
  </script>

2. cart\cart.py

아래와 같이 수정

def add(self,product, quantity):

        product_id  = str(product.id)
        product_qty = str(quantity)
        
        #>>> a[3] = [1, 2, 3]
        #>>> a
        #{1: 'a', 2: 'b', 'name': 'pey', 3: [1, 2, 3]}

        if product_id in self.cart:
            pass
        else:
            #self.cart[product_id] = {'price': str(product.price)}
            self.cart[product_id] = int(product_qty)
        
        self.session.modified = True
        
def get_prods(self):
        
        # Get ids from cart
        product_ids = self.cart.keys()

        # use ids to lookup products in database model
        products =  Product.objects.filter(id__in=product_ids)

        #Return those looked up products
        return products
def get_quants(self):
        quantities = self.cart
        return quantities
        

templates\layout\navbar.html

      <form class="d-flex">
        <a href="{% url 'cart:cart_summary'%}" class="btn btn-outline-dark">
          <i class="bi-cart-fill me-1"></i>
          Cart
          <span class="badge bg-dark text-white ms-1 rounded-pill" id="cart_quantity">{{cart|length}}</span>
        </a>
      </form>

3.cart\views.py

아래 두개의 함수를 완전 바꿀것

def cart_summary(request):
    # Get the cart
    cart = Cart(request)
    cart_products = cart.get_prods()
    quantities = cart.get_quants
    print(quantities , "==============")
    return render(request, "cart/cart_summary.html",{"cart_products": cart_products,"quantities": quantities})


def cart_add(request):
    
    cart  = Cart(request)

    print("카트========",cart)

    if request.POST.get('action') == 'post':
        print('=========')
        
        #get stuff
        product_id = int(request.POST.get('product_id'))
        print('product_id', product_id)
        
        product_qty = int(request.POST.get('product_qty'))
        # lookup proudct in DB
        product = get_object_or_404(Product,id=product_id)

        print("프로덕트",product)

        #save to session
        cart.add(product=product, quantity = product_qty)

        #Get Cart Quantity
        cart_quantity = cart.__len__()
        response = JsonResponse({'qty': cart_quantity})

        return response
    
    print("카트========마지막")

아래와 같이 테스트를 하여 확인