Opencart - Скрипт Корзины Для Landing Page. Шаблон лендинг opencart
Opencart - Скрипт Корзины Для Landing Page | Модули, Шаблоны, Движки
Скрип корзины оказался достаточно прост в использовании и настройке. При необходимости, можно быстро переделать и уже работающий лендинг. Корзина для лендинг пейджИтак, первым делом подключаем jQuery, а ниже скрипт корзины. Я делаю это, как обычно, перед закрывающимся тегом body:
Код:
<!-- Библиотека jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- Скрипт корзины --> <script src="libs//salejs/cart.js"></script> Далее, необходимо произвести некоторые настройки и инициализировать скрипт. Я сделаю это ниже, под подключением скрипта корзины, но вы можете вынести его и в отдельный файл.Код:
<a href="#"> <i aria-hidden="true"></i> <span></span> <span></span><br/> <span>Показать/Скрыть содержимое</span> <!-- Опционально, вместо span элементов можно поместить сюда картинку для кнопки. --> </a> Основное здесь:Код:
<span></span> <span></span> Остальное я добавил самостоятельно. Теперь нужно разметить кнопку в карточке товара, которая будет добавлять товар в корзину. У меня карточка выглядит так:Код:
<div> <div><img src="img/tovar.png" alt="рюкзак"></div> <div>JanSport PD 3331</div> <div>1000 руб.</div> <a href="#" data-name="JanSport PD 3331" data-price="1000" data-quantity="1"><i aria-hidden="true"></i> В корзину</a> </div> Как вы могли заметить, у ссылки есть "говорящие" data-атрибуты. Данные этих data-атрибутов и попадают в корзину. Таки образом:- data-name - название товара/услуги
- data-price - цена
- data-quantity - количество
lowenet.biz
OC 2.0 - Fish Landing
Лендинг для opencart и ocstore 2.3/3.0 - это отдельный модуль управления одной страницей.Совместим с любым шаблоном, не замещает файлов движка.
Может быть использован как:1. Отдельная страница акций Вашего магазина Мой Магазин 2. Заглушка при Режиме обслуживания https://land.opencart4you.ru 3. Замена главной страницы магазина https://land30.opencart4you.ru В этом случае лендинг замещает только главную стр. Вашего магазина. Остальные страницы работают на томшаблоне, который настроен на Вашем сайте.- В модуле управления лендингом есть возможность включать/отключать блоки (Акция, Преимущества, Товары,Отзывы, Карусель брендов, Пользовательский блок).- Лендинг связан с базой данных товаров магазина только одним блоком ( закладка Товары из БД), естьвозможность отключить этот блок или, наоборот, вписать в посадочную страницу избранные товары магазина- Тексты, изображения, фоновые картинки, заголовки загружаются и редактируются в модуле лендинга.- При использовании модуля в качестве заглушки для режима обслуживания в лендинге прописываются основныемета тэги- Форма обратной связи предназначена для сбора контактов потенциальных покупателей. Все сообщенияотображаются в списке в модуле лендинга.- Корзина, кнопки Купить, поле поиска на странице ОТСУТСТВУЮТ.- Перед покупкой Вы можете зайти в админ. панель любого демо сайта и посмотреть работу модуля.логин: de
Landing Page шаблоны доступные для бесплатного скачивания c примерами сайтов.
Приветствую! В последнее время приходит много писем и сообщении с просьбой создать шаблон посадочных-целевых страниц, так называемых — Landing Page. Вообщем, дело было вечером — дел было намечено не мало..и все же выкроил 1 час времени, нашел в сети красивые шаблоны Landing Page, сделал подборку и выбрал лучшие 16 шаблонов с примерами, доступные для бесплатного скачивания. Смотрим, делаем, внедряем — расширяем клиентскую базу.В этом выпуске :
- Compact — светлый шаблон целевой страницы Landing Page
- Converting — современный шаблон Landing Page
- ProftHunt — многофункциональный шаблон Landing Page
- Bottom Line — премиум шаблон Landing Page для бизнеса
- Minimal — шаблон Landing Page c адаптивной версткой
- dotBIZ — универсальный шаблон Landing Page
- StackLayer — шаблон Landing Page в стиле полный минимализм
- Bravia — профессиональный шаблон Landing Page
- Booster — шаблон Landing Page с позиционированием на товар
- Aquitaine — бизнес шаблон Landing Page
- Reboot — шаблон Landing Page для презентации сайта как продукта
- Webinar — шаблон Landing Page для организации вебинаров и учебных курсов
- Evente — шаблон Landing Page для привлечения на мероприятия и события
- Shoelace — современный шаблон Landing Page в стиле Flat UI
- Venue — современный и креативный шаблон Landing Page Flat
1. Compact — светлый шаблон целевой страницы Landing Page
Сфера применения (по стилю шаблона): универсальный, бизнес.
Ключевые особенности:
- 4 предустановленных макета с разной версткой
- поддержка социальных сетей
- контактная форма связи
- валидная верстка
- фото и видео галереи
- SEO оптимизация
Информация о шаблоне Compact
| В архиве | Исходники |
| Размер архива | 3,5 MB |
| Технологии | HTML, CSS |
| Разработчик | ThemeForest |
Понравился шаблон Compact!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
Предварительный просмотр
https://themeforest.net/item/compact-landing-page/full_screen_preview/486862
Скачать бесплатно шаблон Landing Page — Compact
https://uploaded.net/file/2tm48qev/themeforest-compact-landing-page.rar
2. Converting — современный шаблон Landing Page
Сфера применения (по стилю шаблона): универсальный, для любого товара или продукта.
Ключевые особенности:
- чистый и современный дизайн
- внутренние посадочные страницы
- валидный HTML5 и CSS3 код
- адаптивная верстка
- легкая настройка
- SEO оптимизация
Информация о шаблоне Converting
| В архиве | Исходники, PSD |
| Размер архива | 7 MB |
| Технологии | HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон Converting!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
3. ProftHunt — многофункциональный шаблон Landing Page
Сфера применения (по стилю шаблона): универсальный, для любого товара или продукта.
Ключевые особенности:
- 12 предустановленных цветовых стилей оформления
- интеграция с Google Docs (документы)
- валидный HTML5 и CSS3 код
- контактная форма AJAX
- эффектный слайдер на главной странице
- поддержка аудио и видео информации
- и многое другое..
Информация о шаблоне ProftHunt
| В архиве | Исходники, PSD, документация |
| Размер архива | 8 MB |
| Технологии | HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон ProftHunt!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
4. Bottom Line — премиум шаблон Landing Page для бизнеса
Сфера применения (по стилю шаблона): бизнес, услуги.
Ключевые особенности:
- адаптивная верстка
- интеграция с формой авторизации
- валидный HTML5 и CSS3 код
- контактная форма AJAX с каптчей
- модуль вкладок(tabs) и обзор продукта
- настраиваемая таблица цен и отзывов
- SEO
- кроссбраузерность
Информация о шаблоне Bottom Line
| Исходники | |
| Размер архива | 1,6 MB |
| Технологии | HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон Bottom Line!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
5. Minimal — шаблон Landing Page c адаптивной версткой
Сфера применения (по стилю шаблона): книги, приложения, софт, программное обеспечение.
Ключевые особенности:
- адаптивная верстка
- красивый и современный дизайн
- 5 предустановленных стилей страниц
- реализована на Bootstrap Framework
- валидный HTML5 и CSS3 код
- контактная форма
Информация о шаблоне Minimal
| В архиве | Исходники, PSD, документация |
| Размер архива | 12 MB |
| Технологии | Bootstrap, HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон Minimal!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
6. dotBIZ — универсальный шаблон Landing Page
Сфера применения (по стилю шаблона): универсальный, для любого товара или продукта.
Ключевые особенности:
- адаптивная верстка
- красивый и современный дизайн
- разработан на Bootstrap
- поддержка Parallax (плавное смещение фонового изображения при прокрутке страницы)
- валидный HTML5 и CSS3 код
- дополнительные страницы: Coming Soon, Privacy Policy, 404
Информация о шаблоне dotBIZ
| В архиве | Исходники, PSD, документация |
| Размер архива | 12,5 MB |
| Технологии | Bootstrap, HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон dotBIZ!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
7. StackLayer — шаблон Landing Page в стиле полный минимализм
Сфера применения (по стилю шаблона): универсальный, для любого товара или продукта.
Ключевые особенности:
- тотальный минимализм, идеальный выбор для рекламы информационного продукта
Информация о шаблоне StackLayer
| В архиве | Исходники |
| Размер архива | 0,2 MB |
| Технологии | Wrapbootstrap, HTML5, CSS3 |
| Разработчик | wbpreview |
Понравился шаблон StackLayer!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
Предварительный просмотр
- https://wbpreview.com/previews/WB00TO920/
Скачать бесплатно шаблон Landing Page — StackLayer
- https://www8.zippyshare.com/v/78819424/file.html
8. Bravia — профессиональный шаблон Landing Page
Сфера применения (по стилю шаблона): корпоративный, бизнес, для любого товара или продукта.
Ключевые особенности:
- адаптивная верстка
- слайдер на главной
- модуль отзывов с прокруткой
- 6 цветовых схем
Информация о шаблоне Bravia
| В архиве | Исходники, PSD, документация |
| Размер архива | 22 MB |
| Технологии | Bootstrap, HTML5, CSS3 |
| Разработчик | ThemeForest |
9. Booster — шаблон Landing Page с акцентированием на товар
Сфера применения (по стилю шаблона): определенный товар, техника или цифровое устройство.
Ключевые особенности:
- 3 цветовых стиля
- интеграция с почтовым сервисом MailChimp
- чистый HTML5 код
- контактная форма AJAX
- JQuery Tabs
- фото галерея с лайтбокс
Информация о шаблоне Booster
| В архиве | Исходники, PSD, документация |
| Размер архива | 3,5 MB |
| Технологии | HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон Booster!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
10. Aquitaine — бизнес шаблон Landing Page
Сфера применения (по стилю шаблона): бизнес, услуги.
Ключевые особенности:
- лаконичный, профессиональный дизайн
- 5 предустановленных стиля оформления
- чистый HTML5 код
- PSD: исходники кнопок и меток
- фото с лайтбокс
Информация о шаблоне Aquitaine
| В архиве | Исходники, PSD, документация |
| Размер архива | 3 MB |
| Технологии | HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон Aquitaine!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
11. ReflexApps — красивый шаблон Landing Page для программ
Сфера применения (по стилю шаблона): демонстрация приложений и программ для iphone или android
Ключевые особенности:
- полная адаптивная верстка
- красивый и привлекательный дизайн, flat design
- foundation framework 4
- чистый HTML5 и CSS3 код
- эффекты анимации
- google шрифты
- легкая настройка
- кроссбраузерность
Информация о шаблоне ReflexApps
| В архиве | Исходники, PSD, документация |
| Размер архива | 2,3 MB |
| Технологии | FF4, HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон ReflexApps!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
12. Reboot — шаблон Landing Page для презентации сайта как продукта
Сфера применения (по стилю шаблона): презентация шаблона для сайта.
Ключевые особенности:
- адаптивная верстка
- минималистский дизайн
- чистый HTML5 и CSS3 код
- модуль отзывов
- легкая настройка
- кроссбраузерность
Информация о шаблоне Reboot
| В архиве | Исходники |
| Размер архива | 0,6 MB |
| Технологии | Bootstrap, HTML5, CSS3 |
| Разработчик | wbpreview |
Понравился шаблон Reboot!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
Предварительный просмотр
- https://wbpreview.com/previews/WB000C138/
Скачать бесплатно шаблон Landing Page — Reboot
- https://www14.zippyshare.com/v/2774625/file.html
13. Webinar — шаблон Landing Page для организации вебинаров и учебных курсов
Сфера применения (по стилю шаблона): бизнес, для привлечения на учебные курсы и вебинары.
Ключевые особенности:
- адаптивная верстка
- 6 макетов, 5 стилей оформления
- чистый, привлекательный дизайн
- Bootstrap Framework
- чистый HTML5 и CSS3 код
- SEO оптимизация
- google шрифты
- встроенный видео плеер
- легкая настройка
- кроссбраузерность
Информация о шаблоне Webinar
| В архиве | Исходники, PSD, документация |
| Размер архива | 10 MB |
| Технологии | Bootstrap, HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон Webinar!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
14. Evente — шаблон Landing Page для привлечения на мероприятия и события
Сфера применения (по стилю шаблона): бизнес, для привлечения на учебные курсы и вебинары.
Ключевые особенности:
- светлый и темный стиль оформления
- «легкий» дизайн
- Nivo слайдер
- форма обратной связи
- чистый HTML5 и CSS3 валидный код
- SEO оптимизация
- легкая настройка
- кроссбраузерность
Информация о шаблоне Evente
| В архиве | Исходники, PSD, документация |
| Размер архива | 4 MB |
| Технологии | HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон Evente!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
15. Shoelace — современный шаблон Landing Page в стиле Flat UI
Сфера применения (по стилю шаблона): универсальный, для любого товара или продукта.
Ключевые особенности:
- адаптивная верстка
- поддержка всех браузеров
- 250 встроенных иконок в стиле Flat
- Используется технология SASS (каждый элемент легко модифицировать)
- Gumby Framework
- Parallax Scrolling (плавное смещение фонового изображения при прокрутке страницы)
- чистый HTML5 и CSS3 код
- SEO оптимизация
- легкая настройка
Информация о шаблоне Shoelace
| В архиве | Исходники |
| Размер архива | 1,7 MB |
| Технологии | HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон Shoelace!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
16. Venue — современный и креативный шаблон Landing Page Flat
Venue — «место встречи изменить нельзя» — самый эффектный и привлекательный шаблон целевой страницы, разработан по последним технологиям и тенденциям в веб-дизайне.
Сфера применения (по стилю шаблона): универсальный, подойдет для любого продукта.
Ключевые особенности:
- адаптивная верстка
- Flat Design
- 3 цветовых варианта оформления
- Parallax Scrolling
- чистый HTML5 и CSS3 код
- и еще много «навороченых» фишек… смотрите демо.
Информация о шаблоне Venue
| В архиве | Исходники |
| Размер архива | 3,2 MB |
| Технологии | HTML5, CSS3 |
| Разработчик | ThemeForest |
Понравился шаблон Venue!? Не знаешь как правильно оформить и сделать целевую страницу? Воспользуйся нашими услугами по созданию Landing Page!
Такая вот получилась интересная подборка «LP одностраничников», ваши мнения и комментарии.
У тебя есть свой сайт LP? отправляйте свои примеры Landing Page с интересным дизайном на [email protected], мы выберем 10 лучших LP и сделаем обзор-интервью ваших сайтов.
Комментарии
freeams.ru
