Shopify 컬렉션 그리드에 비 제품 요소를 조건부로 포함합니다.

Question

이것은 쉬운 것처럼 보이지만 몇 시간 동안 조사하고 두드린 후에도 여전히 알아낼 수 없습니다.

이

http://www.katespade.com/designer-handbags/handbags,default,sc.html

내 컬렉션 그리드 3으로 설정 : 내 목표는, 1 행의 "무료 그라운드 배송을 즐길 수"블록처럼 Shopify 수집 그리드가 아닌 제품의 HTML 블록을 삽입하려면 여기를 COL 3 열을 페이지 당 4 행으로 나누고, 행 2, 열 1의 블록을 3 개 이상의 제품이있는 모든 콜렉션 페이지로 대체하려고합니다.

내가 수정해야 할 액체 루프는 다음과 같습니다

<ul class="product-grid clearfix"> 
    {% for product in collection.products %} 
     <li{% cycle '', '', ' class="last-in-row"' %}> 
     {% include 'product-grid-item' %} 
     </li> 
    {% endfor %} 
    </ul> 

사람이 어떤 통찰력을 가지고 있습니까?

Answer 1

스택 오버플로에 오신 것을 환영합니다! :-)

먼저, 우리가 동일한 페이지에 있는지, 그리고 논리가 올바른지 확인하기 위해 이것을 의사 코드로 만들어 보겠습니다.

for each product in collection 
{ 
    is this the 4th iteration of the loop? 
    (in other words, is it the first item in the second row) 
    { 
     Add an <li> for the custom non-product block. 
    } 

    Add an <li> for the standard product block 
} 

논리가 원하는 것이 맞다면 여기 Liquid의 실제가 있습니다.

<ul class="product-grid clearfix"> 

{% for product in collection.products %} 

    {% if forloop.index == 4 %} 
     <li{% cycle '', '', ' class="last-in-row"' %}> 
      {% include 'your-custom-block-element' %} 
     </li> 
    {% endif %} 

    <li{% cycle '', '', ' class="last-in-row"' %}> 
     {% include 'product-grid-item' %} 
    </li> 

{% endfor %} 

</ul> 

Shopify가 기본적으로 1 기반 색인을 처리한다는 사실을 알고있을 것입니다. 그래서 우리는 forloop.index == 4을 찾고 있습니다. 거의 모든 언어에서 우리는 0을 기준으로 색인을 처리하고 forloop.index == 3인지 확인합니다.

이 규칙이 문제가되는 경우 항상 forloop.index0을 사용하여 0 대신 밑줄이있는 루프의 색인을 확인할 수 있습니다. ;-)

내가 속임수를 쓰는지 알려주세요. 행운을 빕니다!