Интернет-магазин на фреймворке Django. Часть 3.

Создание корзины

Я уже говорил во второй части, что на странице товаров я создал кнопку покупки и поле для добавления количество товаров, поэтому этот момент в этом разделе опускаем. Сама корзина реализована с помощью jQuery. Что такое вообще jQuery? jQuery — набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Первым делом, мы подключаем jQuery к нашему проекту путем написания команды в static (в моем случае это файл main.html, в который мы подключали все файлы в первой части, а именно: Js,css и так далее). После этого, в папке js мы создаем файл scripts.js. В данном файле был прописан код, который позволяет добавлять и удалять товар из корзины. Помимо этого, он еще позволял показывать сколько было взято товаров, его название, цену. А также в файле views.py тоже был написан код, который позволял сохранять данные на стороне сервера. Сами коды представлены ниже.

scripts.js

$(document).ready(function(){
    var form = $('#form_buying_product');
    console.log(form);

    function basketUpdating(product_id, nmb, is_delete){
        var data = {};
        data.product_id = product_id;
        data.nmb = nmb;
         var csrf_token = $('#form_buying_product [name="csrfmiddlewaretoken"]').val();
         data["csrfmiddlewaretoken"] = csrf_token;

        if (is_delete){
            data["is_delete"] = true;
        }

         var url = form.attr("action");

        console.log(data)
         $.ajax({
             url: url,
             type: 'POST',
             data: data,
             cache: true,
             success: function (data) {
                 console.log("OK");
                 console.log(data.products_total_nmb);
                 if (data.products_total_nmb || data.products_total_nmb == 0){
                    $('#basket_total_nmb').text("("+data.products_total_nmb+")");
                     console.log(data.products);
                     $('.basket-items ul').html("");
                     $.each(data.products, function(k, v){
                        $('.basket-items ul').append('
'+ v.name+', ' + v.nmb + 'шт. ' + 'по ' + v.price_per_item + 'руб  ' +
                            'x'+
                            '
');
                     });
                 }

             },
             error: function(){
                 console.log("error")
             }
         })

    }

    form.on('submit', function(e){
        e.preventDefault();
        console.log('123');
        var nmb = $('#number').val();
        console.log(nmb);
        var submit_btn = $('#submit_btn');
        var product_id =  submit_btn.data("product_id");
        var name = submit_btn.data("name");
        var price = submit_btn.data("price");
        console.log(product_id );
        console.log(name);

        basketUpdating(product_id, nmb, is_delete=false)

    });

    function showingBasket(){
    	$('.basket-items').toggleClass('hidden');
    };

    $('.basket-container').on('click, hover',function(e){
    	e.preventDefault();
    	showingBasket();
    	     
	});
	$('.basket-container').mouseover(function(){
	 	showingBasket();
	}); 

	$('.basket-container').mouseout(function(){
	 	showingBasket();
	});

	$(document).on('click', '.delete-item', function(e){
         e.preventDefault();
         product_id = $(this).data("product_id")
         nmb = 0;
         basketUpdating(product_id, nmb, is_delete=true)
     })

function calculatingBasketAmount(){
        var total_order_amount = 0;
        $('.total-product-in-basket-amount').each(function() {
            total_order_amount = total_order_amount + parseFloat($(this).text());
        });
        console.log(total_order_amount);
        $('#total_order_amount').text(total_order_amount.toFixed(2));
    };

    $(document).on('change', ".product-in-basket-nmb", function(){
        var current_nmb = $(this).val();
        console.log(current_nmb);

        var current_tr = $(this).closest('tr');
        var current_price = parseFloat(current_tr.find('.product-price').text()).toFixed(2);
        console.log(current_price);
        var total_amount = parseFloat(current_nmb*current_price).toFixed(2);
        console.log(total_amount);
        current_tr.find('.total-product-in-basket-amount').text(total_amount);

        calculatingBasketAmount();
    });

    calculatingBasketAmount();
});

views.py

def basket_adding(request):
	return_dict = dict()
	session_key = request.session.session_key
	data = request.POST
	product_id = data.get("product_id")
	nmb = data.get("nmb")
	is_delete = data.get("is_delete")

	if is_delete == 'true':
		ProductInBasket.objects.filter(id=product_id).update(is_active=False)
		
	else:


		new_product, created = ProductInBasket.objects.get_or_create(session_key=session_key, product_id=product_id,
                                                                     is_active=True, defaults={"nmb": nmb})
		if not created:
			new_product.nmb+= int(nmb)
		new_product.save(force_update=True)
	

	products_in_basket = ProductInBasket.objects.filter(session_key=session_key, is_active=True)
	products_total_nmb = products_in_basket.count()
	return_dict["products_total_nmb"] = products_total_nmb
    
   

	return_dict["products"] = list()

	for item in products_in_basket:
		product_dict = dict()
		product_dict["id"] = item.id
		product_dict["name"] = item.product.name
		product_dict["price_per_item"] = item.price_per_item
		product_dict["nmb"] = item.nmb
		return_dict["products"].append(product_dict)

	return JsonResponse(return_dict)

Помимо этого, была создана корзина в шапке сайта, при наведении на которую, она разворачивалась и там были показаны наши товары, а именно: название, цена за шт, количество, а также был крестик, позволяющий удалить товар из корзины. Также, я поработал с библиотекой Ajax. Ajax — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. То есть, я создал в Django-Admin Panel еще одну БД (как создавать БД я рассказывал ниже), в которой отображалась добавленные товары в корзине. И это как раз и было реализовано через Ajax. А для чего это нужно? Это нужно по большей части для анализа данных, какие товары добавляют больше всего, какие удаляют и тд. Итог выполнения представлен ниже.

Как мы видим, в БД показывается ID товара, кол-во, цену за шт, итоговую цену, дату добавления и т.д. Помимо этого, мы видим, что в поле "Is active" стоит зеленая галочка. Это значит, что товар у человека до сих пор находится в корзине, а если товар удалить, то будет красный крестик. Но в ходе создания корзины, я столкнулся с очень серьезной проблемой, а именно: при обновлении страницы или переходе на другую товар пропадал из корзины. Эту проблему я решил с помощью context processors. context processors - это файл, который есть на всех страницах сайта. То есть, при перемещении по сайту, обновлении страницы, товары оставались в корзине и показывалось, сколько их там. Код контекстного процессора и результаты выполнения в целом представлены ниже.

Код context processors

from .models import ProductInBasket

def getting_basket_info(request):

    session_key = request.session.session_key
    if not session_key:
        request.session["session_key"] = 123
        request.session.cycle_key()

    products_in_basket = ProductInBasket.objects.filter(session_key=session_key, is_active=True)
    products_total_nmb = products_in_basket.count()

    return locals()

Итоговый результат реализации корзины