Как оформить заявку товаров?
Здравствуйте.
Есть такой вот код: <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>. В итоге, пользователь жмет Оформить заказ и открывается окно с обратной связью, где нужно ввести имя телефон и адрес, а параметры заказа уже передались туда в фоне. |
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 создаст новое окно браузера и вернет ссылку на него, с помощью которой можно управлять всем содержимым окна |
А что-то не работает.
|
Цитата:
|
Спасибо, люкс. А как теперь мне на кнопку оформить заказ навесить это саме оформление. Просто все в форму завернуть? или есть тонкости?
|
Batyabest, по кнопке "Оформить" вам какие действия необходимо произвести? открыть форму в новом окне? открывайте с помощью window.open() (линк выше) страницу с формой и передавайте туда необходимые данные...
|
Цитата:
|
Цитата:
также не забывайте проверять свои данные (на ваше усмотрение), например, нельзя заказывать дважды одно и то же; введенное кол-во товара является числом и т.п.... |
Спасибо за помощь, не могли бы подсказать про то как собирать данные из zayavka в форму?
|
Код немного изменил, как сделать так, чтобы считалась сумма заказа и можно было выбирать сборку для каждого товара отдельно в окошечке.
<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> для того, чтобы пользователь мог напротив каждого заказа вписать количество. именно напротив каждого заказа. Потому что товаров могут заказать несколько, а сборку - одну. Соответсвенно, нужно чтобы радио кнопки параметров доставки и все параметры подъема на этаж также суммировались в общую стоимость заказа. И по кнопке "Оформить заказ" открывалось модальное окно с обратной связью. Кстати, трудно сделать модальное окно? Или проще перенаправить на другую страницу с передачей всех вышесобранных параметров? |
Помогите пожалуйста, уважаемые специалисты.
|
Часовой пояс GMT +3, время: 22:03. |