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

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

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

ループ処理って？

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

<{section name=i loop=$●●●●}>
・・・・
<{/section}>

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

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

リファレンスのタグ一覧の「商品一覧系」に

として、「.list[i]」のついたタグリストがあります。

「$new_item.list」のように、「$〇〇〇.list」という形式であらわすタグを「配列」といいます。section関数では、この「配列」となってるタグが「今からループさせたい情報（商品リスト）」です。
「配列のなかみ」＝「ループできる情報（商品画像や商品名など）」は「sectionの中で使えるタグ」を使用して「.list[i]」という形式であらわします。

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

<ul class="item-list-wrap">
<{section name=i loop=$new_item.list}>
　<li class="item-list">
　　<a href="<{$new_item.list[i].url}>"><img src="<{$new_item.list[i].image_L}>">
　　<{$new_item.list[i].name}></a>
　</li>
<{/section}>
</ul>

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

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

<ul class="item-list-wrap">
　<li class="item-list">
　　<a href="/view/item/000000000079"><img src="https://dev-makeshop.akamaized.net/shopimages/devshida/000000000079.jpg">
　　商品A</a>
　</li>
　<li class="item-list">
　　<a href="/view/item/000000000043"><img src="https://dev-makeshop.akamaized.net/shopimages/devshida/000000000043.gif">
　　商品B</a>
　</li>
・
・
・
　<li class="item-list">
　　<a href="/view/item/000000000047"><img src="https://dev-makeshop.akamaized.net/view/images/common/noimage.png">
　　商品X</a>
　</li>
</ul>

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

<{section name=i loop=$new_item.list max=6}>

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

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

※ページャーが必要となるタグ（商品一覧・検索・お知らせ）に関しては、maxタグと連動していないためmaxタグは記述しないでください。

商品一覧など、繰り返して表示するような部分には必ず必要となりますので、リファレンスのタグ一覧の「新商品」などのテキストリンクをクリックして、サンプルコードのページを参照したり、テンプレートの初期値を参考にしながらどのように記述したらいいか確認してみましょう。