0

我需要将产品集合输出到索引页面上的表格中。做这个的最好方式是什么？我正在查看文档并找到了 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>

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

4

1 回答 1

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 %}
于 2012-10-28T18:31:13.037 回答