diff --git a/html/data_treatment/AJAX/modifier_panier.php b/html/data_treatment/AJAX/modifier_panier.php
new file mode 100644
index 0000000000000000000000000000000000000000..fa188d16f60a698e3405de86591b230849e7ea95
--- /dev/null
+++ b/html/data_treatment/AJAX/modifier_panier.php
@@ -0,0 +1,28 @@
+<?php
+session_start();
+include("../connect_database.php");
+
+// Vérifier si l'article est déjà dans le panier
+if (!isset($_SESSION['panier'])) {
+    $_SESSION['panier'] = array();
+}
+
+$itemName = $_POST['itemName'];
+$itemPrice = $_POST['itemPrice'];
+$itemQuantity = $_POST['itemQuantity'];
+
+// Vérifier si l'article est déjà dans le panier
+if (array_key_exists($itemName, $_SESSION['panier'])) {
+    // L'article est déjà dans le panier, mettez à jour la quantité
+    $_SESSION['panier'][$itemId]['quantity'] += $itemQuantity;
+} else {
+    // L'article n'est pas encore dans le panier, ajoutez-le au panier et à la base de données
+    $_SESSION['panier'][$itemName] = array(
+        'price' => $itemPrice,
+        'quantity' => $itemQuantity
+    );
+}
+
+$response = array('success' => true, 'message' => 'Article ajouté au panier avec succès');
+echo json_encode($response);
+?>
diff --git a/startbootstrap-agency-gh-pages/index.php b/startbootstrap-agency-gh-pages/index.php
index af42d21e70646722c5f8ef9a919d072fbfcfbaf8..189704bdc45ba5b1b1f06c77e4c9227df731a930 100644
--- a/startbootstrap-agency-gh-pages/index.php
+++ b/startbootstrap-agency-gh-pages/index.php
@@ -321,7 +321,7 @@ include("../html/data_treatment/connect_database.php");
         <!-- Portfolio Modals-->
         <!-- Portfolio item 1 modal popup-->
         <?php
-        for($i=0; $i<count($articles); $i++){ 
+            for($i=0; $i<count($articles); $i++){ 
         ?>
         <div class="portfolio-modal modal fade" <?php echo 'id="portfolioModal'.$i.'"' ?> tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
@@ -342,9 +342,13 @@ include("../html/data_treatment/connect_database.php");
                                         <input type="text" value="1" <?php echo 'id="quantity"'.$i; ?>>
                                         <button onclick="incrementQuantity(this)">+</button>
                                     </div>
-                                    <button class="btn btn-primary btn-xl text-uppercase" type="button" <?php echo 'id = "buttonShoppingCart'.$i.'"';?>>
-                                        Add to shopping cart
-                                    </button>
+                                    <button class="btn btn-primary btn-xl text-uppercase" type="button" 
+                                            data-item-id="<?php echo $i; ?>"
+                                            data-item-name="<?php echo $articles[$i]["itemName"]; ?>"
+                                            data-item-price="<?php echo $articles[$i]["price"]; ?>"
+                                            onclick="addToCart(this)">
+                                            Add to shopping cart
+                                        </button>
 
                                     <script>
                                         function incrementQuantity(button) {
@@ -406,7 +410,6 @@ include("../html/data_treatment/connect_database.php");
                     </div>
                 </div>
             </div>
-        </div>
         <?php }; ?>
         <!-- Bootstrap core JS-->
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
@@ -419,24 +422,6 @@ include("../html/data_treatment/connect_database.php");
         <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
         <script src="js/slideBox.js"></script>
         <script>
-            
-            function incrementQuantity(button) {
-                var input = button.parentNode.querySelector('input');
-                var value = parseInt(input.value, 10);
-                input.value = value + 1;
-            }
-
-            function decrementQuantity(button) {
-                var input = button.parentNode.querySelector('input');
-                var value = parseInt(input.value, 10);
-                if (value > 0) {
-                    input.value = value - 1;
-                }
-            }
-            function removeProduct(button) {
-                var product = button.parentNode.parentNode;
-                product.parentNode.removeChild(product);
-        }
             function updateOnlineUsers() {
             $.ajax({
                 url: '../html/data_treatment/AJAX/online_Users.php',
@@ -452,6 +437,30 @@ include("../html/data_treatment/connect_database.php");
         // Initial update
         updateOnlineUsers();
 
+        function addToCart(button) {
+        var itemId = button.getAttribute("data-item-id");
+        var itemName = button.getAttribute("data-item-name");
+        var itemPrice = button.getAttribute("data-item-price");
+        var itemQuantity = document.getElementById("quantity" + itemId).value;
+
+        // Faire une requête Ajax pour ajouter l'article au panier
+        $.ajax({
+            url: '../html/data_treatment/AJAX/modifier_panier.php',
+            method: 'POST',
+            data: {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemQuantity: itemQuantity
+            },
+            dataType: 'json',
+            success: function (response) {
+                alert(response.message); // Vous pouvez personnaliser cela en fonction de votre logique
+            },
+            error: function (error) {
+                console.error(error);
+            }
+        });
+    }
 
         </script>
     </body>