diff --git a/assets/collection-listing.css b/assets/collection-listing.css new file mode 100644 index 00000000..d0a0b000 --- /dev/null +++ b/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; +} diff --git a/assets/left-arrow.png b/assets/left-arrow.png new file mode 100644 index 00000000..bf0049c9 Binary files /dev/null and b/assets/left-arrow.png differ diff --git a/locales/ar.default.json b/locales/ar.default.json index bedc0f37..86bc788b 100644 --- a/locales/ar.default.json +++ b/locales/ar.default.json @@ -78,6 +78,10 @@ }, "express_checkout": { "cta": "اشتري الآن" + }, + "collection-listing": { + "home": "الرئيسية", + "collections": "التصنيفات" } }, "footer": { diff --git a/locales/en.json b/locales/en.json index 9303ac10..3b6086bd 100644 --- a/locales/en.json +++ b/locales/en.json @@ -72,6 +72,10 @@ }, "express_checkout": { "cta": "Buy now" + }, + "collection-listing": { + "home": "Home", + "collections": "Collections" } }, "footer": { diff --git a/locales/fr.json b/locales/fr.json index 78db7cf7..be49e1f4 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -72,6 +72,10 @@ }, "express_checkout": { "cta": "Acheter maintent" + }, + "collection-listing": { + "home": "Accueil", + "collections": "Collections" } }, "footer": { diff --git a/sections/main-list-collections.liquid b/sections/main-list-collections.liquid index a069a45b..cef97c1d 100644 --- a/sections/main-list-collections.liquid +++ b/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 -%} -
-
-

{{ section.settings.title }}

- {%- render 'main-sort' -%} -
+
+ {%- render 'breadcrumbs' -%} {%- paginate collections by per_page cod %} -
+
{% for collection in items %} {%- render 'collection-preview', category: collection %} {% endfor %}
- - - {%- render 'main-pagination', has_more: has_more, next_page: next_page, previous_page: previous_page, current: current, last: last -%} {%- endpaginate %}
@@ -25,11 +19,6 @@ "templates": ["list-collections"], "limit": 1, "settings": [ - { - "type": "text", - "id": "title", - "label": "Title" - }, { "type": "number", "id": "items_per_page", diff --git a/snippets/breadcrumbs.liquid b/snippets/breadcrumbs.liquid new file mode 100644 index 00000000..da304635 --- /dev/null +++ b/snippets/breadcrumbs.liquid @@ -0,0 +1,17 @@ +
+
+
+ {{ 'snippets.collection-listing.home' | t }} +
+
+ +
+
+ {{ 'snippets.collection-listing.collections' | t }} +
+
+ +
+

{{ 'snippets.collection-listing.collections' | t }}

+
+
diff --git a/styles/collection-listing.scss b/styles/collection-listing.scss new file mode 100644 index 00000000..e7573aeb --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/templates/index.json b/templates/index.json index bdeb1a90..aae2a4bd 100644 --- a/templates/index.json +++ b/templates/index.json @@ -1,68 +1,5 @@ { "sections": { - "featured-products": { - "type": "featured-products", - "blocks": { - "block_bxuox7w3hcfbikm": { - "type": "product", - "settings": { - "product": "693a2102-03c6-46d8-a5e1-e8455c3384d8", - "tag_text": "Very Limited", - "tag_color": "#9FD87EFF" - } - }, - "block_bz1pi3lyquyby7q": { - "type": "product", - "settings": { - "product": "e53d4919-b7e9-4a4b-a612-26b76241870f", - "tag_text": "NEW", - "tag_color": "#000000FF", - "tag_text_color": "#FFFFFFFF" - } - }, - "block_c06w7csmaq4ga7o": { - "type": "product", - "settings": { - "product": "e53d4919-b7e9-4a4b-a612-26b76241870f" - } - }, - "block_angxjuj3umg4k6": { - "type": "product", - "settings": { - "product": "ce17d5cf-4607-4f0b-9996-6a2d616c0112" - } - }, - "block_6o21thmwvzgx9w": { - "type": "product", - "settings": { - "product": "b44b2d2d-a29e-4fd2-9965-4825e2d8e64d", - "tag_text": "هوتكٌٗام 🐊", - "tag_color": "#FF3000FF" - } - }, - "block_7ilc4bc4d0ae4nt": { - "type": "product", - "settings": { - "product": "2d39bfc2-2269-482d-97e8-35286c06fa8d" - } - } - }, - "order": [ - "block_bxuox7w3hcfbikm", - "block_bz1pi3lyquyby7q", - "block_c06w7csmaq4ga7o", - "block_angxjuj3umg4k6", - "block_6o21thmwvzgx9w", - "block_7ilc4bc4d0ae4nt" - ], - "settings": { - "title": "منتجات", - "section_title_position": "right", - "padding_bottom": 85, - "padding_top": 85, - "countdown_message": "

Hurry up! There aren't many items left in stock.<\/p>" - } - }, "section_qum9qooyrwe3uz": { "type": "desktop-slider", "settings": { @@ -151,78 +88,6 @@ "block_cgovtb6di7fywh8" ] }, - "section_iryt4p1dmrzxq9d": { - "type": "multi-column", - "settings": { - "columns_desktop": 2, - "columns_mobile": "1", - "title": "معلومات عنا", - "margin_bottom": 5, - "margin_top": 85 - }, - "blocks": { - "block_iucc6f1w88xcfdv": { - "type": "columnn", - "settings": { - "image": "xtra-minimal-webshop-2Juh78or1FZPYilwGUJPgH8Nl4c.webp" - } - }, - "block_iztiz4hxqx8n8sl": { - "type": "columnn", - "settings": { - "heading": "ملابس من جميع أنحاء العالم ، ماركات خاصة.", - "description": "

هذا المتجر يعرض مجموعة متنوعة من الملابس من جميع أنحاء العالم، ويضم ماركات راقية وخاصة.<\/p>

يمكنك العثور على كل ما تريد من ملابس معتمدة وعصرية في هذا المتجر الذي يتيح لك التسوق عبر الإنترنت.<\/p>

استمتع بتجربة التسوق الرائعة والعثور على ملابس ناعمة وراقية في متجر ملابس من جميع أنحاء العالم الذي يعرض ماركات خاصة للرجال والنساء.<\/p>", - "link_label": "عن المتجر", - "link": "\/about-us" - } - } - }, - "order": [ - "block_iucc6f1w88xcfdv", - "block_iztiz4hxqx8n8sl" - ] - }, - "section_9nayyt0zwugfwpf": { - "type": "featured-collections", - "settings": { - "title": "المنتجات الأكثر رواجًا ", - "section_title_position": "center", - "padding_top": 60, - "padding_bottom": 50 - }, - "blocks": { - "block_9tdrxohe4dvholo": { - "type": "category", - "settings": { - "category": "f0d2099e-5031-435c-8d39-e967270d2cb1" - } - }, - "block_fnblvntzzcvcsyf": { - "type": "category", - "settings": { - "category": "5c4185a7-fffd-48e0-9064-9ed0b7b31d88" - } - }, - "block_fopl8exczmojy74": { - "type": "category", - "settings": { - "category": "db6868e6-1d32-40fd-a927-bda6555b0d8c" - } - }, - "block_fpy1lbh4t349ufo": { - "type": "category", - "settings": { - "category": "2bab572d-5197-418d-9072-1f0b82ff9fb8" - } - } - }, - "order": [ - "block_9tdrxohe4dvholo", - "block_fnblvntzzcvcsyf", - "block_fopl8exczmojy74", - "block_fpy1lbh4t349ufo" - ] - }, "featured-products-preview": { "type": "featured-products-preview", "blocks": { @@ -325,61 +190,6 @@ "block_yn7znd0yq40jraa" ] }, - "section_sfrr573akvf9a93": { - "type": "featured-products", - "settings": { - "title": "الهمزة", - "padding_top": 80, - "padding_bottom": 95, - "background_color": "#C80357FF", - "text_color": "#FFFFFFFF", - "countdown_message": "

أسرع! قبل انتهاء الهمزة<\/p>", - "countdown_year": "2023", - "countdown_month": "1", - "countdown_day": "20", - "countdown_enabled": true - }, - "blocks": { - "block_t4pstgyxcklip0s": { - "type": "product", - "settings": { - "product": "2d39bfc2-2269-482d-97e8-35286c06fa8d", - "tag_color": "#000000", - "tag_text_color": "#ffffff", - "tag_position": "top_right" - } - }, - "block_t5vbqr2jlmpdhgg": { - "type": "product", - "settings": { - "product": "ce17d5cf-4607-4f0b-9996-6a2d616c0112", - "tag_color": "#000000", - "tag_text_color": "#ffffff", - "tag_position": "top_right" - } - }, - "block_t7e2q4xmp6k9hq": { - "type": "product", - "settings": { - "product": "693a2102-03c6-46d8-a5e1-e8455c3384d8", - "tag_color": "#000000", - "tag_text_color": "#ffffff", - "tag_position": "top_right" - } - } - }, - "order": [ - "block_t4pstgyxcklip0s", - "block_t5vbqr2jlmpdhgg", - "block_t7e2q4xmp6k9hq" - ] - }, - "section_vr5tnn6x1kssy5a": { - "type": "multi-column", - "settings": { - "columns_mobile": "1" - } - }, "section_ytf7ed64zpqpos7": { "type": "featured-product-slider", "settings": { @@ -453,11 +263,6 @@ "featured-products-preview", "section_62tm9748qh15wfk", "product-column", - "section_ytf7ed64zpqpos7", - "section_9nayyt0zwugfwpf", - "featured-products", - "section_sfrr573akvf9a93", - "section_iryt4p1dmrzxq9d", - "section_vr5tnn6x1kssy5a" + "section_ytf7ed64zpqpos7" ] } \ No newline at end of file