├── store
    ├── __init__.py
    ├── migrations
    │   ├── __init__.py
    │   ├── 0002_product_image.py
    │   ├── 0003_alter_product_price.py
    │   ├── 0004_product_about_alter_product_name.py
    │   └── 0001_initial.py
    ├── tests.py
    ├── apps.py
    ├── admin.py
    ├── urls.py
    ├── templates
    │   └── store
    │   │   ├── store.html
    │   │   ├── cart.html
    │   │   ├── main.html
    │   │   ├── checkout.html
    │   │   ├── register.html
    │   │   └── product.html
    ├── utils.py
    ├── models.py
    └── views.py
├── ecommerce
    ├── __init__.py
    ├── urls.py
    ├── asgi.py
    ├── wsgi.py
    └── settings.py
├── README.md
├── static
    ├── images
    │   ├── book.jpg
    │   ├── cart.png
    │   ├── shirt.jpg
    │   ├── shoes.jpg
    │   ├── watch.jpg
    │   ├── arrow-up.png
    │   ├── arrow-down.png
    │   ├── headphones.jpg
    │   └── placeholder.png
    ├── js
    │   └── cart.js
    └── css
    │   └── main.css
├── manage.py
└── .gitignore


/store/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/ecommerce/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/store/migrations/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # E-commerce_Project
2 | 


--------------------------------------------------------------------------------
/store/tests.py:
--------------------------------------------------------------------------------
1 | from django.test import TestCase
2 | 
3 | # Create your tests here.
4 | 


--------------------------------------------------------------------------------
/static/images/book.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdujalil-gafforov/E-commerce_Project/HEAD/static/images/book.jpg


--------------------------------------------------------------------------------
/static/images/cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdujalil-gafforov/E-commerce_Project/HEAD/static/images/cart.png


--------------------------------------------------------------------------------
/static/images/shirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdujalil-gafforov/E-commerce_Project/HEAD/static/images/shirt.jpg


--------------------------------------------------------------------------------
/static/images/shoes.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdujalil-gafforov/E-commerce_Project/HEAD/static/images/shoes.jpg


--------------------------------------------------------------------------------
/static/images/watch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdujalil-gafforov/E-commerce_Project/HEAD/static/images/watch.jpg


--------------------------------------------------------------------------------
/static/images/arrow-up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdujalil-gafforov/E-commerce_Project/HEAD/static/images/arrow-up.png


--------------------------------------------------------------------------------
/static/images/arrow-down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdujalil-gafforov/E-commerce_Project/HEAD/static/images/arrow-down.png


--------------------------------------------------------------------------------
/static/images/headphones.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdujalil-gafforov/E-commerce_Project/HEAD/static/images/headphones.jpg


--------------------------------------------------------------------------------
/static/images/placeholder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdujalil-gafforov/E-commerce_Project/HEAD/static/images/placeholder.png


--------------------------------------------------------------------------------
/store/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class StoreConfig(AppConfig):
5 |     default_auto_field = 'django.db.models.BigAutoField'
6 |     name = 'store'
7 | 


--------------------------------------------------------------------------------
/store/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | from .models import *
3 | 
4 | admin.site.register(Customer)
5 | admin.site.register(Product)
6 | admin.site.register(Order)
7 | admin.site.register(OrderItem)
8 | admin.site.register(ShippingAddress)
9 | 


--------------------------------------------------------------------------------
/ecommerce/urls.py:
--------------------------------------------------------------------------------
 1 | from django.conf import settings
 2 | from django.conf.urls.static import static
 3 | from django.contrib import admin
 4 | from django.urls import path, include
 5 | 
 6 | urlpatterns = [
 7 |     path('admin/', admin.site.urls),
 8 |     path('', include('store.urls')),
 9 | ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
10 | 


--------------------------------------------------------------------------------
/ecommerce/asgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | ASGI config for ecommerce project.
 3 | 
 4 | It exposes the ASGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/4.1/howto/deployment/asgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.asgi import get_asgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ecommerce.settings')
15 | 
16 | application = get_asgi_application()
17 | 


--------------------------------------------------------------------------------
/ecommerce/wsgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | WSGI config for ecommerce project.
 3 | 
 4 | It exposes the WSGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/4.1/howto/deployment/wsgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.wsgi import get_wsgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ecommerce.settings')
15 | 
16 | application = get_wsgi_application()
17 | 


--------------------------------------------------------------------------------
/store/migrations/0002_product_image.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 4.1.4 on 2022-12-23 19:20
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('store', '0001_initial'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AddField(
14 |             model_name='product',
15 |             name='image',
16 |             field=models.ImageField(blank=True, null=True, upload_to=''),
17 |         ),
18 |     ]
19 | 


--------------------------------------------------------------------------------
/store/migrations/0003_alter_product_price.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 4.1.4 on 2022-12-24 22:02
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('store', '0002_product_image'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AlterField(
14 |             model_name='product',
15 |             name='price',
16 |             field=models.DecimalField(decimal_places=2, max_digits=7),
17 |         ),
18 |     ]
19 | 


--------------------------------------------------------------------------------
/store/urls.py:
--------------------------------------------------------------------------------
 1 | from django.urls import path
 2 | 
 3 | from store.views import Store, Cart, Checkout, updateItem, processOrder, ProductPage, Register
 4 | 
 5 | urlpatterns = [
 6 |     path('', Store.as_view(), name='store'),
 7 |     path('cart/', Cart.as_view(), name='cart'),
 8 |     path('checkout/', Checkout.as_view(), name='checkout'),
 9 | 	path('register/', Register.as_view(), name='register'),
10 |     path('update_item/', updateItem.as_view(), name='update_item'),
11 |     path('process_order/', processOrder.as_view(), name='process_order'),
12 |     path('product-<int:pk>/', ProductPage.as_view(), name='product_page'),
13 | ]
14 | 


--------------------------------------------------------------------------------
/store/migrations/0004_product_about_alter_product_name.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 4.2.3 on 2023-07-15 14:40
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('store', '0003_alter_product_price'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AddField(
14 |             model_name='product',
15 |             name='about',
16 |             field=models.CharField(max_length=300, null=True),
17 |         ),
18 |         migrations.AlterField(
19 |             model_name='product',
20 |             name='name',
21 |             field=models.CharField(max_length=50, null=True),
22 |         ),
23 |     ]
24 | 


--------------------------------------------------------------------------------
/manage.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | """Django's command-line utility for administrative tasks."""
 3 | import os
 4 | import sys
 5 | 
 6 | 
 7 | def main():
 8 |     """Run administrative tasks."""
 9 |     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ecommerce.settings')
10 |     try:
11 |         from django.core.management import execute_from_command_line
12 |     except ImportError as exc:
13 |         raise ImportError(
14 |             "Couldn't import Django. Are you sure it's installed and "
15 |             "available on your PYTHONPATH environment variable? Did you "
16 |             "forget to activate a virtual environment?"
17 |         ) from exc
18 |     execute_from_command_line(sys.argv)
19 | 
20 | 
21 | if __name__ == '__main__':
22 |     main()
23 | 


--------------------------------------------------------------------------------
/store/templates/store/store.html:
--------------------------------------------------------------------------------
 1 | {% extends 'store/main.html' %}
 2 | {% load static %}
 3 | {% block content %}
 4 |     <div class="row">
 5 |         {% for product in products %}
 6 |             <div class="col-lg-4">
 7 |                 <img class="thumbnail" src="{{ product.imageURL }}" alt="product image">
 8 |                 <div class="box-element product">
 9 |                     <h6><strong>{{ product.name }}</strong></h6>
10 |                     <hr>
11 |                     <button data-product="{{ product.id }}" data-action="add" class="btn btn-outline-secondary add-btn update-cart">Add to Cart</button>
12 |                     <a class="btn btn-outline-success" href="{% url 'product_page' product.id %}">View</a>
13 |                     <h4 style="display: inline-block;float: right;">${{ product.price|floatformat:2 }}</h4>
14 |                 </div>
15 |             </div>
16 |         {% endfor %}
17 |     </div>
18 | {% endblock %}


--------------------------------------------------------------------------------
/static/js/cart.js:
--------------------------------------------------------------------------------
 1 | var updateBtns = document.getElementsByClassName('update-cart')
 2 | 
 3 | for (var i = 0; i < updateBtns.length; i++) {
 4 |     updateBtns[i].addEventListener('click', function () {
 5 |         var productId = this.dataset.product
 6 |         var action = this.dataset.action
 7 |         console.log('productId', productId, 'action:', action)
 8 | 
 9 |         console.log('USER', user)
10 |         if (user === 'AnonymousUser') {
11 |             addCookieItem(productId, action)
12 |         } else {
13 |             updateUserOrder(productId, action)
14 |         }
15 |     })
16 | }
17 | 
18 | function addCookieItem(productId, action) {
19 |     console.log('Not logged in..')
20 | 
21 |     if (action == 'add') {
22 |         if (cart[productId] == undefined) {
23 |             cart[productId] = {'quantity': 1}
24 |         } else {
25 |             cart[productId]['quantity'] += 1
26 |         }
27 |     }
28 | 
29 |     if (action == 'remove') {
30 |         cart[productId]['quantity'] -= 1
31 |         if (cart[productId]['quantity'] <= 0) {
32 |             console.log('Remove Item')
33 |             delete cart[productId]
34 |         }
35 |     }
36 |     console.log('cart', cart)
37 |     document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"
38 |     location.reload()
39 | }
40 | 
41 | function updateUserOrder(productId, action) {
42 |     console.log('User is logged in, sending data...')
43 | 
44 |     var url = '/update_item/'
45 | 
46 |     fetch(url, {
47 |         method: 'POST',
48 |         headers: {
49 |             'Content-Type': 'application/json',
50 |             'X-CSRFToken': csrftoken,
51 |         },
52 |         body: JSON.stringify({'productId': productId, 'action': action})
53 |     })
54 | 
55 |         .then((response) => {
56 |             return response.json()
57 |         })
58 | 
59 |         .then((data) => {
60 |             console.log('data:', data)
61 |             location.reload()
62 |         })
63 | }


--------------------------------------------------------------------------------
/static/css/main.css:
--------------------------------------------------------------------------------
  1 | body{
  2 | 	background-color: hsl(0, 0%, 98%);
  3 | }
  4 | 
  5 | .product-page-container .product-info-card {
  6 |     align-items: stretch;
  7 |     display: flex;
  8 |     justify-content: space-between;
  9 |     margin-bottom: 25px;
 10 |     margin-top: 20px;
 11 | }
 12 | 
 13 | h1,h2,h3,h4,h5,h6{
 14 | 	color:hsl(0, 0%, 30%);
 15 | }
 16 | 
 17 | .box-element{
 18 | 	box-shadow:hsl(0, 0%, 80%) 0 0 16px;
 19 | 	background-color: #fff;
 20 | 	border-radius: 4px;
 21 | 	padding: 10px;
 22 | }
 23 | 
 24 | .thumbnail{
 25 | 	width: 100%;
 26 | 	height: 200px;
 27 | 	-webkit-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
 28 |     -moz-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
 29 |     box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
 30 | }
 31 | 
 32 | .product{
 33 | 	border-radius: 0 0 4px 4px;
 34 | }
 35 | 
 36 | .bg-dark{
 37 | 	background-color: #4f868c!important;
 38 | }
 39 | 
 40 | #cart-icon{
 41 | 	width:25px;
 42 | 	display: inline-block;
 43 | 	margin-left: 15px;
 44 | }
 45 | 
 46 | #cart-total{
 47 | 	display: block;
 48 | 	text-align: center;
 49 | 	color:#fff;
 50 | 	background-color: red;
 51 | 	width: 20px;
 52 | 	height: 25px;
 53 | 	border-radius: 50%;
 54 | 	font-size: 14px;
 55 | }
 56 | 
 57 | .col-lg-4, .col-lg-6, .col-lg-8, .col-lg-12{
 58 | 	margin-top: 10px;
 59 | }
 60 | 
 61 | .btn{
 62 | 	border-radius: 0;
 63 | }
 64 | 
 65 | .row-image{
 66 | 	width: 100px;
 67 | }
 68 | 
 69 | .form-field{
 70 | 	width:250px;
 71 | 	display: inline-block;
 72 | 	padding: 5px;
 73 | }
 74 | 
 75 | .cart-row{
 76 | 	display: flex;
 77 |     align-items: flex-stretch;
 78 |     padding-bottom: 10px;
 79 |     margin-bottom: 10px;
 80 |     border-bottom: 1px solid #ececec;
 81 | 
 82 | }
 83 | 
 84 | .quantity{
 85 | 	display: inline-block;
 86 | 	font-weight: 700;
 87 | 	padding-right:10px;
 88 | 
 89 | 
 90 | }
 91 | 
 92 | .chg-quantity{
 93 | 	width: 12px;
 94 | 	cursor: pointer;
 95 | 	display: block;
 96 | 	margin-top: 5px;
 97 | 	transition:.1s;
 98 | }
 99 | 
100 | .chg-quantity:hover{
101 | 	opacity: .6;
102 | }
103 | 
104 | 
105 | .hidden{
106 | 	display: none!important;
107 | }


--------------------------------------------------------------------------------
/store/templates/store/cart.html:
--------------------------------------------------------------------------------
 1 | {% extends 'store/main.html' %}
 2 | {% load static %}
 3 | {% block content %}
 4 |     <div class="row">
 5 |         <div class="col-lg-12">
 6 |             <div class="box-element">
 7 |                 <a class="btn btn-outline-dark" href="{% url 'store' %}">&#x2190; Continue Shopping</a>
 8 |                 <br>
 9 |                 <br>
10 |                 <table class="table">
11 |                     <tr>
12 |                         <th><h5>Items: <strong>{{ order.get_cart_items }}</strong></h5></th>
13 |                         <th><h5>Total:<strong> ${{ order.get_cart_total|floatformat:2 }}</strong></h5></th>
14 |                         <th>
15 |                             <a style="float:right; margin:5px;" class="btn btn-success" href="{% url 'checkout' %}">Checkout</a>
16 |                         </th>
17 |                     </tr>
18 |                 </table>
19 |             </div>
20 | 
21 |             <br>
22 |             <div class="box-element">
23 |                 <div class="cart-row">
24 |                     <div style="flex:2"></div>
25 |                     <div style="flex:2"><strong>Item</strong></div>
26 |                     <div style="flex:1"><strong>Price</strong></div>
27 |                     <div style="flex:1"><strong>Quantity</strong></div>
28 |                     <div style="flex:1"><strong>Total</strong></div>
29 |                 </div>
30 |                 {% for item in items %}
31 |                 <div class="cart-row">
32 |                     <div style="flex:2"><img class="row-image" src="{{ item.product.imageURL }}"></div>
33 |                     <div style="flex:2"><p>{{ item.product.name }}</p></div>
34 |                     <div style="flex:1"><p>${{ item.product.price|floatformat:2 }}</p></div>
35 |                     <div style="flex:1">
36 |                         <p class="quantity">{{ item.quantity }}</p>
37 |                         <div class="quantity">
38 |                             <img data-product={{ item.product.id }} data-action='add' class="chg-quantity update-cart" src="{% static  'images/arrow-up.png' %}">
39 | 
40 |                             <img data-product={{ item.product.id }} data-action='remove' class="chg-quantity update-cart" src="{% static  'images/arrow-down.png' %}">
41 |                         </div>
42 |                     </div>
43 |                     <div style="flex:1"><p>${{ item.get_total }}</p></div>
44 |                 </div>
45 |                 {% endfor %}
46 |             </div>
47 |         </div>
48 |     </div>
49 | {% endblock %}


--------------------------------------------------------------------------------
/store/utils.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | from .models import *
 3 | 
 4 | 
 5 | def cookieCart(request):
 6 |     try:
 7 |         cart = json.loads(request.COOKIES['cart'])
 8 |     except:
 9 |         cart = {}
10 |     print('Cart:', cart)
11 |     items = []
12 |     order = {'get_cart_total': 0, 'get_cart_items': 0, 'shipping': False}
13 |     cartItems = order['get_cart_items']
14 |     for i in cart:
15 |         try:
16 |             cartItems += cart[i]["quantity"]
17 | 
18 |             product = Product.objects.get(id=i)
19 |             total = (product.price * cart[i]["quantity"])
20 | 
21 |             order['get_cart_total'] += total
22 |             order['get_cart_items'] += cart[i]["quantity"]
23 | 
24 |             item = {
25 |                 'product': {
26 |                     'id': product.id,
27 |                     'name': product.name,
28 |                     'price': product.price,
29 |                     'imageURL': product.imageURL,
30 |                 },
31 |                 'quantity': cart[i]["quantity"],
32 |                 'get_total': total
33 |             }
34 |             items.append(item)
35 |             if product.digital == False:
36 |                 order['shipping'] = True
37 |         except:
38 |             pass
39 |     return {'cartItems': cartItems, 'order': order, 'items': items}
40 | 
41 | 
42 | def cartData(request):
43 |     if request.user.is_authenticated:
44 |         customer = request.user.customer
45 |         order, created = Order.objects.get_or_create(customer=customer, complete=False)
46 |         items = order.orderitem_set.all()
47 |         cartItems = order.get_cart_items
48 |     else:
49 |         cookieData = cookieCart(request)
50 |         cartItems = cookieData['cartItems']
51 |         order = cookieData['order']
52 |         items = cookieData['items']
53 |     return {'cartItems': cartItems, 'order': order, 'items': items}
54 | 
55 | 
56 | def guestOrder(request, data):
57 |     print('User is not logged in')
58 |     print('COOKIES:', request.COOKIES)
59 |     name = data['form']['name']
60 |     email = data['form']['email']
61 |     cookieData = cookieCart(request)
62 |     items = cookieData['items']
63 |     customer, created = Customer.objects.get_or_create(email=email)
64 |     customer.name = name
65 |     customer.save()
66 | 
67 |     order = Order.objects.create(
68 |         customer=customer,
69 |         complete=False,
70 |     )
71 | 
72 |     for item in items:
73 |         product = Product.objects.get(id=item['product']['id'])
74 | 
75 |         orderItem = OrderItem.objects.create(
76 |             product=product,
77 |             order=order,
78 |             quantity=item['quantity']
79 |         )
80 |     return customer, order
81 | 


--------------------------------------------------------------------------------
/ecommerce/settings.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from pathlib import Path
 3 | 
 4 | BASE_DIR = Path(__file__).resolve().parent.parent
 5 | 
 6 | SECRET_KEY = 'django-insecure-j4xu6f*apvf9rocej-9zjq@bnys^s9n)&ce=a3+9-tjiqpu*g5'
 7 | 
 8 | DEBUG = True
 9 | 
10 | ALLOWED_HOSTS = []
11 | 
12 | INSTALLED_APPS = [
13 |     'django.contrib.admin',
14 |     'django.contrib.auth',
15 |     'django.contrib.contenttypes',
16 |     'django.contrib.sessions',
17 |     'django.contrib.messages',
18 |     'django.contrib.staticfiles',
19 |     'store.apps.StoreConfig',
20 | ]
21 | 
22 | MIDDLEWARE = [
23 |     'django.middleware.security.SecurityMiddleware',
24 |     'django.contrib.sessions.middleware.SessionMiddleware',
25 |     'django.middleware.common.CommonMiddleware',
26 |     'django.middleware.csrf.CsrfViewMiddleware',
27 |     'django.contrib.auth.middleware.AuthenticationMiddleware',
28 |     'django.contrib.messages.middleware.MessageMiddleware',
29 |     'django.middleware.clickjacking.XFrameOptionsMiddleware',
30 | ]
31 | 
32 | ROOT_URLCONF = 'ecommerce.urls'
33 | 
34 | TEMPLATES = [
35 |     {
36 |         'BACKEND': 'django.template.backends.django.DjangoTemplates',
37 |         'DIRS': [BASE_DIR / 'store/templates']
38 |         ,
39 |         'APP_DIRS': True,
40 |         'OPTIONS': {
41 |             'context_processors': [
42 |                 'django.template.context_processors.debug',
43 |                 'django.template.context_processors.request',
44 |                 'django.contrib.auth.context_processors.auth',
45 |                 'django.contrib.messages.context_processors.messages',
46 |             ]
47 |         },
48 |     },
49 | ]
50 | 
51 | WSGI_APPLICATION = 'ecommerce.wsgi.application'
52 | 
53 | DATABASES = {
54 |     'default': {
55 |         'ENGINE': 'django.db.backends.sqlite3',
56 |         'NAME': BASE_DIR / 'db.sqlite3',
57 |     }
58 | }
59 | 
60 | AUTH_PASSWORD_VALIDATORS = [
61 |     {
62 |         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
63 |     },
64 |     {
65 |         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
66 |     },
67 |     {
68 |         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
69 |     },
70 |     {
71 |         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
72 |     },
73 | ]
74 | 
75 | LANGUAGE_CODE = 'en-us'
76 | 
77 | TIME_ZONE = 'UTC'
78 | 
79 | USE_I18N = True
80 | 
81 | USE_TZ = True
82 | 
83 | STATIC_URL = 'static/'
84 | 
85 | STATICFILES_DIRS = [
86 |     os.path.join(BASE_DIR, 'static')
87 | ]
88 | 
89 | DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
90 | 
91 | MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')
92 | 
93 | MEDIA_URL = 'images/'
94 | 


--------------------------------------------------------------------------------
/store/models.py:
--------------------------------------------------------------------------------
 1 | from django.contrib.auth.models import User
 2 | from django.db.models import Model, OneToOneField, CASCADE, CharField, BooleanField, ForeignKey, SET_NULL, \
 3 |     DateTimeField, IntegerField, ImageField, DecimalField
 4 | 
 5 | 
 6 | class Customer(Model):
 7 |     user = OneToOneField(User, on_delete=CASCADE, null=True, blank=True)
 8 |     name = CharField(max_length=200, null=True)
 9 |     email = CharField(max_length=200, null=True)
10 | 
11 |     def __str__(self):
12 |         return self.name
13 | 
14 | 
15 | class Product(Model):
16 |     name = CharField(max_length=50, null=True)
17 |     price = DecimalField(max_digits=7, decimal_places=2)
18 |     digital = BooleanField(default=False, null=True)
19 |     image = ImageField(null=True, blank=True)
20 |     about = CharField(max_length=300, null=True)
21 | 
22 |     def __str__(self):
23 |         return self.name
24 | 
25 |     @property
26 |     def imageURL(self):
27 |         try:
28 |             url = self.image.url
29 |         except:
30 |             url = ''
31 |         return url
32 | 
33 | 
34 | class Order(Model):
35 |     customer = ForeignKey(Customer, on_delete=SET_NULL, null=True, blank=True)
36 |     data_ordered = DateTimeField(auto_now_add=True)
37 |     complete = BooleanField(default=False, null=True, blank=False)
38 |     transaction_id = CharField(max_length=200, null=True)
39 | 
40 |     def __str__(self):
41 |         return str(self.id)
42 | 
43 |     @property
44 |     def shipping(self):
45 |         shipping = False
46 |         orderitems = self.orderitem_set.all()
47 |         for i in orderitems:
48 |             if i.product.digital == False:
49 |                 shipping = True
50 |         return shipping
51 | 
52 |     @property
53 |     def get_cart_total(self):
54 |         orderitems = self.orderitem_set.all()
55 |         total = sum([item.get_total for item in orderitems])
56 |         return total
57 | 
58 |     @property
59 |     def get_cart_items(self):
60 |         orderitems = self.orderitem_set.all()
61 |         total = sum([item.quantity for item in orderitems])
62 |         return total
63 | 
64 | 
65 | class OrderItem(Model):
66 |     product = ForeignKey(Product, on_delete=SET_NULL, blank=True, null=True)
67 |     order = ForeignKey(Order, on_delete=SET_NULL, blank=True, null=True)
68 |     quantity = IntegerField(default=0, null=True, blank=True)
69 |     data_added = DateTimeField(auto_now_add=True)
70 | 
71 |     @property
72 |     def get_total(self):
73 |         total = self.product.price * self.quantity
74 |         return total
75 | 
76 | 
77 | class ShippingAddress(Model):
78 |     customer = ForeignKey(Customer, on_delete=SET_NULL, blank=True, null=True)
79 |     order = ForeignKey(Order, on_delete=SET_NULL, blank=True, null=True)
80 |     address = CharField(max_length=200, null=True)
81 |     city = CharField(max_length=200, null=True)
82 |     state = CharField(max_length=200, null=True)
83 |     zipcode = CharField(max_length=200, null=True)
84 |     date_added = DateTimeField(auto_now_add=True)
85 | 
86 |     def __str__(self):
87 |         return self.address
88 | 


--------------------------------------------------------------------------------
/store/migrations/0001_initial.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 4.1.4 on 2022-12-23 18:59
 2 | 
 3 | from django.conf import settings
 4 | from django.db import migrations, models
 5 | import django.db.models.deletion
 6 | 
 7 | 
 8 | class Migration(migrations.Migration):
 9 | 
10 |     initial = True
11 | 
12 |     dependencies = [
13 |         migrations.swappable_dependency(settings.AUTH_USER_MODEL),
14 |     ]
15 | 
16 |     operations = [
17 |         migrations.CreateModel(
18 |             name='Customer',
19 |             fields=[
20 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
21 |                 ('name', models.CharField(max_length=200, null=True)),
22 |                 ('email', models.CharField(max_length=200, null=True)),
23 |                 ('user', models.OneToOneField(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
24 |             ],
25 |         ),
26 |         migrations.CreateModel(
27 |             name='Order',
28 |             fields=[
29 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
30 |                 ('data_ordered', models.DateTimeField(auto_now_add=True)),
31 |                 ('complete', models.BooleanField(default=False, null=True)),
32 |                 ('transaction_id', models.CharField(max_length=200, null=True)),
33 |                 ('customer', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='store.customer')),
34 |             ],
35 |         ),
36 |         migrations.CreateModel(
37 |             name='Product',
38 |             fields=[
39 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
40 |                 ('name', models.CharField(max_length=200, null=True)),
41 |                 ('price', models.FloatField()),
42 |                 ('digital', models.BooleanField(default=False, null=True)),
43 |             ],
44 |         ),
45 |         migrations.CreateModel(
46 |             name='ShippingAddress',
47 |             fields=[
48 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
49 |                 ('address', models.CharField(max_length=200, null=True)),
50 |                 ('city', models.CharField(max_length=200, null=True)),
51 |                 ('state', models.CharField(max_length=200, null=True)),
52 |                 ('zipcode', models.CharField(max_length=200, null=True)),
53 |                 ('date_added', models.DateTimeField(auto_now_add=True)),
54 |                 ('customer', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='store.customer')),
55 |                 ('order', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='store.order')),
56 |             ],
57 |         ),
58 |         migrations.CreateModel(
59 |             name='OrderItem',
60 |             fields=[
61 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
62 |                 ('quantity', models.IntegerField(blank=True, default=0, null=True)),
63 |                 ('data_added', models.DateTimeField(auto_now_add=True)),
64 |                 ('order', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='store.order')),
65 |                 ('product', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='store.product')),
66 |             ],
67 |         ),
68 |     ]
69 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | .ninja_deps
  2 | .ninja_log
  3 | __pycache__/
  4 | *.py[cod]
  5 | *$py.class
  6 | *.so
  7 | 
  8 | # Distribution / packaging
  9 | .Python
 10 | build/
 11 | develop-eggs/
 12 | dist/
 13 | downloads/
 14 | eggs/
 15 | .eggs/
 16 | lib/
 17 | lib64/
 18 | parts/
 19 | sdist/
 20 | var/
 21 | wheels/
 22 | share/python-wheels/
 23 | *.egg-info/
 24 | .installed.cfg
 25 | *.egg
 26 | MANIFEST
 27 | 
 28 | # PyInstaller
 29 | #  Usually these files are written by a python script from a template
 30 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 31 | *.manifest
 32 | *.spec
 33 | 
 34 | # Installer logs
 35 | pip-log.txt
 36 | pip-delete-this-directory.txt
 37 | 
 38 | # Unit test / coverage reports
 39 | htmlcov/
 40 | .tox/
 41 | .nox/
 42 | .coverage
 43 | .coverage.*
 44 | .cache
 45 | nosetests.xml
 46 | coverage.xml
 47 | *.cover
 48 | *.py,cover
 49 | .hypothesis/
 50 | .pytest_cache/
 51 | cover/
 52 | 
 53 | # Translations
 54 | *.mo
 55 | *.pot
 56 | 
 57 | # Django stuff:
 58 | *.log
 59 | local_settings.py
 60 | db.sqlite3
 61 | db.sqlite3-journal
 62 | 
 63 | # Flask stuff:
 64 | instance/
 65 | .webassets-cache
 66 | 
 67 | # Scrapy stuff:
 68 | .scrapy
 69 | 
 70 | # Sphinx documentation
 71 | docs/_build/
 72 | 
 73 | # PyBuilder
 74 | .pybuilder/
 75 | target/
 76 | 
 77 | # Jupyter Notebook
 78 | .ipynb_checkpoints
 79 | 
 80 | # IPython
 81 | profile_default/
 82 | ipython_config.py
 83 | 
 84 | # pyenv
 85 | #   For a library or package, you might want to ignore these files since the code is
 86 | #   intended to run in multiple environments; otherwise, check them in:
 87 | # .python-version
 88 | 
 89 | # pipenv
 90 | #   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
 91 | #   However, in case of collaboration, if having platform-specific dependencies or dependencies
 92 | #   having no cross-platform support, pipenv may install dependencies that don't work, or not
 93 | #   install all needed dependencies.
 94 | #Pipfile.lock
 95 | 
 96 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow
 97 | __pypackages__/
 98 | 
 99 | # Celery stuff
100 | celerybeat-schedule
101 | celerybeat.pid
102 | 
103 | # SageMath parsed files
104 | *.sage.py
105 | 
106 | # Environments
107 | .env
108 | .venv
109 | env/
110 | venv/
111 | ENV/
112 | env.bak/
113 | venv.bak/
114 | 
115 | # Spyder project settings
116 | .spyderproject
117 | .spyproject
118 | 
119 | # Rope project settings
120 | .ropeproject
121 | 
122 | # mkdocs documentation
123 | /site
124 | 
125 | # mypy
126 | .mypy_cache/
127 | .dmypy.json
128 | dmypy.json
129 | 
130 | # Pyre type checker
131 | .pyre/
132 | 
133 | # pytype static type analyzer
134 | .pytype/
135 | 
136 | # Cython debug symbols
137 | cython_debug/
138 | 
139 | .idea/**/workspace.xml
140 | .idea/**/tasks.xml
141 | .idea/**/usage.statistics.xml
142 | .idea/**/dictionaries
143 | .idea/**/shelf
144 | .idea/**/contentModel.xml
145 | .idea/**/dataSources/
146 | .idea/**/dataSources.ids
147 | .idea/**/dataSources.local.xml
148 | .idea/**/sqlDataSources.xml
149 | .idea/**/dynamic.xml
150 | .idea/**/uiDesigner.xml
151 | .idea/**/dbnavigator.xml
152 | .idea/**/gradle.xml
153 | .idea/**/libraries
154 | cmake-build-*/
155 | .idea/**/mongoSettings.xml
156 | *.iws
157 | out/
158 | .idea_modules/
159 | atlassian-ide-plugin.xml
160 | .idea/replstate.xml
161 | com_crashlytics_export_strings.xml
162 | crashlytics.properties
163 | crashlytics-build.properties
164 | fabric.properties
165 | .idea/httpRequests
166 | .idea/caches/build_file_checksums.ser
167 | [Bb]in
168 | [Ii]nclude
169 | [Ll]ib
170 | [Ll]ib64
171 | [Ll]ocal
172 | [Ss]cripts
173 | pyvenv.cfg
174 | pip-selfcheck.json
175 | .idea
176 | Footer
177 | 


--------------------------------------------------------------------------------
/store/views.py:
--------------------------------------------------------------------------------
  1 | from datetime import datetime
  2 | from django.views import View
  3 | from django.views.generic import TemplateView, UpdateView, CreateView
  4 | from django.http import JsonResponse
  5 | from .models import *
  6 | from .utils import cartData, guestOrder
  7 | import json
  8 | 
  9 | 
 10 | class Store(TemplateView):
 11 | 
 12 |     def get_context_data(self, **kwargs):
 13 |         context = super().get_context_data(**kwargs)
 14 |         data = cartData(self.request)
 15 |         context['cartItems'] = data['cartItems']
 16 |         context['products'] = Product.objects.all()
 17 |         return context
 18 | 
 19 |     template_name = 'store/store.html'
 20 | 
 21 | class Register(TemplateView):
 22 |     template_name = 'store/register.html'
 23 | 
 24 | 
 25 | class ProductPage(TemplateView):
 26 | 
 27 |     def get_context_data(self, **kwargs):
 28 |         context = super().get_context_data(**kwargs)
 29 |         context['product'] = Product.objects.get(id=context['pk'])
 30 |         data = cartData(self.request)
 31 |         context['cartItems'] = data['cartItems']
 32 |         return context
 33 | 
 34 |     template_name = 'store/product.html'
 35 | 
 36 | 
 37 | class Cart(TemplateView):
 38 | 
 39 |     def get_context_data(self, **kwargs):
 40 |         context = super().get_context_data(**kwargs)
 41 |         data = cartData(self.request)
 42 |         context['items'] = data['items']
 43 |         context['order'] = data['order']
 44 |         context['cartItems'] = data['cartItems']
 45 |         context['shipping'] = False
 46 |         return context
 47 | 
 48 |     template_name = 'store/cart.html'
 49 | 
 50 | 
 51 | class Checkout(TemplateView):
 52 |     def get_context_data(self, **kwargs):
 53 |         context = super().get_context_data(**kwargs)
 54 |         data = cartData(self.request)
 55 |         context['items'] = data['items']
 56 |         context['order'] = data['order']
 57 |         context['cartItems'] = data['cartItems']
 58 |         context['shipping'] = False
 59 |         return context
 60 | 
 61 |     template_name = 'store/checkout.html'
 62 | 
 63 | 
 64 | class updateItem(UpdateView):
 65 |     def form_valid(self, request):
 66 |         data = json.loads(request.body)
 67 |         productId = data['productId']
 68 |         action = data['action']
 69 | 
 70 |         print('action: ', action)
 71 |         print('poductId: ', productId)
 72 | 
 73 |         customer = request.user.customer
 74 |         product = Product.objects.get(id=productId)
 75 |         order, created = Order.objects.get_or_create(customer=customer, complete=False)
 76 | 
 77 |         orderItem, created = OrderItem.objects.get_or_create(order=order, product=product)
 78 | 
 79 |         if action == 'add':
 80 |             orderItem.quantity = (orderItem.quantity + 1)
 81 |         elif action == 'remove':
 82 |             orderItem.quantity = (orderItem.quantity - 1)
 83 | 
 84 |         orderItem.save()
 85 | 
 86 |         if orderItem.quantity <= 0:
 87 |             orderItem.delete()
 88 | 
 89 |         return JsonResponse('Item was added', safe=False)
 90 | 
 91 | 
 92 | class processOrder(View):
 93 |     def post(self, request):
 94 |         transaction_id = datetime.now().timestamp()
 95 |         data = json.loads(request.body)
 96 | 
 97 |         if request.user.is_authenticated:
 98 |             customer = request.user.customer
 99 |             order, created = Order.objects.get_or_create(customer=customer, complete=False)
100 |         else:
101 |             customer, order = guestOrder(request, data)
102 |         total = float(data['form']['total'])
103 |         order.transaction_id = transaction_id
104 | 
105 |         if total == order.get_cart_total:
106 |             order.complete = True
107 |         order.save()
108 | 
109 |         if order.shipping == True:
110 |             ShippingAddress.objects.create(
111 |                 customer=customer,
112 |                 order=order,
113 |                 address=data['shipping']['address'],
114 |                 city=data['shipping']['city'],
115 |                 state=data['shipping']['state'],
116 |                 zipcode=data['shipping']['zipcode'],
117 |             )
118 |         return JsonResponse('Payment complete!', safe=False)
119 | 


--------------------------------------------------------------------------------
/store/templates/store/main.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | {% load static %}
  3 | <html>
  4 | <head>
  5 |     <title>Ecom</title>
  6 | 
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
  8 | 
  9 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
 10 |           integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 11 | 
 12 |     <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
 13 | 
 14 |     <script type="text/javascript">
 15 |         var user = '{{ request.user }}'
 16 | 
 17 |         function getToken(name) {
 18 |             let cookieValue = null;
 19 |             if (document.cookie && document.cookie !== '') {
 20 |                 const cookies = document.cookie.split(';');
 21 |                 for (let i = 0; i < cookies.length; i++) {
 22 |                     const cookie = cookies[i].trim();
 23 |                     // Does this cookie string begin with the name we want?
 24 |                     if (cookie.substring(0, name.length + 1) === (name + '=')) {
 25 |                         cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
 26 |                         break;
 27 |                     }
 28 |                 }
 29 |             }
 30 |             return cookieValue;
 31 |         }
 32 | 
 33 |         var csrftoken = getToken('csrftoken');
 34 | 
 35 |         function getCookie(name) {
 36 |             var cookieArr = document.cookie.split(";");
 37 | 
 38 |             for (var i = 0; i < cookieArr.length; i++) {
 39 |                 var cookiePair = cookieArr[i].split("=");
 40 |                 if (name == cookiePair[0].trim()) {
 41 |                     return decodeURIComponent(cookiePair[1]);
 42 |                 }
 43 |             }
 44 |             return null;
 45 |         }
 46 | 
 47 |         var cart = JSON.parse(getCookie('cart'))
 48 |         if (cart == undefined) {
 49 |             cart = {}
 50 |             console.log('Cart was created!')
 51 |             document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"
 52 |         }
 53 |         console.log("Cart:", cart)
 54 |     </script>
 55 | 
 56 | </head>
 57 | <body>
 58 | 
 59 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 60 |     <a class="navbar-brand" href="{% url 'store' %}">Ecom</a>
 61 |     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
 62 |             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 63 |         <span class="navbar-toggler-icon"></span>
 64 |     </button>
 65 | 
 66 |     <div class="collapse navbar-collapse" id="navbarSupportedContent">
 67 |         <ul class="navbar-nav mr-auto">
 68 |             <li class="nav-item active">
 69 |                 <a class="nav-link" href="{% url 'store' %}">Store <span class="sr-only">(current)</span></a>
 70 |             </li>
 71 | 
 72 |         </ul>
 73 |         <div class="form-inline my-2 my-lg-0">
 74 | 
 75 |             <a href="#" class="btn btn-warning">Login</a>
 76 | 
 77 |             <a href="#" class="btn btn-warning" style="margin-left: 10px">Register</a>
 78 | 
 79 |             <a href="{% url 'cart' %}">
 80 |                 <img id="cart-icon" src="{% static 'images/cart.png' %}">
 81 |             </a>
 82 |             <p id="cart-total">{{ cartItems }}</p>
 83 | 
 84 |         </div>
 85 |     </div>
 86 | </nav>
 87 | 
 88 | <div class="container">
 89 |     <br>
 90 |     {% block content %}
 91 | 
 92 | 
 93 |     {% endblock content %}
 94 | </div>
 95 | 
 96 | 
 97 | <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
 98 |         integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
 99 |         crossorigin="anonymous"></script>
100 | 
101 | <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
102 |         integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
103 |         crossorigin="anonymous"></script>
104 | 
105 | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
106 |         integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
107 |         crossorigin="anonymous"></script>
108 | 
109 | <script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
110 | </body>
111 | </html>


--------------------------------------------------------------------------------
/store/templates/store/checkout.html:
--------------------------------------------------------------------------------
  1 | {% extends 'store/main.html' %}
  2 | {% load static %}
  3 | {% block content %}
  4 |     <div class="row">
  5 |         <div class="col-lg-6">
  6 |             <div class="box-element" id="form-wrapper">
  7 |                 <form id="form">
  8 |                     {% csrf_token %}
  9 |                     <div id="user-info">
 10 |                         <div class="form-field">
 11 |                             <input required class="form-control" type="text" name="name" placeholder="Name..">
 12 |                         </div>
 13 |                         <div class="form-field">
 14 |                             <input required class="form-control" type="email" name="email" placeholder="Email..">
 15 |                         </div>
 16 |                     </div>
 17 | 
 18 |                     <div id="shipping-info">
 19 |                         <hr>
 20 |                         <p>Shipping Information:</p>
 21 |                         <hr>
 22 |                         <div class="form-field">
 23 |                             <input class="form-control" type="text" name="address" placeholder="Address..">
 24 |                         </div>
 25 |                         <div class="form-field">
 26 |                             <input class="form-control" type="text" name="city" placeholder="City..">
 27 |                         </div>
 28 |                         <div class="form-field">
 29 |                             <input class="form-control" type="text" name="state" placeholder="State..">
 30 |                         </div>
 31 |                         <div class="form-field">
 32 |                             <input class="form-control" type="text" name="zipcode" placeholder="Zip code..">
 33 |                         </div>
 34 |                     </div>
 35 |                     <hr>
 36 |                     <input id="form-button" class="btn btn-success btn-block" type="submit" value="Continue">
 37 |                 </form>
 38 |             </div>
 39 |             <br>
 40 | 
 41 |             <div class="box-element hidden" id="payment-info">
 42 |                 <small>Paypal Options</small>
 43 |                 <button id="make-payment">Make Payment</button>
 44 |             </div>
 45 |         </div>
 46 | 
 47 |         <div class="col-lg-6">
 48 |             <div class="box-element">
 49 |                 <a class="btn btn-outline-dark" href="{% url 'cart' %}">&#x2190; Back to Cart</a>
 50 |                 <hr>
 51 |                 <h3>Order Summary</h3>
 52 |                 <hr>
 53 |                 {% for item in items %}
 54 |                     <div class="cart-row">
 55 |                         <div style="flex:2"><img class="row-image" src="{{ item.product.imageURL }}"></div>
 56 |                         <div style="flex:2"><p>{{ item.product.name }}</p></div>
 57 |                         <div style="flex:1"><p>${{ item.product.price }}</p></div>
 58 |                         <div style="flex:1"><p>x{{ item.quantity }}</p></div>
 59 |                     </div>
 60 |                 {% endfor %}
 61 | 
 62 |                 <h5>Items: {{ order.get_cart_items }}</h5>
 63 |                 <h5>Total: ${{ order.get_cart_total|floatformat:2 }}</h5>
 64 |             </div>
 65 |         </div>
 66 |     </div>
 67 |     <script type="text/javascript">
 68 |         var shipping = '{{ order.shipping }}'
 69 |         var total = '{{ order.get_cart_total }}'
 70 |         if (shipping === 'False') {
 71 |             document.getElementById('shipping-info').innerHTML = ''
 72 |         }
 73 | 
 74 |         if (user != 'AnonymousUser') {
 75 |             document.getElementById('user-info').innerHTML = ''
 76 |         }
 77 | 
 78 |         if (shipping == 'False' && user != 'AnonymousUser') {
 79 |             document.getElementById('form-wrapper').classList.add('hidden');
 80 |             document.getElementById('payment-info').classList.remove('hidden');
 81 |         }
 82 | 
 83 |         var form = document.getElementById('form')
 84 | 
 85 |         form.addEventListener('submit', function (e) {
 86 |             e.preventDefault()
 87 |             console.log('Form submitted...')
 88 |             document.getElementById('form-button').classList.add('hidden')
 89 |             document.getElementById('payment-info').classList.remove('hidden')
 90 |         })
 91 | 
 92 |         document.getElementById('make-payment').addEventListener('click', function (e) {
 93 |             submitFormData()
 94 |         })
 95 | 
 96 |         function submitFormData() {
 97 |             console.log('Payment button clicked')
 98 |             var userFormData = {
 99 |                 'name': null,
100 |                 'email': null,
101 |                 'total': total,
102 |             }
103 | 
104 |             var shippingInfo = {
105 |                 'address': null,
106 |                 'city': null,
107 |                 'state': null,
108 |                 'zipcode': null,
109 |             }
110 | 
111 |             if (shipping != 'False') {
112 |                 shippingInfo.address = form.address.value
113 |                 shippingInfo.city = form.city.value
114 |                 shippingInfo.state = form.state.value
115 |                 shippingInfo.zipcode = form.zipcode.value
116 |             }
117 |             if (user == 'AnonymousUser') {
118 |                 userFormData.name = form.name.value
119 |                 userFormData.email = form.email.value
120 |             }
121 | 
122 |             var url = '/process_order/'
123 |             fetch(url, {
124 |                 method: 'POST',
125 |                 headers: {
126 |                     'Content-Type': 'application/json',
127 |                     'X-CSRFToken': csrftoken,
128 |                 },
129 |                 body: JSON.stringify({'form': userFormData, 'shipping': shippingInfo}),
130 |             })
131 |                 .then((response) => response.json())
132 |                 .then((data) => {
133 |                     console.log('Success:', data);
134 |                     alert('Transaction completed');
135 | 
136 |                     cart = {}
137 |                     document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"
138 | 
139 |                     window.location.href = '{% url 'store' %}'
140 |                 })
141 |         }
142 |     </script>
143 | {% endblock %}


--------------------------------------------------------------------------------
/store/templates/store/register.html:
--------------------------------------------------------------------------------
  1 | <html lang="en-US" class="supernova isEmbeded"><head>
  2 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3 | <link rel="alternate" type="application/json+oembed" href="https://www.jotform.com/oembed/?format=json&amp;url=https%3A%2F%2Fform.jotform.com%2F231961747108460" title="oEmbed Form">
  4 | <link rel="alternate" type="text/xml+oembed" href="https://www.jotform.com/oembed/?format=xml&amp;url=https%3A%2F%2Fform.jotform.com%2F231961747108460" title="oEmbed Form">
  5 | <meta property="og:title" content="Class Registration">
  6 | <meta property="og:url" content="https://form.jotform.com/231961747108460">
  7 | <meta property="og:description" content="Please click the link to complete this form.">
  8 | <meta name="slack-app-id" content="AHNMASS8M">
  9 | <meta property="og:image" content="https://cdn.jotfor.ms/assets/img/landing/opengraph.png">
 10 | <link rel="shortcut icon" href="https://cdn.jotfor.ms/assets/img/favicons/favicon-2021-dark%402x.png">
 11 | <script>
 12 |           var favicon = document.querySelector('link[rel="shortcut icon"]');
 13 |           window.isDarkMode = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
 14 |           if(favicon && window.isDarkMode) {
 15 |               favicon.href = favicon.href.replaceAll('favicon-2021-light%402x.png', 'favicon-2021-dark%402x.png');
 16 |           }
 17 |       </script><link rel="canonical" href="https://form.jotform.com/231961747108460">
 18 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1">
 19 | <meta name="HandheldFriendly" content="true">
 20 | <title>Class Registration</title>
 21 | <style type="text/css">@media print{.form-section{display:inline!important}.form-pagebreak{display:none!important}.form-section-closed{height:auto!important}.page-section{position:initial!important}}</style>
 22 | <link type="text/css" rel="stylesheet" href="https://cdn01.jotfor.ms/themes/CSS/5e6b428acc8c4e222d1beb91.css?v=3.3.43396&amp;themeRevisionID=5f30e2a790832f3e96009402">
 23 | <link type="text/css" rel="stylesheet" href="https://cdn02.jotfor.ms/css/styles/payment/payment_styles.css?3.3.43396">
 24 | <link type="text/css" rel="stylesheet" href="https://cdn03.jotfor.ms/css/styles/payment/payment_feature.css?3.3.43396">
 25 | <link type="text/css" rel="stylesheet" href="https://cdn01.jotfor.ms/stylebuilder/donationBox.css?v=3.3.43396">
 26 | <style type="text/css" id="form-designer-style">
 27 |     /* Injected CSS Code */
 28 | /*PREFERENCES STYLE*/
 29 |     .form-all {
 30 |       font-family: Inter, sans-serif;
 31 |     }
 32 | 
 33 |     .form-label.form-label-auto {
 34 | 
 35 |     display: block;
 36 |     float: none;
 37 |     text-align: left;
 38 |     width: 100%;
 39 | 
 40 |     }
 41 | 
 42 |     .form-line {
 43 |       margin-top: 12px 36px 12px 36px px;
 44 |       margin-bottom: 12px 36px 12px 36px px;
 45 |       padding-top: 0;
 46 |       padding-bottom: 0;
 47 |     }
 48 | 
 49 |     .form-all {
 50 |       max-width: 752px;
 51 |       width: 100%;
 52 |     }
 53 | 
 54 |     .form-label.form-label-left,
 55 |     .form-label.form-label-right,
 56 |     .form-label.form-label-left.form-label-auto,
 57 |     .form-label.form-label-right.form-label-auto {
 58 |       width: 230px;
 59 |     }
 60 | 
 61 |     .form-all {
 62 |       font-size: 16px
 63 |     }
 64 | 
 65 |     .supernova .form-all, .form-all {
 66 |       background-color: #fff;
 67 |     }
 68 | 
 69 |     .form-all {
 70 |       color: #2C3345;
 71 |     }
 72 |     .form-header-group .form-header {
 73 |       color: #2C3345;
 74 |     }
 75 |     .form-header-group .form-subHeader {
 76 |       color: #2C3345;
 77 |     }
 78 |     .form-label-top,
 79 |     .form-label-left,
 80 |     .form-label-right,
 81 |     .form-html,
 82 |     .form-checkbox-item label,
 83 |     .form-radio-item label,
 84 |     span.FITB .qb-checkbox-label,
 85 |     span.FITB .qb-radiobox-label,
 86 |     span.FITB .form-radio label,
 87 |     span.FITB .form-checkbox label,
 88 |     [data-blotid][data-type=checkbox] [data-labelid],
 89 |     [data-blotid][data-type=radiobox] [data-labelid],
 90 |     span.FITB-inptCont[data-type=checkbox] label,
 91 |     span.FITB-inptCont[data-type=radiobox] label {
 92 |       color: #2C3345;
 93 |     }
 94 |     .form-sub-label {
 95 |       color: #464d5f;
 96 |     }
 97 | 
 98 |   .supernova {
 99 |     background-color: #3b2f80;
100 |   }
101 |   .supernova body {
102 |     background: transparent;
103 |   }
104 | 
105 |     .form-textbox,
106 |     .form-textarea,
107 |     .form-dropdown,
108 |     .form-radio-other-input,
109 |     .form-checkbox-other-input,
110 |     .form-captcha input,
111 |     .form-spinner input {
112 |       background-color: #fff;
113 |     }
114 | 
115 |     .supernova {
116 |       background-image: none;
117 |     }
118 |     #stage {
119 |       background-image: none;
120 |     };
121 | 
122 |     .form-all {
123 |       background-image: none;
124 |     }
125 |   .form-all:before { content: none; } .form-all { margin-top: 72px; }/*PREFERENCES STYLE*//*__INSPECT_SEPERATOR__*/
126 | .form-label.form-label-auto {
127 | 
128 |       display: block;
129 |       float: none;
130 |       text-align: left;
131 |       width: 100%;
132 | 
133 |   }
134 | 
135 |   .submit-button {
136 |     background-color: #3b2f80;
137 |     border: 0;
138 |   }
139 |     /* Injected CSS Code */
140 | </style>
141 | 
142 | <script src="https://cdn02.jotfor.ms/static/prototype.forms.js?3.3.43396" type="text/javascript"></script>
143 | <script src="https://cdn03.jotfor.ms/static/jotform.forms.js?3.3.43396" type="text/javascript"></script>
144 | <script defer="" src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.js"></script>
145 | <script src="https://cdn01.jotfor.ms/js/payments/validategateways.js?v=3.3.43396" type="text/javascript"></script>
146 | <script type="text/javascript">	JotForm.newDefaultTheme = true;
147 | 	JotForm.extendsNewTheme = false;
148 | 	JotForm.singleProduct = false;
149 | 	JotForm.newPaymentUIForNewCreatedForms = false;
150 | 	JotForm.newPaymentUI = true;
151 | 	JotForm.submitError="jumpToFirstError";
152 | 
153 | 	JotForm.init(function(){
154 | 	/*INIT-START*/
155 |       setTimeout(function() {
156 |           $('input_6').hint('ex: myname@example.com');
157 |        }, 20);
158 | if (window.JotForm && JotForm.accessible) $('input_5').setAttribute('tabindex',0);
159 | 	/*INIT-END*/
160 | 	});
161 | 
162 |    JotForm.prepareCalculationsOnTheFly([null,{"name":"clickTo","qid":"1","text":"Class Registration","type":"control_head"},null,{"name":"gender","qid":"3","text":"Gender","type":"control_dropdown"},{"name":"studentName","qid":"4","text":"Student Name","type":"control_fullname"},{"name":"studentId","qid":"5","text":"Student ID","type":"control_textbox"},{"name":"studentEmail","qid":"6","subLabel":"example@example.com","text":"Student E-mail","type":"control_email"},{"name":"listOf7","qid":"7","text":"List of Classes","type":"control_dropdown"},{"name":"submit","qid":"8","text":"Submit","type":"control_button"}]);
163 |    setTimeout(function() {
164 | JotForm.paymentExtrasOnTheFly([null,{"name":"clickTo","qid":"1","text":"Class Registration","type":"control_head"},null,{"name":"gender","qid":"3","text":"Gender","type":"control_dropdown"},{"name":"studentName","qid":"4","text":"Student Name","type":"control_fullname"},{"name":"studentId","qid":"5","text":"Student ID","type":"control_textbox"},{"name":"studentEmail","qid":"6","subLabel":"example@example.com","text":"Student E-mail","type":"control_email"},{"name":"listOf7","qid":"7","text":"List of Classes","type":"control_dropdown"},{"name":"submit","qid":"8","text":"Submit","type":"control_button"}]);}, 20);
165 | </script>
166 | </head>
167 | <body style="overflow-x: hidden;">
168 | <form class="jotform-form" action="https://submit.jotform.com/submit/231961747108460" method="post" name="form_231961747108460" id="231961747108460" accept-charset="utf-8" autocomplete="on" novalidate="true"><input type="hidden" name="formID" value="231961747108460"><input type="hidden" id="JWTContainer" value=""><input type="hidden" id="cardinalOrderNumber" value="">
169 |   <div role="main" class="form-all">
170 |     <ul class="form-section page-section">
171 |       <li id="cid_1" class="form-input-wide" data-type="control_head">
172 |         <div style="display:table;width:100%">
173 |           <div class="form-header-group hasImage header-large" data-imagealign="Left">
174 |             <div class="header-logo"><img src="https://www.jotform.com/uploads/ugurg/form_files/Asset%2069%402x.63aaebbc664f28.45674937.png" alt="Class Registration" width="220" class="header-logo-left"></div>
175 |             <div class="header-text httar htvam">
176 |               <h1 id="header_1" class="form-header" data-component="header">Class Registration</h1>
177 |               <div id="subHeader_1" class="form-subHeader">Fill out the form carefully for registration</div>
178 |             </div>
179 |           </div>
180 |         </div>
181 |       </li>
182 |       <li class="form-line" data-type="control_fullname" id="id_4"><label class="form-label form-label-top form-label-extended form-label-auto" id="label_4" for="first_4"> Student Name </label>
183 |         <div id="cid_4" class="form-input-wide" data-layout="full">
184 |           <div data-wrapper-react="true" class="extended"><span class="form-sub-label-container" style="vertical-align:top" data-input-type="first"><input type="text" id="first_4" name="q4_studentName[first]" class="form-textbox" data-defaultvalue="" autocomplete="section-input_4 given-name" size="10" value="" data-component="first" aria-labelledby="label_4 sublabel_4_first"><label class="form-sub-label" for="first_4" id="sublabel_4_first" style="min-height:13px" aria-hidden="false">First Name</label></span><span class="form-sub-label-container" style="vertical-align:top" data-input-type="middle"><input type="text" id="middle_4" name="q4_studentName[middle]" class="form-textbox" data-defaultvalue="" autocomplete="section-input_4 additional-name" size="10" value="" data-component="middle" aria-labelledby="label_4 sublabel_4_middle"><label class="form-sub-label" for="middle_4" id="sublabel_4_middle" style="min-height:13px" aria-hidden="false">Middle Name</label></span><span class="form-sub-label-container" style="vertical-align:top" data-input-type="last"><input type="text" id="last_4" name="q4_studentName[last]" class="form-textbox" data-defaultvalue="" autocomplete="section-input_4 family-name" size="15" value="" data-component="last" aria-labelledby="label_4 sublabel_4_last"><label class="form-sub-label" for="last_4" id="sublabel_4_last" style="min-height:13px" aria-hidden="false">Last Name</label></span></div>
185 |         </div>
186 |       </li>
187 |       <li class="form-line form-line-column form-col-1" data-type="control_dropdown" id="id_3"><label class="form-label form-label-top form-label-auto" id="label_3" for="input_3"> Gender </label>
188 |         <div id="cid_3" class="form-input-wide" data-layout="half"> <select class="form-dropdown" id="input_3" name="q3_gender" style="width:310px" data-component="dropdown" aria-label="Gender">
189 |             <option value="">Please Select</option>
190 |             <option value="Male">Male</option>
191 |             <option value="Female">Female</option>
192 |             <option value="N/A">N/A</option>
193 |           </select> </div>
194 |       </li>
195 |       <li class="form-line form-line-column form-col-2" data-type="control_email" id="id_6"><label class="form-label form-label-top form-label-auto" id="label_6" for="input_6"> Student E-mail </label>
196 |         <div id="cid_6" class="form-input-wide" data-layout="half"> <span class="form-sub-label-container" style="vertical-align:top"><input type="email" id="input_6" name="q6_studentEmail" class="form-textbox validate[Email]" data-defaultvalue="" style="width:310px" size="310" value="" placeholder="ex: myname@example.com" data-component="email" aria-labelledby="label_6 sublabel_input_6"><label class="form-sub-label" for="input_6" id="sublabel_input_6" style="min-height:13px" aria-hidden="false">example@example.com</label></span> </div>
197 |       </li>
198 |       <li class="form-line form-line-column form-col-3" data-type="control_textbox" id="id_5"><label class="form-label form-label-top form-label-auto" id="label_5" for="input_5"> Student ID </label>
199 |         <div id="cid_5" class="form-input-wide" data-layout="half"> <input type="text" id="input_5" name="q5_studentId" data-type="input-textbox" class="form-textbox" data-defaultvalue="" style="width:310px" size="310" value="" placeholder=" " data-component="textbox" aria-labelledby="label_5"> </div>
200 |       </li>
201 |       <li class="form-line form-line-column form-col-4" data-type="control_dropdown" id="id_7"><label class="form-label form-label-top form-label-auto" id="label_7" for="input_7"> List of Classes </label>
202 |         <div id="cid_7" class="form-input-wide" data-layout="half"> <select class="form-dropdown" id="input_7" name="q7_listOf7" style="width:310px" data-component="dropdown" aria-label="List of Classes">
203 |             <option value="">Please Select</option>
204 |             <option value="English 101">English 101</option>
205 |             <option value="English 202">English 202</option>
206 |             <option value="English 303">English 303</option>
207 |             <option value="English 404">English 404</option>
208 |             <option value="Math 101">Math 101</option>
209 |             <option value="Math 202">Math 202</option>
210 |             <option value="Math 303">Math 303</option>
211 |             <option value="Math 404">Math 404</option>
212 |             <option value="Science 101">Science 101</option>
213 |             <option value="Science 202">Science 202</option>
214 |             <option value="Science 303">Science 303</option>
215 |             <option value="Science 404">Science 404</option>
216 |           </select> </div>
217 |       </li>
218 |       <li class="form-line" data-type="control_button" id="id_8">
219 |         <div id="cid_8" class="form-input-wide" data-layout="full">
220 |           <div data-align="auto" class="form-buttons-wrapper form-buttons-auto   jsTest-button-wrapperField"><button id="input_8" type="submit" class="form-submit-button submit-button jf-form-buttons jsTest-submitField" data-component="button" data-content="">Submit</button></div>
221 |         </div>
222 |       </li>
223 |       <li style="display:none">Should be Empty: <input type="text" name="website" value=""></li>
224 |     </ul>
225 |   </div>
226 |   <script>
227 |     JotForm.showJotFormPowered = "new_footer";
228 |   </script>
229 |   <script>
230 |     JotForm.poweredByText = "Powered by Jotform";
231 |   </script><input type="hidden" class="simple_spc" id="simple_spc" name="simple_spc" value="231961747108460-231961747108460">
232 |   <script type="text/javascript">
233 |     var all_spc = document.querySelectorAll("form[id='231961747108460'] .si" + "mple" + "_spc");
234 |     for (var i = 0; i < all_spc.length; i++)
235 |     {
236 |       all_spc[i].value = "231961747108460-231961747108460";
237 |     }
238 |   </script>
239 |   <div class="formFooter-heightMask"></div>
240 |   <div class="formFooter f6 branding21" style="display: flex!important; opacity: 1!important; visibility: visible!important;">
241 |     <div class="formFooter-wrapper formFooter-leftSide">
242 |       <a href="https://www.jotform.com/?utm_source=formfooter&amp;utm_medium=banner&amp;utm_term=231961747108460&amp;utm_content=jotform_logo&amp;utm_campaign=powered_by_jotform_le" target="_blank" class="formFooter-logoLink">
243 |         <img class="formFooter-logo" src="https://cdn.jotfor.ms/assets/img/logo2021/jotform-logo-white.svg" alt="Jotform Logo" style="height: 44px;">
244 |       </a>
245 |     </div>
246 |     <div class="formFooter-wrapper formFooter-rightSide">
247 |       <span class="formFooter-text">Now create your own Jotform - It’s free!</span>
248 |       <a class="formFooter-button" href="https://www.jotform.com/?utm_source=formfooter&amp;utm_medium=banner&amp;utm_term=231961747108460&amp;utm_content=jotform_button&amp;utm_campaign=powered_by_jotform_le" target="_blank">Create your own Jotform</a>
249 |     </div>
250 |   </div>
251 | <input type="hidden" name="embedUrl" value="https://www.jotform.com/"><input type="hidden" name="preview" value="true"></form>
252 | <script src="https://cdn.jotfor.ms//js/vendor/smoothscroll.min.js?v=3.3.43396"></script>
253 | <script src="https://cdn.jotfor.ms//js/errorNavigation.js?v=3.3.43396"></script>
254 | <script type="text/javascript">JotForm.isNewSACL=true;</script></body></html>


--------------------------------------------------------------------------------
/store/templates/store/product.html:
--------------------------------------------------------------------------------
  1 | {% extends 'store/main.html' %}
  2 | {% load static %}
  3 | {% block content %}
  4 | 
  5 |         <div class="col-lg-4">
  6 |             <img class="thumbnail" src="{{ product.imageURL }}" alt="product image">
  7 |             <div class="box-element product">
  8 |                 <h6><strong>{{ product.name }}</strong></h6>
  9 |                 <hr>
 10 |                 <button data-product="{{ product.id }}" data-action="add"
 11 |                         class="btn btn-outline-secondary add-btn update-cart">Add to Cart
 12 |                 </button>
 13 |                 <a class="btn btn-outline-success" href="{% url 'store' %}">Back</a>
 14 |                 <h4 style="display: inline-block;float: right;">${{ product.price|floatformat:2 }}</h4>
 15 |             </div>
 16 |         </div>
 17 | {#    <div class="product-info-card">#}
 18 | {#        <div class="product-photo-slider photos-container" data-test-id="block__product-photos">#}
 19 | {#            <div data-test-id="item__main-photo" class="main-photo with-nav">#}
 20 | {#                <div class="carousel-container">#}
 21 | {#                    <div class="slider">#}
 22 | {#                        <div class="slides-wrapper" style="overflow: hidden; direction: ltr;">#}
 23 | {#                            <div class="slider-frame"#}
 24 | {#                                 style="width: 2821px; transition: all 300ms ease-out 0s; transform: translate3d(-403px, 0px, 0px);">#}
 25 | {#                                <div class="slide-wrapper" style="float: left;">#}
 26 | {#                                    <div data-test-id="list__carousel-photo" class="slide-item"><img#}
 27 | {#                                            src="{{ product.imageURL }}">#}
 28 | {#                                    </div>#}
 29 | {#                                </div>#}
 30 | {#                            </div>#}
 31 | {#                        </div>#}
 32 | {#                    </div> <!----> <!----></div> <!----> <!----></div>#}
 33 | {#        </div>#}
 34 | {#        <div data-test-id="block__info-container" class="info-container">#}
 35 | {#            <div id="product-info" class="">#}
 36 | {#                <div class="info-block base">#}
 37 | {#                    <div class="stats">#}
 38 | {#                        <div class="rating"><img#}
 39 | {#                                src="data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M9 12.9525L13.635 15.75L12.405 10.4775L16.5 6.93L11.1075 6.4725L9 1.5L6.8925 6.4725L1.5 6.93L5.595 10.4775L4.365 15.75L9 12.9525Z' fill='%23F5A623'/%3e %3c/svg%3e"#}
 40 | {#                                class="noselect" style="width: 12px;"> <span data-test-id="text__product-rating"#}
 41 | {#                                                                             class="rating-value">4.9</span> <span#}
 42 | {#                                data-test-id="text__quantity-of-reviews" class="reviews-info">#}
 43 | {#            (#}
 44 | {#            <span class="dotted">#}
 45 | {#              519 baho#}
 46 | {#            </span>#}
 47 | {#            )#}
 48 | {#          </span></div>#}
 49 | {#                        <div data-test-id="text__product-orders" class="orders"><!----> <span>#}
 50 | {#            25000 ta#}
 51 | {#          </span> <!---->#}
 52 | {#                            buyurtma#}
 53 | {#                        </div>#}
 54 | {#                        <div data-test-id="button__add-to-favorites" class="like-stuff">#}
 55 | {#                            <button data-v-57aaf377="" id="button-heart" class="ui-component ui-button small">#}
 56 | {#                                <div data-v-57aaf377="" class="slot before">#}
 57 | {#                                    <svg data-v-57aaf377="" width="24" height="24" viewBox="0 0 20 20" fill="none"#}
 58 | {#                                         xmlns="http://www.w3.org/2000/svg" class="ui-icon ">#}
 59 | {#                                        <path d="M5.95 2C8.51792 2 10 4.15234 10 4.15234C10 4.15234 11.485 2 14.05 2C16.705 2 19 4.07 19 6.95C19 11.1805 12.5604 15.6197 10.3651 17.5603C10.1582 17.7432 9.84179 17.7432 9.63488 17.5603C7.44056 15.6209 1 11.1803 1 6.95C1 4.07 3.295 2 5.95 2Z"#}
 60 | {#                                              fill="white" fill-opacity="0.8"></path>#}
 61 | {#                                        <path d="M1 6.86486C1 4.20297 3.15017 2 5.86486 2C7.98685 2 9.35921 3.35876 10 4.18673C10.6408 3.35876 12.0132 2 14.1351 2C16.8506 2 19 4.20302 19 6.86486C19 8.02987 18.5328 9.18622 17.8534 10.265C17.1716 11.3476 16.252 12.3903 15.29 13.3377C13.9567 14.6508 12.4757 15.8387 11.4134 16.6907C10.9618 17.0529 10.5859 17.3544 10.3293 17.579C10.1407 17.7439 9.85926 17.7439 9.67075 17.579C9.41405 17.3544 9.03815 17.0529 8.58659 16.6907C7.52431 15.8387 6.04326 14.6508 4.70997 13.3377C3.74802 12.3903 2.82836 11.3476 2.14659 10.265C1.46724 9.18622 1 8.02987 1 6.86486ZM5.86486 3C3.70929 3 2 4.74838 2 6.86486C2 7.76743 2.36553 8.73607 2.99277 9.73208C3.61759 10.7242 4.47833 11.706 5.41165 12.6252C6.71033 13.9042 8.08423 15.005 9.13396 15.8461C9.45728 16.1052 9.74985 16.3396 10 16.547C10.2501 16.3396 10.5427 16.1052 10.866 15.8461C11.9158 15.005 13.2897 13.9042 14.5883 12.6252C15.5217 11.706 16.3824 10.7242 17.0072 9.73208C17.6345 8.73607 18 7.76743 18 6.86486C18 4.74833 16.2914 3 14.1351 3C12.0406 3 10.8181 4.70211 10.5033 5.21028C10.2727 5.5825 9.72727 5.58249 9.4967 5.21027C9.1819 4.7021 7.95944 3 5.86486 3Z"#}
 62 | {#                                              fill="#15151A"></path>#}
 63 | {#                                    </svg>#}
 64 | {#                                </div>#}
 65 | {#                                <div data-v-57aaf377="" class="slot default"><span data-v-57aaf377=""#}
 66 | {#                                                                                   class="btn-text hidden-mbs visible-sm">#}
 67 | {#              Istaklarga#}
 68 | {#            </span></div> <!----></button>#}
 69 | {#                        </div>#}
 70 | {#                    </div>#}
 71 | {#                    <h1 data-test-id="text__product-name" class="title">#}
 72 | {#                        Kungaboqar yog'i Sofia, tozalangan va deodorizatsiyalangan, 1 litr#}
 73 | {#                    </h1>#}
 74 | {#                    <div class="price">#}
 75 | {#                        <div data-test-id="text__product-price-mobile" class="new-price">#}
 76 | {##}
 77 | {#            <span class="currency">#}
 78 | {#  14&nbsp;000 so'm#}
 79 | {#</span>#}
 80 | {#                            / birlik#}
 81 | {#                        </div>#}
 82 | {#                        <span class="currency old-price" data-test-id="text__product-old-price">#}
 83 | {#  19&nbsp;000 so'm#}
 84 | {#</span> <!----></div>#}
 85 | {#                    <div class="badges mobile">#}
 86 | {#                        <div class="badge-container">#}
 87 | {#                            <div class="badge-list">#}
 88 | {#                                <div data-test-id="text__product-badge" class="badge"#}
 89 | {#                                     style="background: rgb(154, 114, 242);"><span class="text"#}
 90 | {#                                                                                   style="color: rgb(255, 255, 255);">Chilla Bozor</span>#}
 91 | {#                                </div> <!----></div>#}
 92 | {#                        </div>#}
 93 | {#                        <div class="badge-container">#}
 94 | {#                            <div class="badge-list"> <!----></div>#}
 95 | {#                        </div>#}
 96 | {#                    </div> <!---->#}
 97 | {#                    <div class="product-info-item middle-mbs">#}
 98 | {#                        <div class="product-info-item-unit col-mbs-12 col-mbl-3">Sotuvchi:</div>#}
 99 | {#                        <div class="product-info-item-value col-mbs-9 product-info-item-value--seller"><a#}
100 | {#                                href="/uz/7418" class="" ui-link="ui-link" data-test-id="link__product-seller">#}
101 | {#                            Sofia Oil#}
102 | {#                        </a></div>#}
103 | {#                    </div>#}
104 | {#                    <div class="product-info-item middle-mbs">#}
105 | {#                        <div class="product-info-item-unit col-mbs-12 col-mbl-3" style="display: flex;"><span>Yetkazib berish:</span>#}
106 | {#                            <div ui-help-tooltip="" data-test-id="button__delivery-info" class="right top"><img#}
107 | {#                                    src="data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM8.00003 3.5C8.00003 4.05229 7.55231 4.5 7.00003 4.5C6.44774 4.5 6.00003 4.05229 6.00003 3.5C6.00003 2.94772 6.44774 2.5 7.00003 2.5C7.55231 2.5 8.00003 2.94772 8.00003 3.5ZM6.10012 5.79844C5.76875 5.79844 5.50012 6.06707 5.50012 6.39844C5.50012 6.72981 5.76875 6.99844 6.10012 6.99844H6.40008V9.80235H5.60159C5.27022 9.80235 5.00159 10.071 5.00159 10.4023C5.00159 10.7337 5.27022 11.0023 5.60159 11.0023H8.40155C8.73292 11.0023 9.00155 10.7337 9.00155 10.4023C9.00155 10.071 8.73292 9.80235 8.40155 9.80235H7.60008V6.39844C7.60008 6.06707 7.33146 5.79844 7.00008 5.79844H6.10012Z' fill='%23CACBCE'/%3e %3c/svg%3e"#}
108 | {#                                    class="noselect" id="icon-help" style="width: 14px;">#}
109 | {#                                <div toltip-text="" data-test-id="text__delivery-tooltip" style="display: none;">#}
110 | {#                                    Mahsulot buyurtirilgan kunning ertasiga mahsulotni rasmiy topshirish punktlarimizga#}
111 | {#                                    yetkazamiz. Rasmiylashtirish bosqichida sizga eng qulay manzilni tanlang.#}
112 | {#                                </div>#}
113 | {#                            </div>#}
114 | {#                        </div>#}
115 | {#                        <div class="product-info-item-value col-mbs-9"><span class="slightly transparent regular">1 kun, bepul</span>#}
116 | {#                        </div>#}
117 | {#                    </div>#}
118 | {#                </div>#}
119 | {#                <div data-test-id="block__characteristics" class="info-block characteristics">#}
120 | {#                    <div class="section-line"></div>#}
121 | {#                    <div class="sku-characteristics"></div>#}
122 | {#                    <div class="block-part raffle"><!----></div>#}
123 | {#                    <div class="block-part count">#}
124 | {#                        <div class="block-part-title">Miqdor:</div>#}
125 | {#                        <div class="block-part-content">#}
126 | {#                            <div input-form-group="" class="center count-input"><!----> <!---->#}
127 | {#                                <div express="" data-test-id="text__input-validation-error" class=""><!---->#}
128 | {#                                    <button ui-button="" class="noselect" data-test-id="button__decrease-quantity"#}
129 | {#                                            disabled="disabled" style="opacity: 0.3;">#}
130 | {#                                        <div class="ripple "#}
131 | {#                                             style="top: 0px; left: 0px; width: 0px; height: 0px;"></div>#}
132 | {#                                        <i></i></button>#}
133 | {#                                    <input ui-input="" id="input-undefined7481" type="number" min="1" minlength="1"#}
134 | {#                                           data-test-id="input__quantity" class="" max="2">#}
135 | {#                                    <div id="tooltip" class="">#}
136 | {#                                        <button ui-button="" class="noselect increment"#}
137 | {#                                                data-test-id="button__increase-quantity">#}
138 | {#                                            <div class="ripple "#}
139 | {#                                                 style="top: 0px; left: 0px; width: 0px; height: 0px;"></div>#}
140 | {#                                            <i></i></button> <!----></div>#}
141 | {#                                </div>#}
142 | {#                            </div>#}
143 | {#                            <div class="available-amount"><img#}
144 | {#                                    src="data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5049 1.86715V0.99585L10.7526 1.43546L11.0049 1.86715C10.7526 1.43546 10.7524 1.43557 10.7522 1.43569L10.7517 1.43599L10.7504 1.43677L10.7465 1.43905L10.734 1.44655C10.7235 1.45285 10.7089 1.46176 10.6904 1.47327C10.6533 1.49628 10.6007 1.52971 10.5348 1.57349C10.4029 1.66103 10.2173 1.79021 9.99599 1.96061C9.55393 2.30092 8.9655 2.80844 8.37646 3.48037C7.32037 4.68505 6.24614 6.43815 6.03663 8.7112C5.97334 8.62082 5.91227 8.5088 5.85405 8.37345C5.76832 8.17417 5.71024 7.9695 5.67356 7.81119C5.65545 7.73302 5.64309 7.6685 5.63542 7.62465C5.63159 7.60278 5.62895 7.5862 5.62737 7.57581L5.62578 7.56504L5.62567 7.56431L5.62564 7.56404L5.62561 7.56382L5.62556 7.56351L5.62555 7.56337L5.48535 6.50496L4.76198 7.2915L5.13 7.62996C4.76198 7.2915 4.76185 7.29164 4.76171 7.29178L4.76141 7.29211L4.7607 7.29289L4.75884 7.29494L4.75336 7.301L4.73569 7.32094C4.72102 7.33767 4.70071 7.36125 4.67557 7.39148C4.62531 7.4519 4.5556 7.539 4.47299 7.65095C4.30796 7.87459 4.09025 8.19907 3.873 8.60986C3.43952 9.42955 3 10.6083 3 12.0221C3 15.8743 6.13919 19.0009 10 19.0009C13.8608 19.0009 17 15.8743 17 12.0221C17 9.18756 15.4792 7.67893 14.0971 6.36405L14.012 6.2832C12.6533 4.99143 11.5049 3.89964 11.5049 1.86715ZM9.12842 4.13958C9.65177 3.54259 10.1757 3.08691 10.5746 2.77724C10.8776 4.68829 12.1154 5.86244 13.2585 6.94682L13.4078 7.08856C14.7732 8.38755 16 9.63833 16 12.0221C16 15.3189 13.3116 18.0009 10 18.0009C6.68839 18.0009 4 15.3189 4 12.0221C4 10.8161 4.37548 9.79878 4.757 9.07735C4.81633 8.96516 4.87561 8.8605 4.93337 8.76381L4.93544 8.76861C5.14841 9.26369 5.61069 10.0121 6.5 10.0121H7V9.51209C7 7.16515 8.05294 5.36638 9.12842 4.13958ZM8.45317 11.3496C7.86179 11.9734 7.25 12.6187 7.25 13.7812C7.25 15.2812 8.48276 16.5 10 16.5C11.5172 16.5 12.75 15.2812 12.75 13.7812C12.75 12.6562 12.0625 11.9687 12.0625 11.9687C12.0625 11.9687 11.8491 12.6484 11.375 12.6484C11.375 10.3984 9.54167 9.24996 9.54167 9.24996C9.54167 10.2015 9.00635 10.7661 8.45317 11.3496Z' fill='%237000FF'/%3e %3c/svg%3e"#}
145 | {#                                    class="noselect quantity-color quantity-color--fire-icon"> <span#}
146 | {#                                    data-test-id="text__product-quantity" class="quantity-color--red">Bor-yoʻgi 2 dona qoldi</span>#}
147 | {#                            </div>#}
148 | {#                        </div>#}
149 | {#                    </div>#}
150 | {#                    <div itemprop="offers" itemtype="http://schema.org/Offer" itemscope="itemscope"#}
151 | {#                         class="block-part price">#}
152 | {#                        <div class="block-part-title">Narx:</div>#}
153 | {#                        <div class="badges-and-price">#}
154 | {#                            <div class="block-part-content">#}
155 | {#                                <div data-test-id="text__product-price" class="total-price">#}
156 | {##}
157 | {#              <span class="currency">#}
158 | {#  14&nbsp;000 so'm#}
159 | {#</span></div>#}
160 | {#                                <div><span class="currency old-price" data-test-id="text__product-old-price">#}
161 | {#  19&nbsp;000 so'm#}
162 | {#</span></div> <!----> <!---->#}
163 | {#                                <link itemprop="url" href="/uz/product/Kungaboqar-yogi-Sofia-278740">#}
164 | {#                                <meta itemprop="price" content="14000">#}
165 | {#                                <meta itemprop="priceCurrency" content="RUB">#}
166 | {#                                <meta itemprop="availability" content="https://schema.org/InStock">#}
167 | {#                                <meta itemprop="itemCondition" content="https://schema.org/UsedCondition">#}
168 | {#                            </div>#}
169 | {#                            <div class="badges">#}
170 | {#                                <div class="badge-container" data-test-id="text__product-badge">#}
171 | {#                                    <div class="badge-list">#}
172 | {#                                        <div data-test-id="text__product-badge" class="badge"#}
173 | {#                                             style="background: rgb(154, 114, 242);"><span class="text"#}
174 | {#                                                                                           style="color: rgb(255, 255, 255);">Chilla Bozor</span>#}
175 | {#                                        </div> <!----></div>#}
176 | {#                                </div>#}
177 | {#                                <div class="badge-container" data-test-id="text__product-badge">#}
178 | {#                                    <div class="badge-list"> <!----></div>#}
179 | {#                                </div>#}
180 | {#                            </div>#}
181 | {#                        </div>#}
182 | {#                    </div>#}
183 | {#                    <div class="block-part raffle"><!----></div>#}
184 | {#                    <div class="block-part installment">#}
185 | {#                        <div class="block-part-content"><!---->#}
186 | {#                            <div class="installment-text"><span class="per-month">Oyiga <span class="currency">#}
187 | {#  1&nbsp;680#}
188 | {#</span> so'mdan</span>#}
189 | {#                                muddatli to'lov#}
190 | {#                            </div>#}
191 | {#                            <div class="installment-icon">#}
192 | {#                                <svg width="24" height="24" viewBox="0 0 28 28" fill="none"#}
193 | {#                                     xmlns="http://www.w3.org/2000/svg" class="ui-icon  installment-icon-chevron">#}
194 | {#                                    <path d="M18 14C18 14.3672 17.8013 14.4996 17.5508 14.7305L11.5 20.3242C11.3032 20.5195 11.1211 20.75 10.7266 20.75C10.4492 20.75 10 20.5352 10 19.9492C10 19.5859 10.2942 19.4151 10.5 19.2109L16.1172 14L10.4922 8.78125C10.2954 8.57705 9.99609 8.42578 9.99609 8C9.99609 7.66406 10.2578 7.25 10.793 7.25C11.0882 7.25 11.3579 7.52734 11.5547 7.72266L17.5508 13.25C17.8013 13.4897 18 13.6328 18 14Z"#}
195 | {#                                          fill="#76797F" fill-opacity="0.6"></path>#}
196 | {#                                </svg>#}
197 | {#                            </div>#}
198 | {#                        </div>#}
199 | {#                    </div>#}
200 | {#                    <div class="block-part actions">#}
201 | {#                        <div class="block-part-content">#}
202 | {#                            <div class="actions-wrapper"><!---->#}
203 | {#                                <div class="action">#}
204 | {#                                    <button data-v-57aaf377="" data-test-id="button__add-cart"#}
205 | {#                                            class="ui-component ui-button primary-violet large"><!---->#}
206 | {#                                        <div data-v-57aaf377="" class="slot default">#}
207 | {#                                            Savatga qoʻshish#}
208 | {#                                        </div> <!----></button>#}
209 | {#                                </div>#}
210 | {#                                <div class="action">#}
211 | {#                                    <button data-v-57aaf377="" data-test-id="button__pay-one-click"#}
212 | {#                                            class="ui-component ui-button one-click-buy tertiary-outlined large"><!---->#}
213 | {#                                        <div data-v-57aaf377="" class="slot default">#}
214 | {#                                            Tugmani 1 bosishda xarid qilish#}
215 | {#                                        </div> <!----></button>#}
216 | {#                                </div>#}
217 | {#                            </div>#}
218 | {#                        </div>#}
219 | {#                    </div>#}
220 | {#                    <div class="discount-offer">#}
221 | {#                        <div data-test-id="block__motivation-badge" class="block-part block-part--motivation">#}
222 | {#                            <div class="offer-text">#}
223 | {#                                <div class="offer-icon">#}
224 | {#                                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none"#}
225 | {#                                         xmlns="http://www.w3.org/2000/svg">#}
226 | {#                                        <path fill-rule="evenodd" clip-rule="evenodd"#}
227 | {#                                              d="M14 4.5C12.2402 4.5 11 5.88779 11 7.5H17C17 5.88779 15.7598 4.5 14 4.5ZM9.5 11.5V9H7.5V14.25C7.5 14.6642 7.16421 15 6.75 15C6.33578 15 6 14.6642 6 14.25V8.25V7.5H6.75H9.5C9.5 5.11221 11.3598 3 14 3C16.6402 3 18.5 5.11221 18.5 7.5H21.25H22V8.25V21.75C22 22.9926 20.9926 24 19.75 24H15.25C14.8358 24 14.5 23.6642 14.5 23.25C14.5 22.8358 14.8358 22.5 15.25 22.5H19.75C20.1642 22.5 20.5 22.1642 20.5 21.75V9H18.5V11.5H17V9H11V11.5H9.5ZM14.2738 18.0323C14.5667 17.7395 14.5667 17.2646 14.2738 16.9717C13.9809 16.6788 13.506 16.6788 13.2131 16.9717L7.99548 22.1893L5.78034 19.9742C5.48744 19.6813 5.01257 19.6813 4.71967 19.9741C4.42678 20.267 4.42677 20.7419 4.71966 21.0348L7.46513 23.7803C7.60579 23.921 7.79655 24 7.99547 24C8.19438 24 8.38515 23.921 8.5258 23.7803L14.2738 18.0323Z"#}
228 | {#                                              fill="#141415"></path>#}
229 | {#                                    </svg>#}
230 | {#                                </div>#}
231 | {#                                Bu haftada 3319 kishi sotib oldi#}
232 | {#                            </div>#}
233 | {#                        </div>#}
234 | {#                    </div>#}
235 | {#                </div> <!----></div>#}
236 | {#            <div ui-card="" id="product-fixed-buy-container">#}
237 | {#                <div class="col-mbs-4"><span class="fixed-unit transparent regular">Narx umumiy</span> <br> <span#}
238 | {#                        class="fixed-value slightly transparent medium"><span class="currency">#}
239 | {#  14&nbsp;000 so'm#}
240 | {#</span></span></div>#}
241 | {#                <div class="col-mbs-3">#}
242 | {#                    <button data-v-57aaf377="" data-test-id="button__add-to-favorites"#}
243 | {#                            class="ui-component ui-button small"><!---->#}
244 | {#                        <div data-v-57aaf377="" class="slot default"><img#}
245 | {#                                src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.5 5.5C5.26935 5.5 3.5 7.30906 3.5 9.5C3.5 10.4282 3.87684 11.4436 4.5487 12.5105C5.21692 13.5716 6.14148 14.6274 7.15127 15.6219C8.55769 17.007 10.0318 18.1879 11.1708 19.1003C11.4734 19.3427 11.7523 19.5661 12 19.7694C12.2477 19.5661 12.5266 19.3427 12.8292 19.1003C13.9682 18.1879 15.4423 17.007 16.8487 15.6219C17.8585 14.6274 18.7831 13.5716 19.4513 12.5105C20.1232 11.4436 20.5 10.4282 20.5 9.5C20.5 7.30898 18.7314 5.5 16.5 5.5C14.3473 5.5 13.0738 7.20226 12.7262 7.74742C12.3889 8.27655 11.6111 8.27653 11.2738 7.74742C10.9262 7.20225 9.65273 5.5 7.5 5.5ZM2 9.5C2 6.49094 4.43065 4 7.5 4C9.73143 4 11.2249 5.30207 12 6.21581C12.7751 5.30207 14.2686 4 16.5 4C19.5702 4 22 6.49102 22 9.5C22 10.8218 21.4706 12.1189 20.7206 13.3098C19.9669 14.5066 18.954 15.6539 17.9013 16.6906C16.4429 18.1269 14.808 19.4384 13.6502 20.3672C13.1649 20.7565 12.7634 21.0786 12.4939 21.3144C12.2111 21.5619 11.7889 21.5619 11.5061 21.3144C11.2366 21.0786 10.8351 20.7565 10.3498 20.3672C9.19201 19.4384 7.55712 18.1269 6.09873 16.6906C5.04602 15.6539 4.03308 14.5066 3.27942 13.3098C2.52941 12.1189 2 10.8218 2 9.5Z' fill='%23141415'/%3e %3c/svg%3e"#}
246 | {#                                class="noselect" data-v-57aaf377="" style="width: 24px;"></div> <!----></button>#}
247 | {#                </div>#}
248 | {#                <div class="col-mbs-5 row"><!---->#}
249 | {#                    <button data-v-57aaf377="" data-test-id="button__add-to-cart"#}
250 | {#                            class="ui-component ui-button primary-violet small"><!---->#}
251 | {#                        <div data-v-57aaf377="" class="slot default">#}
252 | {#                            Savatga#}
253 | {#                        </div> <!----></button>#}
254 | {#                </div>#}
255 | {#            </div>#}
256 | {#        </div>#}
257 | {#    </div>#}
258 | {% endblock %}


--------------------------------------------------------------------------------