スライドショーに複数ボタンを配置したい

[morita]

いつもご教示いただき有難うございます。

以前、セクション「複数列」のボタンを複数にするコードをお教えいただいたのですが

スライドショーで応用が出来ず、原因をお教えいただけたらと思い、投稿させていただきました。

使用テンプレートはDAWNです。

まず、schemaのbutton_label部分を以下のように記載しました。

「複数列」とは内容が異なる部分があったため、複製する部分を元のコードよりコピーし、

内容を"button_label-2"等に変更しました。

 {
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "url",
"id": "link",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "text",
"id": "button_label-2",
"default": "ボタン２のラベル",
"label": "ボタン２のラベル",
"info": "t:sections.slideshow.blocks.slide.settings.button_label-2.info"
},
{
"type": "url",
"id": "link-2",
"label": "ボタン２のリンク"
},

 

次に、表示部分についてです。

まず、"button-area"で囲む必要があると理解し、<div class="button-area"></div>を追加しました。

div class="button-area"の内容については元のコードを複製し、

変更が必要と思われる部分をbutton_label-2等へ変更しました。

<div class="button-area">
{%- if block.settings.button_label != blank -%}
<div class="banner__buttons">
<a
{% if block.settings.link %}
href="{{ block.settings.link }}"
{% else %}
role="link" aria-disabled="true"
{% endif %}
class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
>
{{- block.settings.button_label | escape -}}
</a>
</div>
{%- endif -%}

{%- if block.settings.button_label-2 != blank -%}
<div class="banner__buttons">
<a
{% if block.settings.link-2 %}
href="{{ block.settings.link-2 }}"
{% else %}
role="link" aria-disabled="true"
{% endif %}
class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
>
{{- block.settings.button_label-2 | escape -}}
</a>
</div>
{%- endif -%}
</div><!-- /.button-area -->

ここまででプレビューしてみたのですが、ボタンが複製されない状況です。

ちなみに私自身はコードの理解がほぼ無いレベルです。

以前お教えいただいた内容から、多少コードの意味が読み取れるようになったものの

間違いが抽出出来ず困っております。

大変お手数をおかけしますが、お教えいただけましたら幸いです。

どうぞ宜しくお願いいたします。

[Qcoltd · Accepted solution]

@morita 

スライドショーでリンクボタンを二つにする方法ですが、

slideshow.liquidの173行目あたりの下記コードを

{%- if block.settings.button_label != blank -%}
              <div class="banner__buttons">
                <a
                  {% if block.settings.link %}
                    href="{{ block.settings.link }}"
                  {% else %}
                    role="link" aria-disabled="true"
                  {% endif %}
                  class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
                >
                  {{- block.settings.button_label | escape -}}
                </a>
              </div>
            {%- endif -%}

下記に変更

{%- if block.settings.button_label != blank -%}
              <div class="banner__buttons">
                <a
                  {% if block.settings.link %}
                    href="{{ block.settings.link }}"
                  {% else %}
                    role="link" aria-disabled="true"
                  {% endif %}
                  class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
                >
                  {{- block.settings.button_label | escape -}}
                </a>
              </div>
            {%- endif -%}
            
            {%- if block.settings.button_label2 != blank -%}
              <div class="banner__buttons">
                <a
                  {% if block.settings.link2 %}
                    href="{{ block.settings.link2 }}"
                  {% else %}
                    role="link" aria-disabled="true"
                  {% endif %}
                  class="button {% if block.settings.button_style_secondary2 %}button--secondary{% else %}button--primary{% endif %}"
                >
                  {{- block.settings.button_label2 | escape -}}
                </a>
              </div>
            {%- endif -%}

442行目あたりの下記コードを

{
          "type": "text",
          "id": "button_label",
          "default": "t:sections.slideshow.blocks.slide.settings.button_label.default",
          "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
          "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.slideshow.blocks.slide.settings.link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
          "default": false
        },

下記に変更

{
          "type": "text",
          "id": "button_label",
          "default": "t:sections.slideshow.blocks.slide.settings.button_label.default",
          "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
          "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.slideshow.blocks.slide.settings.link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
          "default": false
        },
        {
          "type": "text",
          "id": "button_label2",
          "default": "t:sections.slideshow.blocks.slide.settings.button_label.default",
          "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
          "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "link2",
          "label": "t:sections.slideshow.blocks.slide.settings.link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary2",
          "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
          "default": false
        },

button_label2、link2、button_style_secondary2のlabelは任意のものに変更ください。

以上でボタンを追加できるかと思われます。

ボタンの位置等につきましては、cssなどでご調整ください。

ご参考まで。

（キュー小坂）

[morita]

ご丁寧にご回答いただき有難うございました！

しっかり内容を確認し、さらに理解を高めようと思います。

今後ともどうぞ宜しくお願いいたします。