Как на landing page реализовать выбор продукта?

Question

[Игорь]

Собственно есть простой landing page, на котором расположено несколько товаров
Есть простая контакт форма
Хочу сделать что бы клиент не просто просмотрел товар и во время звонка говорил что его интересует, а что бы при нажатии на кнопку заказать id товара или артикул (допустим) падало в контакт форму, количество не нужно выбирать, а просто что бы человек отметил интересующие его позиции, и так же при заполнении контакт формы мог бы удалить их
Как это правильно реализовать?

Answer 1

[Андрей Кварцов]

На кнопку для каждого товара добавьте дата атрибут:

<button data-name="iPhone X">Заказать iPhone X</button>
<button data-name="iPhone 8">Заказать iPhone 8</button>

В вашу форму заказа добавьте скрытое поле:
<input type="hidden" name="product-name">
И добавьте jquery:

$('button').on('click', function() {
 var name = $(this).data('name');
 $('[name="product-name"]').val(name);
});

Comments

[alex-1917]

ему надо НЕСКОЛЬКО товаров за раз))))

[Андрей Кварцов]

Тогда вообще не вижу проблемы. Делаете чекбоксы, и при отправке проверяете какие чекбоксы были выбраны

[Игорь]

alex-1917,ну да там может быть несколько

[Игорь]

Андрей Колесов, чекбоксы достаточно далеко от формы контактной, не подскажите как это правильно реализовать?

[Андрей Кварцов]

Попробуй так https://codepen.io/anon/pen/GOMyEx

[Игорь]

Андрей Колесов, не подскажите решение для отправки почты на Javascript или лучше на php по стандарту?

Answer 2

[alex-1917]

Если вам нужно добавление в форму нескольких товаров, то ваш путь - искать localstorage cart.
Загуглите localstorage cart и будет вам счастье.
Я в свое время нагуглил за 2 минуты, адаптировал к своему лендингу за 4 минуты, еще через полторы минуты посыпался шквал заказов...)))
Конкретная вариация зависит от вашей реализации лендинга, так как основной вопрос - как идентифицировать товар - по артикулу ли или по названию и т.д., id конечно идеальный вариант)))
Суть в чем - это будет аналог корзины. который обычно реализуется каким-либо магазинным движком, но движок делает кучу проверок - чтобы не было одинаковых id, что делать, если товар добавили еще раз в корзину и т.д. - у вас же в силу упрощения все это надо предусмотреть самому.
Ну или попадется толковый скрипт - там уже все будет. Я нагуглил толковый скрипт за 2 минуты.

Comments

[alex-1917]

вот начало, дальше сам))):

var cart = {};
localStorage.setItem('cart', JSON.stringify(cart) );

Answer 3

[doweb]

К примеру можно реализовать через тег input с аттрибутом hidden и value. То есть через JS отлавливаете какой товар выбрал пользователь и в переменную value добавляете значение, которое придет вместе с заявкой.
Либо же можно обработать <input radio>, <input radio>, смотря как реализован выбор продукта

Comments

[alex-1917]

ему надо НЕСКОЛЬКО товаров за раз))))