액체 루프에서 특정 반복을 대상으로하는 방법은 무엇입니까?

Question

picklist에 대한 liquidify 마크 업 작업. 문제는 1 주문에 대해 6 개 이상의 항목이있는 경우 일부 콘텐츠를 잘라내는 페이지 나누기입니다. 페이지 나누기를 위해 7th 반복을 어떻게 지정합니까? {폭 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 -%} 

ps 여기에 문법이 있는지는 모르겠지만 위의 논리는 사용할 논리입니다.