my index2 page

 {% extends 'shop/basic.html' %}

{% block title%}MARTISTERY-Best Phone covers.  {% endblock %}

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,100&display=swap" rel="stylesheet">

{% block css %}

          .col-md-3

          {

          display: inline-block;

          margin-left:-4px;

          }


          .carousel-indicators .active {

          background-color: blue;

            }


          .col-md-3 img{


          max-width: 191px;

        height: 200px;

        position: relative;

        top: 13px;

        left: 18px;

          }


          body .carousel-indicator li{

          background-color: blue;

          }


          body .carousel-indicators{

          bottom: 0;

          }


          body .carousel-control-prev-icon,

          body .carousel-control-next-icon{

          background-color: blue;

            position: relative;

                bottom: 197px;


                left: 18px;

          }


          .carousel-control-prev,

          .carousel-control-next{

          top: auto;

bottom: auto;

          }

           body .no-padding{

           padding-left: 0,

           padding-right: 0;

           }

  .sec1{

    position: relative;

    

   

    right: -333px;



      }

  .icon{

        height: 5px;


      }

  .h5 

      {

       height: 18px;

      font-size: 24px;

      margin: 2px;

      }

   .fs-sm

      {

        font-size: 18px;


         margin: 9px;

      }



    .woxo{


      margin-top: 8px;


    }




}




           


 {% endblock %}

   <script src="https://kit.fontawesome.com/1abb23d9d5.js" crossorigin="anonymous"></script>

{% block body %}

{% load static %}

<div class="container">


    <!--Slideshow starts here -->

    {% for product, range, nSlides in allProds %}

<h5 class="my-4">Stock for: {{product.0.category}}</h5>

<div id="demo{{forloop.counter}}" class="carousel slide my-3" data-ride="carousel">

    <ul class="carousel-indicators">

      <li data-target="#demo{{forloop.counter}}" data-slide-to="0" class="active"></li>


       {% for i in range %}

      <li data-target="#demo{{forloop.parentloop.counter}}" data-slide-to="{{i}}" ></li>

      {% endfor %}

    </ul>



    <div class="container carousel-inner no-padding">


      <div class="carousel-item active">




        {% for i in product %}

        <div class="col-xs-3 col-sm-3 col-md-3">

          <div id="cards" class="card " style="width: 18rem;">

            <img src='/media/{{i.image}}' class="card-img-top" alt="...">

            <div class="card-body">

              <h5 class="card-title" id="namepr{{i.id}}">{{i.product_name}}</h5>

              <p class="card-text">{{i.desc}}</p>

             <h6 class="card-title">price: <span  id="pricepr{{i.id}}">{{i.price}}</span></h6>

                <span id="divpr{{i.id}}"  class="divpr">

              <button id="pr{{i.id}}" class="btn btn-primary cart ">Add To Cart</button>

                    </span>

                <a href="/shop/products/{{i.id}}"><button id="Quickview{{i.id}}" class="btn btn-primary cart ">Quick View</button></a>

            </div>

          </div>

        </div>

        {% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}

      </div><div class="carousel-item">

        {% endif %}


        {% endfor %}

    </div>




</div>

</div>


    <div><!-- left and right controls for the slide -->

    <a class="carousel-control-prev" href="#demo{{forloop.counter}}" data-slide="prev">

        <span class="carousel-control-prev-icon"></span>

    </a>

    <a class="carousel-control-next" href="#demo{{forloop.counter}}" data-slide="next">

        <span class="carousel-control-next-icon"></span>

    </a>

    </div>

    






 {% endfor %}

</div>




<section class="woxo">

  <div data-mc-src="53488c71-ba8c-4200-aadb-e9cd564617c8#instagram"></div>

        

<script 

  src="https://cdn2.woxo.tech/a.js#6122915fd233470016d247e8" 

  async data-usrc>

</script>


</section>






 {% endblock %}


{% block js %}

<script>

// Find out the cart items from localStorage

if (localStorage.getItem('cart') == null) {

    var cart = {};

} else {

    cart = JSON.parse(localStorage.getItem('cart'));

    document.getElementById('cart').innerHTML = Object.keys(cart).length;

    updateCart(cart);

}

// If the add to cart button is clicked, add/increment the item

 $('.divpr').on('click', 'button.cart', function(){

    var idstr = this.id.toString();

    if (cart[idstr] != undefined) {

         qty = cart[idstr][0] + 1;

    } else {

        qty = 1;

        name = document.getElementById('name'+idstr).innerHTML

        price = document.getElementById('price'+idstr).innerHTML

        cart[idstr] = [qty, name,price];

    }

    updateCart(cart);

    

});

//Add Popover to cart

$('#popcart').popover();

updatePopover(cart);




function clearCart() {

    cart = JSON.parse(localStorage.getItem('cart'));

    for (var item in cart) {

        document.getElementById('div' + item).innerHTML = '<button id="' + item + '" class="btn btn-primary cart">Add To Cart</button>'

    }

    localStorage.clear();

    cart = {};

    updateCart(cart);

}









function updatePopover(cart)

{

    console.log('We are inside updatePopover');

    var popStr = "";

    popStr = popStr + "<h5> Cart for your items in my shopping cart </h5><div class='mx-2 my-2'>";

    var i = 1;

  for (var item in cart){

        popStr = popStr + "<b>" + i + "</b>. ";

        popStr = popStr + document.getElementById('name' + item).innerHTML.slice(0, 19) + "... Qty: " + cart[item][0] +

        ".price: " + document.getElementById('price' + item).innerHTML+'<br>';

        i = i+1;

    }

    popStr = popStr + "</div><a href='/shop/checkout'><button class='btn btn-primary' id ='checkout'>Checkout</button></a> <button class='btn btn-primary' onclick='clearCart()' id ='clearCart'>Clear Cart</button> " 

    console.log(popStr);

    document.getElementById('popcart').setAttribute('data-content', popStr);

    $('#popcart').popover('show');

}

function updateCart(cart) {

  var sum=0;

    debugger

    for (var item in cart) {

      

      sum=sum+cart[item][0];

        document.getElementById('div' + item).innerHTML = "<button id='minus" + item + "' class='btn btn-primary minus'>-</button> <span id='val" + item + "''>" + cart[item][0] + "</span> <button id='plus" + item + "' class='btn btn-primary plus'> + </button>";

    }

    localStorage.setItem('cart', JSON.stringify(cart));

    document.getElementById('cart').innerHTML = Object.keys(cart).length;

    document.getElementById('cart').innerHTML=sum;

    console.log(cart);

    updatePopover(cart);

}

// If plus or minus button is clicked, change the cart as well as the display value

$('.divpr').on("click", "button.minus", function() {

    a = this.id.slice(7, );

    cart['pr' + a][0] = cart['pr' + a][0] - 1;

    cart['pr' + a][0] = Math.max(0, cart['pr' + a][0]);

    document.getElementById('valpr' + a).innerHTML = cart['pr' + a][0];

    updateCart(cart);

});

$('.divpr').on("click", "button.plus", function() {

    a = this.id.slice(6, );

    cart['pr' + a][0] = cart['pr' + a][0] + 1;

    document.getElementById('valpr' + a).innerHTML = cart['pr' + a][0];

    updateCart(cart);

});

</script>

{% endblock %}


Comments

Post a Comment

Popular posts from this blog

Discover the Best Steel Manufacturer: Adnan & Sons

Image
  In the bustling city of Karachi, finding a reliable steel manufacturer that combines quality, affordability, and versatility can be challenging. That’s where Adnan & Sons shines as the  Best Steel Manufacturer , offering an extensive range of steel products designed to meet the diverse needs of both commercial and industrial sectors. Top-Quality Steel Products in Karachi Adnan & Sons is synonymous with  top-quality steel products in Karachi .  Their steel is crafted using the finest materials and cutting-edge manufacturing techniques, ensuring durability and longevity. Whether you’re looking to construct a new building, enhance your office space, or upgrade your industrial facilities, Adnan & Sons provides the best steel solutions tailored to your specific needs. Affordable Steel Furniture for Every Need In today’s market, finding high-quality yet  affordable steel furniture  is a priority for many businesses. Adnan & Sons offers a wide se...
Read more

Online Cabinets and Lockers in Pakistan: Discover Adnan & Sons' Top-Quality Steel Products

Image
  When it comes to organizing your home or office, finding the right storage solutions is crucial. In Pakistan, the demand for durable and affordable storage options is on the rise. Whether you’re looking to declutter your workspace or secure important documents, Adnan & Sons offers a range of online cabinets and lockers in Pakistan that cater to your every need. Adnan & Sons, a name synonymous with reliability, is well-known for providing top-quality steel products in Karachi . Their cabinets and lockers are not just robust but also aesthetically designed to complement any interior. These steel products are ideal for both personal and professional use, ensuring your belongings are stored securely. One of the key advantages of choosing Adnan & Sons is their commitment to affordability without compromising on quality. Their affordable steel furniture range includes a variety of cabinets and lockers that are built to last, offering excellent value for money. Whether yo...
Read more

The Best Emergency Exit Door in Pakistan by Adnan & Sons

  In today’s world, safety is paramount, and having reliable   emergency exit doors   is crucial for any building, be it residential, commercial, or industrial. For those seeking the   best emergency exit door in Pakistan ,   Adnan & Sons   emerges as a trusted name. Why Choose Adnan & Sons? Adnan & Sons has built a reputation for providing top-notch safety solutions tailored to meet the stringent requirements of various establishments. Here’s why they are the go-to choice: High-Quality Materials : Adnan & Sons use only the finest materials to ensure their emergency exit doors are durable, reliable, and capable of withstanding extreme conditions. Compliance with Safety Standards : Their doors comply with international safety standards, offering peace of mind that in the event of an emergency, these doors will perform as expected. Custom Solutions : Recognizing that different buildings have different needs, Adnan & Sons offer custom solut...
Read more