Сменить кнопку "Добавить в корзину" на "Оформить"

Магазин на MiniShop2.

Кнопка «Добавить в корзину» реализована стандартно:

<button type="submit" class="btn btn-default" name="ms2_action" value="cart/add">
                        [[%ms2_frontend_add_to_cart]]
                    </button>

Хочу, чтобы после добавления товара, кнопка менялась на «Оформить заказ» с соотвествующей ссылкой в корзину.

Как правильнее это реализовать в минишопе?
Филипп
Филипп
07 августа 2017, 15:37
modx.pro
3
3 689
0

Комментарии: 12

Сергей
Сергей
07 августа 2017, 21:13
0
Я такое обычно делаю в двух вариантах — дешево или дорого. При этом в 1 варианте привязки именно к МиниШопу вообще нет.
Дешево — джикверей ловить клик по кнопке, делать её невидимой, открывать к показу вторую кнопку, которая до этого скрыта. Во второй кнопке требуемая вам ссылка и текст. тут минус — если обновиь страницу, то кнопка опять в исходном варианте, для обхода этого неудобства этого см. 2 вариант.
Дорого — привязываться к событию добавления в корзину и плюс привязываться к состоянию корзины — есть ли там данный товар или нет — открывая карту товара или список товаров (категорию), мы соответственно сразу видим, что этот товар уже в корзине. тут два подварианта — или показывать кнопку перехода в корзину или все-таки дать возможность добавить этот товар в корзину еще раз.
    Сергей
    Сергей
    07 августа 2017, 21:19
    +1
    1-й варик:
    <button type="submit" class="btn btn-default add_cart_first" name="ms2_action" value="cart/add">
	[[%ms2_frontend_add_to_cart]]
</button>
<a href="/cart" class="hide add_cart_second">
	Оформить заказ
</a>
<script>
$(document).on('click', '.add_cart_first', function(e) {
	$(this).hide();
	$(this).next('.add_cart_second').show();
});
</script>
      Филипп
      Филипп
      07 августа 2017, 22:06
      0
      А что по второму методу?
      Нашел вот такое решение, но завести его пока не удалось:
      modx.pro/solutions/4844-dynamic-buy-button-in-the-shopping-cart/
        Сергей
        Сергей
        07 августа 2017, 22:25
        0
        кгхм)) по второму методу? я на модиксе и не делал, я ж написал в общих чертах, ибо что там за методы, одному богу известно))) делал для битрикса (не к ночи помянут), для хостцмс, какие там есть методы я точно знаю.
        Логика такая — сама кнопка такая же плюс получаю массив ID из текущей корзины, сравниваю ID товаров в корзине с ID текущего товара (если я на странице товара) или в цикле (JS) прохожу по списку товаров 9если я на странице категории), где совпало, меняю видимость кнопок.
        Какой плюс у меня — не требушу сервер, т.е. работа идет на клиенте, когда 500 клиентов в день, экономнее это делать на клиенте. Ты привел ссылку — там делается все на сервере.
          but1head
          but1head
          08 августа 2017, 00:25
          +2
          что там за методы, одному богу известно
          Василий Бог выложил все сюда github.com/bezumkin/miniShop2 и сюда docs.modx.pro/components/minishop2/development/scripts-and-styles
            Сергей
            Сергей
            08 августа 2017, 09:52
            0
            Тут хотят готового решения))))
              Филипп
              Филипп
              08 августа 2017, 09:55
              0
              Неа, всё по желанию участников
              Вдруг есть готовые решения из прошлых работ
                Сергей
                Сергей
                08 августа 2017, 09:59
                0
                Ну у меня как бы готовое на 95%, допилить css и вперед. Трудно поверить, но заказчики поголовно соглашаются на 1-й вариант)))
                Такая фишка — показывать что этот товар уже в корзине — на практике редко востребовано — или если насыщенный ассортиментно магазин, чтобы лишнего не кинуть в корзину, или если есть какие-то лимиты, например не продают больше одного товара за раз, чтобы клиент лишний раз не тыкал в кнопку.
                  Филипп
                  Филипп
                  08 августа 2017, 12:54
                  0
                  За первый вар действительно спасибо, всё четко
                    Сергей
                    Сергей
                    25 августа 2017, 22:47
                    0
                    Народ спрашивал:
                    скрытая кнопка выводится с display: inline, а мне нужно с display: block
                    Советую подучить основы!!)) (Метод .show() добавляет, если не присвоено в css-стилях, умолчальный стиль, тег a у нас строчный, как-то так)
                    В данном случае добавляем стили CSS для упомянутого элемента и при отработке метода .show() всё станет шоколадно! Вот:
                    <style>.add_cart_second {display:block;}</style>
                      Филипп
                      Филипп
                      26 августа 2017, 16:28
                      0
                      А ничего, что в стилях уже указано display:none для второй кнопки, чтобы она была скрыта при загрузке?? Соотвественно, display:block; выведет её сразу.

                      Решил вопрос обертыванием ссылки в див.
                        Сергей
                        Сергей
                        26 августа 2017, 17:24
                        0
                        Я дал направление для мыслей, а заодно и провёл мини-ликбез на тему jQuery+css))) Тогда для второй кнопки лучше бы указать инлайн-стиль, типа такого: 
                        <a href="/cart" class="add_cart_second" style="display:none">
	Оформить заказ
</a>
                        что перекрыло бы стили из css и тогда точно все станет шоколадо!
                        А углублять вложенность надо делать в самом крайнем случае… В MS2 этой вложенности и так выше крыши.
                        Кстати, давал сей пример из работающего проекта, так что у меня все работает без оборачивания в div и без инлайн-стилей, у меня просто хитрый css)))
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    12