DOT-7404: COD-Theme > Collection page integration

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;
+}

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>
 

snippets/breadcrumbs.liquid

@@ -0,0 +1,17 @@
+<div class="breadcrumbs-container">
+  <div class="breadcrumbs-listings">
+    <div class="listings__item">
+      <a href="/" class="first-listing">الرئيسية</a>
+    </div>
+    <div class="listings__item">
+      <img src='{{ 'left-arrow.png' | asset_url }}'>
+    </div>
+    <div class="listings__item">
+      <a href="/collections" class="second-listing">التصنيفات</a>
+    </div>
+  </div>
+
+  <div class="breadcrumbs-name">
+    <h1>التصنيفات</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;
+    }
+  }
+}