попытка создать страницу корзины покупок, похожую на apple (обновление цен на основе настроек)

#jquery #ajax

#jquery #ajax

Вопрос:

я пытаюсь создать страницу корзины, где на основе каждого выбора цены обновляются, как вы видите на этой страницеhttp://store.apple.com/us_smb_78313/configure/MC915LL/A?mco=MTk4Mjc2MDA

если вы заметили на странице Apple, что каждое значение радиополя имеет номер, подобный 095-344, и это значение каким-то образом отправляется через ajax на сервер, который затем получает значение цены, которое будет добавлено в корзину в качестве просмотренной общей суммы.

я создал нечто подобное, вот ссылка. http://69.231.228.101:8888/demo

я ввел в действие только первые два поля: количество и тип. при загрузке страницы автоматически выбирается третий вариант и отображается его цена. и когда выбран раздел select, значение items суммируется со значением, которое уже существует в правом верхнем углу. проблема, с которой я сталкиваюсь, заключается в том, что если вы теперь снова выберете количество, чтобы изменить желаемое количество, значение сбрасывается вместо того, чтобы выполнить правильную математику. что я делаю не так?

кроме того, знаете ли вы сайт jquery или какой-нибудь другой сайт, который пытался это сделать, который я мог бы изучить? я долго и упорно искал и не могу найти ничего подобного созданного. я просто вижу кучу простых страниц расчета корзины и ничего похожего на то, что я ищу. на многих сайтах есть что-то подобное, что я ищу, например, Apple, dell, hp, для настройки продукта и обновления цен на основе вашего выбора. что мне интересно, как и где они научились это делать. должен быть сайт, который этому учит.

Спасибо

Комментарии:

1. Не могли бы вы, пожалуйста, опубликовать код на стороне сервера

2. вот серверная часть для ajax.php: pastie.org/1406299

3. Не удается загрузить демонстрационную версию. У меня есть идея, но сначала я хотел бы посмотреть, что вы сделали. Поэтому, пожалуйста, дайте мне посмотреть демонстрацию. И самое главное, подождите не менее 5 дней, прежде чем повторно задавать тот же вопрос. Поэтому не любит такого рода вещи.

4. извините за это, пожалуйста. 69.231.228.101:8888/демо

5. Мне нужно увидеть весь скрипт, а не только менеджер $ _GET. (В любом случае, вам лучше проверить, являются ли переменные $ _GET пустыми или == » с помощью empty()).

Ответ №1:

Ну, хорошо. Попробуйте следующее: возьмите свою форму и отправьте ее. (Если вы этого не делали тогда, сделайте это) с помощью ajax (посмотрите на это). Таким образом, отправляется каждое проверенное радио. Теперь возьмите каждый радиоприемник и проверьте его значение, добавив к переменной правильное значение цены. $priceNUM В конце добавьте все цены из каждого проверенного радиоприемника вместе в $total var и выведите это. Вот глупый пример.

HTML

 <form>
 <input type="radio" name="box1" value="01"/>
 <input type="radio" name="box1" value="03"/>
 <input type="radio" name="box1" value="03"/>

 <input type="radio" name="box2" value="01"/>
 <input type="radio" name="box2" value="03"/>
 <input type="radio" name="box2" value="03"/>

 <input type="radio" name="box3" value="01"/>
 <input type="radio" name="box3" value="03"/>
 <input type="radio" name="box3" value="03"/>
</form>
  

PHP

 <?php

# Requiring vars
$box1 = $_POST['box1'];
$box2 = $_POST['box2'];
$box3 = $_POST['box3'];

# Checking
if (empty($box1) or empty($box2) or empty($box3)) { /* Error, or $price = 0 */ }

switch ($box1) 
{
 case '01':
  $price1 = 10;
 break;

 case '02':
  $price1 = 20;
 break;

 case '03':
  $price1 = 30;
 break;

 default:
  $price1 = 0;
 break;
}

switch ($box2) 
{
 case '01':
  $price2 = 50;
 break;

 case '02':
  $price2 = 100;
 break;

 case '03':
  $price2 = 150;
 break;

 default:
  $price2 = 0;
 break;
}

switch ($box3) 
{
 case '01':
  $price3 = 2;
 break;

 case '02':
  $price3 = 4;
 break;

 case '03':
  $price3 = 6;
 break;

 default:
  $price3 = 0;
 break;
}

$total = $price1   $price2   $price3;
echo $total;
  

?>

Теперь с помощью jquery создайте форму для отправки при изменении поля (я думаю, вы уже знаете, как это сделать), и мы закончили.

На самом деле, каждый раз, когда это происходит, мы собираемся вычислять общую сумму, но это самый простой способ. Вы также могли бы создать что-то с помощью базы данных или файлов cookie, но это стало слишком сложным.

Комментарии:

1. спасибо за ваш пост, но проблема, с которой я сталкиваюсь, если вы проверяете (script.js файл ) когда я выбираю второй вариант более 2 раз, вычисленное значение увеличивается.

2. Да, это из-за ajax.php скрипт. Вы должны рассчитать общую сумму, а не просто проверять идентификатор продукта. Вы должны отправить форму и подсчитать общее количество каждого радиоприемника (флажка или меню) и вернуть это. Я не очень силен в javascript и jquery, но я думаю, что настоящая проблема в вашем ajax.php файл. Попробуйте мой пример и дайте мне знать. В противном случае я найду другое решение…

Ответ №2:

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

 var qprice;
var typeprice;


$(document).ready(function() {


        /* -----------------------------------------------------
                Quantity Selection
           ----------------------------------------------------- */

        $("#quantity").change(function() 
        {
            var hash = $("#quantity").val(); //returns 0001 (ex)



            $.get("ajax.php", { id: hash },

            function(data)
            {
                qprice = data.price;
                displayPrice();
            }, "json");
        });




        /* -----------------------------------------------------
                Type Selection
           ----------------------------------------------------- */
        $("#type").change(function() 
        {
            var hash = $("#type").val(); //returns 0001 (ex)


            $.get("ajax.php", { id: hash },

            function(data)
            {   
                typeprice = data.price
                displayPrice();
                //$("#price").attr({value: total});

            }, "json");
        });








        function displayPrice() 
        {
            total = parseInt(qprice)   parseInt(typeprice);
            alert(total);
        }


});
  

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