こんにちは、makeshopの大本です。
いつもmakeshopをご利用いただきありがとうございます。

2019年3月末にリリースした「クリエイターモード」で、レスポンシブに対応したのはもちろん、より細かくショップデザインができるようになりました。
その分従来のベーシックモードより複雑になっていますので、makeshopサポートでは今後クリエイターモードについてもご紹介していきたいと思います。

今回は「ループ処理」についてご説明いたします。

ループ処理って?

ループ処理とは「与えられた数だけその中に書かれた処理を繰り返し実行する」というものになります。
この処理にはいろいろな書き方がありますが、今回はsection関数を使ってループする方法を追っていきましょう。

このように記述すると、sectionで囲われた中身を最大値まで繰り返して表示されます。

たとえば、おすすめ商品をsection関数を使ってループさせてみたいと思います。

リファレンスのタグ一覧を見ると、「配列」と書かれたタグがあり、その下に薄ピンクと白で交互になっているタグリストがあると思います。
section関数では、この「配列」となってるタグが「今からループさせたい情報(おすすめ商品リスト)」、この薄ピンクと白で交互になっているタグが「sectionの中で使えるタグ」=「ループできる情報(商品画像や商品名など)」となります。

「配列」となるタグはsection関数のなかのloop属性部分に記述し、ループしたい情報のタグをsection関数で囲んで記述します。

loop属性におすすめ商品の配列である「recommend_item.list」を書き、商品URLにリンクさせた商品画像と商品名を含んだliをループさせたい場合はこのように記述します。

吐き出されたあとのHTMLを見てみると、下記のソースのようにliが複数記述されているのが分かるかと思います。

また、sectionの後ろに「max=●」と数字をいれることで、表示する個数を調整することもできます。

ただし、各一覧の最大値はシステム側で決められているので、それ以下での調整になります。

たとえばおすすめ商品は最大20商品まで表示する仕様になっているので、maxを何も書かなかった場合はおすすめ商品として登録されている数だけ表示されます。maxの値を「10」と書いた場合は10商品表示されますが、「120」を書いても、20までしか表示されません。

※ページャーが必要となるタグ(商品一覧・検索・お知らせ)に関しては、maxタグと連動していないためmaxタグを使っての記述は避けるようお願いします

商品一覧など、繰り返して表示するような部分には必ず必要となりますので、テンプレートの初期値などを参考にしながらどのように記述したらいいか確認してみましょう。