add pdp

components/header/header.html

@@ -16,7 +16,7 @@
       <li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { echo "active";}?>">
         <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
       </li>
-      <li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
+      <li class="item <?php if($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
         <a href="/buy" class="label">acquistare</a>
       </li>
       <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
@@ -31,7 +31,7 @@
       <li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { echo "active";}?>">
         <a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a>
       </li>
-      <li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
+      <li class="item <?php if($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>">
         <a href="/buy" class="label">acquistare</a>
       </li>
       <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">

components/pdp/pdp.html

@@ -0,0 +1,41 @@
+<div class="component-pdp">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-md-10">
+        <div class="row">
+
+          <div class="col-12 pb-4">
+            <input type="text" class="input-gray" placeholder="Cerca...">
+          </div>
+
+          <div class="col-5">
+            <img class="image" src="/images/prod2.png">
+          </div>
+          <div class="col-4 px-3">
+            <h2 class="title">
+              Nome prodotto
+            </h2>
+            <span class="subtitle">
+              Dettagli
+            </span>
+            <span class="text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </span>
+          </div>
+          <div class="col-3">
+            <span class="price">17,90 €</span>
+            <button class="button button-black w-100">Aggiungi al carrello</button>
+            <div class="related">
+              <br><br>Prodotti correlati
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+      <div class="col-12 col-md-2 banner">
+        <br><br>banner
+      </div>
+    </div>
+  </div>
+</div>

components/pdp/pdp.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - pdp')
+
+})

components/pdp/pdp.scss

@@ -0,0 +1,54 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-pdp {
+  padding: 40px 0;
+
+  .banner {
+    background: $light-gray;
+    text-align: center;
+  }
+
+  .image {
+    width: 100%;
+  }
+
+  .title {
+    display: block;
+    font-size: $font-30;
+    font-weight: normal;
+    padding: 0 0 30px 0;
+    margin: 0;
+  }
+
+  .subtitle {
+    display: block;
+    font-size: $font-12;
+    text-transform: uppercase;
+    padding-bottom: 7px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid $gray;
+  }
+
+  .text {
+    display: block;
+    font-size: $font-12;
+    padding-bottom: 5px;
+  }
+
+  .price {
+    display: block;
+    font-size: $font-26;
+    font-weight: normal;
+    text-align: right;
+    padding: 0 0 20px 0;
+    margin: 0;
+  }
+
+  .related {
+    background: $light-gray;
+    text-align: center;
+    margin-top: 40px;
+    height: calc(100% - 130px);
+  }
+}

components/plp/plp.html

@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="col-12 col-md-2 banner">
-        banner
+        <br><br>banner
       </div>
     </div>
   </div>

components/productBox/productBox.html

@@ -1,8 +1,10 @@
 <div class="component-productBox">
-  <img class="image" src="/images/prod1.png">
-  <div class="d-flex">
-    <span class="title">Nome prodotto </span>
-    <span class="price">17,90 €</span>
-  </div>
+  <a href="/product">
+    <img class="image" src="/images/prod1.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto </span>
+      <span class="price">17,90 €</span>
+    </div>
+  </a>
   <button class="button button-black add-to-cart">Aggiungi al carrello</button>
 </div>

components/productBox/productBox.scss

@@ -18,6 +18,7 @@
     font-size: $font-16;
     font-weight: 600;
     line-height: $font-16;
+    color: $black;
   }
 
   .price {
@@ -27,6 +28,7 @@
     font-weight: light;
     text-align: right;
     white-space: no-wrap;
+    color: $black;
   }
 
   .add-to-cart{

components/productBox/productBox2.html

@@ -1,8 +1,10 @@
 <div class="component-productBox">
-  <img class="image" src="/images/prod2.png">
-  <div class="d-flex">
-    <span class="title">Nome prodotto Nome prodotto Nome prodotto </span>
-    <span class="price">170,90 €</span>
-  </div>
+  <a href="/product">
+    <img class="image" src="/images/prod2.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto Nome prodotto Nome prodotto </span>
+      <span class="price">170,90 €</span>
+    </div>
+  </a>
   <button class="button button-black add-to-cart">Aggiungi al carrello</button>
 </div>

components/productBox/productBox3.html

@@ -1,8 +1,10 @@
 <div class="component-productBox">
-  <img class="image" src="/images/prod3.png">
-  <div class="d-flex">
-    <span class="title">Nome prodotto</span>
-    <span class="price">7,90 €</span>
-  </div>
+  <a href="/product">
+    <img class="image" src="/images/prod3.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto</span>
+      <span class="price">7,90 €</span>
+    </div>
+  </a>
   <button class="button button-black add-to-cart">Aggiungi al carrello</button>
 </div>

components/productBox/productBox4.html

@@ -1,8 +1,10 @@
 <div class="component-productBox">
-  <img class="image" src="/images/prod4.png">
-  <div class="d-flex">
-    <span class="title">Nome prodotto</span>
-    <span class="price">8,90 €</span>
-  </div>
+  <a href="/product">
+    <img class="image" src="/images/prod4.png">
+    <div class="d-flex">
+      <span class="title">Nome prodotto</span>
+      <span class="price">8,90 €</span>
+    </div>
+  </a>
   <button class="button button-black add-to-cart">Aggiungi al carrello</button>
 </div>

pages/product.ejs

@@ -0,0 +1,4 @@
+${require('../components/pdp/pdp.html')}
+
+
+

src/scss/global.scss

@@ -4,7 +4,7 @@ body {
   font-weight: 400;
   letter-spacing: 1px;
   margin: 0;
-  color: $black;
+  color: $dark-gray;
   overflow-x: hidden;
 }
 

src/scss/main.scss

@@ -16,3 +16,4 @@
 @import "./components/home/home.scss";
 @import "./components/plp/plp.scss";
 @import "./components/productBox/productBox.scss";
+@import "./components/pdp/pdp.scss";