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

Магазин на MiniShop2.

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

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

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

Как правильнее это реализовать в минишопе?

Филипп

07 августа 2017, 15:37

4 434

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

~~Сергей~~

07 августа 2017, 21:13

Я такое обычно делаю в двух вариантах — дешево или дорого. При этом в 1 варианте привязки именно к МиниШопу вообще нет.
Дешево — джикверей ловить клик по кнопке, делать её невидимой, открывать к показу вторую кнопку, которая до этого скрыта. Во второй кнопке требуемая вам ссылка и текст. тут минус — если обновиь страницу, то кнопка опять в исходном варианте, для обхода этого неудобства этого см. 2 вариант.
Дорого — привязываться к событию добавления в корзину и плюс привязываться к состоянию корзины — есть ли там данный товар или нет — открывая карту товара или список товаров (категорию), мы соответственно сразу видим, что этот товар уже в корзине. тут два подварианта — или показывать кнопку перехода в корзину или все-таки дать возможность добавить этот товар в корзину еще раз.

~~Сергей~~

07 августа 2017, 21:19

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

А что по второму методу?
Нашел вот такое решение, но завести его пока не удалось:
modx.pro/solutions/4844-dynamic-buy-button-in-the-shopping-cart/

~~Сергей~~

07 августа 2017, 22:25

кгхм)) по второму методу? я на модиксе и не делал, я ж написал в общих чертах, ибо что там за методы, одному богу известно))) делал для битрикса (не к ночи помянут), для хостцмс, какие там есть методы я точно знаю.
Логика такая — сама кнопка такая же плюс получаю массив ID из текущей корзины, сравниваю ID товаров в корзине с ID текущего товара (если я на странице товара) или в цикле (JS) прохожу по списку товаров 9если я на странице категории), где совпало, меняю видимость кнопок.
Какой плюс у меня — не требушу сервер, т.е. работа идет на клиенте, когда 500 клиентов в день, экономнее это делать на клиенте. Ты привел ссылку — там делается все на сервере.

but1head

08 августа 2017, 00:25

что там за методы, одному богу известно

~~Василий~~ Бог выложил все сюда github.com/bezumkin/miniShop2 и сюда docs.modx.pro/components/minishop2/development/scripts-and-styles

~~Сергей~~

08 августа 2017, 09:52

Тут хотят готового решения))))

Филипп

08 августа 2017, 09:55

Неа, всё по желанию участников
Вдруг есть готовые решения из прошлых работ

~~Сергей~~

08 августа 2017, 09:59

Ну у меня как бы готовое на 95%, допилить css и вперед. Трудно поверить, но заказчики поголовно соглашаются на 1-й вариант)))
Такая фишка — показывать что этот товар уже в корзине — на практике редко востребовано — или если насыщенный ассортиментно магазин, чтобы лишнего не кинуть в корзину, или если есть какие-то лимиты, например не продают больше одного товара за раз, чтобы клиент лишний раз не тыкал в кнопку.

Филипп

08 августа 2017, 12:54

За первый вар действительно спасибо, всё четко

~~Сергей~~

25 августа 2017, 22:47

Народ спрашивал:

скрытая кнопка выводится с display: inline, а мне нужно с display: block

Советую подучить основы!!)) (Метод .show() добавляет, если не присвоено в css-стилях, умолчальный стиль, тег a у нас строчный, как-то так)
В данном случае добавляем стили CSS для упомянутого элемента и при отработке метода .show() всё станет шоколадно! Вот:

<style>.add_cart_second {display:block;}</style>

Филипп

26 августа 2017, 16:28

А ничего, что в стилях уже указано display:none для второй кнопки, чтобы она была скрыта при загрузке?? Соотвественно, display:block; выведет её сразу.

Решил вопрос обертыванием ссылки в див.

~~Сергей~~

26 августа 2017, 17:24

Я дал направление для мыслей, а заодно и провёл мини-ликбез на тему jQuery+css))) Тогда для второй кнопки лучше бы указать инлайн-стиль, типа такого:

<a href="/cart" class="add_cart_second" style="display:none">
	Оформить заказ
</a>

что перекрыло бы стили из css и тогда точно все станет шоколадо!
А углублять вложенность надо делать в самом крайнем случае… В MS2 этой вложенности и так выше крыши.
Кстати, давал сей пример из работающего проекта, так что у меня все работает без оборачивания в div и без инлайн-стилей, у меня просто хитрый css)))

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

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

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

Здесь упомянуты