| 66 | Shopify | | html | brands Mase | <div class="custom-brand-page-section">
{% assign available_letters = '' %}
{% for collection in collections %}
{% assign first_letter = collection.title | slice: 0, 1 | upcase %}
{% if collection.metafields.custom.brands_pagina == true %}
{% unless available_letters contains first_letter %}
{% assign available_letters = available_letters | append: first_letter %}
{% endunless %}
{% endif %}
{% endfor %}
{% assign available_letters = available_letters | split: '' | sort | uniq %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'heading' %}
<!-- Heading Block -->
<div
class="block-container"
style="
max-width: {{ section.settings.desktop_max_width }}px;
padding-left: {{ block.settings.padding_left }}px;
padding-right: {{ block.settings.padding_right }}px;
margin: 0 auto;
text-align: {{ block.settings.alignment }};
"
>
<h2
style="
font-size: {{ block.settings.font_size_desktop }}px;
margin-top: {{ block.settings.margin_top }}px;
margin-bottom: {{ block.settings.margin_bottom }}px;
"
>
{{ block.settings.heading | escape }}
</h2>
</div>
{% when 'letter-nav' %}
<!-- Alphabetical Navigation -->
<div
class="block-container"
style="
max-width: {{ section.settings.desktop_max_width }}px;
padding-left: {{ block.settings.padding_left }}px;
padding-right: {{ block.settings.padding_right }}px;
margin: 0 auto;
"
>
<div
class="alphabetical-nav"
style="
justify-content: center;
margin-top: {{ block.settings.margin_top }}px;
margin-bottom: {{ block.settings.margin_bottom }}px;
"
>
{% for letter in available_letters %}
<a
href="#alpha-{{ letter }}"
class="nav-letter"
style="
font-size: {{ block.settings.nav_font_size_desktop }}px;
font-weight: {% if block.settings.nav_bold %} bold {% else %} normal {% endif %};
font-style: {% if block.settings.nav_italic %} italic {% else %} normal {% endif %};
text-decoration: {% if block.settings.nav_underline %} underline {% else %} none {% endif %};
color: {{ block.settings.nav_text_color }};
margin-right: {{ block.settings.nav_spacing_desktop }}px;
"
>
{{ letter }}
</a>
{% endfor %}
</div>
</div>
{% when 'content' %}
<!-- Brands List -->
<div
class="block-container"
style="
max-width: {{ section.settings.desktop_max_width }}px;
padding-left: {{ block.settings.padding_left }}px;
padding-right: {{ block.settings.padding_right }}px;
margin: 0 auto;
"
>
<div
class="brands-list"
style="
gap: {{ block.settings.desktop_gap }}px;
margin-top: {{ block.settings.margin_top }}px;
margin-bottom: {{ block.settings.margin_bottom }}px;
"
>
<!-- Start A-Z Block -->
{% for letter in available_letters %}
<div id="alpha-{{ letter }}" class="brand-group">
<div class="brand-letter">{{ letter }}</div>
<div
class="brand-names"
style=" gap: {{ block.settings.desktop_gap }}px;"
>
{% assign has_collections = false %}
{% for collection in collections %}
{% assign exclude_collection = false %}
{% for excluded_collection in excluded_collections %}
{% if collection.handle == excluded_collection %}
{% assign exclude_collection = true %}
{% endif %}
{% endfor %}
{% unless exclude_collection %}
{% if collection.metafields.custom.brands_pagina == true %}
{% assign first_letter = collection.title | slice: 0, 1 | upcase %}
{% if first_letter == letter %}
<a
href="{{ collection.url }}"
style="
font-size: {{ block.settings.collection_font_size_desktop }}px;
font-weight: {% if block.settings.collection_bold %} bold {% else %} normal {% endif %};
text-transform: {{ block.settings.collection_text_transform }};
"
>
{{ collection.title | capitalize }}
</a>
{% assign has_collections = true %}
{% endif %}
{% endif %}
{% endunless %}
{% endfor %}
</div>
</div>
<hr>
{% endfor %}
<!-- End A-Z Block -->
</div>
</div>
{% endcase %}
{% endfor %}
</div>
<style>
.custom-brand-page-section {
padding: 20px;
}
.alphabetical-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.alphabetical-nav a {
text-decoration: none;
color: var(--nav-text-color, #000);
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.brands-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.brand-group {
display: flex;
align-items: flex-start;
}
.brand-letter {
width: 50px;
font-weight: bold;
margin-right: 10px;
}
.brand-names {
display: flex;
flex-wrap: wrap;
flex: 1;
}
.brand-names a {
width: calc((100% / var(--brand-columns-desktop, 2)) - calc(var(--brand-gap-desktop, 10px))); /* dynamic columns with a gap */
text-decoration: none;
color: #000;
}
@media (max-width: 768px) {
.brand-names {
gap: calc(var(--brand-gap-mobile, 5px));
}
.brand-names a {
width: calc((100% / var(--brand-columns-mobile, 1)) - calc(var(--brand-gap-mobile, 5px))); /* dynamic columns with a gap */
}
.alphabetical-nav a {
font-size: {{ block.settings.nav_font_size_mobile }}px;
margin-right: {{ block.settings.nav_spacing_mobile }}px;
}
}
hr {
border: none;
border-top: 1px solid #ccc;
margin: 10px 0;
}
</style>
<script>
document.querySelectorAll('.nav-letter').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
target.scrollIntoView({ behavior: 'smooth' });
});
});
</script>
{% schema %}
{
"name": "KAS040 Brands | Mase",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Full Width",
"default": false
},
{
"type": "number",
"id": "desktop_max_width",
"label": "Desktop Max Width (px)",
"default": 1200
},
{
"type": "header",
"content": "Desktop Spacing"
},
{
"type": "range",
"id": "padding_top_desktop",
"label": "Padding Top (Desktop)",
"default": 20,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_bottom_desktop",
"label": "Padding Bottom (Desktop)",
"default": 20,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "spacing_top_desktop",
"label": "Spacing Top (Desktop)",
"default": 1,
"min": 0,
"max": 10
},
{
"type": "range",
"id": "spacing_bottom_desktop",
"label": "Spacing Bottom (Desktop)",
"default": 1,
"min": 0,
"max": 10
},
{
"type": "header",
"content": "Mobile Spacing"
},
{
"type": "range",
"id": "padding_top_mobile",
"label": "Padding Top (Mobile)",
"default": 10,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_bottom_mobile",
"label": "Padding Bottom (Mobile)",
"default": 10,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "spacing_top_mobile",
"label": "Spacing Top (Mobile)",
"default": 1,
"min": 0,
"max": 10
},
{
"type": "range",
"id": "spacing_bottom_mobile",
"label": "Spacing Bottom (Mobile)",
"default": 1,
"min":
0,
"max": 10
}
],
"blocks": [
{
"type": "heading",
"name": "Heading",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading Text",
"default": "Brand List"
},
{
"type": "select",
"id": "heading_size",
"label": "Heading Size",
"options": [
{ "value": "h1", "label": "H1" },
{ "value": "h2", "label": "H2" },
{ "value": "h3", "label": "H3" },
{ "value": "h4", "label": "H4" },
{ "value": "h5", "label": "H5" },
{ "value": "h6", "label": "H6" }
],
"default": "h2"
},
{
"type": "range",
"id": "font_size_desktop",
"label": "Font Size (Desktop)",
"default": 24,
"min": 8,
"max": 72
},
{
"type": "range",
"id": "font_size_mobile",
"label": "Font Size (Mobile)",
"default": 20,
"min": 8,
"max": 72
},
{
"type": "select",
"id": "alignment",
"label": "Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "left"
},
{
"type": "range",
"id": "margin_top",
"label": "Margin Top",
"default": 0,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "margin_bottom",
"label": "Margin Bottom",
"default": 20,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_left",
"label": "Padding Left (Desktop)",
"default": 15,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_right",
"label": "Padding Right (Desktop)",
"default": 15,
"min": 0,
"max": 100
}
]
},
{
"type": "letter-nav",
"name": "Letter Navigation",
"settings": [
{
"type": "range",
"id": "nav_font_size_desktop",
"label": "Font Size (Desktop)",
"default": 16,
"min": 8,
"max": 72
},
{
"type": "range",
"id": "nav_font_size_mobile",
"label": "Font Size (Mobile)",
"default": 14,
"min": 8,
"max": 72
},
{
"type": "checkbox",
"id": "nav_bold",
"label": "Bold",
"default": false
},
{
"type": "checkbox",
"id": "nav_italic",
"label": "Italic",
"default": false
},
{
"type": "checkbox",
"id": "nav_underline",
"label": "Underline",
"default": false
},
{
"type": "color",
"id": "nav_text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "range",
"id": "nav_spacing_desktop",
"label": "Spacing Between Letters (Desktop)",
"default": 10,
"min": 0,
"max": 50
},
{
"type": "range",
"id": "nav_spacing_mobile",
"label": "Spacing Between Letters (Mobile)",
"default": 5,
"min": 0,
"max": 50
},
{
"type": "range",
"id": "margin_top",
"label": "Margin Top",
"default": 0,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "margin_bottom",
"label": "Margin Bottom",
"default": 20,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_left",
"label": "Padding Left (Desktop)",
"default": 15,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_right",
"label": "Padding Right (Desktop)",
"default": 15,
"min": 0,
"max": 100
}
]
},
{
"type": "content",
"name": "Brand List",
"settings": [
{
"type": "header",
"content": "Letter Settings"
},
{
"type": "range",
"id": "letter_font_size_desktop",
"label": "Font Size (Desktop)",
"default": 16,
"min": 8,
"max": 72
},
{
"type": "range",
"id": "letter_font_size_mobile",
"label": "Font Size (Mobile)",
"default": 14,
"min": 8,
"max": 72
},
{
"type": "checkbox",
"id": "letter_bold",
"label": "Bold Letters",
"default": false
},
{
"type": "header",
"content": "Collection Settings"
},
{
"type": "range",
"id": "collection_font_size_desktop",
"label": "Font Size (Desktop)",
"default": 14,
"min": 8,
"max": 72
},
{
"type": "range",
"id": "collection_font_size_mobile",
"label": "Font Size (Mobile)",
"default": 12,
"min": 8,
"max": 72
},
{
"type": "checkbox",
"id": "collection_bold",
"label": "Bold Collection Names",
"default": false
},
{
"type": "select",
"id": "collection_text_transform",
"label": "Text Transform",
"options": [
{ "value": "none", "label": "None" },
{ "value": "uppercase", "label": "Uppercase" },
{ "value": "lowercase", "label": "Lowercase" },
{ "value": "capitalize", "label": "Capitalize" }
],
"default": "none"
},
{
"type": "range",
"id": "desktop_gap",
"label": "Gap Between Names (Desktop)",
"default": 10,
"min": 0,
"max": 50
},
{
"type": "range",
"id": "mobile_gap",
"label": "Gap Between Names (Mobile)",
"default": 5,
"min": 0,
"max": 50
},
{
"type": "select",
"id": "columns_desktop",
"label": "Number of Columns (Desktop)",
"options": [
{ "value": "1", "label": "1 Column" },
{ "value": "2", "label": "2 Columns" },
{ "value": "3", "label": "3 Columns" },
{ "value": "4", "label": "4 Columns" }
],
"default": "2"
},
{
"type": "select",
"id": "columns_mobile",
"label": "Number of Columns (Mobile)",
"options": [
{ "value": "1", "label": "1 Column" },
{ "value": "2", "label": "2 Columns" }
],
"default": "1"
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "margin_top",
"label": "Margin Top",
"default": 0,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "margin_bottom",
"label": "Margin Bottom",
"default": 20,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_left",
"label": "Padding Left (Desktop)",
"default": 15,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_right",
"label": "Padding Right (Desktop)",
"default": 15,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_top",
"label": "Padding Top",
"default": 0,
"min": 0,
"max": 100
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom",
"default": 20,
"min": 0,
"max": 100
}
]
}
],
"presets": [
{
"name": "KAS040 Brands | Mase",
"blocks": [
{
"type": "heading"
},
{
"type": "letter-nav"
},
{
"type": "content"
}
]
}
]
}
{% endschema %}
| |