Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Покупательская корзина (https://javascript.ru/forum/misc/13711-pokupatelskaya-korzina.html)

Luter1984 10.12.2010 13:46

Покупательская корзина
 
Доброго времени суток! Решил в целях эксперимента попробовать написать интернет магазин на PHP, MySQL, JavaScript. Есть несколько страниц на которых представлен товар...
В виде блоков:

Где все данные (наименование товара, фото товара, цена) динамически извлекаются из базы данных... в цикле do....while, в том числе и информация по кнопкам "Заказать" и "Описание" (см. ниже)
<tr class='zenabox' align='center'>
<td>
<div id='sub4'>
<a href='#' title='Заказать'>
заказать
</a>
</div>
</td>
<td>
<div id='sub5'>
<a href='view_p.php?id=%s' title='Подробнее'>
Подробнее
</a>
</div>
</td>
</tr>

На каждой странице вверху с помощью функции
include
подключается блок с корзинкой заказов:

Как сделать, чтобы при нажатии на кнопку - Заказать, без перезагрузки страницы, в корзине заказов картинка Фото_1 заменялась на картинку Фото_2 и добавлялась цена и количество товаров.

ksa 10.12.2010 14:40

Цитата:

Сообщение от Luter1984
Как сделать, чтобы при нажатии на кнопку - Заказать, без перезагрузки страницы, в корзине заказов картинка Фото_1 заменялась на картинку Фото_2 и добавлялась цена и количество товаров.

Где пример хтмля с этим блоком? Т.е. нужно знать разметку куда ты собираешся писать информацию...

Luter1984 10.12.2010 17:24

Здесь выводятся товары (см. рисунок 1)
<!--соединение с базой для вывода элементов по рубрике товара-->
<?php 		
/*делаем выборку из базы данных с сортировкой по дате и ограничиваем число записей шестью заметками*/
$result = mysql_query("SELECT id,cena,categorynalichie,mini_image,big_image,title FROM rubi ORDER BY data DESC LIMIT 6",$databasic);
/*проверка №1 - проверяем на правильность вывод данных в переменную $result/
if (!$result)
{
echo "<p>Обращение к базе данных не состоялось. Оповестите об этом администратора по email:
test@ya.ru <br />
<strong>Код ошибки:</strong></p>";
exit(mysql_error());
}
/*проверка №2 - проверяем были ли данные вынесены из базы данных, т.е. существует хотя бы одно значение в $rresult*/
if (mysql_num_rows($result) > 0)
{
/*вытаскиваем результаты запроса в переменную массив*/
$myarrayres = mysql_fetch_array($result);
/*открываем цикл для извлечения данных из таблицы базы данных*/					
do
{
/*Маленькая проверка товара на наличие*/
if($myarrayres["categorynalichie"] == 2)
{	
$nalichie = "<br /><span id='tovar'>*Товар ожидается*</span>";
}						
if($myarrayres["categorynalichie"] == 1)
{	
$nalichie = "<br />";
}
printf (
"<table border='0' cellspacing='0' cellpadding='0' class='blockstylecentertwo' valign='top'> 
<tr>
<td class='blockstyle1'><img src='image/topleftcentertwo.gif' width='10' height='10' /></td>
<td class='blockstyle2'><img src='image/toprightcentertwo.gif' width='10' height='10' /></td>
</tr>
<tr>
<td colspan='2' class='centerminiblock'><span id='name_tovar'>%s</span></td>
</tr>
<tr>
<td colspan='2' class='centerminiblockline'></td>
</tr>
<tr>
<td colspan='2' class='centerminiimage'>
<a href='%s' class='fancy' title='%s'><img src='%s' class='newtovarimage'/></a>
</td>
</tr>
<tr>
<td colspan='2' class='zenabox'><span class='zena_tovara'>Цена %s рублей</span>$nalichie</td>
</tr>
<tr class='zenabox' align='center'>
<td>
<div id='sub4'>
<a href='#' title='Заказать'>
Заказать
</a>
</div>
</td>
<td>
<div id='sub5'>
<a href='view_p.php?id=%s' title='Подробнее'>
Подробнее
</a>
</div>
</td>
</tr>                  
<tr valign='bottom' class='zenabox'>
<td height='10' class='blockstyle1'><img src='image/bottomleftcentertwo.gif' width='10' height='10' /></td>
<td class='blockstyle2'><img src='image/bottomrightcentertwo.gif' width='10' height='10'/></td>
</tr>
</table>", $myarrayres["title"],$myarrayres["big_image"],
$myarrayres["title"],$myarrayres["mini_image"],					$myarrayres["cena"],$myarrayres["id"]);
}
while ($myarrayres = mysql_fetch_array($result));							
}
else
{
echo "<p id='privets'>По данной рубрике нет ни одной записи</p>";					
}
?>			
</span></div>           
</td>


в этом же скрипте вверху подключается посредством include код для вывода корзинки товаров:

<!--Козина-->
		<div align="center">
        <table border="0" cellspacing="0" cellpadding="0" class="blockstyleleft">
		  <tr valign="top">
            <td class="blockstyle1"><img src="image/topleft.gif" width="10" height="10" /></td>
            <td class="blockstyle2"><img src="image/topright.gif" width="10" height="10" /></td>
          </tr>
          <tr>
            <td colspan="2" class="leftrightmenu"><span class="navmenutitle">Корзина</span></td>
          </tr>
		  <tr>
            <td colspan="2" class="linearrow"></td>
          </tr>
		  <tr class="fonecolor">
            <td>
				<div id="boxstyle">
                	<img src="image/boxbespokupkoi.gif" width="73" height="60" /> 	
                </div>
			</td>
			<td>
				<div id="sub1">
					<a href="sakas.php" title="Оформить заказ">
						Оформить заказ
					</a>
				</div>
				<div id="sub2">
					<a href="registre.php" title="Вход для клиентов">
						Вход для клиентов
					</a>
				</div>
				</td>
				</tr>
            <tr class="summatovarov"><td colspan="2"><div class="korsina_text">Товаров: 0<br />На сумму: 0 руб.</div></td></tr>    
		  <tr valign="bottom" class="foneimagefooter">
            <td class="blockstyle1"><img src="image/bottomleft.gif" width="10" height="10" /></td>
            <td class="blockstyle2"><img src="image/bottomright.gif" width="10" height="10" /></td>
          </tr>
     </table>

ksa 10.12.2010 20:12

Luter1984, это

<div class="korsina_text">Товаров: 0<br />На сумму: 0 руб.</div>


неудачная конструкция... Её лучше немного конкретизировать

<div class="korsina_text">
   Товаров: <span id='all_items'>0</span><br />
   На сумму: <span id='all_summ'>0</span> руб.
</div>


Тогда данные можно будет писать так

document.getElementById('all_items').innerHTML=<значение>
document.getElementById('all_summ').innerHTML=<значение>

Luter1984 12.12.2010 15:40

А как организовать сложение цены одного товара с другим

Luter1984 12.12.2010 15:44

Другими словами как передавать в ссылке:
<a href='#' title='Заказать'>

(см. код)
цены товара и складывать их друг с другом.
Кнопка заказать используется на нескольких страницах :)

Luter1984 12.12.2010 15:47

И если не затруднит, то не могли бы Вы дать ссылочку на какой-нибудь источник или инфу по организации покупательской тележки средствами JavaScript :help:

ksa 12.12.2010 22:16

А что тут изобретать? Храни информацию с привязкой к пользователю где сможешь хранить и откуда сможешь выводить...
Вот собственно и вся доктрина "по организации покупательской тележки"... :)

Luter1984 12.12.2010 23:17

C кодом немного разобрался и появился не менее занимательный вопрос :)
Есть блок кода в котором выводится кнопка по технологии CSS - спрайта:
<div id='sub4'>
       <a href='#'  title='Заказать'>
	 Заказать
      </a>
</div>

И форма для отправки данных методом POST:
<form method='post' action='' class='jcart' name='mycart'>
<fieldset>
<input type='hidden' name='my-item-id' value='%s' />
<input type='hidden' name='my-item-name' value='%s' />
<input type='hidden' name='my-item-price' value='%s' />
<input type='hidden' name='my-item-qty' value='1' size='3' />
<input type='submit' name='my-add-button' value='В корзину' class='button' />
</fieldset>
</form>

Как прикрутить код с кнопкой вместо стандартной кнопочки submit'???
**************************
Я думаю здесь без JavaScript не обойтись?

ksa 13.12.2010 09:34

Цитата:

Сообщение от Luter1984
Я думаю здесь без JavaScript не обойтись?

Правильно думаешь. :) Как вариант...

...
<form id='MyFrm' method='post' action='' class='jcart' name='mycart'>
...
</form>
...
<div id='sub4' onclick='document.getElementById("MyFrm").submit()'>
       <a href='#'  title='Заказать'>
	 Заказать
      </a>
</div>
...


Часовой пояс GMT +3, время: 19:44.