如何在液体循环中定位特定的迭代？

Question

使用shopify Liquid Markup作为选项列表。问题是当1个订单超过6个项目时，分页符将删除一些内容。 如何指定第7次迭代以使其分页？

这是编码：

{％选项列表高度：11，宽度：8.5，marginLeftAndRight：10px，marginTopandBottom：10px - ％}     

    .picklist,
    .picklist-condensed {
        font-family: Arial;
        font-size: 8pt;
        -webkit-print-color-adjust: exact;
        float: none;
        text-align: left;

    }

    @media screen {
        .order,
        .picklist-condensed .items {
            margin:0 5px 0 30px;
            padding:20px 0;
        }
    }

    @media print {
        .order,
        .picklist-condensed .items {
            margin:0 5px 0 30px;
            padding:20px 0;
        }
    }

    .order,
    .picklist-condensed .items {
        padding: 0 0 15px;
        margin-bottom: 2px;

    }

    @media screen {
        .order,
        .picklist-condensed .items {

        }
    }

    @media print {
        .order,
        .picklist-condensed .items {

        }
    }

    .order:nth-child(odd) {
        background: #fff;
    }

    .order:nth-child(even) {
        background: #fcfcfc;
    }



    .order .header,
    .order .items {
        display: table;
    }

        .order .header .date {
        }

        .order .header span,
        .order .items .item .info span,
        .kit .info span,
        .kit .kit-item .info span,
        .picklist-condensed .items .item-wrapper .item .info span {
            display: block;
            padding: 10px 5px 0px 0px;
            font-size:14px;
        }

            .order .header span b {
                }

        .order .items .item,
        .kit,
        .kit .kit-item,
        .picklist-condensed .items .item-wrapper .item,
        .picklist-condensed .items .item-wrapper .kit {
            display: table-row;
        }

    .picklist-condensed .items .item-wrapper {
        display: block;
    }



        .order .items .item:after,
        .kit:after,
        .picklist-condensed .items .item-wrapper:after {


        }

        .order .items .item:last-child:after,
        .kit .kit-item:last-child:after,
        .kit:last-child:after,
        .picklist-condensed .items .item-wrapper:last-child:after {

        }

    .order .items h1,
    .order .kits h1 {
    }

    .order .kits{
        margin:-10px;
    }

     .kit{
         padding:0px;
        margin:0px;
    }

    .order .items .item .info,
    .kit .kit-item .info {

    }

        .order .items .item .info span b,
        .kit .info span b,
        .kit .kit-item .info span b,
        .picklist-condensed .items .item-wrapper .item .info span b {
            display: inline;
            width: 100px;
            font-size:12px;
        }

        .order .items .item .info .locations span,
        .kit .kit-item .info .locations span,
        .picklist-condensed .items .item-wrapper .item .info .locations span {
            display: inline;
            padding: 0;
            margin: 0;
        }

        .order .items .item .info .locations b,
        .kit .kit-item .info .locations b,
        .picklist-condensed .items .item-wrapper .item .info .locations b {
            display: inline;
        }

        .order .items .item .info .sku,
        .kit .kit-item .info .sku,
        .picklist-condensed .items .item-wrapper .item .info .sku {
            font-size: 10pt;
        }

        .order .items .item .info .pick-quantity,
        .kit .kit-item .info .pick-quantity,
        .picklist-condensed .items .item-wrapper .item .info .pick-quantity {
            margin-top: 1px;
            margin-bottom: 1px;
            font-size: 10pt;
        }

    .kit .info {
        padding: 0;
    }

        .kit .info .kit-quantity {
            margin-top: 0px;
            font-size: 12pt;
        }

    .kit h2 {
        margin: 0 0 0 20px;
        border-bottom: 2px dashed #000;
    }

    .kit .kit-item {
        margin: 0 0 0 20px;
        border-bottom: 2px dashed #000;
    }


    .kit .kit-item:after {
        display: block;
        content: "";
        margin: 0 0 0 20px;
        border-top: 2px dashed #000;
    }



.picklist-condensed .kit .kit-item:after {
        border-top: 2px solid #000;
    }

    .picklist-condensed .kit .kit-item:last-child:after {
        border-top: none;
    }

    .picklist-condensed .kit h2 {
        border-bottom: 2px solid #000;
    }

    .picklist-condensed .kit .kit-item {
        border-bottom: none;
    }


    .kit .kit-item .info span {
        margin: 0 0 0 20px;
    }

    .section {
        display: inline-table;
        vertical-align: top;
    }


        .section.full {
            display:inline;
            margin:2px 0;
            width: 7.7in;
        }

        .section.half {
            width: 3.85in;
        }

        .section.quarter {
            width: 1.925in;
        }

    .highlight {
        padding: 2px 11px 3px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
        border: 2px dashed #000;
        color: #000;
        background: #ddd;
    }

    .lowlight {
        padding: 1px 4px 2px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
        border: 2px dotted #000;
        font-size: 8pt;
        font-weight: 700;
        color: #000;
    }

    .print-single {
        page-break-before: auto;
        page-break-inside: avoid;
        page-break-after: auto;
    }



.print-multiple {
        page-break-before: auto;
        page-break-inside: avoid;
        page-break-after: always;
    }

    .print-last {
        page-break-before: always;
        page-break-inside: avoid;
        page-break-after: avoid !important;
    }

    .barcode-center {
        text-align: right;
        width: 100%;
    }

    .barcode-margin-left {
        margin-left: 0px;

    }

    #shipping{
        vertical-align:center;
    }


       }

    .order .header{
        padding-bottom:5px;

       }

    .message{font-size:18px;
        border-bottom:dashed 3px;
        text-align:center;
    }


    .return{

    font-size:12px;
    }

    .contact{
        font-size:12px;
    }

    #border{
      border-bottom:dashed 2px;
      padding-bottom:10px;


    }


.sale-id{
    text-align:right;
}



.order .header{
    margin-bottom:15px;
}
.kcode{
        text-align: right;
        margin-right: 5px;
    }




</style>






<div class="picklist">
    {% for sale in picklist.sales -%}
        {% assign orderClasses = 'order print-single' %}
        {% if forloop.last == true %}
            {% assign orderClasses = 'order print-multiple print-last' %}
        {% endif %}
        <div class="{{orderClasses}}">
            <div class="header">
                <div class="brand section half">
                    <img src="http://cdn6.bigcommerce.com/s-tc8gk64e/product_images/zeckos-logo1200_1462826662__91967.png" width="275px"
                height="135px">
                </div>
                    <div class="sale-id section half">
                        <span class="barcode-center">
                        {% barcode width: 2, height: 0.5, value: sale.marketplace_id, marginRight: .0125 %}
                        </span>
                        <span>
                        <b >Order #:</b>{{ sale.marketplace_id }}
                        </span>
                        <span>
                        <b>Sale Date:</b>{{ sale.sale_date | date: 'MM/dd/yyyy' }}
                        </span>
                    </div>
                <div class="footer">
                    <div class="return section half">
                    <p>Return Address:<br>
                    Zeckos<br>
                    240 Old Sanford Oviedo Road<br>
                    Winter Springs, FL 32708</p>
                    </div>
                    <div class="contact section half">
                    <p>Phone number: 407-302-9114<br>
                    Hours of Operation Monday - Friday: 9:00 am - 6:00 pm<br>
                    Email: info@zeckos.com</p>
                    </div>

                    <div class="message ">
                   <p>Thank you for your order. Use coupon code <i><ins>THANKS10</ins></i><br>
                   on your next purchase at <i><ins>www.ZECKOS.com</ins></i></p>
                    </div>
                </div>
                <div class="date section full">
                    <span>
                        <b>Ship Method:</b>{{ sale.carrier_class }}
                    </span>
                </div>
                <div class="date section half">

                    <span>
                        <b>Ship to:</b>
                        <p id="shipping">
                        {{ sale.shipping_contact.first_name }}&nbsp;{{ sale.shipping_contact.last_name }}<br>
                        {{ sale.shipping_address.address1 }}<br>
                        {{ sale.shipping_address.city}},{{ sale.shipping_address.region}}&nbsp;{{ sale.shipping_address.postal_code}}<br>
                        {{sale.shipping_contact.phone}}
                        </p>
                    </span>
                </div>

            </div>

            {% if sale.items.size > 0 %}
            <div class="items">
                {% for item in sale.items -%}

                <div class="item">
                    <div class="info section full ">

                        <span >
                            <b >Title:</b>{{ item.title }}
                        </span>
                    </div>
                    <div class="info section full" >
                        <span class="sku">
                            <b>SKU:</b>{{ item.sku }}
                            &nbsp;
                            <b>Pick Qty:</b>
                            {% if item.pick_quantity > 1 %}
                            <i class="highlight" >{{ item.pick_quantity }}</i>
                            {% elsif item.pick_quantity < 2 %}
                            <i class="nohighlight"  >{{ item.pick_quantity }}</i>
                            {% endif %}
                        </span>
                        <span class="locations" id="border">
                            <b>Locations:</b>
                            {% for loc in item.locations -%}
                            <span>
                                {{ loc.warehouse }}--{{loc.location}}(<i class="lowlight">{{loc.quantity}}</i>)
                                <!--Here we handle the separator between locations-->
                                {% if forloop.last == false %}
                                ,
                                {% endif %}
                            </span>
                            {% endfor -%}
                        </span>
                    </div>
                </div>
                {% endfor -%}



            </div>



            {% endif %}
            {% if sale.kits.size > 0 %}
            <div class="kits">
                {% for kit in sale.kits -%}
                <div class="kit">
                    <div class="info section half">
                        <span>
                            <b>Kit SKU:</b>{{ kit.sku }}
                        </span>
                        <span class="kit-quantity">

                            <b>Kit Qty:</b>{{ kit.pick_quantity }}
                        </span>
                    </div>
                    <div class="info section half">
                        <span class="kcode">
                            <b>Kit Code:</b>{{ kit.code }}
                        </span>
                        <span class="barcode-center">{% barcode width: 2, height: .25, value: kit.code, marginLeftAndRight: .125 %}</span>
                    </div>
                    <h2>Kit Items:</h2>
                    {% for kititem in kit.items -%}
                    <div class="kit-item">
                        <div class="info section full">

                            <span>
                                <b>Title:</b>{{ kititem.title }}
                            </span>
                        </div>
                        <div class="info section full">
                            <span class="sku">
                                <b>SKU:</b>{{ kititem.sku }}
                            </span>
                            <span class="pick-quantity">
                                <b>Pick Qty:</b>
                                {% if kititem.pick_quantity > 1 %}
                                <i class="highlight">{{ kititem.pick_quantity }}</i>
                                    {% elsif kititem.pick_quantity < 2 %}
                                    <i class="nohighlight">{{ kititem.pick_quantity }}</i>
                                    {% endif %}

                            </span>
                            <span class="locations" id="border">
                                <b>Locations:</b>
                                {% for loc in kititem.locations -%}
                                <span>
                                    {{ loc.warehouse }}--{{loc.location}}(<i class="lowlight">{{loc.quantity}}</i>)
                                    <!--Here we handle the separator between locations-->
                                    {% if forloop.last == false %}
                                    ,
                                    {% endif %}
                                </span>
                                {% endfor -%}
                            </span>
                        </div>
                    </div>
                    {% endfor -%}
                </div>
                {% endfor -%}
            </div>
            {% endif %}
        </div>
        {% endfor -%}
    </div>

{％endpicklist - ％}

Answer 1

{% for item in sale.items -%}
{% assign this_loop = forloop.index | modulo: 7 -%}

// the following where you want page break etc.

{% if this_loop == 0 -%}
<!---- do your kung-fu magic here ---->
{% endif -%}

{% endfor -%}

<强> P.S。不确定这里的语法，但上面是要使用的逻辑