Shopify 컬렉션의 모든 항목을 가져 오는 방법

Question

클라이언트 용 Shopify 저장소 용 사이드 바를 만들고 있습니다. 특정 컬렉션의 모든 항목을 표시합니다. 콜렉션은 featured라고하며 클라이언트는 CMS를 사용하여 여기에 표시 할 항목을 지정합니다. 1 개의 항목, 100 또는 많은 항목이 추천 컬렉션에 표시 될 수 있습니다.

나는이 작업을 수행 할 것이라고 생각하는 코드가 있지만 아무 것도 표시하지 않습니다.

{% for product in collections.featureditems.products %} 
{% if product.title == '<insert a title-id>' %} 
<a href="{{product.url}}" onclick="return Showroom.showProduct('{{product.handle}}');"><img src="{{ product.featured_image | product_img_url: 'medium' }}"/></a> 
{% endif %} 
{% endfor %} 

<script type="text/javascript"> 
    var featuredProductDisplay = ""; 
    var productCount = {{ collections.featureditems.products.size }}; 
    window.onload = function() { 
     var product=new Array(productCount) 
     {% for product in collections.featureditems.products %} 
      product[{{forloop.index0}}]='<div class="featuredItem"><a href="{{product.url}}" onclick="return Showroom.showProduct("{{product.handle}}");\"><img src="{{ product.featured_image | product_img_url: "small" }}" /></a></div>'; 
     featuredProductDisplay = featuredProductDisplay + product[{{forloop.index0}}]; 
    {% endfor %} 
    document.getElementById('featuredContainer').innerHTML = featuredProductDisplay; 
} 
</script> 
<div class="leftSideBar"> 
    <h2>Featured</h2> 
<div id="featuredContainer"> 

</div> 
</div> 

그래서이 코드는 주요 catagory에있는 모든 항목의 이미지를 표시해야하며, 이미지가 항목의 페이지로 연결되는 링크해야한다 : 여기에 코드입니다. 그러나 나는 혼란 스럽다. 누구든지 내가 뭘 잘못하고 있는지 알 겠어?

이론적으로 루프를 실행하고 HTML 코드를 "product [{{forloop.index0}}"변수에 작성한 다음 featuredProductDisplay의 끝에 추가합니다.

루프가 끝나면 featuredProductDisplay의 값을 featuredContainer라는 div에 넣어야합니다.

지금 실행할 때 div에 아무것도 넣지 않습니다.

어딘가에 뭔가가 작동하지 않아서 무엇이 빠져 있는지 파악할 수 없습니다.

Answer 1

힌트를 드리겠습니다. Javascript 사용을 중단하십시오. 귀하의 경우 컬렉션을 렌더링하고 있으므로 Liquid World에서는 100 %이고 Liquid에서는 Javascript와 혼합 할 필요가 없습니다.

Liquid 및 HTML 및 DOM 렌더링이 모두 끝나면 컬렉션이 화면에 표시되어 렌더링됩니다. 그래서 DOM로드 된 핸들러를 수정하여 수정이 필요한 사항을 수정하고 이벤트 핸들러 등을 추가하십시오. 그러나 여기 패턴은 엉망입니다 ... 간단한 도움은 없습니다. 당신이 섞여있는 것을 선택한다면, 당신은 두 전문가의 전문가가 될 것입니다 ... 아니면 당신은 장거리 갈 길이 멀죠.

Answer 2

여전히 도움이 필요한 분에게. 내가 생각해 낸 대답은 완전히 액체의 대답입니다. 그러나 이것은 나를 위해 일했습니다. collectionhandle을 컬렉션의 핸들로 바꿉니다.

 {% assign collection = collections.collectionhandle %} 
    {% assign products = collections.colectionhandle.products %} 
    {% capture new_row %} 
    <div class="product_row"> 
    {% endcapture %} 
    {% for product in products limit: limit %} 
      <a href="{{ product.url | within: collection }}" title="{{ product.featured_image.alt | escape }}"> 
     <img {% if settings.align_height %}style="height:{{ settings.collection_height }}px"{% endif %} src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" /> 
     </a> 
    {% endfor %}