diff --git a/assets/collection-listing.css b/assets/collection-listing.css index d0a0b000..d1854ef0 100644 --- a/assets/collection-listing.css +++ b/assets/collection-listing.css @@ -1,5 +1,6 @@ .yc-collection-listing .collection-list { display: grid; + margin-top: 60px; grid-template-columns: 1fr; gap: 12px; padding: 54px 20px; @@ -63,24 +64,3 @@ 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/dropdown.css b/assets/dropdown.css index e7f2d456..22a88c50 100644 --- a/assets/dropdown.css +++ b/assets/dropdown.css @@ -1,9 +1,6 @@ /* ----------------------------- */ /* ----- select-box design ----- */ /* ----------------------------- */ -select { - display: none; -} .yc-dropdown { box-sizing: border-box; diff --git a/assets/main.css b/assets/main.css index cccf673b..aab413d4 100644 --- a/assets/main.css +++ b/assets/main.css @@ -479,3 +479,24 @@ input:not([type=radio]), bottom: 8px; left: 8px; } + +.breadcrumbs-container .breadcrumbs-listings { + display: flex; + align-items: center; + gap: 12px; + margin: 40px auto; +} +.breadcrumbs-container .breadcrumbs-listings .first-listing { + color: #A8A8A8; + font-weight: 400; + font-size: 14px; +} +.breadcrumbs-container .breadcrumbs-listings .second-listing { + font-weight: 700; + color: #000000; + font-size: 14px; +} +.breadcrumbs-container .breadcrumbs-name { + font-weight: 700; + font-size: 26px; +} diff --git a/assets/product-listing.css b/assets/product-listing.css new file mode 100644 index 00000000..f0d428b7 --- /dev/null +++ b/assets/product-listing.css @@ -0,0 +1,99 @@ +.yc-product-listing-container { + padding: 0 16px; +} +.yc-product-listing-container .product-list { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + margin-top: 40px; +} +.yc-product-listing-container .product-list .product-block .product-thumbnail { + border: 1px solid #EFEFEF; + border-radius: 4px; + padding: 26px 5px; +} +.yc-product-listing-container .product-list .product-block .product-thumbnail img { + width: 100%; + height: 200px; + object-fit: contain; +} +.yc-product-listing-container .product-list .product-block .product-details { + margin: 14px 0; + text-align: center; +} +.yc-product-listing-container .product-list .product-block .product-details .product-title { + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.yc-product-listing-container .product-list .product-block .prices { + display: flex; + justify-content: center; + gap: 5px; +} +.yc-product-listing-container .product-list .product-block .prices .product-price { + font-weight: 700; + font-size: 18px; + line-height: 22px; + color: var(--yc-primary-color); +} +@media (min-width: 768px) { + .yc-product-listing-container .product-list { + grid-template-columns: repeat(3, 1fr); + gap: 30px 20px; + } +} +@media (min-width: 992px) { + .yc-product-listing-container .product-list { + grid-template-columns: repeat(4, 1fr); + } +} +.yc-product-listing-container .sort-container { + margin: 40px auto; +} +.yc-product-listing-container .sort-container .sort-select { + padding: 8px 13px; + border: 1px solid #E7E7E7; + border-radius: 4px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-position: left 10px top 50%; + background-repeat: no-repeat; + background-size: 15px; + background-color: #fff; + color: #000; + font-size: 14px; + line-height: 22px; + font-weight: 400; + cursor: pointer; + width: 100%; + max-width: 200px; +} +.yc-product-listing-container .sort-container .sort-select option { + color: #000; + font-size: 14px; + line-height: 22px; + font-weight: 400; +} +@media (min-width: 768px) { + .yc-product-listing-container { + padding: 0 50px; + } +} +@media (min-width: 992px) { + .yc-product-listing-container { + padding: 0 80px; + } +} +@media (min-width: 1200px) { + .yc-product-listing-container { + padding: 0 150px; + } +} +@media (min-width: 1400px) { + .yc-product-listing-container { + padding: 0 250px; + } +} diff --git a/assets/queries-handler.css b/assets/queries-handler.css index 09c3687f..df489db3 100644 --- a/assets/queries-handler.css +++ b/assets/queries-handler.css @@ -37,23 +37,6 @@ flex-wrap: wrap; gap: 4px; } -.top-items .sort-items-holder .field .pawn { - display: flex; - gap: 7px; - align-items: center; - padding: 3px 13px; - border-radius: 50rem; - font-size: 14px; - background-color: rgba(0, 0, 0, 0.1); - color: rgba(0, 0, 0, 0.7); -} -.top-items .sort-items-holder .field .pawn:hover { - background-color: rgba(0, 0, 0, 0.2); -} -.top-items .sort-items-holder .field .pawn.active { - background-color: var(--yc-primary-color); - color: white; -} /* ---------------------- */ /* ----- pagination ----- */ @@ -65,7 +48,6 @@ gap: 10px; margin: 20px auto; padding: 1rem 2rem; - box-shadow: var(--yc-main-shadow); border-radius: 8px; width: fit-content; } @@ -75,21 +57,17 @@ display: flex; align-items: center; justify-content: center; - border-radius: 50rem; + border: 1px solid #E4E4E4; + border-radius: 4px; + color: #B1B1B1; } .yc-pagination-wrapper .paginate-btn:hover, .yc-pagination-wrapper .paginate-btn.active { - background: var(--yc-neutral-light-color); + border-color: var(--yc-primary-color); + color: var(--yc-primary-color); } .yc-pagination-wrapper .paginate-btn-prev, .yc-pagination-wrapper .paginate-btn-next { - width: 2.3rem; - height: 2.3rem; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50rem; - background-color: var(--yc-primary-color); - cursor: pointer; - color: white; + color: #000; + border: 0; } .yc-pagination-wrapper .paginate-btn-prev.disabled, .yc-pagination-wrapper .paginate-btn-next.disabled { background-color: var(--yc-neutral-light-color); diff --git a/assets/queries-handler.js b/assets/queries-handler.js index e18cf7b5..4e458c69 100644 --- a/assets/queries-handler.js +++ b/assets/queries-handler.js @@ -6,6 +6,7 @@ const urlParams = new URLSearchParams(window.location.search); const query = urlParams.get('q'); const sortField = urlParams.get('sort_field'); const sortOrder = urlParams.get('sort_order'); +const sortSelect = document.querySelector('.sort-select'); let page = +urlParams.get('page[cod]'); const updateUrl = (key, value, url) => { @@ -52,30 +53,19 @@ if (searchTitle) { searchTitle.innerHTML = query; } -const sortBtns = document.querySelectorAll('.sort-items-holder .pawn'); +if (sortSelect) { + let sortField = urlParams.get('sort_field'); + + if (!sortField) { + // Set a default value for sortField if it is null or undefined + sortField = sortSelect.options[0].value; + } -if (sortBtns) { - sortBtns.forEach((btn) => { + sortSelect.value = sortField; + + sortSelect.addEventListener('change', () => { const convertedSortOrder = sortOrder === 'asc' ? 'desc' : 'asc'; - btn.setAttribute( - 'href', - convertUrlWithMultipleQuery(['sort_field', 'sort_order'], [btn.dataset.value, convertedSortOrder]), - ); - - const sortBtn = document.querySelector(`.sort-items-holder .pawn[data-value='${sortField}']`); - - if (sortBtn) { - sortBtn.classList.add('active'); - - const sortBtnIcon = sortBtn.querySelector('ion-icon'); - - if (sortBtnIcon) { - if (sortOrder === 'asc') { - sortBtnIcon.setAttribute('name', 'chevron-up-outline'); - } else { - sortBtnIcon.setAttribute('name', 'chevron-down-outline'); - } - } - } + const selectedValue = sortSelect.value; + window.location.href = convertUrlWithMultipleQuery(['sort_field', 'sort_order'], [selectedValue, convertedSortOrder]); }); } diff --git a/sections/main-collection.liquid b/sections/main-collection.liquid index 694d8320..9c1895e4 100644 --- a/sections/main-collection.liquid +++ b/sections/main-collection.liquid @@ -1,12 +1,29 @@ {{ 'queries-handler.css' | asset_url | stylesheet_tag }} -{{ 'featured-products.css' | asset_url | stylesheet_tag }} +{{ 'product-listing.css' | asset_url | stylesheet_tag }} {%- assign per_page = section.settings.items_per_page -%} -
-
-

{{ category.name }}

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

{{ category.name }}

+
+
+
{%- render 'main-sort' -%}
+ {%- paginate collection.products by per_page cod %}
{% for product in items %} diff --git a/snippets/main-sort.liquid b/snippets/main-sort.liquid index 6baaf159..fbfeea70 100644 --- a/snippets/main-sort.liquid +++ b/snippets/main-sort.liquid @@ -1,26 +1,6 @@ -
-
{{ 'snippets.main_sort.title' | t }}
-
- - {{ 'snippets.main_sort.price' | t }} - - - - {{ 'snippets.main_sort.newest' | t }} - - - - {{ 'snippets.main_sort.alphabetically' | t }} - - -
-
+ + \ No newline at end of file diff --git a/snippets/product-preview.liquid b/snippets/product-preview.liquid index f0f131e6..288afc3d 100644 --- a/snippets/product-preview.liquid +++ b/snippets/product-preview.liquid @@ -37,9 +37,4 @@ {{ item.compare_at_price | money }} {% endif %}
-
- -
diff --git a/styles/collection-listing.scss b/styles/collection-listing.scss index e7573aeb..c4f57fa7 100644 --- a/styles/collection-listing.scss +++ b/styles/collection-listing.scss @@ -3,6 +3,7 @@ .yc-collection-listing { .collection-list { display: grid; + margin-top: 60px; grid-template-columns: 1fr; gap: 12px; padding: 54px 20px; @@ -63,30 +64,5 @@ @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/styles/main.scss b/styles/main.scss index 13424820..f83bee52 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -26,7 +26,6 @@ body { font-family: var(--yc-font-family); } -// remove the sticky preview-bar [style*='z-index: 500; height: 54px; width: 100vw; position: fixed; padding: 4px 16px'] { display: none !important; } @@ -509,3 +508,29 @@ input:not([type='radio']), left: 8px; } } + +.breadcrumbs-container { + .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; + } +} diff --git a/styles/product-listing.scss b/styles/product-listing.scss new file mode 100644 index 00000000..7101d5be --- /dev/null +++ b/styles/product-listing.scss @@ -0,0 +1,108 @@ +@import 'helpers/mixins'; + +.yc-product-listing-container { + padding: 0 16px; + + .product-list { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + margin-top: 40px; + + .product-block { + .product-thumbnail { + border: 1px solid #EFEFEF; + border-radius: 4px; + padding: 26px 5px; + + img { + width: 100%; + height: 200px; + object-fit: contain; + } + } + + .product-details { + margin: 14px 0; + text-align: center; + + .product-title { + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + + .prices { + display: flex; + justify-content: center; + gap: 5px; + + .product-price { + font-weight: 700; + font-size: 18px; + line-height: 22px; + color: var(--yc-primary-color); + } + } + } + + @include breakpoint('md') { + grid-template-columns: repeat(3, 1fr); + gap: 30px 20px; + } + + @include breakpoint('lg') { + grid-template-columns: repeat(4, 1fr); + } + } + + .sort-container { + margin: 40px auto; + + .sort-select { + padding: 8px 13px; + border: 1px solid #E7E7E7; + border-radius: 4px; + // style the native select element + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-position: left 10px top 50%; + background-repeat: no-repeat; + background-size: 15px; + background-color: #fff; + color: #000; + font-size: 14px; + line-height: 22px; + font-weight: 400; + cursor: pointer; + width: 100%; + max-width: 200px; + + option { + color: #000; + font-size: 14px; + line-height: 22px; + font-weight: 400; + } + } + } + + @include breakpoint('md') { + padding: 0 50px; + } + + @include breakpoint('lg') { + padding: 0 80px; + } + + @include breakpoint('xl') { + padding: 0 150px; + } + + @include breakpoint('xxl') { + padding: 0 250px; + } +} \ No newline at end of file diff --git a/styles/queries-handler.scss b/styles/queries-handler.scss index 7ded5d5f..ed6dbaa1 100644 --- a/styles/queries-handler.scss +++ b/styles/queries-handler.scss @@ -38,26 +38,6 @@ align-items: center; flex-wrap: wrap; gap: 4px; - - .pawn { - display: flex; - gap: 7px; - align-items: center; - padding: 3px 13px; - border-radius: 50rem; - font-size: 14px; - background-color: rgba(0, 0, 0, 0.1); - color: rgba(0, 0, 0, 0.7); - - &:hover { - background-color: rgba(0, 0, 0, 0.2); - } - - &.active { - background-color: var(--yc-primary-color); - color: white; - } - } } } } @@ -72,7 +52,6 @@ gap: 10px; margin: 20px auto; padding: 1rem 2rem; - box-shadow: var(--yc-main-shadow); border-radius: 8px; width: fit-content; @@ -85,25 +64,21 @@ display: flex; align-items: center; justify-content: center; - border-radius: 50rem; + border: 1px solid #E4E4E4; + border-radius: 4px; + color: #B1B1B1; } &:hover, &.active { - background: var(--yc-neutral-light-color); + border-color: var(--yc-primary-color); + color: var(--yc-primary-color); } &-prev, &-next { - width: 2.3rem; - height: 2.3rem; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50rem; - background-color: var(--yc-primary-color); - cursor: pointer; - color: white; + color: #000; + border: 0; &.disabled { background-color: var(--yc-neutral-light-color); diff --git a/templates/index.json b/templates/index.json index aae2a4bd..beea3071 100644 --- a/templates/index.json +++ b/templates/index.json @@ -98,7 +98,7 @@ "tag_text_color": "#ffffff", "tag_position": "top_right", "tag_text": "جديد", - "product": "e53d4919-b7e9-4a4b-a612-26b76241870f" + "product": "2d39bfc2-2269-482d-97e8-35286c06fa8d" } }, "block_6724xikj4i64s4": { @@ -256,6 +256,20 @@ "block_yy1vjmbhyh0t8zq", "block_yyy9mwvoxmghgwq" ] + }, + "section_p3bpf7007sndktq": { + "type": "feature-products-by-category", + "settings": { + "number_of_products": 8, + "show_compare_at_price": true, + "link_of_collection_by_category": true, + "countdown_message": "

Hurry up! There aren't many items left in stock.<\/p>", + "countdown_year": 0, + "countdown_month": 0, + "countdown_day": 0, + "countdown_hour": 0, + "countdown_minute": 0 + } } }, "order": [ @@ -263,6 +277,7 @@ "featured-products-preview", "section_62tm9748qh15wfk", "product-column", - "section_ytf7ed64zpqpos7" + "section_ytf7ed64zpqpos7", + "section_p3bpf7007sndktq" ] -} \ No newline at end of file +}