我目前有一个购物车，我试图破解并改变布局。
目前它看起来像这样。 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 -->
答案 0 :(得分：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。
如果我错了，请纠正我。
谢谢。