Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.12.2013, 19:11
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Как оформить заявку товаров?
Здравствуйте.
Есть такой вот код:
<div style="width: 400px;">     
<p>Выбираем цвет стола</p>
<table>
	<tr>
		<td><img src="/images/venge.jpg" class="material"></td>
		<td><span>Венге</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
	<tr>
		<td><img src="/images/orekh.jpg" class="material"></td>
		<td><span>Орех гварнери</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
	<tr>
		<td><img src="/images/klen.jpg" class="material"></td>
		<td><span>Клен медисон</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
</table>
<div id="zayavka"></div><input type="button" value="Оформить заявку"><br>
<input type="checkbox" name="sborka"> <span style="font-size: 16px; font-weight: 400;">Сборка специалистом нашего интернет-магазина</span>
	</div>

Как реализовать следующий функционал: Пользователь вводит количество товара, жмет заказать, опа - появилась строка с таким заказом снизу, пользователь выбрал еще другого товара столько-то штук, нажал заказать - опа еще строка добавилась. Принцип корзины товаров, только тут же на странице. Все добавляться должно в блок <div id="zayavka"></div>.
В итоге, пользователь жмет Оформить заказ и открывается окно с обратной связью, где нужно ввести имя телефон и адрес, а параметры заказа уже передались туда в фоне.
Ответить с цитированием
  #2 (permalink)  
Старый 06.12.2013, 20:28
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Batyabest,
<div style="width: 400px;">     
<p>Выбираем цвет стола</p>
<table id="data">
	<tr>
		<td><img src="/images/venge.jpg" class="material"></td>
		<td><span>Венге</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
	<tr>
		<td><img src="/images/orekh.jpg" class="material"></td>
		<td><span>Орех гварнери</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
	<tr>
		<td><img src="/images/klen.jpg" class="material"></td>
		<td><span>Клен медисон</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать"></td>
	</tr>
</table>
<div id="zayavka"></div><input type="button" value="Оформить заявку"><br>
<input type="checkbox" name="sborka"> <span style="font-size: 16px; font-weight: 400;">Сборка специалистом нашего интернет-магазина</span>
	</div>
<script>
var d = document;
window.onload = function () {
	d.getElementById("data").onclick = function(e) {
		var target = e && e.target || event.srcElement;
		if (target.type == "button" && target.value == "Заказать") {
			var value = target.previousSibling.value;
			//alert(target.parentNode.previousSibling.previousSibling.childNodes[0].childNodes[0].nodeValue);
			var ua = navigator.userAgent;
			var elm = ua.search(/MSIE/) > -1 ? target.parentNode.previousSibling.childNodes[0].nodeValue : target.parentNode.previousSibling.previousSibling.childNodes[0].childNodes[0].nodeValue;
			var div = d.createElement("div");
			var span = d.createElement("span");
			span.setAttribute("style", "color: red");
			span.appendChild(d.createTextNode(value));
			div.appendChild(d.createTextNode(elm+": "+value));
			//div.appendChild(span);
			var input = d.createElement("input");
			input.setAttribute("type", "button");
			input.setAttribute("value", "Отменить");
			input.onclick = function () { d.getElementById("zayavka").removeChild(this.parentNode); };
			div.appendChild(input);
			d.getElementById("zayavka").appendChild(div);
		}
	}
}
</script>

также можно при добавление в div можно связывать всю инфу с помощью объекта и тогда перед отправкой можно не бегать по новым div-ам для сбора необходимой инфы
метод window.open создаст новое окно браузера и вернет ссылку на него, с помощью которой можно управлять всем содержимым окна

Последний раз редактировалось lord2kim, 06.12.2013 в 20:53.
Ответить с цитированием
  #3 (permalink)  
Старый 06.12.2013, 20:32
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

А что-то не работает.
Ответить с цитированием
  #4 (permalink)  
Старый 06.12.2013, 20:52
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от Batyabest Посмотреть сообщение
А что-то не работает.
подправил
Ответить с цитированием
  #5 (permalink)  
Старый 06.12.2013, 20:56
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Спасибо, люкс. А как теперь мне на кнопку оформить заказ навесить это саме оформление. Просто все в форму завернуть? или есть тонкости?
Ответить с цитированием
  #6 (permalink)  
Старый 06.12.2013, 21:02
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Batyabest, по кнопке "Оформить" вам какие действия необходимо произвести? открыть форму в новом окне? открывайте с помощью window.open() (линк выше) страницу с формой и передавайте туда необходимые данные...
Ответить с цитированием
  #7 (permalink)  
Старый 06.12.2013, 22:55
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Сообщение от lord2kim Посмотреть сообщение
Batyabest, по кнопке "Оформить" вам какие действия необходимо произвести? открыть форму в новом окне? открывайте с помощью window.open() (линк выше) страницу с формой и передавайте туда необходимые данные...
По кнопке Оформить заказа хотелось бы чтобы открывалась форма в модальном окне, в которой человек введет свои данные (имя, телефон и адрес) и их можно отправить на почту. И конечно же при нажатии на кнопку Оформить заказ, все данные, полученные на 1 шаге должны передаться в эту форму. Это мне кажется сложно сделать? Или нет?

Последний раз редактировалось Batyabest, 06.12.2013 в 23:02.
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2013, 23:16
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от Batyabest Посмотреть сообщение
По кнопке Оформить заказа хотелось бы чтобы открывалась форма в модальном окне, в которой человек введет свои данные (имя, телефон и адрес) и их можно отправить на почту. И конечно же при нажатии на кнопку Оформить заказ, все данные, полученные на 1 шаге должны передаться в эту форму. Это мне кажется сложно сделать? Или нет?
по нажатию на кнопку собираете все данные из div zayavka, открываете новое окно (если вам нужно обязательно модальное, то нарисуйте свой div с формой или воспользуйтесь фишками jQuery), в которое загружаете страницу с формой; из основного окна подставляйте в соответствующие поля диалогового необходимые данные; submit-ом отправляйте на сервер на php-страницу (либо воспользуйтесь AJAX, также с помощью jQuery), откуда уже можете отправить email функцией mail() (может немного по другому называется; с php не работаю)...

также не забывайте проверять свои данные (на ваше усмотрение), например, нельзя заказывать дважды одно и то же; введенное кол-во товара является числом и т.п....
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2013, 23:33
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Спасибо за помощь, не могли бы подсказать про то как собирать данные из zayavka в форму?
Ответить с цитированием
  #10 (permalink)  
Старый 07.12.2013, 16:05
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Код немного изменил, как сделать так, чтобы считалась сумма заказа и можно было выбирать сборку для каждого товара отдельно в окошечке.

<p>Выбираем цвет стола</p>
<table id="data">
	<tr>
		<td><img src="/images/venge.jpg" class="material"></td>
		<td><span>Венге</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать" class='buttonsubmit'></td>
	</tr>
	<tr>
		<td><img src="/images/orekh.jpg" class="material"></td>
		<td><span>Орех гварнери</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать" class='buttonsubmit'></td>
	</tr>
	<tr>
		<td><img src="/images/klen.jpg" class="material"></td>
		<td><span>Клен медисон</span></td>
		<td><input type="text" name="quantity" value="" size="5"><input type="button" value="Заказать" class='buttonsubmit'></td>
	</tr>
</table>
<input type="button" value="Оформить заявку стола-трансформера"><div id="zayavka"></div>
<br>
	</div>
<script>
var d = document;
window.onload = function () {
	d.getElementById("data").onclick = function(e) {
		var target = e && e.target || event.srcElement;
		if (target.type == "button" && target.value == "Заказать") {
			var value = target.previousSibling.value;
			//alert(target.parentNode.previousSibling.previousSibling.childNodes[0].childNodes[0].nodeValue);
			var ua = navigator.userAgent;
			var elm = ua.search(/MSIE/) > -1 ? target.parentNode.previousSibling.childNodes[0].nodeValue : target.parentNode.previousSibling.previousSibling.childNodes[0].childNodes[0].nodeValue;
			var div = d.createElement("div");
			var span = d.createElement("span");
			span.setAttribute("style", "color: red");
			span.appendChild(d.createTextNode(value));
			div.appendChild(d.createTextNode(elm+": "+value));
			//div.appendChild(span);
			var input = d.createElement("input");
			input.setAttribute("type", "button");
			input.setAttribute("value", "Отменить");
			input.onclick = function () { d.getElementById("zayavka").removeChild(this.parentNode); };
			div.appendChild(input);
			d.getElementById("zayavka").appendChild(div);
		}
	}
}
</script>
<p><b><span style="color: blue">Услуги по доставке</span></b></p>
<p><input type="radio" name="dostavka" value="Нижний Новгород (нижняя часть города) в течение 5 дней"><span> г. Нижний Новгород (нижняя часть города) в течение 5 дней 300 руб.</span><br>
<p><input type="radio" name="dostavka" value="г. Нижний Новгород (верхняя часть города) в течение 5 дней"><span> г. Нижний Новгород (верхняя часть города) в течение 5 дней 400 руб.</span><br>
<p><input type="radio" name="dostavka" value="г. Нижний Новгород (верхняя и нижняя часть города) на следующий день после оформления"><span> г. Нижний Новгород, срочная (верхняя и нижняя часть города) на следующий день после оформления! 800 руб.</span><br>
<p><input type="radio" name="dostavka" value="Нижегородская область до 30 км. в течение 5 дней"><span> Нижегородская область до 30 км. в течение 5 дней 1500 руб.</span><br>
<p><input type="radio" name="dostavka" value="За пределами Н.Новгорода от 30 км. (на круг) 14 руб./км"><span> За пределами Н.Новгорода от 30 км. (на круг) 14 руб./км</span><br>
<p><input type="radio" name="dostavka" value="Транспортной компанией"><span> Транспортной компанией: с тарифами доставки Вы можете  ознакомится:  <a href="http://www.pecom.ru/ru/calc/">ТК ПЭК</a>, <a href="http://www.dellin.ru/">ТК Деловые Линии</a>. Вес упаковки стола с механизмом составляет 40килограм.(2места). Вся мебель поставляется в разобранном виде в плоских упаковках.</span>
<p><b><span style="color: blue">Услуги по подъему на этаж</span></b></p>
<p><input type="radio" name="podyem">
<span> Подъем стола-транформера в квартиру 100 руб./этаж на </span><input type="text" name="etazh" size=3><br>
<p><input type="radio" name="podyem"><span> Подъем стола-транформера на лифте</span><br>


Распишу более подробно.
По нажатии на кнопке Заказать Снизу появляется заказ по строкам. Это реализовано благодаря уважаемому lord2kim. Нужно еще, чтобы была строка с общей стоимостью заказа. Также одновременно с этим появлялся <span>Сборка <input type="text" name="quantity" size="5"></span> для того, чтобы пользователь мог напротив каждого заказа вписать количество. именно напротив каждого заказа. Потому что товаров могут заказать несколько, а сборку - одну.
Соответсвенно, нужно чтобы радио кнопки параметров доставки и все параметры подъема на этаж также суммировались в общую стоимость заказа. И по кнопке "Оформить заказ" открывалось модальное окно с обратной связью. Кстати, трудно сделать модальное окно? Или проще перенаправить на другую страницу с передачей всех вышесобранных параметров?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пасоны, как правильно парсить параметры? megaupload Оффтопик 15 05.05.2013 14:44
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Подскажите как правильно оформить код frolvict Общие вопросы Javascript 4 30.04.2010 10:51
Как узнать, присутствует ли в окне полоса прокрутки или нет? возжаждавший Элементы интерфейса 6 12.03.2010 23:00
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 19:19