將產品集合與Shopify中的靜態元素一起輸出到表中

Question

我需要將我的索引頁上的一組產品輸出到表中。做這個的最好方式是什麼？我正在查看文檔並找到了表格內容。問題是，產品需要每次出現兩個，即每行有兩個圖像（兩種不同的產品），然後是下一行的名稱。我這樣做是因爲這是最簡單的方法，因爲圖像大小會發生變化，所以將所有內容妥善保存。此外，還有一個靜態元素需要輸出到表中。對此有何建議？

這裏的商店：

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循環中。使用row and column identifiers listed on the 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 %}