Opencart - Скрипт Корзины Для Landing Page

Тема в разделе "Модули и дополнения", создана пользователем admin, 21 окт 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.317
    Симпатии:
    75.693
    Репутация:
    170
    Всем привет. Сегодня будем делать простую корзину для landing page на javascript. Дело в том, что меня часто спрашивали, как ее сделать и несколько раз присылали ТЗ на разработку, но я не брался, так как не особо понимал, как ее сделать, а недавно, решил поискать на форумах и блогах реализацию и наткнулся на...

    Скрип корзины оказался достаточно прост в использовании и настройке. При необходимости, можно быстро переделать и уже работающий лендинг.
    2016-10-21_115832.png 2016-10-21_115900.png
    Корзина для лендинг пейдж
    Итак, первым делом подключаем 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>
    Далее, необходимо произвести некоторые настройки и инициализировать скрипт. Я сделаю это ниже, под подключением скрипта корзины, но вы можете вынести его и в отдельный файл.

    Код:
    <script>
    cartjs.initialize({
    emailOrdersTo  : 'admin@lowenet.biz', // Ваша почта
    language  : 'russian',  // Язык
    currency  : 'руб.',  // валюта
    
    requireName  : true,  // Спрашивать имя покупателя.
    requirePhone  : true,  // Спрашивать телефон покупателя.
    requireEmail  : false,  // Спрашивать почту покупателя.
    requireAddress : false,  // Спрашивать адрес покупателя.
    })
    </script>
    Теперь давайте разместим саму кнопку корзины, в которой будет показана картинка и количество добавленных товаров:

    Код:
    <a href="#" class="cart-button" style="display: none;">
    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
    <span class="cart-button-quantity"></span>
    <span class="cart-button-label"></span><br/>
    <span class="basket-help-text">Показать/Скрыть содержимое</span>
    <!-- Опционально, вместо span элементов можно поместить сюда картинку для кнопки. -->
    </a>
    Основное здесь:

    Код:
    <span class="cart-button-quantity"></span>
    <span class="cart-button-label"></span>
    Остальное я добавил самостоятельно. Теперь нужно разметить кнопку в карточке товара, которая будет добавлять товар в корзину. У меня карточка выглядит так:

    Код:
    <div class="good-item">
    <div class="good-img"><img src="img/tovar.png" alt="рюкзак"></div>
    <div class="good-name">JanSport PD 3331</div>
    <div class="good-price">1000 руб.</div>
    <a href="#" class="cart-buy-button" data-name="JanSport PD 3331" data-price="1000" data-quantity="1"><i class="fa fa-shopping-basket" aria-hidden="true"></i> В корзину</a>
    </div>
    Как вы могли заметить, у ссылки есть "говорящие" data-атрибуты. Данные этих data-атрибутов и попадают в корзину. Таки образом:
    • data-name - название товара/услуги
    • data-price - цена
    • data-quantity - количество
    Вот, собственно, и все. Достаточно просто и быстро, в случае необходимости, можно оформить свой лендинг в стиле интернет-магазина и добавить ему корзину. Кстати, скрипт локализован на русский, украинский и английский язык. А какими инструментами для создания корзины на лендинг пейдж пользуетесь вы?
     

    Вложения:

    • basket.zip
      Размер файла:
      1 МБ
      Просмотров:
      9
    Последнее редактирование: 21 окт 2016
    SergLun, YourJuliet, astricus и 4 другим нравится это.
  2. Offline

    Elsvet Пользователь

    Сообщения:
    60
    Симпатии:
    47
    Репутация:
    7
    Спасибо
     
  3. Offline

    toblerone85 Пользователь

    Сообщения:
    1
    Симпатии:
    0
    Репутация:
    0
    @admin, Добрый день!
    Как раз очень долго ищу кто бы мог сделать landing page с корзиной на opencart, желательно на основе готового шаблона, и требуется интеграция с дисконтной системой, ее алгоритм уже прописан в скрипте. По этому вопросу можно обратиться к Вам? или посоветуйте хорошего исполнителя. Заранее благодарен
     
  4. Offline

    fiablestore Пользователь

    Сообщения:
    18
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  5. Offline

    astricus Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  6. Offline

    YourJuliet Пользователь

    Сообщения:
    120
    Симпатии:
    8
    Репутация:
    0
    Спасибо
     
    SergLun нравится это.
  7. Offline

    SergLun Пользователь

    Сообщения:
    1
    Симпатии:
    0
    Репутация:
    0
    спасибо