Notes
![]() ![]() Notes - notes.io |
{% load static %}
<html lang="en">
<head>
<title>{% block title %}Shop - Paragon{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="{% static 'assets/img/favicon.ico' %}">
<!--bootstrap css-->
<link rel="stylesheet" href="{% static 'css/bootstrap/bootstrap.min.css' %}">
<!--font-awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--owl carousel css-->
<link rel="stylesheet" href="{% static 'css/owl-carousel/owl.carousel.css' %}">
<link rel="stylesheet" href="{% static 'css/owl-carousel/owl.theme.default.css' %}">
<!--custom css-->
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<link rel="stylesheet" href="{% static 'css/home_responsive.css' %}">
</head>
<body>
<!--floating cart icon starts-->
<div class="floating-cart" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<img src="{% static 'assets/img/icons/shopping_cart.svg' %}" alt="shopping-cart">
<span>{{ total_cart_items }}</span>
</div>
<!--floating cart icon ends-->
<!--hero section starts-->
<section class="section-box header-section inner-header-section">
<!--header starts-->
<div class="header">
<div class="row">
<div class="col-12 col-md-12 col-lg-12 col-xl-3">
<div class="header-left">
<img src="{% static 'assets/img/Logo.png' %}" alt="logo" class="header-logo">
<img src="{% static 'assets/img/icons/right-hamburger.svg' %}" alt="right-hamburger" class="right-hamburger"
id="rightHamburger">
</div>
</div>
<div class="col-12 col-md-12 col-lg-12 col-xl-9">
<div class="navigation" id="headerNavigation">
<div class="menu-list-overlay"></div>
<ul class="menu-list">
<li class="nav-close" id="navClose"><img src="{% static 'assets/img/icons/close-white.svg' %}"
alt="close-white"></li>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'provider' %}">Providers</a></li>
<li><a href="{% url 'telehealth' %}">Telehealth</a></li>
<li><a href="{% url 'coaches' %}">Coaches</a></li>
<li><a href="{% url 'events' %}">Events</a></li>
<li><a href="javascript:void(0)" class="active">Shop</a></li>
{% if not request.user.is_authenticated %}
<li><a href="{% url 'user_login' %}"><button class="primary-btn">Login</button></a></li>
{% else %}
<li><a href="{% url 'user_logout' %}"><button class="primary-btn">Logout</button></a></li>
{% endif %}
</ul>
</div>
</div>
</div>
<!-- Message section starts -->
<div class="row">
<div class="form-group col-md-12">
{% if messages %}
{% for message in messages %}
<p {% if message.tags %} class="alert alert-{{ message.tags }} text-center fs-4" id='successMessage' {% endif %}>{{ message }}</p>
{% endfor %}
{% endif %}
</div>
</div>
<!-- Message section ends -->
</div>
<!--header ends-->
<!--banner starts-->
<div class="banner inner-banner">
<div class="row banner-row">
<div class="col-lg-7 col-md-12 col-12">
<div class="banner-content">
<h1>Welcome to The <br> Paragon Shop</h1>
<p>Discover curated wellness products to enhance your wellness journey.</p>
<!-- <button class="primary-btn">View All Events</button> -->
</div>
</div>
<div class="col-lg-5 col-md-12 col-12">
<div class="banner-collage">
<img src="{% static 'assets/img/shop/shop-banner.png' %}" alt="collage">
</div>
</div>
</div>
</div>
<!--banner ends-->
</section>
<!--hero section ends-->
<!--shop section starts-->
<section class="box-margin section-box">
<!--shop header starts-->
<div class="shop-header">
<h6>Total Items: <span>{{ total_products }}</span></h6>
<div class="header-search">
<img src="{% static 'assets/img/icons/search.svg' %}" alt="search">
<input type="text" placeholder="Search" class="input-box">
</div>
</div>
<!--shop header ends-->
<div class="shop-outer">
<div class="row">
<div class="col-md-3">
<div class="shop-filter">
<h5 class="filter-head">Filter Products</h5>
<div class="accordion shop-filter-accordian" id="accordionAllFilters">
<div class="accordion-item">
<h2 class="accordion-header" id="domain-accordian">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#domainBody" aria-expanded="true" aria-controls="domainBody">
Wellness Domains
</button>
</h2>
<div id="domainBody" class="accordion-collapse collapse show"
aria-labelledby="domain-accordian">
<div class="accordion-body">
<ul>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainOne" checked>
<label id="domainOne">Physical Wellness</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainTwo" checked>
<label id="domainTwo">Mental Wellness</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainThree">
<label id="domainThree">Social Wellness</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainFour">
<label id="domainFour">Financial Wellness</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainFive">
<label id="domainFive">Spiritual Wellness</label>
</div>
<span class="count">50</span>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="providerAccordian">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#providerBody" aria-expanded="false"
aria-controls="providerBody">
Provider
</button>
</h2>
<div id="providerBody" class="accordion-collapse collapse"
aria-labelledby="providerAccordian">
<div class="accordion-body">
<ul>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainOne">
<label id="domainOne">Provider 1</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainTwo">
<label id="domainTwo">Provider 2</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainThree">
<label id="domainThree">Provider 3</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainFour">
<label id="domainFour">Provider 4</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainFive">
<label id="domainFive">Provider 4</label>
</div>
<span class="count">50</span>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="productAccordian">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#productBody" aria-expanded="false" aria-controls="productBody">
Product Name
</button>
</h2>
<div id="productBody" class="accordion-collapse collapse show"
aria-labelledby="productAccordian">
<div class="accordion-body">
<ul>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainOne">
<label id="domainOne">Harmony Hunter T-Shirt</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainTwo">
<label id="domainTwo">Balance Builders T-Shirt</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainThree">
<label id="domainThree">Serenity Seekers T-Shirt</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainFour">
<label id="domainFour">Vitality Voyagers T-Shirt</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainFive">
<label id="domainFive">Wellness Warriors T-Shirt</label>
</div>
<span class="count">50</span>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="priceAccordian">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#priceBody" aria-expanded="false" aria-controls="priceBody">
Price
</button>
</h2>
<div id="priceBody" class="accordion-collapse collapse show"
aria-labelledby="priceAccordian">
<div class="accordion-body">
<div class="range-lbl">
<label>Max Price</label>
<span>$100.00</span>
</div>
<input type="range" class="price-range">
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="sizeAccordian">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#sizeBody" aria-expanded="false" aria-controls="sizeBody">
Size
</button>
</h2>
<div id="sizeBody" class="accordion-collapse collapse show"
aria-labelledby="sizeAccordian">
<div class="accordion-body">
<ul>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainOne">
<label id="domainOne">S</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainTwo">
<label id="domainTwo">M</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainThree">
<label id="domainThree">L</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainFour">
<label id="domainFour">Xl</label>
</div>
<span class="count">50</span>
</li>
<li>
<div class="filter-name">
<input type="checkbox" class="custom-check" id="domainFive">
<label id="domainFive">XXL</label>
</div>
<span class="count">50</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="filter-view">
<div class="row">
<div class="col-md-9">
<div class="filter-badges">
<h6>Applied filters:</h6>
<ul>
<li>Physical Wellness <span><img src="{% static 'assets/img/icons/close.svg' %}" alt="close"></span></li>
<li>Mental Wellness <span><img src="{% static 'assets/img/icons/close.svg' %}" alt="close"></span></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="filter-drop">
<label>Sort by:</label>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="profileDropdown"
data-bs-toggle="dropdown" aria-expanded="false">
Recommended
</a>
<ul class="dropdown-menu" aria-labelledby="profileDropdown">
<li><a class="dropdown-item" href="javascript:void(0)">Recommended</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Newest</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Low price</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">High price</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="products-outer">
<div class="row">
{% for product in products %}
<div class="col-md-4">
<div class="product-card">
<a href="{% url 'product_detail_view' product.id %}">
<div class="product-image">
<img src="{{ product.image.url }}" alt="{{ product.name }}">
<span class="product-token"><img src="{% static 'assets/img/icons/SerenityToken.svg' %}" alt="token">{{ product.token }}</span>
</div>
</a>
<div class="product-detail">
<h6>{{ product.name }}</h6>
<p>{{ product.description }}</p>
<div class="product-action">
<h5>${{product.amount}}</h5>
<!-- <a href="{% url 'add_to_cart' product.id %}" class="primary-btn primary-btn-outline">Add to Cart</a> -->
{% if product.id in cart_product_ids %}
<button class="primary-btn primary-btn-outline"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasRight"
aria-controls="offcanvasRight">
Go to Cart
</button>
{% else %}
<a href="{% url 'add_to_cart' product.id %}" class="primary-btn primary-btn-outline">Add to Cart</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="product-pagination">
<ul>
<li class="previous pagination-btn"><img src="{% static 'assets/img/icons/select-drop.svg' %}" alt="select-drop"> Previous</li>
<li class="page-count">Page 1 of 3</li>
<li class="next pagination-btn">Next <img src="{% static 'assets/img/icons/select-drop.svg' %}" alt="select-drop"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--shop section ends-->
<!-- View cart section start -->
<section class="view-cart">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h4 id="offcanvasRightLabel">Your Cart</h4>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
{% if cart_items %}
{% for item in cart_items %}
<div class="cart-card">
<div class="cart-left">
<div class="cart-image">
<img src="{{ item.product.image.url }}" alt="{{ item.product.name }}">
</div>
<div class="cart-detail">
<h6>{{ item.product.name }}</h6>
<div class="product-counter">
<span class="count-btn">
<svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.583008 1.625V0.375H11.4163V1.625H0.583008Z" fill="#4E4E4E" />
</svg>
</span>
<span>{{ item.quantity }}</span>
<span class="count-btn">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.3737 6.62467H0.582031V5.37467H5.3737V0.583008H6.6237V5.37467H11.4154V6.62467H6.6237V11.4163H5.3737V6.62467Z" fill="#4E4E4E" />
</svg>
</span>
</div>
</div>
</div>
<div class="cart-right">
<a href="{% url 'delete_product' product_id=item.product.id %}"><img src="{% static 'assets/img/icons/delete.svg' %}" alt="delete"></a>
<label>${{ item.total_price }}</label>
</div>
</div>
{% endfor %}
{% else %}
<p>Your cart is empty.</p>
{% endif %}
</div>
<div class="offcanvas-footer">
<ul>
<li class="striped"><label>Subtotal</label><span>${{ subtotal }}</span></li>
<li><label>Apply a promo code</label><span class="promo">Apply</span></li>
<li class="striped"><label>Discount</label><span>$0.00</span></li>
<li><label>Shipping Fee</label><span>${{ shipping_fee }}</span></li>
<li class="striped total"><label>Total</label><span>${{ total }}</span></li>
</ul>
<div class="cart-btn">
<a href="{% url 'product_checkout' %}">
<button class="primary-btn">checkout</button>
</a>
</div>
</div>
</div>
</section>
<!--view cart section ends-->
<!--footer section starts-->
{% include 'webFooter.html'%}
<!--footer section end-->
<!--jquery script-->
<script src="{% static 'js/jquery/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery/jquery.marquee.min.js' %}"></script>
<!--bootstrap script-->
<script src="{% static 'js/bootstrap/bootstrap.bundle.min.js' %}"></script>
<!--owl carousel script-->
<script src="{% static 'js/owl-carousel/owl.carousel.js' %}"></script>
<!--custome js-->
<script src="{% static 'js/home.js' %}"></script>
<!-- Include SweetAlert CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<!-- Include SweetAlert JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{% static 'js/getInTouch.js' %}"></script>
<script>
setTimeout(function() {
$('#successMessage').fadeOut();
},3000 );
</script>
</body>
</html>
![]() |
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team