Follow on shopボタン

日本語 ディスカッション サンプルコード集（アプリ・テーマ）
1

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

2

@tina241 様

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

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

{%- if shop.features.follow_on_shop? and section.settings.enable_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 %}
            

          {%- 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行目付近の下記の記述を、


  {%- if settings.social_facebook_link != blank -%}
    - {%- render 'icon-facebook' -%}
          {{ 'general.social.links.facebook' | t }}

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


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

  {%- if settings.social_facebook_link != blank -%}
    - {%- render 'icon-facebook' -%}
          {{ 'general.social.links.facebook' | t }}

また、

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

{%- if shop.features.follow_on_shop? and section.settings.enable_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 %}
            

          {%- endif -%}

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

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

参考になれば幸いです。

(キュー田辺)

3

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

4

@tina241 様

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

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

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

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

キュー田辺

5

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

6

@tina241 様

なるほどです。

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

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

(キュー田辺)

7

@tina241 様

調査してみました。

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

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

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

{%- if section.settings.show_social -%}
          
            {%- if settings.social_twitter_link != blank -%}
              - {%- render 'icon-twitter' -%}
                    {{ 'general.social.links.twitter' | t }}

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

{%- if section.settings.show_social -%}
          
            - 　　　　　　　　　　　　　 {% # theme-check-disable %}
        　　　　　　　　　　　　　 {{ shop | login_button: action: 'follow' }}
        　　　　　　　　　　　　　 {% # theme-check-enable %}
            

            {%- if settings.social_twitter_link != blank -%}
              - {%- render 'icon-twitter' -%}
                    {{ 'general.social.links.twitter' | t }}

ご参考まで。

(キュー田辺)

8

変更できました。有難うございます！