将产品收集与Shopify中的静态元素一起输出到桌子中

Question

我需要在索引页面上的表格中输出一个产品集合。做这个的最好方式是什么？我当时正在文档看，发现了Tablerow的东西。问题是，产品一次需要一次出现两个，那就是每个行中有两个图像（两个不同的产品），然后在下一行中是名称。我这样做的事情是因为这是将所有内容正确排列的最简单方法，因为图像尺寸往往会发生变化。另外，还有一个静态元素也需要输出到表中。对此有任何建议吗？

这是商店：

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>

目前，我正在静态输出所有相关图像。

Answer 1

将每个图像和关联描述包装在DIV中，并将它们一起输出在单个表单元格中。这样，您仍然可以使用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 %}