product not being added to cart

my html

<!-- PRODUCT SECTION -->


<section class="container-fluid clearfix productArea">
      <div class="container">

            <div class="row">
              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-1.jpg' %}" data-src="{% static 'img/products/product-1.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-2.jpg' %}" data-src="{% static 'img/products/product-2.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="{% %single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-3.jpg' %}" data-src="{% static 'img/products/product-3.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-4.jpg' %}" data-src="{% static 'img/products/product-4.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-5.jpg' %}" data-src="{% static 'img/products/product-5.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-6.jpg' %}" data-src="{% static 'img/products/product-6.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{%  url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-7.jpg' %}" data-src="{% static 'img/products/product-7.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>
                            
                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-8.jpg' %}" data-src="{% static 'img/products/product-8.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-9.jpg' %}" data-src="{% static 'img/products/product-9.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-4.jpg' %}" data-src="{% static 'img/products/product-4.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-5.jpg' %}" data-src="{% static 'img/products/product-5.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>

              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="produtSingle">
                  <div class="produtImage">
                    <img src="{% static 'img/products/product-6.jpg' %}" data-src="{% static 'img/products/product-6.jpg' %}" alt="Image Product" class="img-responsive lazyestload">
                    <div class="productMask">
                      <ul class="list-inline productOption">
                        <li class="favourite-icon">
                          <a class="icon" href="javascript:void(0)">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                          </a>
                        </li>

                        <li><a href="{% url 'store:cart' %}"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>

                        <li>
                          <a href="javascript:void(0)" data-morphing id="morphing" data-src="#morphing-content">
                            <i class="fa fa-search" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="productCaption">
                    <h2><a href="single-product.html">Handmade Soap</a></h2>
                    <h3>$19</h3>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="paginationCommon productPagination">
              <nav aria-label="Page navigation">
                <ul class="pagination">
                  <li>
                    <a href="#" aria-label="Previous">
                      <span aria-hidden="true"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
                    </a>
                  </li>
                  <li class="active"><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                      <span aria-hidden="true"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
        

      </div>
    </section>


     <!-- FOOTER -->
    <footer style="background-image: url('/static/img/home/footer-bg.jpg');">
      <!-- BACK TO TOP BUTTON -->
      <a href="#pageTop" class="backToTop"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
      <!-- FOOTER INFO -->
      <div class="clearfix footerInfo">
        <div class="container">
          <div class="row">
            <div class="col-sm-3 col-xs-12">
              <div class="footerText">
                <a href="index.html" class="footerLogo">
                  <svg xmlns="http://www.w3.org/2000/svg" width="362" height="99" preserveAspectRatio="xMidYMid" viewBox="0 0 362 99" >
                    <path fill-rule="evenodd" class="fill-primary" fill="" d="M330.636 69.243v-48.03h8.425v40.613h21.171v7.417h-29.596zm-41.544-48.03h32.909v7.417h-24.483v12.457h23.979v7.417h-23.979v13.322h24.483v7.417h-32.909v-48.03zm-28.58 48.966c-13.898 0-25.203-9.865-25.203-24.915 0-15.05 11.305-24.844 25.203-24.844 9.361 0 15.482 4.465 19.37 10.01l-6.912 3.888c-2.521-3.6-7.057-6.409-12.458-6.409-9.505 0-16.562 7.273-16.562 17.355 0 10.081 7.057 17.426 16.562 17.426 4.897 0 9.217-2.304 11.377-4.32v-7.489H257.56v-7.417h22.755v18.002c-4.753 5.257-11.45 8.713-19.803 8.713zm-66.457-35.213v34.277h-8.425v-48.03h8.641l24.555 33.34v-33.34h8.425v48.03h-8.137l-25.059-34.277zm-26.78 25.06H145.24l-3.529 9.217h-9.577L151 21.213h10.514l18.866 48.03h-9.577l-3.528-9.217zM156.257 29.71l-8.641 22.899h17.282l-8.641-22.899z"/>
                    <path fill-rule="evenodd" fill-opacity=".6" fill="#666" d="M358.657 97.768l-1.652-4.145h-9.298l-1.652 4.145h-2.66l7.505-18.68h2.884l7.534 18.68h-2.661zm-6.301-16.271l-3.977 10.053h7.926l-3.949-10.053zm-21.504 8.849h-5.181v7.422h-2.324v-18.68h7.505c3.753 0 5.853 2.577 5.853 5.629 0 3.053-2.156 5.629-5.853 5.629zm-.28-9.185h-4.901v7.113h4.901c2.213 0 3.725-1.456 3.725-3.557 0-2.1-1.512-3.556-3.725-3.556zm-25.284 16.943c-3.248 0-5.629-1.233-7.169-2.969l1.372-1.764c1.232 1.372 3.249 2.66 5.881 2.66 3.333 0 4.397-1.792 4.397-3.22 0-4.817-11.062-2.157-11.062-8.822 0-3.08 2.744-5.181 6.413-5.181 2.857 0 5.069.952 6.637 2.605l-1.4 1.708c-1.4-1.54-3.361-2.24-5.405-2.24-2.24 0-3.837 1.204-3.837 2.968 0 4.201 11.062 1.792 11.062 8.766 0 2.716-1.848 5.489-6.889 5.489zm-38.443-.336h-2.325V89.87l-7.365-10.782h2.717l5.797 8.682 5.797-8.682h2.716l-7.337 10.782v7.898zm-24.472 0h-2.325V81.161h-5.909v-2.073h14.171v2.073h-5.937v16.607zm-26.628.336c-5.069 0-7.617-2.997-7.617-7.59V79.088h2.324v11.37c0 3.417 1.848 5.573 5.293 5.573 3.445 0 5.293-2.156 5.293-5.573v-11.37h2.324v11.398c0 4.649-2.548 7.618-7.617 7.618zm-21.335-4.481h-9.298l-1.652 4.145h-2.661l7.506-18.68h2.884l7.533 18.68h-2.66l-1.652-4.145zm-4.649-12.126l-3.977 10.053h7.926l-3.949-10.053zM159.1 79.088h12.238v2.073h-9.914v6.021h9.718v2.072h-9.718v6.441h9.914v2.073H159.1v-18.68zm-16.798 18.68h-8.514v-18.68h8.318c3.248 0 5.236 1.961 5.236 4.761 0 2.353-1.568 3.921-3.276 4.285 1.988.308 3.641 2.352 3.641 4.593 0 2.996-1.989 5.041-5.405 5.041zm2.632-13.583c0-1.68-1.12-3.024-3.221-3.024h-5.6v6.021h5.6c2.101 0 3.221-1.289 3.221-2.997zm-3.108 5.069h-5.713v6.441h5.713c2.184 0 3.472-1.232 3.472-3.22 0-1.709-1.176-3.221-3.472-3.221z"/>
                    <path fill-rule="evenodd" class="fill-primary" fill="" d="M99.662 81.143A57.363 57.363 0 0 1 58.5 97.976a57.363 57.363 0 0 1-41.162-16.833C4.097 67.871-2.133 48.651.671 29.727l.371-2.504 2.439-.433c10.929-1.937 22.023-.613 32.007 3.546C39.375 18.912 46.63 8.753 56.491 1.48L58.498 0l2.008 1.48c9.865 7.276 17.131 17.437 21.017 28.867 9.983-4.158 21.069-5.494 31.996-3.557l2.439.433.371 2.504c2.804 18.924-3.426 38.144-16.667 51.416zM7.12 33.314c-1.583 15.865 3.93 31.708 15.013 42.817 6.611 6.627 14.831 11.171 23.667 13.36-.047-.689-.105-1.378-.129-2.066-8.544-10.554-13.409-23.903-13.409-37.782 0-4.244.478-8.434 1.352-12.516A50.554 50.554 0 0 0 7.12 33.314zM58.498 8.706c-12.181 9.943-19.382 25.06-19.382 40.937 0 9.436 2.56 18.593 7.181 26.565a60.613 60.613 0 0 1 8.062-22.443 51.117 51.117 0 0 0-5.104-5.984 50.568 50.568 0 0 0-8.251-6.691 33.664 33.664 0 0 1 1.707-7.142 57.363 57.363 0 0 1 15.792 13.84 57.787 57.787 0 0 1 4.446-5.019 57.362 57.362 0 0 1 12.357-9.381c-3.104-9.601-8.905-18.231-16.808-24.682zm51.382 24.608a50.61 50.61 0 0 0-42.135 14.467c-9.726 9.748-15.159 23.141-15.276 36.996a52.033 52.033 0 0 0 6.029 5.803 52.133 52.133 0 0 0 6.035-5.808c.006-8.156-1.681-16.135-5.238-23.329.756-1.75 2.488-4.419 4.054-6.493a60.648 60.648 0 0 1 7.359 21.244c4.615-7.969 7.173-17.121 7.173-26.551 0-2.73-.282-5.069-.697-7.731 1.143-1.141 5.184-3.411 6.361-3.256.708 3.687 1.19 7.174 1.19 10.987 0 13.874-4.868 27.212-13.408 37.763a64.066 64.066 0 0 1-.103 2.05c8.824-2.19 17.039-6.706 23.643-13.325 11.083-11.109 16.596-26.952 15.013-42.817z"/>
                  </svg>

                </a>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa officia.Lorem ipsum dolor sit amet.</p>
                <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
            <div class="col-sm-3 col-xs-12 paddingLeft">
              <div class="footerInfoTitle">
                <h4>Useful Links</h4>
              </div>
              <div class="useLink">
                <ul class="list-unstyled">
                  <li><a href="javascript:void(0)"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Web Design</a></li>
                  <li><a href="javascript:void(0)"><i class="fa fa-angle-double-right" aria-hidden="true"></i>About Anzel Beauty Spa</a></li>
                  <li><a href="javascript:void(0)"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Mobile</a></li>
                  <li><a href="javascript:void(0)"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Why Anzel Beauty Spa</a></li>
                  <li><a href="javascript:void(0)"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Social Media</a></li>
                </ul>
              </div>
            </div>
            <div class="col-sm-3 col-xs-12">
              <div class="footerInfoTitle">
                <h4>Gallery</h4>
              </div>
              <div class="footerGallery row">
                <div class="col-4 col-md-6 col-lg-4 mb-3 mb-md-0">
                  <a href="gallery-v2.html">
                    <img class="lazyestload" data-src="{% static 'img/home/footer-gallery-1.jpg' %}" src="{% static 'img/home/footer-gallery-1.jpg' %}" alt="gallery-img">
                  </a>
                </div>

                <div class="col-4 col-md-6 col-lg-4 mb-3 mb-md-0">
                  <a href="gallery-v2.html">
                    <img class="lazyestload" data-src="{% static 'img/home/footer-gallery-2.jpg' %}" src="{% static 'img/home/footer-gallery-2.jpg' %}" alt="gallery-img">
                  </a>
                </div>

                <div class="col-4 col-md-6 col-lg-4 mb-3 mb-md-0">
                  <a href="gallery-v2.html">
                    <img class="lazyestload" data-src="{% static 'img/home/footer-gallery-3.jpg' %}" src="{% static 'img/home/footer-gallery-3.jpg' %}" alt="gallery-img">
                  </a>
                </div>

                <div class="col-4 col-md-6 col-lg-4">
                  <a href="gallery-v2.html">
                    <img class="lazyestload" data-src="{% static 'img/home/footer-gallery-4.jpg' %}" src="{% static 'img/home/footer-gallery-4.jpg' %}" alt="gallery-img">
                  </a>
                </div>

                <div class="col-4 col-md-6 col-lg-4">
                  <a href="gallery-v2.html">
                    <img class="lazyestload" data-src="{% static 'img/home/footer-gallery-5.jpg' %}" src="{% static 'img/home/footer-gallery-5.jpg' %}" alt="gallery-img">
                  </a>
                </div>

                <div class="col-4 col-md-6 col-lg-4">
                  <a href="gallery-v2.html">
                    <img class="lazyestload" data-src="{% static 'img/home/footer-gallery-6.jpg' %}" src="{% static 'img/home/footer-gallery-6.jpg' %}" alt="gallery-img">
                  </a>
                </div>
              </div>
            </div>

            <div class="col-sm-3 col-xs-12">
              <div class="footerInfoTitle">
                <h4>Newsletters</h4>
              </div>

              <div class="footerText">
                <p>Sign up for our mailing list to get latest updates and offers.</p>
                <form class="input-group">
                  <input type="text" class="form-control" required="" placeholder="Email address" aria-describedby="basic-addon21">
                  <button type="submit" class="input-group-addon" id="basic-addon21">Send</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
my views
from django.shortcuts import redirect, render
from .models import Customer, Order, OrderItem, Product


def product(request, pk):
	product = Product.objects.get(id=pk)

	if request.method == 'POST':
		product = Product.objects.get(id=pk)
		#Get user account information
		try:
			customer = request.user.customer	
		except:
			device = request.COOKIES['device']
			customer, created = Customer.objects.get_or_create(device=device)

		order, created = Order.objects.get_or_create(customer=customer, complete=False)
		orderItem, created = OrderItem.objects.get_or_create(order=order, product=product)
		orderItem.quantity=request.POST['quantity']
		orderItem.save()

		return redirect('cart')

	context = {'product':product}
	return render(request, 'product-4col.html', context)

def cart(request):
	try:
		customer = request.user.customer
	except:
		device = request.COOKIES['device']
		customer, created = Customer.objects.get_or_create(device=device)

	order, created = Order.objects.get_or_create(customer=customer, complete=False)

	context = {'order':order}
	return render(request, 'cart.html', context)

    # Handle GET request without a specific product_id



def checkout(request):
    if request.method == 'POST':
        request.session['cart'] = {}
        return redirect('checkout_complete')
    return render(request, 'checkout.html')
my urls 
from django import views
from django.urls import path
from .views import *
from .views import cart, product, checkout


urlpatterns = [
	
	path('cart/', cart, name="cart"),
	path('product/<str:pk>/', product, name="product"),
	path('checkout/', checkout, name="checkout"),
]



my models

from collections import UserDict
from site import USER_BASE
from django.db import models
from django.contrib.auth.models import User


class Customer(models.Model):
	user = models.OneToOneField(User, null=True, blank=True, on_delete=models.CASCADE)
	name = models.CharField(max_length=200, null=True, blank=True)
	email = models.CharField(max_length=200, null=True, blank=True)
	device = models.CharField(max_length=200, null=True, blank=True)

	def __str__(self):
		if self.name:
			name = self.name
		else:
			name = self.device
		return str(name)


class Product(models.Model):
	name = models.CharField(max_length=200)
	price = models.DecimalField(max_digits=7, decimal_places=2)
	image = models.ImageField(null=True, blank=True)

	def __str__(self):
		return self.name

	@property
	def imageURL(self):
		try:
			url = self.image.url
		except:
			url = ''
		return url

class Order(models.Model):
	customer = models.ForeignKey(Customer, on_delete=models.SET_NULL, null=True, blank=True)
	date_ordered = models.DateTimeField(auto_now_add=True)
	complete = models.BooleanField(default=False)
	transaction_id = models.CharField(max_length=100, null=True)

	def __str__(self):
		return str(self.id)
		
	@property
	def get_cart_total(self):
		orderitems = self.orderitem_set.all()
		total = sum([item.get_total for item in orderitems])
		return total 

	@property
	def get_cart_items(self):
		orderitems = self.orderitem_set.all()
		total = sum([item.quantity for item in orderitems])
		return total 

class OrderItem(models.Model):
	product = models.ForeignKey(Product, on_delete=models.SET_NULL, null=True)
	order = models.ForeignKey(Order, on_delete=models.SET_NULL, null=True)
	quantity = models.IntegerField(default=0, null=True, blank=True)
	date_added = models.DateTimeField(auto_now_add=True)

	@property
	def get_total(self):
		total = self.product.price * self.quantity
		return total

class ShippingAddress(models.Model):
	customer = models.ForeignKey(Customer, on_delete=models.SET_NULL, null=True)
	order = models.ForeignKey(Order, on_delete=models.SET_NULL, null=True)
	address = models.CharField(max_length=200, null=False)
	city = models.CharField(max_length=200, null=False)
	state = models.CharField(max_length=200, null=False)
	zipcode = models.CharField(max_length=200, null=False)
	date_added = models.DateTimeField(auto_now_add=True)

	def __str__(self):
		return self.address

every product image has a provision for add to cart, when i click that, the product doesnt get added to cart instead, it redirects me to to http://127.0.0.1:8000/store/cart/. help me out, also when i go to my cart form, the products dont get saved to my my database

Which one specific line of HTML is responsible for allowing the user to add an item to the cart? (I know you are displaying multiple items here - pick 1.)

<!-- SINGLE PRODUCT SECTION -->
    <section class="clearfix singleProduct">
      <div class="container">
        <div class="row">
          
          <div class="col-md-6">
            <div class="singleIamge">
              <img src="{% static 'img/products/single-product.jpg' %}" data-src="img/products/single-product.jpg" alt="Image Single Product" class="img-responsive lazyestload">
            </div>
          </div>

          <div class="col-md-6">
            <div class="singleProductInfo">
              <!-- ... -->
              <div class="finalCart">
                <form method="POST" action="{% url 'store:product' product.id %}">
                  {% csrf_token %}
                  <input type="number" name="quantity" value="1" min="1" max="999">
                  <button type="submit" class="btn btn-primary"><i class="fa fa-shopping-basket" aria-hidden="true"></i>Add to cart</button>
                </form>
              </div>
            </div>
            

              <ul class="list-inline category">
                <li>Categories:</li>
                <li><a href="javascript:void(0)">Products</a></li>
                <li><a href="javascript:void(0)">Soap</a></li>
              </ul>

You’re posting a form to a view. What does that view do with this submission?

It retrieves the product object based on the provided ‘pk’ (product ID) from the database using Product.objects.get(id=pk) .

def product(request, pk):
	product = Product.objects.get(id=pk)

	if request.method == 'POST':
		product = Product.objects.get(id=pk)
		#Get user account information
		try:
			customer = request.user.customer	
		except:
		
			device = request.COOKIES['device']
			customer, created = Customer.objects.get_or_create(device=device)

		order, created = Order.objects.get_or_create(customer=customer, complete=False)
		orderItem, created = OrderItem.objects.get_or_create(order=order, product=product)
		orderItem.quantity=request.POST['quantity']
		orderItem.save()

		return redirect('cart')

	context = {'product':product}
	return render(request, 'product-4col.html', context)

i also earlier encountered an issue with a product(before i brought in the form aspect), when i clicked on the add to cart, it redirected me to the cart but the product didnt get added to cart instead, a default image or product in my html appeared.

And are you getting any error messages showing up in the console window where you’re running runserver?

You stated earlier:

You’ve gone into the Django admin and verified that nothing has been created in either the Order or OrderItem models?

i get tis error in browser

16
17 Image Single Product 18
19
20 21
22
23 24
25 26 {% csrf_token %} 27 28 Add to cart 29 30
31

I’m not asking about errors in the browser. I’m looking for you to check for errors in the console where you’re running runserver.

(index):300 Uncaught SyntaxError: Identifier ‘device’ has already been declared (at (index):300:37) this is the error in my console

       <li class="nav-item dropdown ">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">Components</a>
                <ul class="dropdown-menu menu-right">
                  <li><a href="tabs-pagination.html">Tab &amp; Pagination</a></li>
                  <li><a href="accrodion.html">Accrodions</a></li>
                  <li><a href="buttons-alerts.html">Buttons &amp; Alerts</a></li>
                </ul>
              </li>
            </ul>
          </div>

          <div class="cart_btn">
            <a href="cart.html"><i class="fa fa-shopping-basket" aria-hidden="true"></i><span class="badge">0</span></a>
          </div>
          <!-- header search ends-->
        </div>
      </nav>
     <script type="text/javascript">

according to my console there is an error with this line