feat: Added customer can see their recently viewed product ✨🔥

docs/application-overview.md

@@ -5,31 +5,32 @@ The application is multivendor eCommerce platform with Role-based access control
 
 ## Data model
 
-The application contains the following models:
+The application contains the following core features:
 
 - User - can have three of these roles:
-
+  #### Notable Features:
   - `CUSTOMERS` - can:
-    - Customer can buy their favourite products with stripe payment.
-    - Customer can save their favourite products, find them quickly and easily at a later time and buy them.
-    - When the product is in the wishlist customer can ‘Remove from wishlist’.
-    - Customer can search product with autocomplete feature.
-    - Customer will get welcome email after sign up.
-    - Customer can contact to the authority.
-    - Customer can edit their own profile.
-    - Customer can change shipping address.
-    - Customer can change their password.
-    - Customer can see recent orders from their profile.
-    - Customer can see our blog post they can comment on post.
-    - Customer can subscriber our newsletter.
-    - Customer can also unsubscriber our newsletter.
-    - Customer will get email after order has been successful purchased.
-    - Customer can search orders from their own profile.
-    - Customer can review product after successful purchased product.
-    - Customer can share purchased product photo.
-    - Customer can share thire experience with delivery man-rider.
-    - Customer can see order status like Processing/Shipped/Delivered.
-    - Customer can share product on social networks and get indirect advertising for your store.
+    - ✅ Customer can buy their favourite products with stripe payment.
+    - ✅ Customer can save their favourite products, find them quickly and easily at a later time and buy them.
+    - ✅ When the product is in the wishlist customer can ‘Remove from wishlist’.
+    - ✅ Customer can see their recently viewed product.
+    - ✅ Customer can search product with autocomplete feature.
+    - ✅ Customer will get welcome email after sign up.
+    - ✅ Customer can contact to the authority.
+    - ✅ Customer can edit their own profile.
+    - ✅ Customer can change shipping address.
+    - ✅ Customer can change their password.
+    - ✅ Customer can see recent orders from their profile.
+    - ✅ Customer can see our blog post they can comment on post.
+    - ✅ Customer can subscriber our newsletter.
+    - ✅ Customer can also unsubscriber our newsletter.
+    - ✅ Customer will get email after order has been successful purchased.
+    - ✅ Customer can search orders from their own profile.
+    - ✅ Customer can review product after successful purchased product.
+    - ✅ Customer can share purchased product photo.
+    - ✅ Customer can share thire experience with delivery man-rider.
+    - ✅ Customer can see order status like Processing/Shipped/Delivered.
+    - ✅ Customer can share product on social networks and get indirect advertising for your store.
 
   - `VENDOR` - can:
     - Product Stock Management

product/templates/product/product_list.html

@@ -23,7 +23,7 @@
             </div>
         </div>
         <div class="product-caption">
-            <h4><a href="{% url 'product_detail'  product.category.slug product.slug %}">
+            <h4><a href="{% url 'product_detail'  product.category.slug product.slug product.id %}">
                 {{product.title|title}}</a></h4>
             <div class="price">
                 <ul>
@@ -34,7 +34,7 @@ <h4><a href="{% url 'product_detail'  product.category.slug product.slug %}">
                 </ul>
             </div>
             <br>
-            <a href="{% url 'product_detail'  product.category.slug product.slug %}" class="genric-btn primary">See details</a>
+            <a href="{% url 'product_detail'  product.category.slug product.slug product.id %}" class="genric-btn primary">See details</a>
             {% if product.wishlist_exist %}
             <a href="{% url 'add_to_wishlist' product.id %}" class="genric-btn danger-border">Remove from wishlist</a>
             {% else %}

product/templates/product/single_product.html

@@ -1,6 +1,5 @@
-
 {% extends 'core/_base.html' %}
-{% block title %}Product Details {% endblock %}
+{% block title %}{{ products.title }} {% endblock %}
 {% load static %}
 {% block body %}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
@@ -109,6 +108,30 @@ <h2 class="text-3xl">${{ products.price }}</h2>
         </div>
       </div>
   </main>
+<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-4 mb-12">
+    <article>
+        <h2 class="text-2xl font-extrabold text-gray-900">Recently Viewed</h2>
+        <section class="mt-6 grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-x-6 gap-y-8">
+        {% for product in recently_viewed_products %}
+            {% if product.image %}
+            <article class="relative w-full h-64 bg-cover bg-center group rounded-lg overflow-hidden shadow-lg hover:shadow-3xl transition duration-300 ease-in-out" style="background-image: url('{{ product.image.url }}');">
+            {% else %}
+            <article class="relative w-full h-64 bg-cover bg-center group rounded-lg overflow-hidden shadow-lg hover:shadow-3xl transition duration-300 ease-in-out" style="background-image: url('{{ product.url }}');">
+            {% endif %}
+                <div class="absolute inset-0 bg-black bg-opacity-50 group-hover:opacity-75 transition duration-300 ease-in-out"></div>
+                <div class="relative w-full h-full px-4 sm:px-6 lg:px-4 flex justify-center items-center">
+                    <h3 class="text-center">
+                        <a class="text-white text-2xl font-bold text-center" href="{% url 'product_detail'  product.category.slug product.slug product.id %}">
+                            <span class="absolute inset-0"></span>
+                            {{ product.title | title }}
+                        </a>
+                    </h3>
+                </div>
+            </article>
+        {% endfor %}
+        </section>
+    </article>
+</section>
   <!--================End Single Product Area =================-->
     {% block footer %}
         {% include 'core/footer.html' %}

product/urls.py

@@ -1,7 +1,8 @@
 from django.urls import path
+
 from .views import product_detail
 
 urlpatterns = [
-    path('<slug:category_slug>/<slug:product_slug>/', product_detail, name='product_detail'),
+    path('<slug:category_slug>/<slug:product_slug>/<int:product_id>/', product_detail, name='product_detail'),
 
 ]

product/views.py

@@ -6,9 +6,30 @@
 from .models import Product
 
 
-@cache_page(60 * 6)
-def product_detail(request, category_slug, product_slug):
+@cache_page(60 * 5)
+def product_detail(request, category_slug, product_slug, product_id):
     '''	Product detail & add to cart view '''
+    products = Product.objects.get(category__slug=category_slug, slug=product_slug, pk=product_id)
+    '''	Recently viewed products '''
+    recently_viewed_products = None
+
+    if 'recently_viewed' in request.session:
+        if product_id in request.session['recently_viewed']:
+            request.session['recently_viewed'].remove(product_id)
+
+        product = Product.objects.filter(pk__in=request.session['recently_viewed'])
+        recently_viewed_products = sorted(
+            product, key=lambda x: request.session['recently_viewed'].index(x.id)
+        )
+
+        request.session['recently_viewed'].insert(0, product_id)
+        if len(request.session['recently_viewed']) > 3:
+            request.session['recently_viewed'].pop()
+    else:
+        request.session['recently_viewed'] = [product_id]
+
+    request.session.modified = True
+
     cart = Cart(request)
     products = get_object_or_404(
         Product, category__slug=category_slug, slug=product_slug)
@@ -23,4 +44,9 @@ def product_detail(request, category_slug, product_slug):
     else:
         form = AddToCartForm()
 
-    return render(request, 'product/single_product.html', {'products': products, 'form': form})
+    context = {
+        'form': form,
+        'products': products,
+        'recently_viewed_products': recently_viewed_products,
+    }
+    return render(request, 'product/single_product.html', context)

vendor/templates/vendor/home.html

@@ -39,8 +39,8 @@ <h3>I hope you are having a great day!</h3>
     </section>
     <div class="tabs is-left pt-4">
       <ul>
-        <li class="is-active"><a>Pictures</a></li>
-        <li><a>Music</a></li>
+        <li class="is-active"><a href="{% url 'vendor:add_product' %}">ADD PRODUCT</a></li>
+        <li><a>PRODUCTS</a></li>
         <li><a>Videos</a></li>
         <li><a>Documents</a></li>
       </ul>