여러 항목을 여러 수신자에게 발송할 수있는 깨끗한 장바구니를 작성하려고합니다.

Question

현재 레이아웃을 해킹하고 변경하려고하는 장바구니가 있습니다.

현재이 모양은 다음과 같습니다. http://awesomescreenshot.com/0337b2420

나는 이런 식으로보고 싶습니다. http://awesomescreenshot.com/0757b2g13

다음은 코드입니다. 내가 원하는 것처럼 보이게하려면 코드를 변경해야합니까?

<script type="text/javascript"> 
    function remove_item(id) { 
    document.getElementById('updates_'+id).value = 0; 
    document.getElementById('cart').submit(); 
} 

<div id="page" class="innerpage clearfix">. 
    {% if cart.item_count == 0 %} 
     <h1>Your cart is currently empty.</h1> 
    {% else %} 

    <h1>Your Cart <span>({{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }}, {{cart.total_price | money_with_currency }} total)</span></h1>  

    <form action="/cart" method="post" id="cart-form"> 

    <div id="cart-wrap"> 
     <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
       <th scope="col" class="td-title"><label>Product</label></th> 
       <th scope="col" class="td-address"><label>Recipients</label></th> 
       <th scope="col" class="td-count"><label>Quantity</label></th> 
       <th scope="col" class="td-price"><label>Cost</label></th> 
       <th scope="col" class="td-delete"><label>Remove</label></th> 
      </tr>  

      <!-- BEGIN OLARK CHAT IMAGE --> 
      <a href="javascript:void(0);" onclick="habla_window.expand()"><img src="http://images-async.olark.com/status/1278-216-10-8509/image.png?online=http://static.olark.com/images/image-orangelark-available.png&offline=http://static.olark.com/images/image-orangelark-unavailable.png" border=0></a> 
      <!-- END OLARK CHAT IMAGE --> 

      {% for item in cart.items %} 
      <tr class="{% cycle 'reg', 'alt' %}"> 
       <td colspan="4"> 
        <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
         <tr> 
          <td class="td-title"><p>{{ item.title }}</p></td> 
          <td class="td-title">{% include 'shipping-addresses' %}</td> 
          <td class="td-count"><label>Count:</label> <input type="text" class="quantity item-count" name="updates[{{item.variant.id}}]" id="updates_{{item.variant.id}}" value="{{item.quantity}}" onfocus="this.select();"/></td> 
          <td class="td-price">{{item.line_price | money }}</td> 
          <td class="td-delete"><a href="#" onclick="remove_item({{item.variant.id}}); return false;">Remove</a></td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
      {% endfor %} 
     </table>   

     <div id="finish-up"> 

      <div class="latest-news-box"> 
       {{ pages.shopping-cart.content }} 
      </div>    

      <p class="order-total"> 
       <span><strong>Order Total:</strong> {{cart.total_price | money_with_currency }}</span> 
      </p> 

      <p class="update-cart"><input type="submit" value="Refresh Cart" name="update" /></p> 

      <p class="go-checkout"><input type="submit" value="Proceed to Checkout" name="checkout" /></p> 

    {% if additional_checkout_buttons %} 
    <div class="additional-checkout-buttons"> 
     <p>- or -</p> 
     {{ content_for_additional_checkout_buttons }} 
    </div> 
    {% endif %} 

     </div>   

    </div> 

    </form> 

    {% endif %} 



    <h1 class="other-products"><span>Other Products You Might Enjoy</span></h1> 
    <ul class="item-list clearfix"> 

     {% for product in collections.frontpage.products limit:2 %} 
     <li> 
      <form action="/cart/add" method="post"> 
      <div class="item-list-item">      
       <div class="ili-top clearfix"> 
        <div class="ili-top-content"> 
         <h2><a href="{{product.url}}">{{product.title}}</a></h2> 
         <p>{{ product.description | strip_html | truncatewords: 15 }}</p> 
        </div>      
        <a href="{{product.url}}" class="ili-top-image"><img src="{{ product.featured_image | product_img_url: 'small' }}" alt="{{ product.title | escape }}"/></a> 
       </div> 

       <div class="ili-bottom clearfix"> 
        <p class="hiddenvariants" style="display: none">{% for variant in product.variants %}<span><input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" style="vertical-align: middle;" {%if forloop.first%} checked="checked" {%endif%} /><label for="radio_{{variant.id}}">{{ variant.price | money_with_currency }} - {{ variant.title }}</label></span>{% endfor %}</p> 
        <input type="submit" class="" value="Add to Basket" /> 
        <p> 
         <a href="{{product.url}}">View Details</a> 

         <span> 
          {% if product.compare_at_price %}    
           {% if product.price_min != product.compare_at_price %}    
            {{product.compare_at_price | money}} - 
           {% endif %} 
          {% endif %} 
          <strong> 
           {{product.price_min | money}} 
          </strong> 
         </span> 
        </p> 
       </div> 
      </div> 
      </form> 
     </li> 
     {% endfor %} 

    </ul> 

    <div id="three-reasons" class="clearfix"> 
     <h3>Why Shop With Us?</h3> 
     <ul> 
      <li class="two-a"> 
       <h4>24 Hours</h4> 
       <p>We're always here to help.</p> 
      </li> 
      <li class="two-c"> 
       <h4>No Spam</h4> 
       <p>We'll never share your info.</p> 
      </li> 
      <li class="two-d"> 
       <h4>Secure Servers</h4> 
       <p>Checkout is 256bit encrypted.</p> 
      </li> 
     </ul> 
    </div> 

</div> 
<!-- end page --> 

Answer 1

내가 당신을 도울하거나하지 않습니다 모르겠습니다. 페이지를로드하는 동안

, 당신은 설정할 수 있습니다 :이 기능에

$(document).ready(function(){ 
      if()//cart.item_count == 0 then 
        $('#display1').css('display','inline'); 
        $('#display2').css('display','none'); 
      else 
        $('#display1').css('display','none'); 
        $('#display2').css('display','inline'); 
    }); 

는 "cart.item_count"의 기지에 상태를 확인할 수 있습니다.

그리고 HTML이 될 수 있음 :

<div id='general'> 
     <div id='display1'>First Header</div> 
     <div id='display2'>Second Header and Form</div> 
    </div> 

당신은 간단한 예는 here 작업 볼 수 있습니다.

내가 잘못하면 저를 교정하십시오.

감사합니다.