¿Cómo puedo agregar diferentes elementos de lista que muestren, por ejemplo, una imagen después del tercer, séptimo y undécimo elemento de lista que se derivan de collection.products ? Probé jQuery pero no funcionó. ¿Alguna idea?
<ul id="collection-grid" data-id="{{ section.id }}" class="grid"> {%- for product in collection.products -%} <li class="grid-item"> {% render 'product-wrapper' %} </li> {%- endfor -%} </ul> <script> $( "ul:nth-child(3)" ).append( "<li class="info-card card-wrapper"><img...></li>" ); </script>No sé qué HTML le gustaría agregar y dónde, pero hice una suposición a continuación.
Use la etiqueta de cycle ycapture en una variable y luego use if para mostrar lo que le gustaría.
(No es necesario jQuery)
<ul id="collection-grid" data-id="{{ section.id }}" class="grid"> {%- for product in collection.products -%} {% capture thisIteration %}{% cycle '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' %}{% endcapture %} <li class="grid-item"> {% render 'product-wrapper' %} {% if thisIteration == '3' %} <span>Here is the HTML that is added only on every 3rd iteration</span> {% endif %} {% if thisIteration == '7' %} <span>Here is the HTML that is added only on every 7th iteration</span> {% endif %} {% if thisIteration == '11' %} <span>Here is the HTML that is added only on every 11th iteration</span> {% endif %} </li> {%- endfor -%} </ul>También hay un filtro de módulo que podría usar, pero con iteraciones como la 7 y la 11, creo que lo anterior es más legible.
<ul id="collection-grid" data-id="{{ section.id }}" class="grid"> {%- for product in collection.products -%} {% assign mod3 = forloop.index | modulo: 3 %} {% assign mod7 = forloop.index | modulo: 7 %} {% assign mod11 = forloop.index | modulo: 11 %} <li class="grid-item"> {% render 'product-wrapper' %} {% if mod3 == 0 %} <span>Here is the HTML that is added only on every 3rd iteration</span> {% endif %} {% if mod7 == 0 %} <span>Here is the HTML that is added only on every 7th iteration</span> {% endif %} {% if mod11 == 0 %} <span>Here is the HTML that is added only on every 11th iteration</span> {% endif %} </li> {%- endfor -%} </ul>