Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Django e-commerce part50 Display Message from Server

動作によって、メッセージを変更する

carts/view.py にメッセージ変数を設定する。

class CartView(SingleObjectMixin, View):
 ...
        flash_message = ""
  ...
            cart_item, created = CartItem.objects.get_or_create(cart=cart, item=item_instance)
            if created:
                flash_message = "カートにアイテムが追加されました"
                item_added = True

            if delete_item:
                flash_message = "カートのアイテムが削除されました"
                cart_item.delete()
            else:
                if not created:
                    flash_message = "アイテムの数量を変更しました"
                cart_item.quantity = int(qty)
                cart_item.save()
...
            data = {
                "deleted": delete_item,
                "item_added": item_added,
                "line_total": total,
                "subtotal": subtotal,
                "flash_message": flash_message,
                }
            return JsonResponse(data)

...

view.html にflash_messageを渡す。

<script>
{% block jquery %}
$(".item-qty").change(function(){
...
        success: function(data){
            $("#jquery-message").text("Added " + data.item_added + " Deleted " + data.deleted);
            if (data.deleted){
                $("#item-"+item).fadeOut();
            } else {
                $("#item-line-total-"+item).text(data.line_total);
                $("#subtotal").text(data.subtotal);
            }
<span style="color: #ff0000">            showFlashMessage(data.flash_message);
</span>        },
...
{% endblock %}

</script>

product_detail.htmlに追記する

$("#submit-btn").click(function(event){
    event.preventDefault();
    var formData = $("#add-form").serialize();
    console.log(formData);
    $.ajax({
        type: "GET", //"POST"
        url: "{% url 'cart' %}",
        data: formData,
        success: function(data){
<span style="color: #ff0000">            showFlashMessage(data.flash_message);
</span>        },
        error: function(response, error){
            // console.log(response)
            // console.log(error)
            $("#add-form").submit()
        },

    })

    // $("#add-form").submit();
})```

## view.html 別の書き方
    success: function(data){
        $("#jquery-message").text("Added " + data.item_added + " Deleted " + data.deleted);
        if (data.deleted){
            $("#item-"+item).fadeOut();
        } else {
            $("#item-line-total-"+item).text(data.line_total);
            $("#subtotal").text(data.subtotal);
        }
        var message = ""
        if ( data.item_added){
            message = "新しいアイテムが追加されました"
        } else if ( data.deleted ){
            message = "アイテムが削除されました"
        } else {
            message = "アイテムが更新されました"
        }
        showFlashMessage(message);
    },
どちらでも可