From 3a0f07e6fafbdb8c3bf993c8dc59bb8673ad0818 Mon Sep 17 00:00:00 2001
From: Stacy <stacyjoycemapano@gmail.com>
Date: Tue, 23 Apr 2024 09:10:36 +0800
Subject: [PATCH] Product Single page CSS & Double click add to cart UI issue

---
 header.php               |  28 +++++++---
 product-left-sidebar.php | 109 ++++++++++++++++++++++-----------------
 2 files changed, 85 insertions(+), 52 deletions(-)

diff --git a/header.php b/header.php
index 27c737d..2d002dc 100644
--- a/header.php
+++ b/header.php
@@ -140,6 +140,8 @@ if ($_SESSION["userId"] <> "") {
             line-height: 1;
         }
     </style>
+
+
     <!--Ec Header Top Start -->
     <div class="header-top">
         <div class="container">
@@ -180,6 +182,7 @@ if ($_SESSION["userId"] <> "") {
                             <?php } ?> 
                             
                         </div>
+
                         <script>
                             function displayPopup() {
                                 // Show the pop-up
@@ -205,6 +208,7 @@ if ($_SESSION["userId"] <> "") {
 
                             }
                         </script>
+
                         <!-- Newsletter Modal Start -->
                         <div id="ec-popnews-bg2"></div>
                         <div id="ec-popnews-box2">
@@ -308,6 +312,7 @@ if ($_SESSION["userId"] <> "") {
         </div>
     </div>
     <!-- Ec Header Top  End -->
+
     <!-- Ec Header Bottom  Start -->
     <div class="ec-header-bottom d-none d-lg-block">
         <div class="container position-relative">
@@ -428,19 +433,30 @@ if ($_SESSION["userId"] <> "") {
                                                               </a>
                                                                 <div class="ec-pro-content">
 
-                                                                    <a href="product-left-sidebar.php?id=<?php echo $order['items'][0]['product']['product_id']; ?>" class="cart_pro_title"><?php echo $order['items'][0]['product']['name']; ?></a>
+                                                                    <a href="product-left-sidebar.php?id=<?php echo $order['items'][0]['product']['product_id']; ?>" class="cart_pro_title">
+                                                                        <?php echo $order['items'][0]['product']['name']; ?>
+                                                                    </a>
                                                                     <span class="cart-price">Unit Price: <span><?php echo $order['items'][0]['price']; ?></span></span>
                                                                     <div class="cart-price">
                                                                         <span class="subtotal-<?php echo $order['_id']; ?>">Subtotal: <?php echo $order['total_amount'] ?></span>
                                                                     </div>
                                                                     <!-- 02-16-2024 Stacy added style -->
-                                                                    <div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; padding-top:10px;">
-                                                                        <div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="qtyDecrement('<?php echo $order['_id']; ?>' , '<?php echo $order['items'][0]['_id']; ?>')">-</div>
-                                                                        <input style="width:100px; height:40px" id="qty-input-<?php echo $order['items'][0]['_id']; ?>" class="qty-input" type="number" name="ec_qtybtn" value="<?php echo $order['items'][0]['quantity']; ?>" oninput="handleQtyInput(this, '<?php echo $order['_id']; ?>', '<?php echo $order['items'][0]['_id']; ?>')" />
-                                                                        <div class="qty-btn" style="color:#ffaa00; font-size:30px; padding-left:5px; cursor: pointer;" onclick="qtyIncrement('<?php echo $order['_id']; ?>' , '<?php echo $order['items'][0]['_id']; ?>', false)">+</div>
+                                                                    <div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; margin-top:5px;">
+                                                                        <div class="qty-btn" style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;" onclick="qtyDecrement('<?php echo $order['_id']; ?>' , 
+                                                                            '<?php echo $order['items'][0]['_id']; ?>')" onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">-
+                                                                        </div>
+                                                                        <input style="width:100px; height:40px" id="qty-input-<?php echo $order['items'][0]['_id']; ?>" class="qty-input" type="number" 
+                                                                            name="ec_qtybtn" value="<?php echo $order['items'][0]['quantity']; ?>" oninput="handleQtyInput(this, '<?php echo $order['_id']; ?>', 
+                                                                                '<?php echo $order['items'][0]['_id']; ?>')" />
+                                                                        <div class="qty-btn" style="color:#ffaa00; font-size:30px; margin-left:5px; cursor: pointer;" onclick="qtyIncrement('<?php echo $order['_id']; ?>' , 
+                                                                            '<?php echo $order['items'][0]['_id']; ?>', false)" onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">+
+                                                                        </div>
                                                                         <!-- <a  class="remove">x</a> -->
                                                                         <!-- <a href="#" class="removeCart" onclick="deleteOrder('<?php #echo $order['_id']; ?>')">x</a> -->
-                                                                        <a href="#" class="removeCart" onclick="deleteOrder('<?php echo $order['_id']; ?>')"><i class="ecicon eci-trash" style="padding:20px; opacity:70%"></i></a>
+                                                                        <a href="#" class="removeCart" style="margin-left:30px;" onclick="deleteOrder('<?php echo $order['_id']; ?>')">
+                                                                            <i class="ecicon eci-trash" style="color:#7e7e7e;" onmouseover="this.style.color='#aaaaaa'" 
+                                                                                onmouseout="this.style.color='#7e7e7e'"></i>
+                                                                        </a>
                                                                     </div>
                                                                     <!-- 02-16-2024 Stacy added style -->
                                                                 </div>
diff --git a/product-left-sidebar.php b/product-left-sidebar.php
index 2849855..996e769 100644
--- a/product-left-sidebar.php
+++ b/product-left-sidebar.php
@@ -490,25 +490,31 @@ if (isset($_GET['id'])) {
                                                     $product_price = (!empty($product_details['sale_price'])) ? $product_details['sale_price'] : $product_details['regular_price'] ;
                                                     if ($_SESSION["isLoggedIn"]) {
                                                         if ($product_details['product_type'] === "variable") {
-                                                            echo '<div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="decrement()">-</div>';
+                                                            echo '<div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="decrement()"
+                                                                    onmouseover="this.style.color=\'#a15d00\'" onmouseout="this.style.color=\'#ffaa00\'">-</div>';
                                                             echo '<input class="qty-inputs" style="width:110px; height:40px" type="number" name="ec_qtybtn" value="';
                                                             echo (!empty($product_details['minimum_order'])) ? $product_details['minimum_order'] : "1";
-                                                            echo '" id="qty-input" oninput="handleInput()"  />';
-                                                            echo '<div class="qty-btn" style="color:#ffaa00; font-size:25px; padding-left:5px; cursor: pointer;" onclick="increment()">+</div>';
-                                                            echo '<div style="display:flex; margin-left:45px;"><button type="button" class="btn btn-primary" id="contactSellerButton" style="background:#ffaa00; width:190px;" data-bs-toggle="modal" data-bs-target="#priceModal"><i class="fi-rr-envelope" style="font-size:20px; margin-bottom:-3px; margin-right:10px;"></i>Contact Seller</button>';
+                                                            echo '" id="qty-input" />';
+                                                            echo '<div class="qty-btn" style="color:#ffaa00; font-size:25px; padding-left:5px; cursor: pointer;" onclick="increment()"
+                                                                    onmouseover="this.style.color=\'#a15d00\'" onmouseout="this.style.color=\'#ffaa00\'">+</div>';
+                                                            echo '<div style="display:flex; margin-left:45px;"><button type="button" class="btn btn-primary" id="contactSellerButton" style="background:#ffaa00; width:190px;" 
+                                                                    data-bs-toggle="modal" data-bs-target="#priceModal"><i class="fi-rr-envelope" style="font-size:20px; margin-bottom:-3px; margin-right:10px;"></i>Contact Seller</button>';
                                                             echo '<button class="btn btn-primary" id="addToCartButton" style="display:none">Add To Cart</button>';
                                                             echo '<div class="ec-single-wishlist">
                                                                     <a class="ec-btn-group wishlist" title="Wishlist" onclick="wishlist()"><i class="fi fi-rr-heart" style="color:#B80F0A; font-size:20px;"></i></a>
                                                                 </div></div>';
                                                         } else {
                                                             if (!empty($product_details['regular_price']) || !empty($product_details['sale_price'])) {
-                                                                echo '<div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="decrement()">-</div>';
+                                                                echo '<div class="qty-btn" style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;" onclick="decrement()"
+                                                                        onmouseover="this.style.color=\'#a15d00\'" onmouseout="this.style.color=\'#ffaa00\'">-</div>';
                                                                 echo '<input class="qty-inputs" style="width:100px; height:40px" type="number" name="ec_qtybtn" value="';
                                                                 echo (!empty($product_details['minimum_order'])) ? $product_details['minimum_order'] : "1";
-                                                                echo '" id="qty-input" oninput="handleInput()"  />';
-                                                                echo '<div class="qty-btn" style="color:#ffaa00; font-size:25px; padding-left:5px; cursor: pointer;" onclick="increment()">+</div>';
-                                                                // echo '<div id="addToCartMessage" style="border:1px solid red;"></div>';
-                                                                echo '<div> <div id="addToCartMessage" style="padding-left:45px;"></div> <button class="btn btn-primary" id="addToCartButton" style="text-wrap:nowrap; background:#ffaa00; margin-left:55px;"><i class="fi-rr-shopping-bag" style="font-size:20px; margin-bottom:-3px; margin-right:10px;"></i>Add To Cart</button></div>';
+                                                                echo '" id="qty-input" />';
+                                                                echo '<div class="qty-btn" style="color:#ffaa00; font-size:25px; margin-left:5px; cursor: pointer;" onclick="increment()" 
+                                                                        onmouseover="this.style.color=\'#a15d00\'" onmouseout="this.style.color=\'#ffaa00\'">+</div>';
+                                                                echo '<div> <div id="addToCartMessage" style="padding-left:45px;"></div> <button class="btn btn-primary" id="addToCartButton" style="text-wrap:nowrap; 
+                                                                        background:#ffaa00; margin-left:55px;" onmouseover="this.style.background=\'#df9000\'" onmouseout="this.style.background=\'#ffaa00\'">
+                                                                            <i class="fi-rr-shopping-bag" style="font-size:20px; margin-bottom:-3px; margin-right:10px;"></i>Add To Cart</button></div>';
                                                                 echo '<div class="ec-single-wishlist">
                                                                     <a class="ec-btn-group wishlist" title="Wishlist" onclick="wishlist()"><i class="fi fi-rr-heart" style="color:#B80F0A; font-size:20px;"></i></a>
                                                                 </div>';
@@ -518,7 +524,8 @@ if (isset($_GET['id'])) {
                                                         }
                                                     } else {
                                                         echo '<div class="login-button" style=""><p style="color:red; text-wrap:nowrap;">Please log in to your account.</p>';
-                                                        echo '<a href="login.php" style="margin-left:-2px;"><button type="button" class="btn btn-primary" style="margin-left:-2px; margin-top:-20px; background:#ffaa00; border-radius:10px; letter-spacing:1px;" data-bs-toggle="modal">LOGIN</button></a></div>';
+                                                        echo '<a href="login.php" style="margin-left:-2px;"><button type="button" class="btn btn-primary" style="margin-left:-2px; margin-top:-20px; background:#ffaa00; 
+                                                                border-radius:10px; letter-spacing:1px;" data-bs-toggle="modal">LOGIN</button></a></div>';
                                                     }
                                                     ?>
                                                     <!-- <div class="ec-single-wishlist" style="border: 1px solid yellow;">
@@ -1087,25 +1094,29 @@ if (isset($_GET['id'])) {
                                                                     newOrder.id = `order_${response._id}`;
                                                                     console.log(response)
                                                                     newOrder.innerHTML = `
-                                                                    <a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img">
-                                                                        <img src="${response.items[0].product.product_image}" alt="product">
-                                                                    </a>
-                                                                    <div class="ec-pro-content">
-                                                                        <a href="shop-left-sidebar-col-4.php" class="cart_pro_title">${response.items[0].product.name}</a>
-                                                                        <span class="cart-price" id="cart-price">
-                                                                            Unit Price: <span>${response.items[0].price}</span> 
-                                                                        </span>
-                                                                        <span id="subtotal-${response._id}" class="subtotal-${response._id}">Subtotal: ${totalAmount}</span>
-                                                                        <!-- 02-16-2024 Stacy added style -->
-                                                                        <div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; padding-top:10px;">
-                                                                            <div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="qtyDecrement('${response._id}', '${response.items[0]._id}', true)">-</div>
-                                                                            <input style="width:100px; height:40px" id="qty-input-${response.items[0]._id}" class="qty-input" type="number" name="ec_qtybtn" value="${productData.quantity}" oninput="handleQtyInput(this, '${response._id}', '${response.items[0]._id}', true)"/>
-                                                                            <div class="qty-btn" style="color:#ffaa00; font-size:30px; padding-left:5px; cursor: pointer;" onclick="qtyIncrement('${response._id}', '${response.items[0]._id}', true)">+</div>
-                                                                            <a href="#" class="removeCart" onclick="deleteOrder('${response._id}')"><i class="ecicon eci-trash" style="padding:20px; opacity:70%"></i></a>
-                                                                        </div>
-                                                                        <!-- 02-16-2024 Stacy added style -->
-                                                                    </div>
-                                                                `;
+                                                                                            <a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img">
+                                                                                                <img src="${response.items[0].product.product_image}" alt="product">
+                                                                                            </a>
+                                                                                            <div class="ec-pro-content">
+                                                                                                <a href="shop-left-sidebar-col-4.php" class="cart_pro_title">${response.items[0].product.name}</a>
+                                                                                                <span class="cart-price" id="cart-price">
+                                                                                                    Unit Price: <span>${response.items[0].price}</span> 
+                                                                                                </span>
+                                                                                                <span id="subtotal-${response._id}" class="subtotal-${response._id}">Subtotal: ${totalAmount}</span>
+                                                                                                <!-- 02-16-2024 Stacy added style -->
+                                                                                                <div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; margin-top:5px;">
+                                                                                                    <div class="qty-btn" style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;" onclick="qtyDecrement('${response._id}', '${response.items[0]._id}', true)"
+                                                                                                        onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">-</div>
+                                                                                                    <input style="width:100px; height:40px" id="qty-input-${response.items[0]._id}" class="qty-input" type="number" name="ec_qtybtn" value="${productData.quantity}" oninput="handleQtyInput(this, '${response._id}', '${response.items[0]._id}', true)"/>
+                                                                                                    <div class="qty-btn" style="color:#ffaa00; font-size:30px; margin-left:5px; cursor: pointer;" onclick="qtyIncrement('${response._id}', '${response.items[0]._id}', true)"
+                                                                                                        onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">+</div>
+                                                                                                    <a href="#" class="removeCart" style="margin-left:30px;" onclick="deleteOrder('${response._id}')">
+                                                                                                        <i class="ecicon eci-trash" style="color:#7e7e7e;" onmouseover="this.style.color='#aaaaaa'" 
+                                                                                                            onmouseout="this.style.color='#7e7e7e'"></i></a>
+                                                                                                </div>
+                                                                                                <!-- 02-16-2024 Stacy added style -->
+                                                                                            </div>
+                                                                                        `;
                                                                     getLatestOrders()
                                                                     updateCartItemCount()
                                                                     cartList.appendChild(newOrder);
@@ -1166,23 +1177,29 @@ if (isset($_GET['id'])) {
                                                                         var totalAmount = response.items[0].price * updatedQuantity;
                                                                         // If the cart item already exists, update its content using innerHTML
                                                                         cartItem.innerHTML = `
-        <a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img">
-            <img src="${response.items[0].product.product_image}" alt="product">
-        </a>
-        <div class="ec-pro-content">
-            <a href="shop-left-sidebar-col-4.php" class="cart_pro_title">${response.items[0].product.name}</a>
-            <span class="cart-price" id="cart-price">
-                Unit Price: <span>${response.items[0].price}</span> 
-            </span>
-            <span id="subtotal-${response._id}" class="subtotal-${response._id}">Subtotal: ${totalAmount}</span>
-            <div class="qty-plus-minuses">
-                <div class="qty-btn" onclick="qtyDecrement('${response._id}', '${response.items[0]._id}', true)">-</div>
-                <input id="qty-input-${response.items[0]._id}" class="qty-input" type="number" name="ec_qtybtn" value="${productData.quantity}" oninput="handleQtyInput(this, '${response._id}', '${response.items[0]._id}', true)"/>
-                <div class="qty-btn" onclick="qtyIncrement('${response._id}', '${response.items[0]._id}', true)">+</div>
-            </div>
-            <a href="#" class="removeCart" onclick="deleteOrder('${response._id}')">x</a>
-        </div>
-    `;
+                                                                                                <a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img">
+                                                                                                    <img src="${response.items[0].product.product_image}" alt="product">
+                                                                                                </a>
+                                                                                                <div class="ec-pro-content">
+                                                                                                    <a href="shop-left-sidebar-col-4.php" class="cart_pro_title">${response.items[0].product.name}</a>
+                                                                                                    <span class="cart-price" id="cart-price">
+                                                                                                        Unit Price: <span>${response.items[0].price}</span> 
+                                                                                                    </span>
+                                                                                                    <span id="subtotal-${response._id}" class="subtotal-${response._id}">Subtotal: ${totalAmount}</span>
+                                                                                                    <!-- 04-17-2024 Stacy added style -->
+                                                                                                    <div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; margin-top:5px;">
+                                                                                                        <div class="qty-btn" style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;" onclick="qtyDecrement('${response._id}', '${response.items[0]._id}', true)"
+                                                                                                            onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">-</div>
+                                                                                                        <input style="width:100px; height:40px" id="qty-input-${response.items[0]._id}" class="qty-input" type="number" name="ec_qtybtn" value="${productData.quantity}" oninput="handleQtyInput(this, '${response._id}', '${response.items[0]._id}', true)"/>
+                                                                                                        <div class="qty-btn" style="color:#ffaa00; font-size:30px; margin-left:5px; cursor: pointer;" onclick="qtyIncrement('${response._id}', '${response.items[0]._id}', true)"
+                                                                                                            onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">+</div>
+                                                                                                        <a href="#" class="removeCart" style="margin-left:30px;" onclick="deleteOrder('${response._id}')">
+                                                                                                            <i class="ecicon eci-trash" style="color:#7e7e7e;" onmouseover="this.style.color='#aaaaaa'" 
+                                                                                                                onmouseout="this.style.color='#7e7e7e'"></i></a>
+                                                                                                    </div>
+                                                                                                    <!-- 04-17-2024 Stacy added style -->
+                                                                                                </div>
+                                                                                            `;
                                                                         document.getElementById(`qty-input-${response.items[0]._id}`).value = updatedQuantity;
                                                                     } else {
                                                                         // If the cart item doesn't exist, create a new one