我在电子商务网站上看过一个简单的购物车演示： http://demo.simplecartjs.com/
然而，在下载中它只是一个基本的购物车。我希望它看起来像演示中显示的内容？但似乎无法找到正确的CSS和页面等？
答案 0 :(得分：0)
是的，您需要这个css page
加上这个HTML：
<div id="demoContainer">
<!--Create a div with the class simpleCart_shelfItem-->
<div class="simpleCart_shelfItem">
<!--Notice the class names of each tag begin with item_ -->
<img src="images/the-incredibles.png" alt="The Incredibles Purchase at Amazon http://amzn.com/B00005JN4W" title="Buy at www.amzn.com/B00005JN4W" class="item_image"/>
<h5 class="item_name">Sample DVD</h5>
<p class="item_Description">
To create a shelf item, you create a div with a class of “simpleCart_shelfItem”.
</p>
<span class="item_price">$14.99</span>
<a href="javascript:;" class="item_add">Add to Cart</a>
<span class="item_thumb">images/the-incredibles_tn.png</span>
</div>
<!--Create a div with the class simpleCart_shelfItem-->
<div class="simpleCart_shelfItem">
<!--Notice the class names of each tag begin with item_ -->
<img src="images/wolverine-3.png" alt="Wolverine Purchase at Amazon http://amzn.com/B002CMLIJ6" title="Buy at http://amzn.com/B002CMLIJ6" class="item_image"/>
<h5 class="item_name">Sample DVD 2</h5>
<p class="item_Description">
Any field you want for your item can be set by creating a tag with a class of “item_[field-name]”
</p>
<span class="item_price">$22.99</span>
<a href="javascript:;" class="item_add">Add to Cart</a>
<span class="item_thumb">images/wolverine-3_tn.png</span>
</div>
<!--Create a div with the class simpleCart_shelfItem-->
<div class="simpleCart_shelfItem">
<!--Notice the class names of each tag begin with item_ -->
<img src="images/ghostbusters.png" alt="Ghostbusters Game Purchase at Amazon http://amzn.com/B001ELJDXE" title="Buy at http://amzn.com/B001ELJDXE" class="item_image"/>
<h5 class="item_name">Sample Game</h5>
<p class="item_Description">
To create the add to cart button create a tag with the class “item_quantity”.
</p>
<span class="item_price">$59.99</span>
<a href="javascript:;" class="item_add">Add to Cart</a>
<span class="item_thumb">images/ghostbusters_tn.png</span>
</div>
<!--Create a div with the class simpleCart_shelfItem-->
<div class="simpleCart_shelfItem">
<!--Notice the class names of each tag begin with item_ -->
<img src="images/soviet-kitsch.png" alt="Soviet Kitsch Purchase at Amazon http://amzn.com/B0002XEDXU" title="Buy at http://amzn.com/B0002XEDXU" class="item_image"/>
<h5 class="item_name">Sample CD</h5>
<p class="item_Description">
If can display info about the cart anywhere on your page.
</p>
<span class="item_price">$8.99</span>
<a href="javascript:;" class="item_add">Add to Cart</a>
<span class="item_thumb">images/soviet-kitsch_tn.png</span>
</div>
<!--Create a div with the class simpleCart_shelfItem-->
<div class="simpleCart_shelfItem">
<!--Notice the class names of each tag begin with item_ -->
<img src="images/evil-empire.png" alt="Evil Empire Purchase at Amazon http://amzn.com/B0000029D9" title="Buy at http://amzn.com/B0000029D9" class="item_image"/>
<h5 class="item_name">Sample CD 2</h5>
<p class="item_Description">
A class of simpleCart_total, will display the cart total value.
</p>
<span class="item_price">$8.97</span>
<a href="javascript:;" class="item_add">Add to Cart</a>
<span class="item_thumb">images/evil-empire_tn.png</span>
</div>
<!--Create a div with the class simpleCart_shelfItem-->
<div class="simpleCart_shelfItem">
<!--Notice the class names of each tag begin with item_ -->
<img src="images/attack-release.png" alt="Attack and Release Purchase at Amazon http://amzn.com/B0013K6WLM" title="Buy at http://amzn.com/B0013K6WLM" class="item_image"/>
<h5 class="item_name">Sample CD 3</h5>
<p class="item_Description">
A class of simpleCart_checkout will send you off to Paypal or Google Checkout
</p>
<span class="item_price">$13.49</span>
<a href="javascript:;" class="item_add">Add to Cart</a>
<span class="item_thumb">images/attack-release_tn.png</span>
</div>
<div id="cartTotal">
<strong>Total: </strong><span class="simpleCart_total"></span>
</div>
<!--Add a div with the class of simpleCart_items to display what is in the user's cart-->
<div class="simpleCart_items"></div>
<!--use a class of simpleCart_empty to empty the cart and simpleCart_checkout to checkout -->
<a href="javascript:;" class="simpleCart_empty">Empty Cart</a>
<a href="javascript:;" class="simpleCart_checkout">Checkout</a>
<!--End #demoContainer-->
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-5082207-10");
pageTracker._trackPageview();
} catch(err) {}</script>
答案 1 :(得分：0)
该演示页面似乎仅使用背景图像进行整个页面设计（http://simplecartjs.com/images/BGDemoContent.jpg），这很奇怪，因为大部分设计都可以相对轻松地实现用CSS。
由于您可能不是手动将图像转换为CSS的专家，因此您似乎可以自己创建CSS /图形。或者你可以在你的网站上使用他们的背景图片，在这种情况下你必须编辑“演示”文本。
答案 2 :(得分：0)
以下是使用Google Checkout自定义购物车的不同演示：
https://checkout.google.com/seller/gsc/v2_2/demo/index.html
有关使用CSS和JavaScript自定义购物车UI和行为的文档，请访问：
https://sites.google.com/site/checkoutshoppingcart/reference