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が、1回しか呼び出されないので、それを修正する。 まず、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 になぜ記載したのか。