follow on shopボタン

[tina241]

dawnのテーマにfollow on shopボタンをsnsリンクの横に埋め込む方法を教えてください。

[Qcoltd]

@tina241 様

私自身は、follow on shopボタンの表示確認をできていないのですが、

Dawn11.0.0のコードを見る限り下記のコードがfollow on shopボタンを表示するコードのように思えましたので、こちらのコードをうまく利用されてはいかがでしょうか？

          {%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
            <div class="footer__follow-on-shop">
              {% comment %} TODO: enable theme-check once `login_button` is accepted as valid filter {% endcomment %}
              {% # theme-check-disable %}
              {{ shop | login_button: action: 'follow' }}
              {% # theme-check-enable %}
            </div>
          {%- endif -%}

このうち、常に、follow on shopボタンを表示するのであれば、最初のif文は不要です。

また、.footer__follow-on-shopのCSSもなくてもなんとかなるかもしれません。

そうしますと、ボタンを表示する本質的なコードは、下記のようになります。

(theme-check-disableとtheme-check-enableも不要そうですが、表示確認ができていないので念の為、外しておりません。)

              {% # theme-check-disable %}
              {{ shop | login_button: action: 'follow' }}
              {% # theme-check-enable %}

さて、フッターのSNSボタンの左横に表示する具体的な方法ですが、

Dawn11.0.0の場合、下記のようになるかと思います。

スニペット > social_icons.liquidの12行目付近の下記の記述を、

<ul class="list-unstyled list-social{% if class %} {{ class}}{% endif %}" role="list">
  {%- if settings.social_facebook_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_facebook_link }}" class="link list-social__link">
        {%- render 'icon-facebook' -%}
        <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
      </a>
    </li>

 下記のように書き換えます。

<ul class="list-unstyled list-social{% if class %} {{ class}}{% endif %}" role="list">
    <li class="list-social__item">
      {% # theme-check-disable %}
      {{ shop | login_button: action: 'follow' }}
      {% # theme-check-enable %}
    </li>
  {%- if settings.social_facebook_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_facebook_link }}" class="link list-social__link">
        {%- render 'icon-facebook' -%}
        <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
      </a>
    </li>

また、

セクション > footer.liquidの232行目の下記の記述を削除します。

          {%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
            <div class="footer__follow-on-shop">
              {% comment %} TODO: enable theme-check once `login_button` is accepted as valid filter {% endcomment %}
              {% # theme-check-disable %}
              {{ shop | login_button: action: 'follow' }}
              {% # theme-check-enable %}
            </div>
          {%- endif -%}

表示確認もできていないため、うまく機能するか分かりませんし、

表示するためだけの応急措置的なコードですが、

参考になれば幸いです。

(キュー田辺)

[tina241]

ご回答ありがとうございます。一番最初の{%- if shopから始まるコードはどの段に埋め込めばいいのでしょうか？早速試してみたいと思います。

[Qcoltd]

@tina241 様

> さて、フッターのSNSボタンの左横に表示する具体的な方法ですが、

> Dawn11.0.0の場合、下記のようになるかと思います。

という記述以降を実施していただければ大丈夫です。

最初のコードは、説明用に記載しただけで、具体的なやり方は上記の記述以降にありますので、そちらをご覧ください。

キュー田辺

[tina241]

説明不足ですみません、Dawn 7.0.1バージョンに埋め込みたいです。

[Qcoltd]

@tina241 様

なるほどです。

再検証が必要になるので、少しお時間をいただくことになりそうです。

数日ほどかかるかもしれません。

(キュー田辺)

[Qcoltd]

@tina241 様

調査してみました。

しかし、繰り返しになりますが、私自身は、follow on shopを表示させる条件を把握できておらず、動作検証はできていないこと、ご留意ください。

Dawn 7.0.1であれば、全くカスタマイズしてない場合、

セクション > footer.liquidの149行目付近に下記のような記述があるはずです。

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link list-social__link" >
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>

この記述を下記のように変更してみてはどうでしょうか？

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            <li class="list-social__item">
      　　　　　　　　　　　　　 {% # theme-check-disable %}
      　　　　　　　　　　　　　 {{ shop | login_button: action: 'follow' }}
      　　　　　　　　　　　　　 {% # theme-check-enable %}
            </li>
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link list-social__link" >
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>

ご参考まで。

(キュー田辺)