Короче говоря, много работы, файлов и действительно сложно использовать с бесплатным (ограниченным) веб-пространством.
Сегодня мы обсудим альтернативу. Это бесплатно, супер легкий и просто требует немного другого подхода. То есть, нет графического пользовательского интерфейса для добавления товаров из магазина с помощью этой корзины. Вместо этого вам нужно вставить простые теги в ваш HTML-код. Не волнуйтесь, мы расскажем вам как.
simpleCart (JS)
Интерфейс конечного пользователя гладкий, простой и прямой. Продукты выровнены в этой корзине покупок в виде сетки с относительно большими значками, пояснениями к продукту и ценой. Веб-мастер может по желанию добавить различные варианты для продукта, например, маленькие, средние и большие футболки. Благодаря набору simpleCart лучше всего использовать для отображения небольших и относительно статичных продуктов, идеально подходящих для продавцов-любителей.
Корзина обычно показывается внизу страницы, но вы можете положить ее куда угодно. Здесь покупатель может просмотреть уже выбранные товары, изменить количество или очистить карту.
Когда вы будете удовлетворены, нажатие кнопки «Оформить заказ» переведет покупателя в Paypal или Google Checkout и начнет перевод денег на ваш счет. Когда вы получите деньги, вы получите уведомление о том, что после вы можете отправить товары. Так просто, как, что.
Настройка SimpleCart на вашем сайте
Во-первых, убедитесь, что у вас есть базовый веб-сайт, способный выполнять JavaScript (что большинство может), и немного веб-пространства для остальных файлов. Вы можете скачать simpleCart (js) с сайта . Это посуда для пожертвований, так что вы можете сами выбирать, нравится ли вам это, и сколько, по вашему мнению, оно стоит.
Разархивируйте файл и загрузите файл simpleCart.js в каталог своего сайта. Настройка завершается вставкой небольшого кода в HTML-файлы вашего сайта. Куда бы эти фрагменты кода не были вставлены, именно там будут отображаться конкретные компоненты simpleCart.
<script type = "text / javascript" src = "simpleCart.js"> </ script>
Добавьте это к каждой странице, между
<HEAD>
а также
</ HEAD>
теги, где вы хотите использовать simpleCart.
<script type = "text / javascript"> simpleCart.checkoutTo = PayPal; simpleCart.email = " you@yours.com "; </ Скрипт>
Добавьте вышеперечисленное, чтобы оформить покупку с помощью SimpleCart с помощью Paypal. Вам также необходимо указать свой почтовый адрес Paypal. Измените элементы на зеленый и вставьте весь фрагмент между
<HEAD>
а также
</ HEAD>
теги, где вы хотите использовать оформить заказ.
<script type = "text / javascript"> simpleCart.checkoutTo = GoogleCheckout; simpleCart.merchantId = " 111111111111111 "; </ Скрипт>
Если вы хотите использовать Google Checkout, вставьте приведенный выше фрагмент между
<HEAD>
а также
</ HEAD>
теги, где вы хотите использовать оформить заказ. Вместо вашего адреса электронной почты поменяйте зеленый элемент с идентификатором продавца Google Checkout.
<div class = "simpleCart_shelfItem"> <h2 class = "item_name"> Название продукта </ h2> <select class = "item_size"> <option value = "Small"> Small </ option> <option value = "Medium"> Medium </ option> <option value = "Large"> Large </ option> </ выберите>
<span class = "item_price"> $ 35,99 </ span>
<input value = "1" type = "text">
<a href = "javascript :;" class = "item_add"> Добавить в корзину </a> </ DIV>
Приведенный выше фрагмент кода используется для добавления товара на полку. Измените название товара и цену, покажите зеленым. Класс select, показанный синим цветом, не является обязательным. Если в вашем продукте нет подклассов, вы можете пропустить его. Вставьте его между
<BODY>
а также
</ BODY>
теги, где вы хотите показать его на своей странице.
<div class = "simpleCart_items"> </ div>
Вставьте это между
<BODY>
а также
</ BODY>
теги, где вы хотите отобразить всю корзину покупок веб-сайта.
В вашей корзине есть элементы <span class = "simpleCart_quantity"> </ span>. Всего в корзине: <div class = "simpleCart_total"> </ div>
<a href = "javascript :;" класс = "simpleCart_checkout"> Checkout </a> <a href = "javascript :;" класс = "simpleCart_empty"> Empty </a>
Вышеуказанные элементы соответственно отображают количество товаров в вашей корзине, общее количество товаров в корзине, ссылку для оформления заказа и пустую ссылку в корзине. Каждый элемент может существовать независимо.
Ознакомьтесь с документацией для получения более подробных настроек, включая параметры валюты, налоговые ставки, доставку и изменение форматирования корзины.
Что вы думаете о simpleCart (js)? Вы когда-нибудь продавали что-нибудь онлайн на своем собственном сайте, и как все прошло? Дайте нам знать об этом в комментариях!
Изображение предоставлено: Shutterstock