PR:handlebar section

assets/js/app.js

@@ -52,7 +52,10 @@ const pageClasses = {
     wishlists: () => import('./theme/wishlist'),
 };
 
-const customClasses = {};
+const customClasses = {
+    'pages\\custom\\product\\fashion_accesories': () => import('./custom/product/fashion_accessories'), // Windows
+    'pages/custom/product/fashion_accessories': () => import('./custom/product/fashion_accessories'), // Mac/Linu
+};
 
 /**
  * This function gets added to the global window and then called

assets/js/custom/product/fashion_accessories.js

@@ -0,0 +1,28 @@
+function addToCart(name, img, price) {
+  const shoppingList = document.querySelector('.bundle');
+  if (!shoppingList) {
+      console.error('Shopping list container not found');
+      return;
+  }
+  // Create a new list item for the selected product
+  const listItem = document.createElement('li');
+  // Create elements for image,name, price.
+  const nameSpan = document.createElement('span');
+  nameSpan.textContent = name;
+
+  const priceSpan = document.createElement('span');
+  priceSpan.textContent = ` ${price}`;
+
+  const imageSpan = document.createElement('img');
+  imageSpan.src = ` ${img}`;
+
+  imageSpan.width = 70;  // Adjust the width to 200px
+  imageSpan.height = 70; // Adjust the height to 150px
+  // Append all elements to the list item
+  listItem.appendChild(imageSpan);
+  listItem.appendChild(nameSpan);
+  listItem.appendChild(priceSpan);
+
+  // Append the new item to the shopping list
+  shoppingList.appendChild(listItem);
+}

assets/scss/custom/product/fashion_accessories.scss

@@ -0,0 +1,180 @@
+body {
+     overflow-x: hidden !important;
+}
+.page-wraper{
+    width: 98.6vw;
+    margin-left: calc(-50vw + 50%);
+    padding: 40px;
+}
+.row{
+    display: flex;
+    text-align: center;
+    background: whitesmoke;
+    border-radius: 25px !important; 
+    max-width: 81.42857rem;
+}
+#navbar {
+    position: sticky;
+    top: 0;
+    overflow: hidden;
+    background: whitesmoke;
+    z-index: 100;
+    border: 1px solid #dddd;
+
+}
+.bundle{
+    min-height: 100px;
+    max-width: 100%;
+    padding-top: 10px;
+    margin-top: 20px;
+    margin-bottom: 0px;
+    display: flex; 
+    align-items: center;
+    border-left: 1px solid rgb(0, 0, 0);
+    border-right: 1px solid rgb(0, 0, 0);
+}
+.bundle_left_image{
+    margin-top: 10px;
+    margin-bottom: 10px;
+    min-width: 100px;
+    max-width: 0px;
+    max-height: 120px;
+    min-height: 50px;
+}
+.center_bundle_img{
+    margin-top: 10px;
+}
+.left_bundle_title{
+    margin-top: 30px;
+    margin-bottom: 0px;
+    margin-left: 10px;
+    text-align: center;
+    font-size: 25px;
+    font-family: "Roobert-SemiBold";
+}
+.textunder_price {
+    font-size: 23px;
+    font-family: "Poppins", serif;
+    text-align: center;
+    margin-top: 40px;
+    margin-right: 40px;
+    padding-left: 0px;
+}
+.cart_button{
+    color: #ffffff !important;
+    background: linear-gradient(270deg, #990AE2 1.67%, #1485EF 96.39%);
+    border-radius: 5px !important;
+    cursor: pointer !important;
+    overflow: hidden !important;
+    font-weight: bolder !important;
+    margin: 40px 6px !important;
+    font-family: 'Roobert-Regular' !important;
+    width: 7rem !important;
+    height: 45px !important;
+    padding: 5px;
+
+}
+.cart-btn-text{
+    font-size: 15px !important;
+    text-align: center;
+    padding: 8px;
+    white-space: nowrap;
+}
+.accessories-row{
+    display: flex;
+    flex-direction: row;
+    flex-wrap:wrap;
+    background-color:white !important;
+
+}
+.accessories-list{
+    display: flex;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    width: 250px;
+    min-height: 350px;
+    max-height: 350px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: transform 0.2s ease;
+    margin: 20px;
+}
+.accessories-list:hover {
+    transform: translateY(-5px);
+  }
+.accessories-name{
+    display: flex;
+    text-align:left;
+    font-size: 19px;
+    font-weight: 800;
+    margin-bottom: 10px;
+    min-height: 50px;
+    max-height: 50px;
+}
+.accessories-price{
+    display: flex;
+    font-size: 19px;
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+.product-image{
+    min-height: 150px;
+    max-height: 150px;
+    object-fit: contain;
+    width: 100%;
+    text-align: center;
+}
+.accessories-button{
+    display: flex;
+    gap: 30px;
+    margin-left: 10px;
+}
+.accessories-list-button{
+    border-radius: 5px !important;
+    cursor: pointer !important;
+    overflow: hidden !important;
+    font-weight: bolder !important;
+    margin: 40px 0% !important;
+    font-family: 'Roobert-Regular' !important;
+    width: 6rem !important;
+    height: 35px !important;
+}
+.button-learn{
+    background:#bac0c5;
+    background-color:none;
+    text-align:center;
+    padding-left: 0px;
+    white-space: nowrap;
+    padding: 5px;
+}
+.button-bundle{
+    background: linear-gradient(270deg, #990AE2 1.67%, #1485EF 96.39%);
+    text-align: center;
+    white-space: nowrap;
+    padding: 5px;
+    color: white;
+    font-size: 12px;
+}
+.accessories-list-button {
+    display: flex;
+    justify-content: space-between;
+}
+.none{
+    display: flex;
+    background-color: #EFEFEF !important;
+    border-radius: 15px !important;
+    min-height: 300.4px;
+    min-width: 11px;
+    margin: 31px;
+    width: 230px;
+    height: 400px;
+    padding: 10px;
+}
+.none-image{
+    border-radius: 5px !important;
+    cursor: pointer !important;
+    background-color: #cdcdcd !important;
+    font-weight: bolder !important;
+    height: 35px !important;
+}

assets/scss/settings/global/_global.scss

@@ -31,8 +31,8 @@
 @import "overlay/overlay";
 
 // Set these to true so that Foundation styles are exposed from Citadel
-$include-html-classes: false !default;
-$include-print-styles: false !default;
+$include-html-classes: true !default;
+$include-print-styles: true !default;
 $include-html-global-classes: $include-html-classes !default;
 
 // These are needed when setting $include-html-classes to true, so that rems don't conflict with pixels.

assets/scss/theme.scss

@@ -77,3 +77,4 @@
 // -----------------------------------------------------------------------------
 
 @import "layouts/layouts"; // 1
+@import "./custom/product/fashion_accessories.scss";

templates/layout/base.html

@@ -8,6 +8,9 @@
         {{#block "head"}} {{/block}}
 
         <link href="{{ head.favicon }}" rel="shortcut icon">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <script>

templates/pages/custom/product/fashion_accessories.html

@@ -0,0 +1,100 @@
+---
+product:
+    videos:
+        limit: {{theme_settings.productpage_videos_count}}
+    reviews:
+        limit: {{theme_settings.productpage_reviews_count}}
+    related_products:
+        limit: {{theme_settings.productpage_related_products_count}}
+    similar_by_views:
+        limit: {{theme_settings.productpage_similar_by_views_count}}
+---
+{{inject 'productId' product.id}}
+{{inject 'relatedproducts' product.related_products}}
+
+{{#partial "page"}}
+
+    {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
+
+    {{#each product.shipping_messages}}
+        {{> components/common/alert/alert-info message}}
+    {{/each}}
+
+    <div>
+        {{> components/products/product-view}}
+
+        {{{region name="product_below_content"}}}
+
+        {{#if product.videos.list.length}}
+            {{> components/products/videos product.videos}}
+        {{/if}}
+
+        {{#all settings.show_product_reviews theme_settings.show_product_reviews (if theme_settings.show_product_details_tabs '!==' true)}}
+            {{> components/products/reviews reviews=product.reviews product=product urls=urls}}
+        {{/all}}
+
+        {{> components/products/tabs}}
+    </div>
+
+    {{> components/products/schema}}
+
+
+    <div class="page-wraper">
+        <div class="row" id="navbar">
+            <div class="columns large-12">
+                <div class="columns large-3 ">
+                    <div class="columns large-6">
+                        <img class="bundle_left_image" src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcTI1DcKqzeGvqn5xYQQUpYm3szvAZh90X0LVWAGSb8yTiWDoCBbHrOvcxzeigN7yIKfIeUe4XSm_tmqq1Geu8hLNl63wISc5bvar3asAqb7KLbvkjdGXgUo">
+                    </div>
+                        <div class="columns large-6">
+                        <h2 class="left_bundle_title">Calvin Klein Handbags</h2>
+                    </div>
+                </div>
+                <div class="columns large-6">
+                    <p class="bundle"></p>
+                </div>
+
+                <!-- <div class="columns large-6">
+                    <p class="total-price">$0.00</p>
+                </div> -->
+                <div class="columns large-3">
+                    <div class="columns large-6 bundle3">
+                        <div class="textunder_price">
+                            <span style="color:black;font-weight:bold">£</span>183.50
+                        </div>
+                    </div>
+                    <div class="columns large-6 bundle3">
+                        <div class="cart_button">
+                            <button class="cart-btn-text">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <br>
+        <div class="accessories-row">
+            {{#each product.related_products}}
+            <div>
+                <div class="columns large-3 accessories-list">
+                    <div> 
+                        <div class="accessories-name">{{name}}</div>
+                        <div class="accessories-price">{{price.without_tax.formatted}}</div> 
+                        <img class="product-image" src="{{getImage image}}">
+                        <div class="accessories-button">
+                            <div class="accessories-list-button">
+                                <button class="button-learn">View Details</button>
+                            </div>
+                            <div class="accessories-list-button">
+                                <button class="button-bundle" onclick="addToCart('{{name}}', '{{getImage image}}',' {{price.without_tax.formatted}}')">Add to bundle</button>
+                            </div>
+                        </div> 
+                    </div>
+                </div>
+            </div>  
+            {{/each}}
+        </div>
+    </div>
+<script src="/assets/js/custom/product/fashion_accessories.js">
+</script>
+{{/partial}}
+{{> layout/base}}