Shopify의 정적 요소와 함께 테이블로 제품 컬렉션 출력

Question

색인 페이지의 표에 제품 모음을 출력해야합니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 나는 문서를보고 tablerow 물건을 발견했다. 문제는 제품이 한 번에 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> 

, 나는 정적으로 관련 모든 이미지를 출력하고있다.

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