feat: add jquery (#37)

sfeir-open-source · Dec 3, 2024 · 654d52e · 654d52e
1 parent 6bf04ed
commit 654d52e
Show file tree

Hide file tree

Showing 20 changed files with 161 additions and 5 deletions.
diff --git a/steps/02.01-stability-solution/public/scripts/product.js b/steps/02.01-stability-solution/public/scripts/product.js
@@ -0,0 +1,13 @@
+$(document).ready(function () {
+  $(document).on('click', '#increase-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    $('#quantity').val(qty + 1);
+  });
+
+  $(document).on('click', '#decrease-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    if (qty > 1) {
+      $('#quantity').val(qty - 1);
+    }
+  });
+});
diff --git a/steps/02.01-stability-solution/public/styles/main.css b/steps/02.01-stability-solution/public/styles/main.css
@@ -386,6 +386,12 @@ body {
 }
 
 .conversion__price {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.conversion__price-amount {
   font-size: 1.5rem;
   font-weight: 700;
 }

diff --git a/steps/02.01-stability-solution/server/views/pages/product.njk b/steps/02.01-stability-solution/server/views/pages/product.njk
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/styles/relatedProducts.css" />
     <link rel="stylesheet" href="/styles/footer.css" />
     <script src="/scripts/tracking.js"></script>
+    <script src="/scripts/product.js"></script>
     <link rel="stylesheet" href="/styles/main.css" />
   </head>
   <body>

diff --git a/steps/02.01-stability-solution/server/views/partials/conversion-stock.njk b/steps/02.01-stability-solution/server/views/partials/conversion-stock.njk
@@ -23,7 +23,14 @@
     </ul>
   </fieldset>
   <div class="conversion__buy">
-      <span class="conversion__price">{{ sizes[0].price.amount }}€</span>
+    <div class="conversion__price">
+      <span class="conversion__price-amount">{{ sizes[0].price.amount }}€</span>
+      <div class="quantity">
+        <button id="decrease-qty" class="btn btn-small btn-quantity btn-light" type="button">-</button>
+        <input id="quantity" class="input-quantity form-control" type="number" value="1" min="1" max="10">
+        <button id="increase-qty" class="btn btn-small btn-quantity btn-light" type="button">+</button>
+      </div>
+      </div>
       <button id="btn-add-to-cart" class="btn btn-primary btn-big conversion_add" disabled="disabled">
         <strong>Ajouter au panier</strong>
       </button>

diff --git a/steps/02.01-stability/public/scripts/product.js b/steps/02.01-stability/public/scripts/product.js
@@ -0,0 +1,13 @@
+$(document).ready(function () {
+  $(document).on('click', '#increase-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    $('#quantity').val(qty + 1);
+  });
+
+  $(document).on('click', '#decrease-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    if (qty > 1) {
+      $('#quantity').val(qty - 1);
+    }
+  });
+});
diff --git a/steps/02.01-stability/public/styles/main.css b/steps/02.01-stability/public/styles/main.css
@@ -384,6 +384,12 @@ body {
 }
 
 .conversion__price {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.conversion__price-amount {
   font-size: 1.5rem;
   font-weight: 700;
 }
@@ -441,6 +447,27 @@ body {
   border-color: #000;
 }
 
+/* Quantity */
+.quantity {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-2);
+}
+
+.btn-quantity {
+  color: var(--color-anthracite);
+  min-width: 2rem;
+}
+
+.btn-quantity:disabled {
+  color: var(--color-bg-secondary);
+}
+
+.input-quantity {
+  width: 4rem;
+  text-align: center;
+}
+
 /* Product title */
 .product-title {
   font-size: var(--font-size-xl);

diff --git a/steps/02.01-stability/server/views/pages/product.njk b/steps/02.01-stability/server/views/pages/product.njk
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/styles/relatedProducts.css" />
     <link rel="stylesheet" href="/styles/footer.css" />
     <script src="/scripts/tracking.js"></script>
+    <script src="/scripts/product.js"></script>
     <link rel="stylesheet" href="/styles/main.css" />
   </head>
   <body>

diff --git a/steps/02.01-stability/server/views/partials/conversion-stock.njk b/steps/02.01-stability/server/views/partials/conversion-stock.njk
@@ -23,7 +23,14 @@
     </ul>
   </fieldset>
   <div class="conversion__buy">
-      <span class="conversion__price">{{ sizes[0].price.amount }}€</span>
+    <div class="conversion__price">
+      <span class="conversion__price-amount">{{ sizes[0].price.amount }}€</span>
+      <div class="quantity">
+        <button id="decrease-qty" class="btn btn-small btn-quantity btn-light" type="button">-</button>
+        <input id="quantity" class="input-quantity form-control" type="number" value="1" min="1" max="10">
+        <button id="increase-qty" class="btn btn-small btn-quantity btn-light" type="button">+</button>
+      </div>
+      </div>
       <button id="btn-add-to-cart" class="btn btn-primary btn-big conversion_add" disabled="disabled">
         <strong>Ajouter au panier</strong>
       </button>

diff --git a/steps/02.02-fonts-solution/public/scripts/product.js b/steps/02.02-fonts-solution/public/scripts/product.js
@@ -0,0 +1,13 @@
+$(document).ready(function () {
+  $(document).on('click', '#increase-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    $('#quantity').val(qty + 1);
+  });
+
+  $(document).on('click', '#decrease-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    if (qty > 1) {
+      $('#quantity').val(qty - 1);
+    }
+  });
+});
diff --git a/steps/02.02-fonts-solution/public/styles/main.css b/steps/02.02-fonts-solution/public/styles/main.css
@@ -291,6 +291,12 @@ body {
 }
 
 .conversion__price {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.conversion__price-amount {
   font-size: 1.5rem;
   font-weight: 700;
 }

diff --git a/steps/02.02-fonts-solution/server/views/pages/product.njk b/steps/02.02-fonts-solution/server/views/pages/product.njk
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/styles/relatedProducts.css" />
     <link rel="stylesheet" href="/styles/footer.css" />
     <script src="/scripts/tracking.js"></script>
+    <script src="/scripts/product.js"></script>
     <link rel="stylesheet" href="/styles/main.css" />
   </head>
   <body>

diff --git a/steps/02.02-fonts-solution/server/views/partials/conversion-stock.njk b/steps/02.02-fonts-solution/server/views/partials/conversion-stock.njk
@@ -23,7 +23,14 @@
     </ul>
   </fieldset>
   <div class="conversion__buy">
-      <span class="conversion__price">{{ sizes[0].price.amount }}€</span>
+    <div class="conversion__price">
+      <span class="conversion__price-amount">{{ sizes[0].price.amount }}€</span>
+      <div class="quantity">
+        <button id="decrease-qty" class="btn btn-small btn-quantity btn-light" type="button">-</button>
+        <input id="quantity" class="input-quantity form-control" type="number" value="1" min="1" max="10">
+        <button id="increase-qty" class="btn btn-small btn-quantity btn-light" type="button">+</button>
+      </div>
+      </div>
       <button id="btn-add-to-cart" class="btn btn-primary btn-big conversion_add" disabled="disabled">
         <strong>Ajouter au panier</strong>
       </button>

diff --git a/steps/02.02-fonts/public/scripts/product.js b/steps/02.02-fonts/public/scripts/product.js
@@ -0,0 +1,13 @@
+$(document).ready(function () {
+  $(document).on('click', '#increase-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    $('#quantity').val(qty + 1);
+  });
+
+  $(document).on('click', '#decrease-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    if (qty > 1) {
+      $('#quantity').val(qty - 1);
+    }
+  });
+});
diff --git a/steps/02.02-fonts/public/styles/main.css b/steps/02.02-fonts/public/styles/main.css
@@ -386,6 +386,12 @@ body {
 }
 
 .conversion__price {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.conversion__price-amount {
   font-size: 1.5rem;
   font-weight: 700;
 }

diff --git a/steps/02.02-fonts/server/views/pages/product.njk b/steps/02.02-fonts/server/views/pages/product.njk
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/styles/relatedProducts.css" />
     <link rel="stylesheet" href="/styles/footer.css" />
     <script src="/scripts/tracking.js"></script>
+    <script src="/scripts/product.js"></script>
     <link rel="stylesheet" href="/styles/main.css" />
   </head>
   <body>

diff --git a/steps/02.02-fonts/server/views/partials/conversion-stock.njk b/steps/02.02-fonts/server/views/partials/conversion-stock.njk
@@ -23,7 +23,14 @@
     </ul>
   </fieldset>
   <div class="conversion__buy">
-      <span class="conversion__price">{{ sizes[0].price.amount }}€</span>
+    <div class="conversion__price">
+      <span class="conversion__price-amount">{{ sizes[0].price.amount }}€</span>
+      <div class="quantity">
+        <button id="decrease-qty" class="btn btn-small btn-quantity btn-light" type="button">-</button>
+        <input id="quantity" class="input-quantity form-control" type="number" value="1" min="1" max="10">
+        <button id="increase-qty" class="btn btn-small btn-quantity btn-light" type="button">+</button>
+      </div>
+      </div>
       <button id="btn-add-to-cart" class="btn btn-primary btn-big conversion_add" disabled="disabled">
         <strong>Ajouter au panier</strong>
       </button>

diff --git a/steps/03.01-speed-size/public/scripts/product.js b/steps/03.01-speed-size/public/scripts/product.js
@@ -0,0 +1,13 @@
+$(document).ready(function () {
+  $(document).on('click', '#increase-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    $('#quantity').val(qty + 1);
+  });
+
+  $(document).on('click', '#decrease-qty', function () {
+    let qty = parseInt($('#quantity').val(), 10) || 0;
+    if (qty > 1) {
+      $('#quantity').val(qty - 1);
+    }
+  });
+});
diff --git a/steps/03.01-speed-size/public/styles/main.css b/steps/03.01-speed-size/public/styles/main.css
@@ -291,6 +291,12 @@ body {
 }
 
 .conversion__price {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.conversion__price-amount {
   font-size: 1.5rem;
   font-weight: 700;
 }

diff --git a/steps/03.01-speed-size/server/views/pages/product.njk b/steps/03.01-speed-size/server/views/pages/product.njk
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/styles/relatedProducts.css" />
     <link rel="stylesheet" href="/styles/footer.css" />
     <script src="/scripts/tracking.js"></script>
+    <script src="/scripts/product.js"></script>
     <link rel="stylesheet" href="/styles/main.css" />
   </head>
   <body>

diff --git a/steps/03.01-speed-size/server/views/partials/conversion-stock.njk b/steps/03.01-speed-size/server/views/partials/conversion-stock.njk
@@ -23,7 +23,14 @@
     </ul>
   </fieldset>
   <div class="conversion__buy">
-      <span class="conversion__price">{{ sizes[0].price.amount }}€</span>
+    <div class="conversion__price">
+      <span class="conversion__price-amount">{{ sizes[0].price.amount }}€</span>
+      <div class="quantity">
+        <button id="decrease-qty" class="btn btn-small btn-quantity btn-light" type="button">-</button>
+        <input id="quantity" class="input-quantity form-control" type="number" value="1" min="1" max="10">
+        <button id="increase-qty" class="btn btn-small btn-quantity btn-light" type="button">+</button>
+      </div>
+      </div>
       <button id="btn-add-to-cart" class="btn btn-primary btn-big conversion_add" disabled="disabled">
         <strong>Ajouter au panier</strong>
       </button>