fixed modal

artel/store/static/js/cart.js

@@ -22,8 +22,9 @@ $(document).on('click', '.add-to-cart-button', function(event) {
         contentType: false, // Let the browser set the content type
         success: function(data) {
           // Show the options block
-          createShadedOverlay()
-          $('#add-to-cart-options').show();
+          
+          //$('#addToCartModal').show();
+          //createShadedOverlay()
           button.prop('disabled', false);
         },
         error: function() {
@@ -37,7 +38,7 @@ $(document).on('click', '.add-to-cart-button', function(event) {
       const overlay = document.createElement('div');
       overlay.classList.add('shaded-overlay');
       body.appendChild(overlay);
-      const optionsdiv = document.getElementById('add-to-cart-options');
+      const optionsdiv = document.getElementById('addToCartModal');
       optionsdiv.classList.add('unshaded-overlay');
       body.appendChild(optionsdiv);
     }
@@ -48,18 +49,6 @@ $(document).on('click', '.add-to-cart-button', function(event) {
         overlay.remove();
       }
     }
-
-    $('#continue-shopping').on('click', function(event) {
-      event.preventDefault();
-      removeShadedOverlay();
-      $('#add-to-cart-options').hide();
-    });
-    
-    // Handle go to cart button click
-    $('#go-to-cart').on('click', function(event) {
-      event.preventDefault();
-      window.location.href = '/store/cart/';
-    });
     
     const cartButton = document.getElementById('cart-button');
     const cartDropdown = document.getElementById('cart-dropdown');

artel/store/templates/store/partials/product_card.html

@@ -10,15 +10,15 @@
           <input type="number" id="quantity{{item.id}}" name="quantity" min="1" value="1" class="form-control form-control-sm">
         </div>
         <div class="col text-end">
-          <a href="#" class="btn btn-outline-success add-to-cart-button" 
+          <button class="btn btn-outline-success add-to-cart-button" 
             data-product-id="{{item.id}}"  
             data-csrf-token="{{csrf_token}}"
             data-add-to-cart-url={% url "cart-action-add-product" %}
+            data-bs-toggle="modal" data-bs-target="#addToCartModal"
             >
             <img src="{% static 'images/icons/cart.svg' %}" alt="Koszyk"/>
-          </a>
+          </button>
         </div>
-
       </div>
     </div>
   </div>

artel/store/templates/store/product_list_page.html

@@ -3,12 +3,24 @@
 
 {% block content %}
 
-<div id="add-to-cart-options" style="display: none;">
-  <p>Item added to cart.</p>
-  <p>What would you like to do?</p>
-  <!-- What else should this contain? -->
-  <button id="continue-shopping">Continue Shopping</button>
-  <button id="go-to-cart">Go to Cart</button>
+<div class="modal" tabindex="-1" role="dialog" id="addToCartModal" aria-labelledby="addToCartLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Added to cart</h5>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Item has been added to cart.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Continue shopping</button>
+        <a href="{% url 'cart' %}" class="btn btn-primary">Go to cart</a>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="container mb-3">
@@ -19,7 +31,6 @@
             </div>
         {% endfor %}
     </div>
-
 </div>
 
 <nav aria-label="Page navigation example">
@@ -35,4 +46,5 @@
       </li>
     </ul>
   </nav>
+  
 {% endblock %}