Changeset 3452209

Timestamp:

02/02/2026 03:11:01 PM (3 weeks ago)

Author:

wpaladin

Message:

Update: version 1.2.0 – added qty input

Location:

sidebar-category-tabs/trunk

Files:

• README.md (modified) (3 diffs)
• assets/css/style.css (modified) (1 diff)
• assets/js/script.js (modified) (4 diffs)
• sidebar-category-tabs.php (modified) (2 diffs)
• templates/product-template.php (modified) (1 diff)

sidebar-category-tabs/trunk/README.md

@@ -6 +6 @@
 Requires at least: 5.0
 Tested up to: 6.8.2
-Stable tag: 1.1.0
+Stable tag: 1.2.0
 Requires PHP: 7.4
 License: GPLv2 or later
@@ -20 +20 @@
 
 * **Sidebar Navigation:** Displays WooCommerce product categories as tabs in a sidebar.
+* **Quantity Controls:** Easily adjust product quantities with + and - buttons before adding to cart.
 * **Customizable Design:** Add custom CSS for styling to match your theme.
 * **AJAX Loading:** Dynamically load products without refreshing the page for a smooth user experience.
@@ -82 +83 @@
   * Button style CSS fixes
 
+= 1.2.0 =
+* 1.2.0 release with features:
+  * Added product quantity controls with + and - buttons
+  * Quantity selector allows customers to set custom quantity before adding to cart
+  * Minimum quantity validation (default: 1)
+  * Improved user experience for bulk purchasing
+
 == Upgrade Notice ==
 

sidebar-category-tabs/trunk/assets/css/style.css

@@ -173 +173 @@
 }
 
+/* 3.5. Quantity Controls */
+.sidebar-category-tabs .quantity-wrapper {
+  color: #000;
+  background: #fff;
+  justify-content: center;
+  display: flex;
+  gap: 0;
+  align-items: center;
+  overflow: hidden;
+  width: fit-content;
+  margin: 10px auto;
+  border-radius: 5px;
+}
+
+.sidebar-category-tabs .quantity-btn,
+.sidebar-category-tabs .product-quantity {
+  background-color: transparent;
+  color: inherit;
+  font-weight: bold;
+  font-size: inherit;
+  border: none;
+  display: inline-block;
+  min-width: 0;
+  height: 2.5rem;
+  line-height: 1;
+  transition: background-color 0.3s ease;
+}
+
+.sidebar-category-tabs .quantity-wrapper .quantity-btn {
+  background-color: transparent;
+}
+
+.sidebar-category-tabs .quantity-btn:focus,
+.sidebar-category-tabs .product-quantity:focus {
+  outline: none;
+}
+
+.sidebar-category-tabs .quantity-btn {
+  padding: 0;
+  cursor: pointer;
+  width: 2.5rem;
+  font-size: 1.25em;
+  text-indent: -100px;
+  overflow: hidden;
+  position: relative;
+}
+
+.sidebar-category-tabs .quantity-btn::after,
+.sidebar-category-tabs .quantity-btn::before {
+  content: "";
+  height: 2px;
+  width: 10px;
+  position: absolute;
+  display: block;
+  background: #000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.sidebar-category-tabs .quantity-btn:disabled {
+  color: #ccc;
+  background: #f0f0f0;
+  cursor: not-allowed;
+  border-color: transparent;
+}
+.sidebar-category-tabs .quantity-btn:disabled::after,
+.sidebar-category-tabs .quantity-btn:disabled::before {
+  background: #ccc;
+}
+
+.sidebar-category-tabs .quantity-btn:hover {
+  background-color: #e76f51;
+}
+
+.sidebar-category-tabs .quantity-btn.qty-minus {
+  border-right: 1px solid #e2e2e2;
+}
+
+.sidebar-category-tabs .quantity-btn.qty-plus {
+  border-left: 1px solid #e2e2e2;
+}
+.sidebar-category-tabs .quantity-btn.qty-plus::after {
+  transform: rotate(90deg);
+}
+
+.sidebar-category-tabs .product-quantity {
+  width: 50px;
+  min-width: 0;
+  display: inline-block;
+  text-align: center;
+  appearance: textfield;
+}
+
+.sidebar-category-tabs .product-quantity::-webkit-outer-spin-button,
+.sidebar-category-tabs .product-quantity::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.sidebar-category-tabs .product-quantity[type=number] {
+  -moz-appearance: textfield;
+}
+
 /* ========================================
  * 4. Pagination

sidebar-category-tabs/trunk/assets/js/script.js

@@ -158 +158 @@
   
   /**
+   * Handles quantity controls (+ and - buttons)
+   */
+  function wsctHandleQuantityControls() {
+      $(document).off('click', '.quantity-btn').on('click', '.quantity-btn', function(e) {
+          e.preventDefault();
+          
+          const button = $(this);
+          const productId = button.data('product-id');
+          const quantityInput = $('[data-product-id="' + productId + '"].product-quantity');
+          let currentQty = parseInt(quantityInput.val());
+          
+          if (button.hasClass('qty-plus')) {
+              quantityInput.val(currentQty + 1);
+          } else if (button.hasClass('qty-minus') && currentQty > 1) {
+              quantityInput.val(currentQty - 1);
+          }
+      });
+  }
+
+  /**
    * Handles adding products to cart
    */
@@ -166 +186 @@
           const button = $(this);
           const productId = button.data('product-id');
+          const quantityInput = button.closest('.product-content').find('[data-product-id="' + productId + '"].product-quantity');
+          const quantity = quantityInput.length ? parseInt(quantityInput.val()) : 1;
           
           // Disable the button while processing
@@ -177 +199 @@
                   action: 'woocommerce_add_to_cart',
                   product_id: productId,
+                  quantity: quantity,
                   security: wsct_data.nonce,
               },
@@ -217 +240 @@
       });
       
+      wsctHandleQuantityControls();
       wsctHandleAddToCart();
   });

sidebar-category-tabs/trunk/sidebar-category-tabs.php

@@ -3 +3 @@
      * Plugin Name: Sidebar Category Tabs for WooCommerce
      * Description: A WooCommerce plugin that displays category tabs in a sidebar for easy navigation.
-     * Version: 1.1.0
+     * Version: 1.2.0
      * Author: WPaladin
      * License: GPL-2.0+
@@ -18 +18 @@
 
     // Define plugin constants
-    define( 'WSCT_VERSION', '1.0.0' );
+    define( 'WSCT_VERSION', '1.2.0' );
     define( 'WSCT_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
     define( 'WSCT_PLUGIN_URL', plugin_dir_url( __FILE__ ) );

sidebar-category-tabs/trunk/templates/product-template.php

@@ -44 +44 @@
             ?>
         </p>
+        <div class="quantity-wrapper">
+            <button class="quantity-btn qty-minus" data-product-id="<?php echo esc_attr( $product->get_id() ); ?>">−</button>
+            <input type="number" class="product-quantity" value="1" min="1" data-product-id="<?php echo esc_attr( $product->get_id() ); ?>" readonly />
+            <button class="quantity-btn qty-plus" data-product-id="<?php echo esc_attr( $product->get_id() ); ?>">+</button>
+        </div>
         <button class="add-to-cart" data-product-id="<?php echo esc_attr( $product->get_id() ); ?>"><?php echo esc_html__( 'Add to Cart', 'sidebar-category-tabs' ); ?></button>
     </div>