TH-230: Add Products-by-Collection section (#147)

Co-authored-by: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com>
youcan-shop · Jan 3, 2025 · 9435c30 · 9435c30
1 parent 70cc4aa
commit 9435c30
Show file tree

Hide file tree

Showing 17 changed files with 450 additions and 141 deletions.
diff --git a/themes/origins/assets/component-slider.css b/themes/origins/assets/component-slider.css
@@ -99,6 +99,14 @@ yc-slider .slider-area .slider-box .slider-inner yc-slider-item yc-slider-conten
   background-color:var(--section-button-background);
   color:var(--section-button-foreground);
 }
+yc-slider yc-slider-footer{
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+}
+yc-slider yc-slider-footer yc-slider-arrows{
+  margin-inline-start:auto;
+}
 yc-slider yc-slider-arrows{
   display:flex;
 }
@@ -110,11 +118,11 @@ yc-slider yc-slider-arrows .slider-arrows{
 yc-slider yc-slider-arrows .slider-arrows button{
   padding:8px 15px;
   border-radius:var(--radius-sm);
-  background-color:rgb(var(--section-arrows-background));
+  background-color:var(--section-arrows-background);
   color:var(--section-arrows-foreground);
 }
 yc-slider yc-slider-arrows .slider-arrows button.icon:hover{
-  background-color:color-mix(in srgb, var(--overlay-background) 10%, rgb(var(--section-arrows-background)));
+  background-color:color-mix(in srgb, var(--section-arrows-foreground) 10%, var(--section-arrows-background));
 }
 [dir="rtl"] yc-slider yc-slider-arrows .slider-arrows button .icon{
   rotate:180deg;
@@ -152,6 +160,11 @@ yc-slider[data-type$=full] yc-slider-arrows button{
   border:none;
   box-shadow:inset rgba(50, 50, 93, 0.1) 0px 2px 5px -1px, rgba(0, 0, 0, 0.2) 0px 1px 3px -1px;
 }
+@media (max-width: 1280px){
+  yc-slider[responsive] yc-slider-item{
+    --slider-per-page:var(--slider-max-items-xl);
+  }
+}
 @media (max-width: 1024px){
   yc-slider[responsive] yc-slider-item{
     --slider-per-page:var(--slider-max-items-lg);

diff --git a/themes/origins/assets/main.css b/themes/origins/assets/main.css
@@ -135,8 +135,8 @@ button.primary,
 }
 button.secondary,
 .yc-btn.secondary{
-  color:rgb(var(--color-secondary-button-text));
-  background-color:rgb(var(--color-secondary-button));
+  color:currentColor;
+  background-color:transparent;
   border:1px solid color-mix(in srgb, currentColor 20%, transparent);
 }
 button.destructive,
@@ -242,7 +242,7 @@ button.with-icon:hover:not(:disabled){
   opacity:0.8;
 }
 
-a.link:not(.yc-btn){
+a.link:not(.yc-btn):hover{
   -webkit-text-decoration:underline;
   text-decoration:underline;
 }

diff --git a/themes/origins/assets/product-card.css b/themes/origins/assets/product-card.css
@@ -24,21 +24,28 @@
   -o-object-fit:cover;
      object-fit:cover;
   border-radius:var(--product-card-border-radius);
+  pointer-events:none;
 }
 .product-card .info{
+  padding:1.25em;
   display:grid;
   grid-gap:var(--gap-xs);
   gap:var(--gap-xs);
   border-radius:var(--product-card-border-radius);
-  background-color:var(--color-base-white);
-  padding:1.25em;
+  background-color:var(--product-card-background);
+  color:rgb(var(--product-card-foreground));
+}
+.product-card .info .title,
+.product-card .info .price{
+  justify-self:var(--product-card-text-alignment);
 }
 .product-card .info .title{
-  width:100%;
+  width:-moz-fit-content;
+  width:fit-content;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
-  color:var(--color-gray-500);
+  color:currentColor;
 }
 .product-card .info .price{
   display:flex;
@@ -51,20 +58,27 @@
   font-weight:550;
 }
 .product-card .info .price .compare-at{
-  color:var(--color-gray-500);
+  color:currentColor;
   font-weight:400;
   -webkit-text-decoration:line-through;
   text-decoration:line-through;
 }
-.product-card .info .yc-btn.secondary{
+.product-card .info .yc-btn{
   margin-block-start:0.5em;
+  border:var(--product-card-border);
+  background-color:var(--product-card-background);
+}
+.product-card .info .yc-btn:hover{
+  color:var(--product-card-background);
+  background-color:rgb(var(--product-card-foreground));
 }
 .product-card[data-style$=standard]{
   --product-img-height:350px;
-  box-shadow:var(--shadow-dark-sm);
+  border:var(--product-card-border);
 }
 .product-card[data-style$=standard] .img-link{
   display:block;
+  border-bottom:var(--product-card-border);
 }
 .product-card[data-style$=standard] .img-link,
 .product-card[data-style$=standard] img{
@@ -79,9 +93,6 @@
   border-start-end-radius:0;
   border-start-start-radius:0;
 }
-.product-card[data-style$=standard]:hover{
-  box-shadow:rgba(0, 0, 0, 0.031372549) 0 3px 14px, rgba(0, 0, 0, 0.2) 0 0 0 1px;
-}
 .product-card[data-style$=compact]{
   --product-img-height:400px;
   cursor:pointer;
@@ -91,7 +102,7 @@
   position:absolute;
   width:100%;
   height:100%;
-  border-radius:var(--radius-lg);
+  border-radius:var(--product-card-border-radius);
   -webkit-backdrop-filter:var(--overlay-blur);
           backdrop-filter:var(--overlay-blur);
   background-color:var(--overlay-background);

diff --git a/themes/origins/assets/products-by-collection.css b/themes/origins/assets/products-by-collection.css
@@ -0,0 +1,31 @@
+.products-by-collection .grid{
+  display:grid;
+  grid-template-columns:repeat(var(--product-columns), 1fr);
+  grid-gap:var(--gap-lg);
+  gap:var(--gap-lg);
+}
+.products-by-collection .show-more{
+  grid-column:1/-1;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+.products-by-collection .show-more .yc-btn{
+  padding:8px 15px;
+  width:-moz-fit-content;
+  width:fit-content;
+  color:currentColor;
+  border:var(--product-card-border);
+  background-color:var(--product-card-background);
+}
+.products-by-collection .show-more .yc-btn:hover{
+  color:currentColor;
+  border-color:var(--product-card-border-color);
+  background-color:color-mix(in srgb, var(--section-arrows-foreground) 10%, var(--section-arrows-background));
+}
+
+@media (max-width: 1024px){
+  .products-by-collection .grid{
+    grid-template-columns:1fr;
+  }
+}
diff --git a/themes/origins/config/settings_schema.json b/themes/origins/config/settings_schema.json
@@ -443,60 +443,26 @@
         "default": "standard",
         "label": "Card Style"
       },
-      {
-        "type": "range",
-        "id": "product_card_image_padding",
-        "min": 0,
-        "max": 20,
-        "step": 2,
-        "unit": "px",
-        "label": "Image padding",
-        "default": 0
-      },
       {
         "type": "select",
         "id": "product_card_text_alignment",
         "options": [
           {
-            "value": "left",
+            "value": "flex-start",
             "label": "Left"
           },
           {
             "value": "center",
             "label": "Center"
           },
           {
-            "value": "right",
+            "value": "flex-end",
             "label": "Right"
           }
         ],
-        "default": "left",
+        "default": "flex-start",
         "label": "Text alignment"
       },
-      {
-        "type": "header",
-        "content": "Border"
-      },
-      {
-        "type": "range",
-        "id": "product_card_border_thickness",
-        "min": 0,
-        "max": 24,
-        "step": 1,
-        "unit": "px",
-        "label": "Thickness",
-        "default": 0
-      },
-      {
-        "type": "range",
-        "id": "product_card_border_opacity",
-        "min": 0,
-        "max": 100,
-        "step": 5,
-        "unit": "%",
-        "label": "Opacity",
-        "default": 0
-      },
       {
         "type": "range",
         "id": "product_card_border_radius",
@@ -506,54 +472,6 @@
         "unit": "px",
         "label": "Corner radius",
         "default": 14
-      },
-      {
-        "type": "header",
-        "content": "Shadow"
-      },
-      {
-        "type": "range",
-        "id": "product_card_shadow_opacity",
-        "min": 0,
-        "max": 100,
-        "step": 5,
-        "unit": "%",
-        "label": "Opacity",
-        "default": 10
-      },
-      {
-        "type": "range",
-        "id": "product_card_shadow_horizontal_offset",
-        "min": -40,
-        "max": 40,
-        "step": 2,
-        "unit": "px",
-        "label": "Horizontal offset",
-        "default": 0
-      },
-      {
-        "type": "range",
-        "id": "product_card_shadow_vertical_offset",
-        "min": -40,
-        "max": 40,
-        "step": 2,
-        "unit": "px",
-        "label": "Vertical offset",
-        "default": 0
-      },
-      {
-        "type": "range",
-        "id": "product_card_shadow_blur",
-        "min": 0,
-        "max": 40,
-        "step": 5,
-        "unit": "px",
-        "label": "Blur",
-        "default": 0
-      },
-      {
-        "type": "header",
-        "content": "Badge"
       }
     ]
   },

diff --git a/themes/origins/locales/ar.json b/themes/origins/locales/ar.json
@@ -1,4 +1,9 @@
 {
+  "general": {
+    "buy_now": "اشتري الآن",
+    "add_to_cart": "أضف إلى السلة",
+    "show_all_button": "عرض الكل"
+  },
   "footer": {
     "copyright": {
       "title": "© %. جميع الحقوق محفوظة"

diff --git a/themes/origins/locales/en.default.json b/themes/origins/locales/en.default.json
@@ -1,4 +1,9 @@
 {
+  "general": {
+    "buy_now": "Buy now",
+    "add_to_cart": "Add to cart",
+    "show_all_button": "View all"
+  },
   "footer": {
     "copyright": {
       "title": "© %. All rights reserved"

diff --git a/themes/origins/locales/fr.json b/themes/origins/locales/fr.json
@@ -1,4 +1,9 @@
 {
+  "general": {
+    "buy_now": "Acheter",
+    "add_to_cart": "Ajouter au panier",
+    "show_all_button": "Voir tout"
+  },
   "footer": {
     "copyright": {
       "title": "© %. Tous droits réservés"

diff --git a/themes/origins/sections/default.liquid b/themes/origins/sections/default.liquid
@@ -4,11 +4,7 @@
 {% endcomment %}
 <yc-section>
   <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0;">
-    <button class="yc-btn primary">Primary Button</button>
-    <button class="yc-btn secondary">Seconary Button</button>
-
-    <button disabled class="yc-btn primary">Primary Button Disabled</button>
-    <button disabled class="yc-btn secondary">Secondary Button Disabled</button>
+    This is a sandbox
   </div>
 </yc-section>