Как получить полную демонстрационную простую корзину?

Question

Я видел демонстрацию простой корзины покупок для сайта электронной коммерции по адресу: http://demo.simplecartjs.com/

Однако в загрузке это просто базовая корзина.Я хочу, чтобы это выглядело так, как показано в демоверсии?Но не могу найти правильные CSS и страницы и т.д.?

Answer 1

Эта демонстрационная страница, кажется, использует только фоновое изображение для всего дизайна своей страницы (http://simplecartjs.com/images/BGDemoContent.jpg),, что странно, потому что большая часть этого дизайна может быть достигнута относительно безболезненно с помощью CSS.

Поскольку, вероятно, выВы не являетесь специалистом по конвертации изображений в CSS вручную, кажется, что вы сами создаете CSS / графику для этого, или вы можете просто использовать их фоновое изображение на своем сайте, и в этом случае вам придется редактироватьтекст "демо".

Answer 2

Ниже приведена другая демонстрация настраиваемой корзины покупок с помощью Google Checkout:

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

Документация по настройке пользовательского интерфейса корзины и поведения с использованием CSS и JavaScript приведена здесь:

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

Answer 3

Да, вам понадобится 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>