DOT-7404: COD-Theme > Collection page integration (#208)

## JIRA Ticket

[DOT-7404](https://nextmediama.atlassian.net/browse/DOT-7404)

## QA Steps

-  [ ] `pnpm i`
-  [ ] `pnpm dev`

## Note

Leave empty when you have nothing to say


[DOT-7404]:
https://youcanshop.atlassian.net/browse/DOT-7404?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

assets/collection-listing.css

@@ -0,0 +1,86 @@
+.yc-collection-listing .collection-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  padding: 54px 20px;
+  background-color: #F2F2F2;
+}
+.yc-collection-listing .collection-list .collection-thumbnail img {
+  width: 100%;
+  height: 280px;
+  object-fit: cover;
+}
+.yc-collection-listing .collection-list .collection-details {
+  margin-top: 24px;
+  text-align: center;
+}
+.yc-collection-listing .collection-list .collection-details .collection-name {
+  font-weight: 700;
+  font-size: 18px;
+}
+@media (min-width: 576px) {
+  .yc-collection-listing .collection-list {
+    grid-template-columns: repeat(2, 1fr);
+    padding: 54px 30px;
+  }
+}
+@media (min-width: 992px) {
+  .yc-collection-listing .collection-list {
+    grid-template-columns: repeat(3, 1fr);
+    padding: 54px 80px;
+  }
+}
+@media (min-width: 1200px) {
+  .yc-collection-listing .collection-list {
+    padding: 54px 150px;
+  }
+}
+@media (min-width: 1400px) {
+  .yc-collection-listing .collection-list {
+    padding: 54px 250px;
+  }
+}
+.yc-collection-listing .breadcrumbs-container {
+  padding: 0 20px;
+}
+@media (min-width: 768px) {
+  .yc-collection-listing .breadcrumbs-container {
+    padding: 0 50px;
+  }
+}
+@media (min-width: 992px) {
+  .yc-collection-listing .breadcrumbs-container {
+    padding: 0 80px;
+  }
+}
+@media (min-width: 1200px) {
+  .yc-collection-listing .breadcrumbs-container {
+    padding: 0 150px;
+  }
+}
+@media (min-width: 1400px) {
+  .yc-collection-listing .breadcrumbs-container {
+    padding: 0 250px;
+  }
+}
+.yc-collection-listing .breadcrumbs-container .breadcrumbs-listings {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 40px auto;
+}
+.yc-collection-listing .breadcrumbs-container .breadcrumbs-listings .first-listing {
+  color: #A8A8A8;
+  font-weight: 400;
+  font-size: 14px;
+}
+.yc-collection-listing .breadcrumbs-container .breadcrumbs-listings .second-listing {
+  font-weight: 700;
+  color: #000000;
+  font-size: 14px;
+}
+.yc-collection-listing .breadcrumbs-container .breadcrumbs-name {
+  font-weight: 700;
+  font-size: 26px;
+  margin-bottom: 60px;
+}

locales/ar.default.json

@@ -78,6 +78,10 @@
     },
     "express_checkout": {
       "cta": "اشتري الآن"
+    },
+    "collection-listing": {
+      "home":  "الرئيسية",
+      "collections": "التصنيفات"
     }
   },
   "footer": {

locales/en.json

@@ -72,6 +72,10 @@
     },
     "express_checkout": {
       "cta": "Buy now"
+    },
+    "collection-listing": {
+      "home": "Home",
+      "collections": "Collections"
     }
   },
   "footer": {

locales/fr.json

@@ -72,6 +72,10 @@
     },
     "express_checkout": {
       "cta": "Acheter maintent"
+    },
+    "collection-listing": {
+      "home":  "Accueil",
+      "collections": "Collections"
     }
   },
   "footer": {

sections/main-list-collections.liquid

@@ -1,21 +1,15 @@
 {{ 'queries-handler.css' | asset_url | stylesheet_tag }}
-{{ 'featured-products.css' | asset_url | stylesheet_tag }}
+{{ 'collection-listing.css' | asset_url | stylesheet_tag }}
 
 {%- assign per_page = section.settings.items_per_page -%}
-<div class='yc-featured-products container'>
-  <div class='top-items'>
-    <h1 class='yc-section-title'>{{ section.settings.title }}</h1>
-    {%- render 'main-sort' -%}
-  </div>
+<div class='yc-collection-listing'>
+    {%- render 'breadcrumbs' -%}
   {%- paginate collections by per_page cod %}
-    <div class='product-list'>
+    <div class='collection-list'>
       {% for collection in items %}
         {%- render 'collection-preview', category: collection %}
       {% endfor %}
     </div>
-
-    <!-- prettier-ignore -->
-    {%- render 'main-pagination', has_more: has_more, next_page: next_page, previous_page: previous_page, current: current, last: last -%}
   {%- endpaginate %}
 </div>
 
@@ -25,11 +19,6 @@
   "templates": ["list-collections"],
   "limit": 1,
   "settings": [
-    {
-      "type": "text",
-      "id": "title",
-      "label": "Title"
-    },
     {
       "type": "number",
       "id": "items_per_page",

snippets/breadcrumbs.liquid

@@ -0,0 +1,17 @@
+<div class="breadcrumbs-container">
+  <div class="breadcrumbs-listings">
+    <div class="listings__item">
+      <a href="/" class="first-listing">{{ 'snippets.collection-listing.home' | t }}</a>
+    </div>
+    <div class="listings__item">
+      <img src='{{ 'left-arrow.png' | asset_url }}'>
+    </div>
+    <div class="listings__item">
+      <a href="/collections" class="second-listing">{{ 'snippets.collection-listing.collections' | t }}</a>
+    </div>
+  </div>
+
+  <div class="breadcrumbs-name">
+    <h1>{{ 'snippets.collection-listing.collections' | t }}</h1>
+  </div>
+</div>

styles/collection-listing.scss

@@ -0,0 +1,92 @@
+@import 'helpers/mixins';
+
+.yc-collection-listing {
+  .collection-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 54px 20px;
+    background-color: #F2F2F2;
+
+    .collection-thumbnail {
+      img {
+        width: 100%;
+        height: 280px;
+        object-fit: cover;
+      }
+    }
+
+    .collection-details {
+      margin-top: 24px;
+      text-align: center;
+
+      .collection-name {
+        font-weight: 700;
+        font-size: 18px;
+      }
+    }
+
+    @include breakpoint('sm') {
+      grid-template-columns: repeat(2, 1fr);
+      padding: 54px 30px;
+    }
+
+    @include breakpoint('lg') {
+      grid-template-columns: repeat(3, 1fr);
+      padding: 54px 80px;
+    }
+
+    @include breakpoint('xl') {
+      padding: 54px 150px;
+    }
+
+    @include breakpoint('xxl') {
+      padding: 54px 250px;
+    }
+  }
+
+  .breadcrumbs-container {
+    padding: 0 20px;
+
+    @include breakpoint('md') {
+      padding: 0 50px;
+    }
+
+    @include breakpoint('lg') {
+      padding: 0 80px;
+    }
+
+    @include breakpoint('xl') {
+      padding: 0 150px;
+    }
+
+    @include breakpoint('xxl') {
+      padding: 0 250px;
+    }
+
+    .breadcrumbs-listings {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin: 40px auto;
+
+      .first-listing {
+        color: #A8A8A8;
+        font-weight: 400;
+        font-size: 14px;
+      }
+
+      .second-listing {
+        font-weight: 700;
+        color: #000000;
+        font-size: 14px;
+      }
+    }
+
+    .breadcrumbs-name {
+      font-weight: 700;
+      font-size: 26px;
+      margin-bottom: 60px;
+    }
+  }
+}