如何獲取完整的演示簡單購物車？

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>

來源

2011-05-19 12:36:19

0

這似乎演示頁，使用只是一個背景圖像的網頁的整個設計（HTTP：// simplecartjs .com/images/BGDemoContent.jpg），這很奇怪，因爲很多設計都可以通過CSS輕鬆實現。

由於想必您並不是將圖片轉換爲CSS的專家，因此您可以自行爲此創建CSS /圖形。或者您可以在您的網站上使用他們的背景圖片，在這種情況下，您將不得不編輯「演示」文本。

來源

2011-05-19 12:39:42

0

下面是使用谷歌Checkout的可定製的購物車的不同演示：

https://sites.google.com/site/checkoutshoppingcart/reference

：關於自定義UI車使用CSS和JavaScript在這裏的行爲

https://checkout.google.com/seller/gsc/v2_2/demo/index.html