Попытка закодировать чистую корзину, которая будет поддерживать доставку нескольких товаров нескольким получателям

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>

Вы можете увидеть простой пример работы здесь .

Пожалуйста, поправьте меня, если я ошибаюсь.

Спасибо.