概要
新規セクション用コード
- 【ご注意ください】あくまでもDawn用に簡易実装した実験的なコードです。完全に動かないケースも大いに考えられますので、CSSやliquidのコードは適宜カスタマイズしてください！
- 新規にセクションファイルを作成し、下記のコードを入れます（タイトル周りなど、一部に
featured-collection.liquid のコードを流用しています）
- ブロック要素にコレクション、商品、ブログ記事の設定が可能なピッカーを設定し、その内容に応じて表示するところがポイントです。
- 「新着アイコン」が表示されない不具合を修正しました。
featured-collection-product-article.liquid
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.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 -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="collection-list-wrapper page-width isolate
{% if show_mobile_slider %} page-width-desktop{% endif %}
{% if section.settings.title == blank %} no-heading{% endif %}
{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
{%- unless section.settings.title == blank -%}
<div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
<h2
id="SectionHeading-{{ section.id }}"
class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
>
{{ section.settings.title }}
</h2>
</div>
{%- endunless -%}
<style>
.cpa-grid {
display: grid;
column-gap: var(--grid-desktop-horizontal-spacing);
row-gap: var(--grid-desktop-vertical-spacing);
padding: 0;
}
.cpa-grid li {
border: 1px solid #EEE;
list-style-type: none;
position: relative;
}
.cpa-grid li a {
color: #000;
text-decoration: none;
}
.cpa-grid .new_badge {
position: absolute;
display: block;
background-color: #FEF001;
padding: 10px;
font-weight: bold;
top: 5px;
left: 5px;
}
.cpa-grid img {
width: 100%
}
@media screen and (min-width: 750px) {
.cpa-grid {
grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr);
}
.cpa-grid li {
padding: 10px;
}
.cpa-grid .desktop-colspan-2 {
grid-column: span 2;
}
.cpa-grid .desktop-colspan-3 {
grid-column: span 3;
}
.cpa-grid .desktop-colspan-4 {
grid-column: span 4;
}
.cpa-grid .desktop-colspan-5 {
grid-column: span 5;
}
.cpa-grid .image img {
height: 200px;
object-fit: cover;
}
.cpa-grid .image svg.image-desktop-200 { height: 200px; width: 100%; }
.cpa-grid .image img.image-desktop-200 { height: 200px; }
.cpa-grid .image img.image-desktop-210 { height: 210px; }
.cpa-grid .image img.image-desktop-220 { height: 220px; }
.cpa-grid .image img.image-desktop-230 { height: 230px; }
.cpa-grid .image img.image-desktop-240 { height: 240px; }
.cpa-grid .image img.image-desktop-250 { height: 250px; }
.cpa-grid .image img.image-desktop-260 { height: 260px; }
.cpa-grid .image img.image-desktop-270 { height: 270px; }
.cpa-grid .image img.image-desktop-280 { height: 280px; }
.cpa-grid .image img.image-desktop-290 { height: 290px; }
.cpa-grid .image img.image-desktop-300 { height: 300px; }
.cpa-grid .icon {
border: 1px solid #000;
border-radius: 4px;
padding: 2px 8px;
width: fit-content;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.2rem;
}
.cpa-grid h3 {
margin: 8px 0 2px;
font-size: 12px;
font-weight: bold;
}
.cpa-grid p {
margin: 0;
font-size: 12px;
line-height: 1.4;
}
}
@media screen and (max-width: 749px) {
.cpa-grid {
grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
padding: 10px;
}
.cpa-grid li {
padding: 5px;
}
.cpa-grid .mobile-colspan-2 {
grid-column: span 2;
}
.cpa-grid .image img {
height: 150px;
object-fit: cover;
}
.cpa-grid .image svg.image-mobile-150 { height: 150px; width: 100%; }
.cpa-grid .image img.image-mobile-150 { height: 150px;}
.cpa-grid .image img.image-mobile-160 { height: 160px;}
.cpa-grid .image img.image-mobile-170 { height: 170px;}
.cpa-grid .image img.image-mobile-180 { height: 180px;}
.cpa-grid .image img.image-mobile-190 { height: 190px;}
.cpa-grid .image img.image-mobile-200 { height: 200px;}
.cpa-grid .image img.image-mobile-210 { height: 210px;}
.cpa-grid .image img.image-mobile-220 { height: 220px;}
.cpa-grid .image img.image-mobile-230 { height: 230px;}
.cpa-grid .image img.image-mobile-240 { height: 240px;}
.cpa-grid .image img.image-mobile-250 { height: 250px;}
.cpa-grid .image img.image-mobile-260 { height: 260px;}
.cpa-grid .image img.image-mobile-270 { height: 270px;}
.cpa-grid .image img.image-mobile-280 { height: 280px;}
.cpa-grid .image img.image-mobile-290 { height: 290px;}
.cpa-grid .image img.image-mobile-300 { height: 300px;}
.cpa-grid .icon {
border: 1px solid #000;
border-radius: 4px;
padding: 0px 6px;
width: fit-content;
font-size: 11px;
font-weight: bold;
letter-spacing: 0.2rem;
}
.cpa-grid h3 {
margin: 8px 0 2px;
font-size: 12px;
font-weight: bold;
}
.cpa-grid p {
margin: 0;
font-size: 12px;
line-height: 1.4;
}
}
</style>
<ul class="cpa-grid">
{%- for block in section.blocks -%}
{% if block.settings.collection %}
<li class="desktop-colspan-{% if block.settings.colspan_desktop > section.settings.columns_desktop %}{{ section.settings.columns_desktop }}{% else %}{{ block.settings.colspan_desktop }}{% endif %} mobile-colspan-{{ block.settings.colspan_mobile }}">
<a href="{{ block.settings.collection.url }}">{% if block.settings.show_new_badge %}<span class="new_badge">NEW</span>{% endif %}
<div class="image">{%- unless block.settings.collection.featured_image -%}{{ 'image' | placeholder_svg_tag: 'image-desktop-200 image-mobile-150' }}{%- else -%}<img src="{{ block.settings.collection.featured_image | image_url }}" class="image-desktop-{{ block.settings.imgheight_desktop }} image-mobile-{{ block.settings.imgheight_mobile }}" loading="lazy">{%- endunless -%}</div>
<div class="icon">コレクション</div>
<h3>{% unless block.settings.card_title == "" %}{{ block.settings.card_title }}{% else %}{{ block.settings.collection.title }}{% endunless %}</h3>
{% assign trancate_num = 40 | times: block.settings.colspan_desktop %}
<p>{% unless block.settings.card_description == "" %}{{ block.settings.card_description | truncate: trancate_num, "..." }}{% else %}{{ block.settings.collection.description | strip_html | truncate: trancate_num, "..." }}{% endunless %}</p>
</a>
</li>
{% elsif block.settings.product %}
<li class="desktop-colspan-{% if block.settings.colspan_desktop > section.settings.columns_desktop %}{{ section.settings.columns_desktop }}{% else %}{{ block.settings.colspan_desktop }}{% endif %} mobile-colspan-{{ block.settings.colspan_mobile }}">
<a href="{{ block.settings.product.url }}">{% if block.settings.show_new_badge %}<span class="new_badge">NEW</span>{% endif %}
<div class="image">{%- unless block.settings.product.featured_image -%}{{ 'image' | placeholder_svg_tag: 'image-desktop-200 image-mobile-150' }}{%- else -%}<img src="{{ block.settings.product.featured_image | image_url }}" class="image-desktop-{{ block.settings.imgheight_desktop }} image-mobile-{{ block.settings.imgheight_mobile }}" loading="lazy">{%- endunless -%}</div>
<div class="icon">商品</div>
<h3>{% unless block.settings.card_title == "" %}{{ block.settings.card_title }}{% else %}{{ block.settings.product.title }}{% endunless %}</h3>
{% assign trancate_num = 40 | times: block.settings.colspan_desktop %}
<p>{% unless block.settings.card_description == "" %}{{ block.settings.card_description | truncate: trancate_num, "..." }}{% else %}{{ block.settings.product.description | strip_html | truncate: trancate_num, "..." }}{% endunless %}</p>
</a>
</li>
{% elsif block.settings.article %}
<li class="desktop-colspan-{% if block.settings.colspan_desktop > section.settings.columns_desktop %}{{ section.settings.columns_desktop }}{% else %}{{ block.settings.colspan_desktop }}{% endif %} mobile-colspan-{{ block.settings.colspan_mobile }}">
<a href="{{ block.settings.article.url }}">{% if block.settings.show_new_badge %}<span class="new_badge">NEW</span>{% endif %}
<div class="image">{%- unless block.settings.article.image -%}{{ 'image' | placeholder_svg_tag: 'image-desktop-200 image-mobile-150' }}{%- else -%}<img src="{{ block.settings.article.image | image_url }}" class="image-desktop-{{ block.settings.imgheight_desktop }} image-mobile-{{ block.settings.imgheight_mobile }}" loading="lazy">{%- endunless -%}</div>
<div class="icon">ブログ</div>
<h3>{% unless block.settings.card_title == "" %}{{ block.settings.card_title }}{% else %}{{ block.settings.article.title }}{% endunless %}</h3>
{% assign trancate_num = 40 | times: block.settings.colspan_desktop %}
<p>{% unless block.settings.card_description == "" %}{{ block.settings.card_description | truncate: trancate_num, "..." }}{% else %}{{ block.settings.article.content | strip_html | truncate: trancate_num, "..." }}{% endunless %}</p>
</a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
</div>
{% schema %}
{
"name": "特集コレクション・商品・記事",
"class": "section section-collection-list",
"max_blocks": 24,
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "特集コレクション・商品・記事",
"label": "t:sections.collection-list.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 3,
"label": "t:sections.collection-list.settings.columns_desktop.label"
},
{
"type": "header",
"content": "t:sections.collection-list.settings.header_mobile.content"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.collection-list.settings.columns_mobile.label"
},
{
"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
}
],
"blocks": [
{
"type": "collection",
"name": "コレクション",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "コレクション"
},
{
"type": "text",
"id": "card_title",
"label": "カードタイトル",
"info": "空欄の場合はコレクションのタイトルを表示します"
},
{
"type": "textarea",
"id": "card_description",
"label": "カード説明文",
"info": "空欄の場合はコレクションの説明文を表示します"
},
{
"type": "checkbox",
"id": "show_new_badge",
"default": false,
"label": "新着表示"
},
{
"type": "range",
"id": "colspan_desktop",
"min": 1,
"max": 5,
"step": 1,
"label": "デスクトップでの列をまたぐ数",
"default": 1
},
{
"type": "range",
"id": "imgheight_desktop",
"min": 200,
"max": 300,
"step": 10,
"label": "デスクトップでの画像の高さ",
"default": 200
},
{
"type": "select",
"id": "colspan_mobile",
"options": [
{
"value": "1",
"label": "1列"
},
{
"value": "2",
"label": "2列"
}
],
"default": "1",
"label": "モバイルでの列をまたぐ数"
},
{
"type": "range",
"id": "imgheight_mobile",
"min": 150,
"max": 300,
"step": 10,
"label": "モバイルでの画像の高さ",
"default": 150
}
]
},
{
"type": "product",
"name": "商品",
"settings": [
{
"type": "product",
"id": "product",
"label": "商品"
},
{
"type": "text",
"id": "card_title",
"label": "カードタイトル",
"info": "空欄の場合はコレクションのタイトルを表示します"
},
{
"type": "textarea",
"id": "card_description",
"label": "カード説明文",
"info": "空欄の場合はコレクションの説明文を表示します"
},
{
"type": "checkbox",
"id": "show_new_badge",
"default": false,
"label": "新着表示"
},
{
"type": "range",
"id": "colspan_desktop",
"min": 1,
"max": 5,
"step": 1,
"label": "デスクトップでの列をまたぐ数",
"default": 1
},
{
"type": "range",
"id": "imgheight_desktop",
"min": 200,
"max": 300,
"step": 10,
"label": "デスクトップでの画像の高さ",
"default": 200
},
{
"type": "select",
"id": "colspan_mobile",
"options": [
{
"value": "1",
"label": "１列"
},
{
"value": "2",
"label": "2列"
}
],
"default": "1",
"label": "モバイルでの列をまたぐ数"
},
{
"type": "range",
"id": "imgheight_mobile",
"min": 150,
"max": 300,
"step": 10,
"label": "モバイルでの画像の高さ",
"default": 150
}
]
},
{
"type": "article",
"name": "記事",
"settings": [
{
"type": "article",
"id": "article",
"label": "記事"
},
{
"type": "text",
"id": "card_title",
"label": "カードタイトル",
"info": "空欄の場合はコレクションのタイトルを表示します"
},
{
"type": "textarea",
"id": "card_description",
"label": "カード説明文",
"info": "空欄の場合はコレクションの説明文を表示します"
},
{
"type": "checkbox",
"id": "show_new_badge",
"default": false,
"label": "新着表示"
},
{
"type": "range",
"id": "colspan_desktop",
"min": 1,
"max": 5,
"step": 1,
"label": "デスクトップでの列をまたぐ数",
"default": 1
},
{
"type": "range",
"id": "imgheight_desktop",
"min": 200,
"max": 300,
"step": 10,
"label": "デスクトップでの画像の高さ",
"default": 200
},
{
"type": "select",
"id": "colspan_mobile",
"options": [
{
"value": "1",
"label": "１列"
},
{
"value": "2",
"label": "2列"
}
],
"default": "1",
"label": "モバイルでの列をまたぐ数"
},
{
"type": "range",
"id": "imgheight_mobile",
"min": 150,
"max": 300,
"step": 10,
"label": "モバイルでの画像の高さ",
"default": 150
}
]
}
],
"presets": [
{
"name": "特集コレクション・商品・記事",
"blocks": []
}
]
}
{% endschema %}