将产品集合与Shopify中的静态元素一起输出到表中

Question

I need to output a collection of products into a table on my index page. What is the best way to do this? I was looking in the docs and found the tablerow stuff. The problem is, that products are going to need to come out two at a time, that is there are two images in every row (two different products) and then in the next row are the names. I did things this way because it was the easiest way to keep everything lined up properly as the image sizes tend to change. Also, there's a static element that needs to be output into the table too. Any advice on this?

Here's the store:

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

Here's the relevant code:

  <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>

At the moment, I'm statically outputting all of the relevant images.

Answer 1

Wrap each image and the associated description in a div and output them together in a single table cell. That way you can still output everything using the tablerow instruction.

Furthermore, you can get clever with your static content and render that in the tablerow loop too. Use a combination of the row and column identifiers listed on the Shopify Wiki to find the cell you want the static content in, and render that instead of a product when you hit the correct cell.

Your code might look something like this

  {% 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 %}