Merge pull request #17 from Bixal/feature-category-page

Feature category page
Bixal · May 26, 2021 · 0d232c3 · 0d232c3
2 parents 1c7462a + e2e32a4
commit 0d232c3
Show file tree

Hide file tree

Showing 23 changed files with 118 additions and 9 deletions.
diff --git a/_categories/combined-oral-contraceptive-pill.md b/_categories/combined-oral-contraceptive-pill.md
@@ -0,0 +1,5 @@
+---
+layout: category
+title: Combined Oral Contraceptive Pill
+permalink: /combined-oral-contraceptive-pill.html
+---
diff --git a/_categories/contraceptive-implant.md b/_categories/contraceptive-implant.md
@@ -0,0 +1,5 @@
+---
+layout: category
+title: Contraceptive Implant
+permalink: /contraceptive-implant.html
+---
diff --git a/_categories/injectable-contraceptive.md b/_categories/injectable-contraceptive.md
@@ -0,0 +1,5 @@
+---
+layout: category
+title: Injectable Contraceptive
+permalink: /injectable-contraceptive.html
+---
diff --git a/_categories/intrauterine-device-iud.md b/_categories/intrauterine-device-iud.md
@@ -0,0 +1,5 @@
+---
+layout: category
+title: Intrauterine Device (IUD)
+permalink: /intrauterine-device-iud.html
+---
diff --git a/_categories/progestin-only-oral-contraceptive-pill.md b/_categories/progestin-only-oral-contraceptive-pill.md
@@ -0,0 +1,5 @@
+---
+layout: category
+title: Progestin Only Oral Contraceptive Pill
+permalink: /progestin-only-oral-contraceptive-pill.html
+---
diff --git a/_categories/standard-days-method.md b/_categories/standard-days-method.md
@@ -0,0 +1,5 @@
+---
+layout: category
+title: Standard Days Method
+permalink: /standard-days-method.html
+---
diff --git a/_config.yml b/_config.yml
@@ -20,6 +20,9 @@ baseurl: /med-supply-cat
 collections:
   products:
     output: true
+    permalink: /:categories/:title.html
+  categories:
+    output: true
 
 # Set a short name for the site to use in the header section.
 short-title: USHELP MSC
diff --git a/_data/categories.yml b/_data/categories.yml
@@ -1,25 +1,30 @@
 - name: Intrauterine Device (IUD)
-  url: "/products/product-1.html"
+  url: "/intrauterine-device-iud.html"
   image: "assets/category-images/category-IUD.jpg"
   no-products: 5
   last-update: 3/23/2020
 - name: Injectable Contraceptive
-  url: "/products/product-2.html"
+  url: "/injectable-contraceptive.html"
   image: "assets/category-images/category-injection.jpg"
   no-products: 16
   last-update: 12/2/2020
 - name: Combined Oral Contraceptive Pill
-  url: "/products/product-4.html"
+  url: "/combined-oral-contraceptive-pill.html"
   image: "assets/category-images/category-pill.jpg"
   no-products: 8
   last-update: 2/4/2021
 - name: Progestin Only Oral Contraceptive Pill
-  url: "/products/product-6.html"
+  url: "/progestin-only-oral-contraceptive-pill.html"
   image: "assets/category-images/category-progestin.jpg"
   no-products: 25
   last-update: 2/4/2021
 - name: Standard Days Method
-  url: "/products/product-9.html"
+  url: "/standard-days-method.html"
   image: "assets/category-images/category-standard-days.jpg"
   no-products: 17
-  last-update: 1/14/2021
+  last-update: 1/14/2021
+- name: Contraceptive Implant
+  url: "/contraceptive-implant.html"
+  image: "assets/category-images/category-contraceptive-implant.jpg"
+  no-products: 10
+  last-update: 2/14/2021
diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html
@@ -6,7 +6,9 @@
         </a>
       </li>
       <li class="usa-breadcrumb__list-item">
+        <a href="{{ site.baseurl }}/{{ page.category | slugify}}.html" class="usa-breadcrumb__link">
           <span>{{ page.category }}</span>
+        </a>
       </li>
       <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
         <span>{{ page.title }}</span>

diff --git a/_includes/navigation-extended.html b/_includes/navigation-extended.html
@@ -13,7 +13,7 @@
               <a class="usa-nav__link {% if page.layout == "index" %} usa-current{% endif %}" href="{{ site.baseurl }}/"><span>Home</span></a>
             </li>
             <li class="usa-nav__primary-item">
-              <button class="usa-accordion__button usa-nav__link {% if page.layout == "product" %} usa-current{% endif %}" aria-expanded="false" aria-controls="basic-nav-section-one"><span>Categories</span></button>
+              <button class="usa-accordion__button usa-nav__link {% if page.layout == "product" or page.layout == "category" %} usa-current{% endif %}" aria-expanded="false" aria-controls="basic-nav-section-one"><span>Categories</span></button>
               <ul id="basic-nav-section-one" class="usa-nav__submenu">
                 {% for item in site.data.categories %}
                 <li class="usa-nav__submenu-item">

diff --git a/_layouts/category.html b/_layouts/category.html
@@ -0,0 +1,60 @@
+<!doctype html>
+
+{% include head.html %}
+
+<body>
+  {% include navigation-extended.html %}
+
+  <main>
+    <div class="grid-container">
+        <nav class="usa-breadcrumb margin-top-05" aria-label="Breadcrumbs">
+            <ol class="usa-breadcrumb__list">
+              <li class="usa-breadcrumb__list-item">
+                <a href="{{ site.baseurl }}/" class="usa-breadcrumb__link">
+                  <span>Home</span>
+                </a>
+              </li>
+              <li class="usa-breadcrumb__list-item">
+                  <span>{{ page.title }}</span>
+              </li>
+            </ol>
+        </nav>
+
+    <h1 class="margin-top-0 margin-bottom-2">{{ page.title }}</h1>
+
+    <ul class="usa-collection">
+        {% assign related_products = site.products | where: "category", page.title %}
+        {% for item in related_products %}
+        <li class="usa-collection__item maxw-full border-base-lighter">
+            <img class="usa-collection__img" src="{{ item.feature-image }}" alt="{{ item.feature-image-description }}">
+            <div class="usa-collection__body">
+                <h3 class="usa-collection__heading margin-bottom-105 maxw-mobile-lg">
+                <a class="usa-link" href="{{ site.baseurl }}{{ item.permalink }}">{{ item.title }}</a>
+                </h3>
+                <p class="usa-collection__description text-base">Brand: {{ item.brand }} | SKU: {{ item.sku }} | Last updated: {{ item.last-updated }}</p>
+                <div class="grid-row">
+                    <div class="tablet:grid-col-6">
+                        <ul class="usa-collection__meta margin-bottom-2" aria-label="Topics">
+                        {% assign tags = item.tags %}
+                            {% for item in tags %}
+                            <li class="usa-tag bg-base-lighter text-base-darker display-inline-block margin-top-1">
+                                {{ item }}
+                            </li> 
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    <div class="tablet:grid-col-6">
+                        <button class="usa-button usa-button--outline margin-right-0 float-right">Add to list</button>
+                    </div>
+                </div>
+            </div>
+        </li>
+        {% endfor %}
+    </ul>
+
+
+
+  </div>
+  </main>
+  {% include footer.html %}
+  {% include foot.html %}
diff --git a/_layouts/index.html b/_layouts/index.html
@@ -4,7 +4,7 @@
 
 <body>
   {% include navigation-extended.html %}
-  
+
   <main>
     <div class="grid-container padding-y-2">
       <h1 class="display-1">{{ site.title }}</h1>

diff --git a/_layouts/product.html b/_layouts/product.html
@@ -17,7 +17,7 @@ <h1 class="margin-top-0 margin-bottom-2">{{ page.title }}</h1>
     <p class="margin-y-2">
         {% assign tags = page.tags %}
         {% for item in tags %}
-        <span class="usa-tag bg-accent-warm-light text-base-darker display-inline-block">{{ item }}</span> 
+        <span class="usa-tag bg-base-lighter text-base-darker display-inline-block">{{ item }}</span> 
         {% endfor %}
     </p>
 

diff --git a/_products/product-1.md b/_products/product-1.md
@@ -12,6 +12,7 @@ price: $.60 per piece
 feature-image: /med-supply-cat/assets/product-images/product-1-feature.png
 feature-image-description: "T-shaped device with some parts wrapped in copper coils"
 last-updated: 5 weeks ago
+permalink: /intrauterine-device-iud/paragard.html
 ---
 ## Market Insights
 

diff --git a/_products/product-2.md b/_products/product-2.md
@@ -12,6 +12,7 @@ price: $.60 per piece
 feature-image: /med-supply-cat/assets/product-images/product-2-feature.png
 feature-image-description: "syringe with prescription medicine box"
 last-updated: 4 days ago
+permalink: /injectable-contraceptive/depo-provera.html
 ---
 ## Market Insights
 

diff --git a/_products/product-3.md b/_products/product-3.md
@@ -13,6 +13,7 @@ price: $.85 per unit
 feature-image: /med-supply-cat/assets/product-images/product-2-feature.png
 feature-image-description: "injection device with prescription medicine box"
 last-updated: 4 days ago
+permalink: /injectable-contraceptive/depot-subq.html
 ---
 ## Market Insights
 

diff --git a/_products/product-4.md b/_products/product-4.md
@@ -11,6 +11,7 @@ price:  $.27 per unit
 feature-image: /med-supply-cat/assets/product-images/product-4-feature.png
 feature-image-description: "red and orange hand-size box next to a packet of white and red pills"
 last-updated: 2 months ago
+permalink: /combined-oral-contraceptive-pill/combination-3.html
 ---
 ## Market Insights
 

diff --git a/_products/product-5.md b/_products/product-5.md
@@ -11,6 +11,7 @@ price:  $.27 per unit
 feature-image: /med-supply-cat/assets/product-images/product-5-feature.png
 feature-image-description: "blue and white hand-size box next to a packet of white and red pills"
 last-updated: 2 months ago
+permalink: /combined-oral-contraceptive-pill/microgynon.html
 ---
 ## Market Insights
 

diff --git a/_products/product-6.md b/_products/product-6.md
@@ -11,6 +11,7 @@ price:  $.30 per unit
 feature-image: /med-supply-cat/assets/product-images/product-6-feature.png
 feature-image-description: "pink and white hand-size box next to a packet of white pills"
 last-updated: 5 weeks ago
+permalink: /progestin-only-oral-contraceptive-pill/microlut.html
 ---
 ## Market Insights
 

diff --git a/_products/product-7.md b/_products/product-7.md
@@ -12,6 +12,7 @@ price:  $.30 per unit
 feature-image: /med-supply-cat/assets/product-images/product-7-feature.png
 feature-image-description: "white prescription medicine box with abstract green leaf illustration"
 last-updated: 2 months ago
+permalink: /contraceptive-implant/nexplanon.html
 ---
 ## Market Insights
 

diff --git a/_products/product-8.md b/_products/product-8.md
@@ -12,6 +12,7 @@ price:  $8.50 per piece
 feature-image: /med-supply-cat/assets/product-images/product-8-feature.png
 feature-image-description: "injection device with prescription green and white medicine box"
 last-updated: 1 year ago
+permalink: /contraceptive-implant/jadelle.html
 ---
 ## Market Insights
 

diff --git a/_products/product-9.md b/_products/product-9.md
@@ -12,6 +12,7 @@ price:  $1.48 per unit
 feature-image: /med-supply-cat/assets/product-images/product-9-feature.png
 feature-image-description: "bracelet of white and brown beads"
 last-updated: 3 days ago
+permalink: /standard-days-method/cyclebeads.html
 ---
 ## Market Insights
 

diff --git a/assets/category-images/category-contraceptive-implant.jpg b/assets/category-images/category-contraceptive-implant.jpg
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ @@
     <body>
       {% include navigation-extended.html %}
       <main>
         <div class="grid-container padding-y-2">
           <h1 class="display-1">{{ site.title }}</h1>
@@ Expand Down @@