توسعه تجارت الکترونیک با جنگو (قسمت 4)

Summarize this content to 400 words in Persian Lang
در این چهارمین و آخرین آموزش نکات زیر پوشش داده خواهد شد:

پردازش سفارش جدیدنمایش سابقه سفارشمحصولات را بر اساس دسته بندی فیلتر کنید.

1. پردازش یک سفارش جدید

داخل بسته “مدل” برنامه store، یک فایل پایتون ایجاد کنید: “order.py” و تعریف زیر را به مدل اضافه کنید:

…
…
from store.models import Pedido

from django.db import models
from django.contrib.auth.models import User
from .producto import Producto

class Pedido(models.Model):
usuario = models.ForeignKey(User, on_delete=models.CASCADE)
producto = models.ForeignKey(Producto, on_delete=models.CASCADE)
cantidad = models.PositiveIntegerField(default=1)
total = models.DecimalField(max_digits=12, decimal_places=2)
fecha_registro = models.DateTimeField(auto_now_add=True)
fecha_ult_act = models.DateTimeField(auto_now=True)

def __str__(self) -> str:
return f'{self.id}’

class Meta:
db_table=”st_pedidos”
verbose_name=”Pedido”
verbose_name_plural=”Pedidos”`

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای ثبت سفارش های جدید از مدل Order استفاده می شود.

از آنجایی که ما یک مدل جدید ایجاد کرده ایم، باید مهاجرت مربوطه را ایجاد و اعمال کنیم تا آن را در پایگاه داده منعکس کنیم، با استفاده از دستورات:

poetry run python manage.py makemigrations، ypoetry run python manage.py migrate

در مرحله بعد، ما باید “URL” را ایجاد کنیم که از طریق آن ثبت هر سفارش انجام می شود. کد زیر را به فایل urls.py برنامه خود اضافه کنید store:

urlpatterns = [
# Otras rutas
path(‘pedidos/’, views.crear_pedido, name=”crear_pedido”)
]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هنگامی که مسیر ایجاد شد، می‌خواهیم آن را با تابع view مربوطه مرتبط کنیم، برای این کار، تابع را ایجاد می‌کنیم crear_pedido در فایل views.py برنامه store:

def crear_pedido(request):
try:
datos_pedido = json.loads(request.body)
producto_id = int(datos_pedido.get(‘producto_id’))
cantidad = int(datos_pedido.get(‘cantidad’))

producto = Producto.objects.get(pk=producto_id)

nuevo_pedido = Pedido( usuario=request.user,
producto=producto,
cantidad=cantidad,
total=cantidad*producto.precio)

nuevo_pedido.save()

return JsonResponse({‘success’: True, ‘message’: f’Se registró el pedido exitosamente. Pedido # {nuevo_pedido.id}’}, status=200)

except Exception as ex:
return JsonResponse({‘success’: False, ‘message’: str(ex)}, status=500)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بعداً درخواست http را از طریق Ajax انجام خواهیم داد که مسئول مصرف مسیر ایجاد سفارش در زمانی است که کاربر می خواهد سفارش جدیدی وارد کند. برای این کار، یک فایل جاوا اسکریپت استاتیک جدید در داخل پوشه ایجاد می کنیم static/js، فایل را می توان فراخوانی کرد pedido.js.

در داخل فایل، تابع زیر را ثبت می کنیم:

function crearPedido(producto_id, csrf_token){

const jsonData= {
producto_id: producto_id,
cantidad: 1
}

axios.post(‘/pedidos/’, jsonData, {
headers: {
‘X-CSRFToken’: csrfToken
}
})
.then(response => {
alert(response.data.message);
})
.catch(error => {
if (error.response) {
alert(error.response.data.message);
}else {
alert(error.message);
}
});
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نهایت، ما می خواهیم همه چیز را از قالب “catalog.html” وصل کنیم، در اینجا تابع را اجرا می کنیم crearPedido که ما به تازگی ایجاد کرده ایم. در دکمه “Place Order” با اجرای فراخوانی تابع، رویداد onclick را مدیریت می کنیم. crearPedido به شرح زیر است:

onclick=”crearPedido(‘{{producto.id}}’, ‘{{csrf_token}}’)”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای اینکه کار کند باید فایل جاوا اسکریپت را ثبت کنیم pedido.js داخل قالب:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما به اجرای همه چیز ادامه می دهیم تا تأیید کند که سفارشات جدید ایجاد شده اند.

2. نمایش تاریخچه سفارش کاربر

حالا بیایید تابع view را ویرایش کنیم get_mis_pedidos برای مشورت با سفارشات کاربر و نمایش آنها.

بیایید تابع view را به صورت زیر ویرایش کنیم:

def get_mis_pedidos(request):
pedidos = Pedido.objects.filter(usuario=request.user).order_by(‘-id’)
return render(request, ‘mis-pedidos.html’, {‘pedidos’: pedidos})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و بیایید الگوی “my-orders.html” را ویرایش کنیم تا سفارشات کاربر در یک جدول نمایش داده شود:

#
Pedido
Producto
Cantidad
Total
Fecha Reg.

{% for pedido in pedidos %}

{{ forloop.counter }}
{{ pedido.id }}
{{ pedido.producto.nombre }}
{{ pedido.cantidad }}
{{ pedido.total }}
{{ pedido.fecha_registro }}

{% endfor %}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. اجازه فیلتر کردن محصولات بر اساس دسته بندی را بدهید

به عنوان آخرین نکته، فیلتر محصول را بر اساس دسته بندی فعال می کنیم، برای این کار باید یک پردازشگر زمینه (context_processor) ایجاد کنیم.

یک context_processor در جنگو تابعی است که یک درخواست را دریافت می‌کند و یک فرهنگ لغت داده را برمی‌گرداند که به طور خودکار به متن همه قالب‌های رندر شده اضافه می‌شود و به داده‌های خاصی اجازه می‌دهد تا در سطح جهانی بدون نیاز به ارسال صریح در هر نما در دسترس باشند.

ابتدا باید فایل context_processors.py را در دایرکتوری برنامه “store” ایجاد کنیم. پس از ایجاد، ما به ایجاد context_processor ادامه می دهیم تا همه دسته ها را بررسی کنیم:

from store.models import Categoria

def get_all_categorias(request):
categorias = Categoria.objects.all()
return {‘categorias’: categorias}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بعد، باید context_processor را در پیکربندی پروژه ثبت کنیم. برویم به ecommerce/settings.py و در داخل فایل می‌خواهیم بخش TEMPLATES را بیابیم، در این بخش context_processors را پیدا کرده و قسمت خود را به صورت زیر اضافه می‌کنیم:

TEMPLATES = [
{
‘BACKEND’: ‘django.template.backends.django.DjangoTemplates’,
‘DIRS’: [],
‘APP_DIRS’: True,
‘OPTIONS’: {
‘context_processors’: [
…
…
‘store.context_processors.get_all_categorias’
],
},
},
]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس باید به الگوی “index.html” برویم تا همه دسته‌ها را به عنوان یک گزینه زیر منوی درون دسته‌بندی انتخاب کنیم، به شرح زیر:

{% for categoria in categorias %}
{{categoria.nombre}}
{% endfor %}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نهایت یک URL جدید و عملکرد مشاهده در داخل برنامه ایجاد کنید store که به شما امکان مشاوره و نمایش محصولات فیلتر شده بر اساس دسته را می دهد.

تابع view می تواند به شکل زیر باشد:

def get_productos_por_categoria(request, categoria_id):
productos = Producto.objects.filter(categorias__in=[categoria_id])
return render(request, ‘catalog.html’, {‘productos’: productos})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و URL جدید مانند این:

urlpatterns = [
# Otras rutas
path(‘categorias//productos/’, views.get_productos_por_categoria, name=”productos_por_categoria”),
]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید سعی کنیم آن را عملی کنیم و پروژه ما کامل شود.

...
...
from store.models import Pedido

from django.db import models
from django.contrib.auth.models import User
from .producto import Producto

class Pedido(models.Model):
    usuario = models.ForeignKey(User, on_delete=models.CASCADE)
    producto = models.ForeignKey(Producto, on_delete=models.CASCADE)
    cantidad = models.PositiveIntegerField(default=1)
    total = models.DecimalField(max_digits=12, decimal_places=2)
    fecha_registro = models.DateTimeField(auto_now_add=True)
    fecha_ult_act = models.DateTimeField(auto_now=True)

    def __str__(self) -> str:
        return f'{self.id}'

    class Meta:
        db_table="st_pedidos"
        verbose_name="Pedido"
        verbose_name_plural="Pedidos"`

urlpatterns = [
  # Otras rutas
  path('pedidos/', views.crear_pedido, name="crear_pedido")
]

def crear_pedido(request):    
    try:    
        datos_pedido = json.loads(request.body)
        producto_id = int(datos_pedido.get('producto_id'))
        cantidad = int(datos_pedido.get('cantidad'))

        producto = Producto.objects.get(pk=producto_id)

        nuevo_pedido = Pedido(  usuario=request.user,
                                producto=producto,
                                cantidad=cantidad,
                                total=cantidad*producto.precio)

        nuevo_pedido.save()

        return JsonResponse({'success': True, 'message': f'Se registró el pedido exitosamente. Pedido # {nuevo_pedido.id}'}, status=200)        

    except Exception as ex:
        return JsonResponse({'success': False, 'message': str(ex)}, status=500)

function crearPedido(producto_id, csrf_token){

    const jsonData= {
        producto_id: producto_id,
        cantidad: 1
    }

    axios.post('/pedidos/', jsonData, {
        headers: {
            'X-CSRFToken': csrfToken
        }
    })
    .then(response => {
        alert(response.data.message);
    })
    .catch(error => {
        if (error.response) {           
            alert(error.response.data.message);
        }else {
            alert(error.message);
        }
    });
}

onclick="crearPedido('{{producto.id}}', '{{csrf_token}}')"

		

			

										

							
							 هم‌رسانی
						
						
				
					 فیس بوک
				
				
					 توییتر (X)
				
				
					 لینکدین
				
				
					 ‫تامبلر
				
				
					 ‫پین‌ترست
				
				
					 ‫رددیت
				
				
					 ‫VKontakte
				
				
					 ‫Odnoklassniki
				
				
					 پاکت
				
				
					 رایانامه
				
				
					 چاپ