FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

Re: カスタムLiquidでスライダーを実装する方法。

カスタムLiquidでスライダーを実装する方法。

mwhr126
Shopify Partner
17 0 1

回答をご覧いただき、誠にありがとうございます。

 

以下のような、よくあるスライダーをカスタムLiquidで記述しているのですが、顧客が管理画面から更新した際、どのようなコードを以下のコードに追加すれば、投稿したブログが自動更新されて表示されますでしょうか?

 

顧客が要望するデザイン通りにするために、こちらのコードにcssを反映させている形をとっており、。

 

ご親切な方がみえましたら、ご回答いただけますと大変助かります。

 

お手数お掛けいたしますが、何卒よろしくお願い致します。

 

 

  <ul>
    <li><span class="contents_cat">コラム1</span><time datetime="2022-12-28">2022.01.23</time><a href=""><img src="" alt=""
          width="216" height="294">
        <div class="contents_title">コラムのタイトル1</div>
      </a></li>
    <li><span class="contents_cat">お知らせ1</span><time datetime="2022-12-28">2022.12.17</time><a href="#"><img src=""
          alt="" width="216" height="294">
        <div class="contents_title">お知らせのタイトル1</div>
      </a></li>
    <li><span class="contents_cat">コラム2</span><time datetime="2022-12-28">2022.12.12</time><a href="#"><img src=""
          alt="" width="216" height="294">
        <div class="contents_title">コラムのタイトル2</div>
      </a></li>
    <li><span class="contents_cat">お知らせ2</span><time datetime="2022-12-28">2022.12.01</time><a href="#"><img src=""
          alt="" width="216" height="294">
        <div class="contents_title">お知らせのタイトル2</div>
      </a></li>
    <li><span class="contents_cat">コラム3</span><time datetime="2022-12-28">2022.11.20</time><a href="#"><img src=""
          alt="" width="216" height="294">
        <div class="contents_title">コラム3</div>
      </a></li>
  </ul>
  <div class="contents_btn"><a href="#">すべて見る</a></div>
</div>  

 

3件の返信3

株式会社フルバランス
Shopify Partner
1624 577 752

Mwhr126さま

 

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

 

ストアに登録したブログを動的に反映されたいということですね。

その場合for文を使って特定のブログを取得すれば実装可能かと存じます。

以下記事に具体的なコードが載っておりますので、参考にお試しいただけますと幸いです。

https://next-blog.site/media/shopify-liquid-specific/

 

ご参考になりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス
mwhr126
Shopify Partner
17 0 1

株式会社フルバランス 渡邉 様

 

早速ご回答をいただき誠にありがとうございます。

 

ご紹介いただきました記事にて、「特定のカテゴリーをもったブログ記事を表示する方法」の部分は実装に成功いたしました!

 

https://next-blog.site/media/shopify-liquid-specific/

 

ですが、その下にあります、「特定のタグをもったブログ記事を表示する方法」に関しては、何故か実装しても何もブログが表示されない状態となっております...。

 

<body>
<ul>
<!--   //表示する記事数を変数limitに指定 -->
  {% assign limit = 4 %}
<!--   //変数countを定義 -->
  {% assign count = 0%}
  {% for article in blogs['ニュース'].articles %}
    {% for tag in article.tags %}
<!--       //タグが'sample'の記事のみ取得する -->
      {% if tag == 'fruit' %}
<!--         //'sample'のタグがついた記事が取得されるごとにcountの数字を1ずつ足していく -->
        {% assign count = count | plus: 1 %}
        <li>
          <a href="{{ article.url }}">
            {% if article.image != blank %}
              <img src="{{ article.image.src | image_url: width: 600 }}" alt="">
            {% else %}
              <img src="{{ 'default.jpg' | asset_img_url: width: 600 }}" alt="">
            {% endif %}
            <p class="title">
              {{ article.title }}
            </p>
            <span class="date">
              {{ article.updated_at | date: '%Y.%m.%d' }}
            </span>
          </a>
        </li>
      {% endif %}
    {% endfor %}
<!--     //countの数字がlimit以上になった場合ループを停止 -->
    {% if count >= limit %}
      {% break %}
    {% endif %}
  {% endfor %}  
</ul>
</body>





{% schema %}
{
  "name": "ブログリスト",
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "ブログのカテゴリーを選択"
    }
  ],
  "presets": [
    {
      "name": "ブログリスト(特定のタグ)"
    }
  ]
}
{% endschema %}

 

 

・ブログカテゴリー:ニュース

・タグ:fruit に設定↓

 

スクリーンショット 2023-01-23 23.51.57.png

 

・表示されている画面。

(ブログの選択はできるが、画面には何も反映されない)↓

 

スクリーンショット 2023-01-23 23.54.20.png

 

 

ブログのカテゴリーとタグも正しく設定できているはずで、あと一歩のところだと思うのですが、原因がお分かりでしたらご教示いただけますと幸いです。

 

度々恐縮ですが、何卒よろしくお願い致します。

 

mwhr126
Shopify Partner
17 0 1

株式会社フルバランス 渡邉様

 

早速、ご回答をいただき誠にありがとうございます。

 

ご紹介いただきました記事の「特定のカテゴリーをもったブログ記事を表示する方法」に関しまして実装に成功させることが出来ました!

 

ですが、その下の「特定のタグをもったブログ記事を表示する方法」に関しては、何故か実装できず肝心な部分で行き詰まってしまいました...。

 

<body>
<ul>
<!--   //表示する記事数を変数limitに指定 -->
  {% assign limit = 4 %}
<!--   //変数countを定義 -->
  {% assign count = 0%}
  {% for article in blogs['ニュース'].articles %}
    {% for tag in article.tags %}
<!--       //タグが'sample'の記事のみ取得する -->
      {% if tag == 'fruit' %}
<!--         //'sample'のタグがついた記事が取得されるごとにcountの数字を1ずつ足していく -->
        {% assign count = count | plus: 1 %}
        <li>
          <a href="{{ article.url }}">
            {% if article.image != blank %}
              <img src="{{ article.image.src | image_url: width: 600 }}" alt="">
            {% else %}
              <img src="{{ 'default.jpg' | asset_img_url: width: 600 }}" alt="">
            {% endif %}
            <p class="title">
              {{ article.title }}
            </p>
            <span class="date">
              {{ article.updated_at | date: '%Y.%m.%d' }}
            </span>
          </a>
        </li>
      {% endif %}
    {% endfor %}
<!--     //countの数字がlimit以上になった場合ループを停止 -->
    {% if count >= limit %}
      {% break %}
    {% endif %}
  {% endfor %}  
</ul>
</body>





{% schema %}
{
  "name": "ブログリスト",
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "ブログのカテゴリーを選択"
    }
  ],
  "presets": [
    {
      "name": "ブログリスト(特定のタグ)"
    }
  ]
}
{% endschema %}

 

・カテゴリー:ニュース

・タグ:fruit に設定 ↓

 

スクリーンショット 2023-01-23 23.51.57.png

 

・ブログの選択はできるが、何故か反映されない↓

 

 

スクリーンショット 2023-01-23 23.54.20.png

 

ブログのカテゴリーとタグは正しく設定されているはずで、あと一歩のところだと思うのですが、原因がお分かりになりましたら、ご教示いただけますと幸いです。

 

度々恐縮ですが、何卒よろしくお願い致します。