Вход • Регистрация

Как сделать кнопку "В корзину"?

  •
  • 14 октября 2016 г. , редакция: 14 октября 2016 г.
  • Есть стандартный код из сборки диафана:
    Код
    echo '<input type="button" class="button solid" value="'.$this->diafan->_('В корзину', false).'" action="buy">';

    и как заставить диафан понимать, что вот это тоже должно класть товар в корзину:
    Код
    echo '<button type="button" class="btn btn-default add-to-cart" action="buy"><i class="fa fa-shopping-cart"></i>В корзину</button>';


    Есть идеи, что еще надо доделать?
    •
    • 14 октября 2016 г.
    • Валерий Викторович, надо оставлять Input или дописывать скрипт в shop_buy.form.js
      • 14 октября 2016 г. , редакция: 14 октября 2016 г.
      • не, инпут устарел, не годится, в него не вставить иконки для бутстрапа.

        Значит все же верно мыслю, что надо дорабатывать shop.buy_form.js , благодарю Вас.
        • 14 октября 2016 г.
        • иконки можно выводить через псевдоэлементы after и before
          •
          • 14 октября 2016 г. , редакция: 14 октября 2016 г.
          • Интегрирую уже сверстанный (не мной) макет.
            В любом случае, из того манула, что нашел внятного, например вот тут, используется конструкция типа:
            <i class="fa fa-home"></i> или <span class="icon-pencil"></span>
            По ссылке написано:
            Код
            Для использования иконок, вы должны разместить их внутри элемента span или i. Затем, нужно присвоить им два класса: fa плюс второй класс, который должен соответствовать названию иконки, например fa-home.


            А как иначе? Если дадите ссылку на более толковый мануал, буду премного благодарен.
            Примечание: ссылка сюда http://fontawesome.io не подходит, в забугорных языках не силен.
            • 14 октября 2016 г. , редакция: 19 октября 2016 г.
            • Если макет уже сверстан, то конечно проще скрипт поправить, особенно если все так просто оказалось)

              А так, можно добавить:
              .add-to-cart:before или .add-to-cart:after (в зависимости от того где иконка - перед текстом или после) {
              сюда скопировать нужные стили fa и fa-shopping-cart для псевдоэлементов
              ну и поправить позиционирование
              }
              имхо, так хорошо делать, когда иконок у вас всего 3 штуки используется, чтобы не подключать весь иконочный css на 150 иконок.
              Но я еще и файлы шрифта иконок формирую на https://icomoon.io/ чтобы лишнего не было или было, но немного)
              • 19 октября 2016 г. , редакция: 19 октября 2016 г.
              • Инна, у вас запятая затесалась в ссылку на Icomoon. Кстати, для справки: когда в сборщике шрифта уже сформирован нужный набор, можно зайти в опцию "Preference" и поменять стандартную привязку CSS на CSS-стиль.



                Тогда в таблице стилей вместо такого селектора:
                Код
                [class^="icon-"], [class*=" icon-"] {
                /* use !important to prevent issues with...

                Будет такой:
                Код
                .icon {
                /* use !important to prevent issues with...

                Второй вариант по быстродействию эффективнее. А если в настройках вместо предлагаемого класса ".icon" указать, например, .icomoon, то это исключит возможность наложения стилей шрифта на другие возможные элементы с классом icon, которые вполне могут быть.
              •
              • 19 октября 2016 г. , редакция: 19 октября 2016 г.
              • Павел, спасибо)
                Я вручную переименовываю обычно, потому что вспоминаю об этом, когда уже все установила
              • 19 октября 2016 г. , редакция: 19 октября 2016 г.
              • Добавлю, что в бесплатной версии страница со сгенерированным шрифтом (на которой можно по каждой иконке получить и код и прочую информацию) "живёт" только до конца сессии. Но в скаченном архиве присутствует файл selection.json, который можно в любое время загрузить в сборщик шрифта как проект и все функции будут доступны также, как в платном аккаунте.



                Я, кстати, имел ввиду эту запятую (ссылка битая получается).

        • 14 октября 2016 г.
        • А так вот здесь наверное надо заменить на button
          Код
          $("input[action=buy]").click(function() {
          $(this).parents('form').find('input[name=action]').val('buy');
          $(this).parents('form').submit();
          })
          ;
          может более опытные коллеги поправят
  •
  • 14 октября 2016 г.
  • Инна, спасибо! Уже нашел, именно там, всего лишь нужно прописать:
    Код
    $("button[action=buy]").click(function() {

    только одно слово заменить. Уряяяяяяяяя!!!!!
    • 19 октября 2016 г. , редакция: 19 октября 2016 г.
    • Лучше так:
      Код
      $(".button[action=buy]").click(function() {
      тогда скрипту будет всё-равно - input у вас во вьюхе или button. Главное оставить class="button" у элемента, выполняющего роль кнопки.
      • 19 октября 2016 г.
      • Да, все верно, сделал:
        Код
        $(".input[action=buy]").click(function() {

        теперь работает с button как будто там input стоит в кнопках.
  •
  • 15 октября 2016 г.
  • Есть предложение (не мое, успели до меня ) сделать в сборке диафана вместо input -> button:
    здесь.
    Прошу голосовать всех кому это надо.
  • 19 октября 2016 г.
  • Дополняю. Если бы я не удалил id="show_cart" из файла cart.view.show_block.php (там у меня свой код), то все работало бы стандартно. В самый верхний блок (свой) корзины вернул данный идентификатор, и после нажатия кнопки "Купить" верхняя корзина обновляется как надо.
    Подсказали в ТП Диафана.

    Интересно, а почему если input, работало без id="show_cart" ???
    •
    • 19 октября 2016 г.
    • Цитата
      Интересно, а почему если input, работало без id="show_cart" ???
      Так настроены скрипты.
      •
      • 19 октября 2016 г.
      • Тогда пожелание очень даже актуально.
        Надеюсь, не Вы там минусовали?
        •
        • 19 октября 2016 г.
        • Не обижайтесь, но в данном предложении не вижу смысла, т.к. достаточно слегка скорректировать скрип и все будет как надо.
          Также хотел бы обратить Ваше внимание на то, что совершенно неважно какой тег используется, так как ЛЮБОЙ тег можно заставить и выглядеть, и вести себя как ЛЮБОЙ ДРУГОЙ тег. Просто есть определенные теги, которым по умолчанию присвоены конкретные свойства и поведение. Но ни кто не мешает переопределить эти свойства и поведение.

          PS: я вот все ждал, когда же хоть кто-нибудь приведет пример корректировки скрипта, чтобы Ваша задача решилась. И вот
          Цитата


          Любимов Павел (webnavigator) 9441 минуту назад, редакция 37 минут назад
          Лучше так:

          Код
          $(".button[action=buy]").click(function() {тогда скрипту будет всё-равно - input у вас во вьюхе или button.
          Так, что Ваше предложение немного не нужно. Опять же, это мое частное мнение.

          Успехов.
          •
          • 19 октября 2016 г.
          • Вы сильно поспешили, то было НЕ МОЕ предложение.
            Но я сильно ЗА то предложение, хотя по ходу, все свои проблемы решил еще ДО ТОГО, как ПРОГРАММИСТЫ начали заглядывать в эту тему.

            Код
            Просто есть определенные теги, которым по умолчанию присвоены конкретные свойства и поведение.
            ну а предложение то как раз об этом!
            Но лучше не читайте предложение, а то еще впарите минус
            • 19 октября 2016 г. , редакция: 19 октября 2016 г.
            • Валерий Викторович, там говорится о том, чтобы сделать button вместо input, потому что button - это контейнер. В него иконку положить можно...

              Используйте для этих целей плевдоэлементы :before и :after. В случае с иконочными шрифтами вообще никаких проблем нет.

              Поправлю сам себя. Псевдоэлементы работают только с элементами, которые могут содержать контент.

              Написал по старой памяти, а потом вспомнил, что задачу аналогичную я решал путём оборачивания input`ов в другие элементы и уже к "обёрткам" прикреплял псевдоэлементы.

              У тега input контента нет. Соответственно, прикреплять псевдо-элементы не к чему. В этом свете у предложения смысл конечно же есть.

              • 19 октября 2016 г.
              • Когда следующий bootstrap-макет сам буду верстать, обязательно воспользуюсь и вашей, и подсказкой Инны. Сейчас нет никакого желания переделывать чужой макет, и искать где выскочит паразитная обратная связь.
              • 19 октября 2016 г. , редакция: 19 октября 2016 г.
              • Код
                нужно знать HTML, CSS
                лично меня никак не пугает, это моя основная специальность в строительстве сайтов. В PHP в общем-то тоже ковыряюсь уверенно (ну, переделать чужой код не сильно сложно), наверно на "уровне разметки", как Вы говорите.
              •
              • 19 октября 2016 г.
              • Про "слона в колесе" отвечу здесь. Там нет места.
                Бегло глянул, да, это как раз сценарий того видео, вспомнить бы как сам клип назывался? Где-то здесь на форуме и была ссылка..

  • 14 декабря 2018 г.
  • Меняю input на button для кнопки "в корзину". Правлю в shop.buy_form.js строчку:

    Код
    $(document).on('click', "input[action=buy]", function()

    на
    Код
    $(document).on('click', ".button--to-card[action=buy]", function()


    Товар добавляется, но почему то 2 раза. Может кто нибудь подсказать почему?
    Вот сам сайт http://biscwita.spwp.ru/matrasy/
    •
    • 14 декабря 2018 г. , редакция: 14 декабря 2018 г.
    • А так, как выше написано не пробовали?
      Или так:
      Код

      $("[action=buy]").click(function (e) {
      e.preventDefault();
      $(this).parents('form').find('input[name=action]').val('buy');
      $(this).parents('form').trigger('submit');
      });
    •
    • 14 декабря 2018 г.
    • Не по теме: в корзине кнопки "удалить" нет.
      •
      • 14 декабря 2018 г.
      • Александра, нет кнопки, или изображения кнопки? Что код показывает?
        У меня такое часто бывало, после обновления. Решал вопрос копированием файла, если не ошибаюсь, remove.png, или другой, (посмотрите на демо-сайте название), в кастомную папку img
        •
        • 14 декабря 2018 г.
        • Самой кнопки не было у Дмитрия. Сейчас уже есть.
          •
          • 14 декабря 2018 г.
          • Ну сайт в процессе поэтому на тот момент её могло и не быть.
    •
    • 14 декабря 2018 г.
    • Сколько можно было увидеть, все нормально, скрипт подключается 1 раз, функция вызывается 1 раз, отправка идет 1 раз.
      Точно, когда был инпут в корзину падал 1 раз?

      Кеш сайта почистил?)))
    •
    • 14 декабря 2018 г.
    • e.prevenddefault запили

      потому как элемент button по умолчанию сама по себе даже без type=submit делает сабмит форме.

      Итого у тебя 2 сабмита получается, 1 от нажатия на кнопку по умолчанию, другой от $(document).on('click'
      •
      • 14 декабря 2018 г.
      • Точно))) А раньше вроде стоял по умолчанию сброс, или я путаю
        •
        • 14 декабря 2018 г.
        • Да сам реально JS дебажил долго пока не врубился что все так просто )))

          По моему со старых времен еще элемент button по дефолту отправляет форму, но это не точно )

          Для сброса type='reset'

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум