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>
...

Luter1984 13.12.2010 11:07
Сделал как описано выше, появилась моя кнопка, но почему-то она на отрез отказывается посылать данные... Может быть причина в том, что у меня далее используется скриптом значение name='my-add-button' с именем стандартной кнопки ...

ksa 13.12.2010 11:49
Цитата:
Сообщение от Luter1984
Может быть причина в том, что у меня далее используется скриптом значение name='my-add-button' с именем стандартной кнопки
Таки потесть это.
Вариант для теста

...
<div id='sub4' onclick='alert("Ok")'>
       <a href='#'  title='Заказать'>
	 Заказать
      </a>
</div>
...

Luter1984 13.12.2010 11:57
Никакой реакции на: 
alert("Ok")'

ksa 13.12.2010 12:48
Luter1984, значит рой глубже. Кто-то или что-то перехватывает событие раньше твоей кнопки...

Luter1984 13.12.2010 13:18
У меня используются сессии, может быть проблема из-за них...
// INCLUDE JCART BEFORE SESSION START
include "jcart/jcart.php";
// START SESSION
session_start();
// INITIALIZE JCART AFTER SESSION START
$cart =& $_SESSION["jcart"]; if(!is_object($cart)) $cart = new jcart();

Данные из формы перехватываются в файле: jcart-config.php в виде:
// THE HTML NAME ATTRIBUTES USED IN YOUR ADD-TO-CART FORM
$jcart['item_id']		= 'my-item-id';		// ITEM ID
$jcart['item_name']	= 'my-item-name';	// ITEM NAME
$jcart['item_price']	= 'my-item-price';		// ITEM PRICE
$jcart['item_qty']		= 'my-item-qty';		// ITEM QTY
$jcart['item_add']		= 'my-add-button';	// ADD-TO-CART BUTTON

/***********************/
Спасибо за терпение :)

ksa 13.12.2010 13:37
Luter1984, ты не путай серверные дела с клиентскими... :)
ПХП и сессии это все дело серверное... А онклик с алертом у тебя не отрабатывают как ты ожидаешь на клиенте.
Пока не увидишь "Ок" на клиенте субмида не получишь...:no:

ksa 13.12.2010 13:37
Цитата:
Сообщение от Luter1984
Спасибо за терпение
Да ты плюсуй, плюсуй... Не стесняйся. :D

Luter1984 13.12.2010 14:10
Проблема в синтаксисе.
Блок ниже не работает:
<div id='sub4' onclick='alert("jr")'>
     <a href='#'  title='Заказать'>
	 Заказать
      </a>
</div>

Так как он вызывается внутри тела фунции printf(".....",...) :
Если передать методу alert числовое значение (без кавычек внутри):
<div id='sub4' onclick='alert(78787878)'>
     <a href='#'  title='Заказать'>
	 Заказать
      </a>
</div>

Он прекрасно запускается...
Но как тогда поступить со строкой кода:
<div id='sub4' onclick='document.getElementById("MyFrm").submit()'

Получается здесь срабатывает тот же механизм...

ksa 13.12.2010 14:13
Цитата:
Сообщение от Luter1984
Но как тогда поступить со строкой кода:
<div id='sub4' onclick='document.getElementById([B][I]"MyFrm"[/I][/B]).submit()'
Экранируй! :)

<div id='sub4' onclick='alert("Вот в чем \"фокус\"!")'>
     <a href='#'  title='Заказать'>
	 Заказать
      </a>
</div>

Luter1984 13.12.2010 14:49
Да экранирование сработало, но работает не так как хотелось :)
1. Стало видно, что страница перезагружается;
2. При нажатии на любую из кнопок - заказать отправляется информация только по первому товару;
3. При нажатии на кнопку не срабатывает надпись снизу - товар добавлен.
Наверное не совсем ясно выразился, поэтому картинка снизу...
<form method='post' action='' class='jcart' name='mycart' id='MyFrm'>
<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='hidden' name='my-add-button' value='В корзину' class='button'/>										</form>											
<div id='sub4' onclick='document.getElementById(\"MyFrm\").submit()'>
	<a href='' title='Заказать' class='button'>
		Заказать
	</a>
</div>


Luter1984 13.12.2010 14:52
Заранее спасибо
Вообще ничего не понимаю превратил кнопку из спрайта в обычную статическую и прописал, как:
<input type='image' src='..............' name='my-add-button' value='В корзину' class='button' />
Но она вообще перестала работать

ksa 13.12.2010 15:21
Цитата:
Сообщение от Luter1984
Стало видно, что страница перезагружается
Так субмит по другому и не работает... :)

Дальше я ничего не понял...

ksa 13.12.2010 15:26
Цитата:
Сообщение от Luter1984
При нажатии на любую из кнопок - заказать отправляется информация только по первому товару;
Ты весь урл разбираешь?
В твонм примере полей ровно на один товар...

<form method='post' action='' class='jcart' name='mycart' id='MyFrm'>
<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='hidden' name='my-add-button' value='В корзину' class='button'/>										
</form>

Как появляются остальные поля для отправки? какие у них name?

Luter1984 13.12.2010 15:29
форма лежит внутри функции printf в цикле do...while, информация добавляется согласно значениям %s...
/*открываем цикл для извлечения данных из таблицы базы данных*/					
								do
									{
									/*Маленькая проверка товара на наличие*/
									if($myarrayres_rubrika["categorynalichie"] == 2)
										{	
											$nalichie = "<br /><span id='tovar'>*Товар ожидается*</span>";
										}
									if($myarrayres_rubrika["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>
											</form>
                        				</td>
          			 				</tr>
                     				<tr>
            							<td colspan='2' class='zenabox'>
											<span class='zena_tovara'>Цена %s рублей</span>$nalichie
										</td>
          			 				</tr>
                     				<tr class='zenabox' align='center'>
            							<td>
											<div>
												<form method='post' action='' class='jcart' name='mycart' id='MyFrm'>
    													<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' />
												</form>																	
											</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_rubrika["title"],$myarrayres_rubrika["big_image"],
											   $myarrayres_rubrika["title"],$myarrayres_rubrika["mini_image"],
											   $myarrayres_rubrika["cena"],$myarrayres_rubrika["id"],
											   $myarrayres_rubrika["title"],$myarrayres_rubrika["cena"],
											   $myarrayres_rubrika["id"]);
									}
								while ($myarrayres_rubrika = mysql_fetch_array($res_rubrika));							
							}
						else
							{
								echo "<p id='privets'>По данной рубрике нет ни одной записи</p>";					
							}

ksa 13.12.2010 15:50
Цитата:
Сообщение от Luter1984
в цикле do...while, информация добавляется согласно значениям %s...
Так сколько у тебя всего форм? :) Т.к. субмит отправит только одну форму...

Luter1984 13.12.2010 16:37
минимум одна максимум 12, смысл понятен. Но как тогда сменить кнопку на свою - анимированную через CSS или хотя бы просто задать ее как статическую...вместо сдандартной submit. Не хочется из-за покупательской корзинки рушить дизайн всего проекта


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