0

製品のコレクションをインデックスページのテーブルに出力する必要があります。これを行うための最良の方法は何ですか？私はドキュメントを調べていて、テーブルローのものを見つけました。問題は、製品が一度に2つ出てくる必要があるということです。つまり、すべての行に2つの画像（2つの異なる製品）があり、次の行に名前があります。画像サイズが変化する傾向があるので、すべてを適切に並べておくのが最も簡単な方法だったので、私はこの方法で物事を行いました。また、テーブルに出力する必要がある静的要素もあります。これについて何かアドバイスはありますか？

これがストアです：

https://hodkiewicz-zieme-and-hirthe180.myshopify.com/

関連するコードは次のとおりです。

  <table>
        <tr>
          <td><img src="{{'carb-1.png' | asset_url}}"></td>
          <td><img src="{{'carb-2.png' | asset_url}}"></td>
        </tr>
        <tr>
          <td>1930 Speedster</td>
          <td>1929-1931 Super 8</td>
        </tr>
      <tr>
        <td><img src="{{'carb-3.png' | asset_url}}"></td>
        <td><img src="{{'carb-4.png' | asset_url}}"></td>
      </tr>
      <tr>
        <td>1932 Super 8</td>
        <td>1929-1931 Standard 8</td>
      </tr>
      <tr>
        <td><img src="{{'box.png' | asset_url}}"></td>
        <td><img src="{{'carb-5.png' | asset_url}}"></td>
      </tr>
      <tr>
        <td></td>
        <td>1932 Standard 8</td>
      </tr>
    </table>

現在、関連するすべての画像を静的に出力しています。

4

1 に答える 1

1

各画像と関連する説明をdivでラップし、それらを1つのテーブルセルにまとめて出力します。tablerowそうすれば、命令を使用してすべてを出力できます。

さらに、静的コンテンツを巧みに利用して、tablerowループ内でレンダリングすることもできます。Shopify Wikiにリストされている行と列の識別子の組み合わせを使用して、静的コンテンツが必要なセルを見つけ、正しいセルにヒットしたときに製品の代わりにそれをレンダリングします。

コードは次のようになります

  {% tablerow item in items cols: 3 %}
    {% if tablerowloop.col_first &&  tablerowloop.last %}
      <!-- Display static content! -->
    {% else %}
      <div class='table-item'>
        {{item.image}}
        <p>{{item.title}}</p>
      </div>
    {% endif %}
  {% endtablerow %}
于 2012-10-28T18:31:13.037 に答える