added product grid and product card, updated rendering of error pages…

…, updated header overlay functionality
joesayat · May 15, 2024 · fb09994 · fb09994
1 parent 28d6462
commit fb09994
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 112 deletions.
diff --git a/assets/application.css b/assets/application.css
@@ -62,6 +62,19 @@ ul {
   position: relative;
 }
 
+.overlay {
+  background-color: var(--white);
+  width: 100%;
+  height: calc(100vh - 7rem);
+  position: absolute;
+  top: 7rem;
+  left: 0;
+  transition: all 0.3s ease-out;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 998;
+}
+
 /* CSSGRID */
 .grid {
   display: grid;
@@ -85,7 +98,7 @@ ul {
 .tmp-link__header:link,
 .tmp-link__header:visited {
   color: var(--black);
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.12rem;
   transition: all 0.3s ease-out;
 }
 
@@ -138,12 +151,12 @@ ul {
   background-color: var(--main-dark);
 }
 
-.tmp-btn_404 {
+.tmp-btn_error {
   padding: 1.6rem 6.4rem;
 }
 
-/* SECTION - 404 */
-.section-404 {
+/* SECTION - ERROR */
+.section-error {
   height: calc(100vh - 12rem);
   text-align: center;
   display: flex;
@@ -152,6 +165,6 @@ ul {
   gap: 1.2rem;
 }
 
-.img-container-404 {
+.error-img-container {
   margin-bottom: 2rem;
 }
diff --git a/assets/collection.css b/assets/collection.css
@@ -40,7 +40,7 @@
 
 .product-price {
   font-size: 1.4rem;
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.12rem;
 }
 
 .product-link {

diff --git a/assets/header.css b/assets/header.css
@@ -83,19 +83,6 @@
     display: block;
   }
 
-  .overlay {
-    background-color: var(--white);
-    width: 100%;
-    height: calc(100vh - 7rem);
-    position: absolute;
-    top: 7rem;
-    left: 0;
-    transition: all 0.3s ease-out;
-    opacity: 0;
-    visibility: hidden;
-    z-index: 998;
-  }
-
   .overlay.active {
     opacity: 0.5;
     visibility: visible;

diff --git a/assets/queries.css b/assets/queries.css
@@ -13,8 +13,8 @@
     padding: 0 4rem;
   }
 
-  /* SECTION 404 */
-  .section-404 {
+  /* SECTION ERROR */
+  .section-error {
     height: calc(100vh - 7rem);
   }
 }
@@ -59,8 +59,8 @@
     width: 100%;
   }
 
-  /* SECTION 404 */
-  .section-404 {
+  /* SECTION ERROR */
+  .section-error {
     padding: 0 3.2rem;
   }
 }

diff --git a/locales/en.default.json b/locales/en.default.json
@@ -1,8 +1,12 @@
 {
-  "general": {
+  "error": {
     "404": {
       "title": "Not found",
-      "subtext_html": "The page you were looking for does not exist"
+      "description": "The page you were looking for does not exist",
+      "btn_text": "Return home"
+    },
+    "no_products" : {
+      "title": "No products available"
     }
   }
 }
diff --git a/sections/404.liquid b/sections/404.liquid
@@ -1,54 +1,16 @@
-<!-- Getting store_url variable -->
-{% if section.settings.btn_url == blank %}
-  {% assign store_url = routes.root_url %}
-{% else %}
-  {% assign store_url = section.settings.btn_url %}
-{% endif %}
-
-<!-- SECTION 404 -->
-<section class="section-404">
-  <div class="img-container-404">{{ section.settings.render_icon }}</div>
-  <h1 class="title-404 font-40 bold">{{ section.settings.title }}</h1>
-  <p class="description-404">{{ section.settings.description }}</p>
-  <div class="btn-container-404">
-    <a class="tmp-btn tmp-btn_main tmp-btn_404 bold" href="{{ store_url }}">{{ section.settings.btn_text }}</a>
+<!-- SECTION ERROR 404 -->
+<section class="section-error">
+  <div class="error-img-container">
+    {% render 'icon-error', size: '24rem' %}
+  </div>
+  <h1 class="error-title font-40 bold">{{ 'error.404.title' | t }}</h1>
+  <p class="error-description">{{ 'error.404.description' | t }}</p>
+  <div class="error-btn-container">
+    <a 
+      class="tmp-btn tmp-btn_main tmp-btn_error bold" 
+      href="{{ routes.root_url  }}"
+    >
+      {{ 'error.404.btn_text' | t }}
+    </a>
   </div>
 </section>
-
-<!-- SCHEMA -->
-{% schema %}
-{
-  "name": "404",
-  "settings": [
-    {
-      "type": "text",
-      "id": "title",
-      "label": "Error title",
-      "default": "Not found"
-    },
-    {
-      "type": "text",
-      "id": "description",
-      "label": "Error description",
-      "default": "The page you were looking for does not exist"
-    },
-    {
-      "type": "text",
-      "id": "btn_text",
-      "label": "Button text content",
-      "default": "Return home"
-    },
-    {
-      "type": "url",
-      "id": "btn_url",
-      "label": "Button URL"
-    },
-    {
-      "type": "liquid",
-      "id": "render_icon",
-      "label": "Icon",
-      "default": "{% render 'icon-error', size: '24rem' %}"
-    }
-  ]
-}
-{% endschema %}
diff --git a/sections/collection.liquid b/sections/collection.liquid
@@ -1,38 +1,22 @@
 <!-- COLLECTION STYLES -->
 {{ 'collection.css' | asset_url | stylesheet_tag }}
 
-<section class="section-collection">
-  <div class="container">
-    {% paginate collection.products by 6 %}
-      <ul class="product-list grid grid-3-col">
-        {% for product in collection.products %}
-          <li class="product-item relative">
-            {% if product.images[1] %}
-              <div class="product-img-container">
-                <img 
-                  class="product-img" 
-                  name="img-back" 
-                  src="{{ product.images[1] | image_url }}" 
-                  width="120" 
-                  height="150" 
-                  alt="Back side of a shirt" 
-                />
-              </div>
-              <img 
-                class="product-img" 
-                name="img-front" 
-                src="{{ product.featured_image | image_url }}" 
-                width="120"
-                height="150" 
-                alt="{{ product.featured_image.alt}}" 
-              />
-            {% endif %}
-            <h3 class="product-name bold">{{ product.title }}</h3>
-            <p class="product-price">{{ product.price | money }}</p>
-            <a class="product-link" href="{{ product.url }}"></a>
-          </li>
-        {% endfor %}
-      </ul>
-    {% endpaginate %}
-  </div>
-</section>
+<!-- VARIABLES -->
+{% assign products_size = collection.products | size %}
+
+{% if products_size > 0 %}
+  <!-- SECTION COLLECTION -->
+  <section class="section-collection">
+    <div class="container">
+        {% paginate collection.products by 6 %}
+          <ul class="product-list grid grid-3-col">
+          {% for product in collection.products %}
+            {% render 'product-card', product: product %}
+          {% endfor %}
+          </ul>
+        {% endpaginate %} 
+    </div>
+  </section>
+{% else %}
+  {% render 'error-no-products' %}
+{% endif %}
diff --git a/snippets/error-no-products.liquid b/snippets/error-no-products.liquid
@@ -0,0 +1,7 @@
+<!-- SECTION ERROR NO PRODUCTS -->
+<div class="section-error">
+  <div class="error-img-container">
+    {% render 'icon-error', size: '24rem' %}
+  </div>
+  <h1 class="error-title font-40 bold">{{ 'error.no_products.title' | t }}</h1>
+</div>
diff --git a/snippets/product-card.liquid b/snippets/product-card.liquid
@@ -0,0 +1,27 @@
+<li class="product-item relative">
+  {% if product.images[1] %}
+    <div class="product-img-container">
+      <img 
+        class="product-img" 
+        name="img-back" 
+        src="{{ product.images[1] | image_url }}" 
+        width="120" 
+        height="150" 
+        alt="Back side of a shirt" 
+      />
+    </div>
+    <img 
+      class="product-img" 
+      name="img-front" 
+      src="{{ product.featured_image | image_url }}" 
+      width="120"
+      height="150" 
+      alt="{{ product.featured_image.alt}}" 
+    />
+  {% else %}
+      {{ 'image' | placeholder_svg_tag }}
+  {% endif %}
+  <h3 class="product-name bold">{{ product.title }}</h3>
+  <p class="product-price">{{ product.price | money }}</p>
+  <a class="product-link" href="{{ product.url }}"></a>
+</li>