{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{% assign blog_limit = section.settings.display_blog %}
{%- paginate blog.articles by blog_limit -%}
{% if section.settings.heading != blank or section.settings.content != blank %}
<div class="section-blog-custom-header">
<div class="page-width center">
<p class="sub-title"> {{ section.settings.heading }}</p>
<div class=""> {{ section.settings.content }}</div>
</div>
</div>
{% endif %}
<div class="main-blog page-width section-{{ section.id }}-padding {{ section.settings.custom_class }} ">
{% if section.settings.show_search != blank %}
<div class="search-container search-filter-block">
<input class="search-input" type="text" name="q" placeholder="Pflanze suchen">
<button class="search-button" type="submit">
{{ 'feather-search.svg' | inline_asset_content }}
</button>
</div>
{% endif %}
<div class="articles-search-sort">
<div class="filter-blog">
<div class="filter-blog-icon">
<span>Filter</span>
<span class="svg-wrapper">
{{- 'filter-icon.svg' | inline_asset_content -}}
</span>
</div>
<div class="list-filter">
<div class="search_box_blog">
<svg xmlns="http://www.w3.org/2000/svg" width="17.841" height="18.449" viewBox="0 0 17.841 18.449">
<g id="Icon_feather-search" data-name="Icon feather-search" transform="translate(0.6 0.6)">
<path id="Path_35564" data-name="Path 35564" d="M19.071,11.786A7.286,7.286,0,1,1,11.786,4.5a7.286,7.286,0,0,1,7.286,7.286Z" transform="translate(-4.5 -4.5)" fill="none" stroke="#121212" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/>
<path id="Path_35565" data-name="Path 35565" d="M28.937,28.937l-3.962-3.962" transform="translate(-12.544 -11.937)" fill="none" stroke="#121212" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/>
</g>
</svg>
<input type="text"
class="blog-search"
placeholder="Suche…"
name="q"
value="{{ search.terms | escape }}">
</div>
<div class="custom_tags" blog_json="{{ blog.title }}">
<div class="articles-tags">
<div class="dropdown-title">
Teilstücke
<span class="dropdown-arrow flexbox"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.840504 1.1515C2.31184 2.74683 3.7825 4.34083 5.2525 5.9335C5.4605 6.1565 5.6685 6.3845 5.8765 6.6075C5.92233 6.6537 5.97686 6.69037 6.03693 6.71539C6.097 6.74041 6.16143 6.7533 6.2265 6.7533C6.29158 6.7533 6.35601 6.74041 6.41608 6.71539C6.47615 6.69037 6.53067 6.6537 6.5765 6.6075C8.04917 5.0115 9.52117 3.4175 10.9925 1.8255C11.2005 1.6025 11.4095 1.3745 11.6175 1.1515C12.0525 0.686499 11.3525 -0.0175011 10.9185 0.453499C9.44717 2.04883 7.9755 3.6425 6.5035 5.2345C6.2955 5.4575 6.0875 5.6855 5.8795 5.9085L6.5795 5.9085C5.10684 4.31317 3.63484 2.7195 2.1635 1.1275C1.9555 0.904498 1.7475 0.676498 1.5395 0.453498C1.1085 -0.0175016 0.404503 0.686498 0.839503 1.1535L0.840504 1.1515Z" fill="#6E6E6E"></path></svg>
</span>
</div>
<ul class="dropdown-content">
{%- for tag in blog.all_tags -%}
{% if current_tags contains tag %}
<li>
<a class="active" href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>
</li>
{% else %}
<li>
<a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>
</li>
{% endif %}
{%- endfor -%}
</ul>
</div>
</div>
</div>
</div>
<div class="sort_blog">
<div class="blog_sort">
<select id="sorting-dropdown">
<option value="manual" selected="selected">Sortieren nach</option>
<option value="title-ascending">Alphabetisch, A-Z</option>
<option value="title-descending">Alphabetisch Z-A</option>
</select>
</div>
</div>
</div>
<div class="blog-articles {% if section.settings.layout == 'collage' %}blog-articles--collage{% endif %}" data-product-main-wrapper>
{%- for article in blog.articles -%}
<div
class="blog-articles__article article{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %} cust_sort_blog"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{% render 'article-card',
blog: section.settings.blog,
article: article,
media_aspect_ratio: 1.66,
show_image: section.settings.show_image,
show_date: section.settings.show_date,
show_author: section.settings.show_author,
show_excerpt: true
%}
</div>
{%- endfor -%}
</div>
{% if section.settings.pagination_type == 'default' %}
{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '' %}
{%- endif -%}
{% elsif section.settings.pagination_type == 'inflating' %}
<div data-pagination-link class="show_more_btn">
{% if paginate.next %}
<a href="{{ paginate.next.url }}" class="button button--primary" data-pagination-btn>Mehr anzeigen</a>
{% endif %}
</div>
{% endif %}
</div>
{%- endpaginate -%}
{% schema %}
{
"name": "Blog Custom",
"class": "section main-blog-section",
"settings": [
{
"type": "text",
"id": "custom_class",
"label": "Custom Class"
},
{
"type": "header",
"content": "Blog Page Title"
},
{
"type": "text",
"id": "heading",
"label": "Title"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
},
{
"type": "header",
"content": "t:sections.main-blog.settings.header.content"
},
{
"type": "select",
"id": "layout",
"options": [
{
"value": "grid",
"label": "t:sections.main-blog.settings.layout.options__1.label"
},
{
"value": "collage",
"label": "t:sections.main-blog.settings.layout.options__2.label"
}
],
"default": "collage",
"label": "t:sections.main-blog.settings.layout.label",
"info": "t:sections.main-blog.settings.layout.info"
},
{
"type": "range",
"id": "display_blog",
"min": 0,
"max": 100,
"step": 1,
"label": "Disaply Blog",
"default": 12
},
{
"type": "checkbox",
"id": "show_image",
"default": true,
"label": "t:sections.main-blog.settings.show_image.label"
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.main-blog.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.main-blog.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.main-blog.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.main-blog.settings.image_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.main-blog.settings.image_height.label",
"info": "t:sections.main-blog.settings.image_height.info"
},
{
"type": "checkbox",
"id": "show_date",
"default": true,
"label": "t:sections.main-blog.settings.show_date.label"
},
{
"type": "checkbox",
"id": "show_author",
"default": false,
"label": "t:sections.main-blog.settings.show_author.label"
},
{
"type": "checkbox",
"id": "show_search",
"default": false,
"label": "Show search"
},
{
"type": "header",
"content": "pagination Type"
},
{
"type": "select",
"id": "pagination_type",
"label": "pagination Type",
"options": [
{
"value": "default",
"label": "Default Pagination"
},
{
"value": "inflating",
"label": "Inflating Pagination"
}
],
"default": "inflating"
},
{
"type": "paragraph",
"content": "t:sections.main-blog.settings.paragraph.content"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "Blog Section",
"category": "Blog custom"
}
]
}
{% endschema %}
main.js
const $loadMoreButton = $('[data-pagination-btn]');
const $productGrid = $('.blog-articles');
if ($loadMoreButton.length) {
$loadMoreButton.on('click', function(e) {
e.preventDefault();
const nextUrl = $loadMoreButton.attr('href');
$loadMoreButton.text("Laden...");
$loadMoreButton.prop('disabled', true);
$.get(nextUrl, function(response) {
const $tempDiv = $('<div>').html(response);
const newProductsHtml = $tempDiv.find('.blog-articles').html();
$productGrid.append(newProductsHtml);
const $newButton = $tempDiv.find('[data-pagination-btn]');
const newHref = $newButton.attr('href');
if ($newButton.length && newHref && newHref !== nextUrl) {
$loadMoreButton.attr('href', newHref);
$loadMoreButton.text("MEHR ANZEIGEN");
$loadMoreButton.prop('disabled', false);
} else {
$loadMoreButton.text("Keine Produkte mehr").hide();
}
}).fail(function() {
console.error('Error loading more products.');
$loadMoreButton.text("Try again");
$loadMoreButton.prop('disabled', false);
});
});
}
