Django e-commerce part52 Cart Count in Navbar

Navbarのカートアイコンに数字を入れる。

navbar.html にcartのurlを追記する。

          <ul class="nav navbar-nav navbar-right">
            <li>
                <a href='{% url 'cart' %}'><i class="fa fa-shopping-cart fa-navbar-cart" aria-hidden="true"></i><span class='badge'>0</span></a>
            </li>

navbar.html のbadgeの箇所にidを挿入する。(jquery用）

          <ul class="nav navbar-nav navbar-right">
            <li>
                <a href='{% url 'cart' %}'><i class="fa fa-shopping-cart fa-navbar-cart" aria-hidden="true"></i><span id="cart-count-badge" class='badge'>0</span></a>
            </li>

carts/views.py にItemCountView　classを作っておく。

class ItemCountView(View):

    def get(self, request, *args, **kwargs):
        if request.is_ajax():
            return JsonResponse({"count": 10})
        else:
            raise Http404

urls.py にcart/count/ を追記

    url(r'^cart/count/$', ItemCountView.as_view(), name='item_count'),

javascript.html にajaxを追記

    <script src="{% static 'js/custom.js' %}"></script>

    <script>
    $(document).ready(function(){
        var badge = $("#cart-count-badge");

        $.ajax({
            type: "GET",
            url: "{% url 'item_count' %}",
            success: function(data){
                badge.text(data.count);
            },
            error: function(response, error){
                console.log(response)
                console.log(error);
            }
        })

    })
    </script>

carts/views.py　に、追記

class ItemCountView(View):
    def get(self, request, *args, **kwargs):
        if request.is_ajax():
            cart_id = self.request.session.get("cart_id")

            if cart_id == None:
                count = 0
            else:
                cart = Cart.objects.get(id=cart_id)
                count = cart.items.count()

            return JsonResponse({"count": count})
        else:
            raise Http404

ItemCountView を修正

sessionにcart_item_countを記憶させるようにする。

class ItemCountView(View):
    def get(self, request, *args, **kwargs):
        if request.is_ajax():
            cart_id = self.request.session.get("cart_id")

            if cart_id == None:
                count = 0
            else:
                cart = Cart.objects.get(id=cart_id)
                count = cart.items.count()
            request.session["cart_item_count"] = count
            return JsonResponse({"count": count})
        else:
            raise Http404

navbar.html を修正する。

badgeの箇所に、sessionからゲットするcart_item_countを入れる。

<a href='{% url 'cart' %}'><i class="fa fa-shopping-cart fa-navbar-cart" aria-hidden="true"></i><span id="cart-count-badge" class='badge'>{{ if request.session.cart_item_count }}</span></a>

javascript.htmlに記載がある .ajaxの設定を修正する。

現時点では、countに関する、.ajaxが、１回しか呼び出されないので、それを修正する。 まず、updateCartCountをfunctionにする。

    <script>
    function updateCartItemCount(){
        var badge = $("#cart-count-badge");

        $.ajax({
            type: "GET",
            url: "{% url 'item_count' %}",
            success: function(data){
                badge.text(data.count);
                console.log(data.count);
            },
            error: function(response, error){
                console.log(response)
                console.log(error);
            }
        })
    }
    $(document).ready(function(){
        updateCartItemCount()
    })
    </script>

updateCartItemCount()を各種ajaxに読み込ませる。

view.htmlと、product_detail.html

課題点・問題点など

javascript.html になぜ記載したのか。