Обновление переменной php Session при переключении изображений

Question

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

Наконец, я хочу, чтобы тележка существовала на отдельной вкладке той же страницы.

То, что я до сих пор:

<?php session_start(); ?> 
... 
... 
<div style="display: block; width:1024px;"> 
<img id="image_id" src="image.png" width="110" height="110" style="margin-left:40px";> 
<script> 

$('#image_id').toggle(
    function() { 
     $(this).attr('src','image1.png'); 
     <?php $_SESSION['cart']['image_id'] = 1; ?> 
    }, 
    function() { 
     $(this).attr('src','image2.png'); 
     <?php $_SESSION['cart']['image_id'] = 2; ?> 
    }, 
    function() { 
     $(this).attr('src','image3.png'); 
     <?php $_SESSION['cart']['image_id'] = 3; ?> 
    }, 
    function() { 
     $(this).attr('src','image.png'); 
    <?php// $_SESSION['cart']['image_id'] = 0; ?> 
    } 
); 
</script> 
... 
... 
</div> 

<!-- Cart Tab --> 

<div id="tab4" style="display:none; width:1024px; padding-top:40px;"> 

<table border="1"> 
<tr> 
<th>Name</th> 
<th>Price</th> 
<th>Quantity</th> 
<th>Total</th> 
</tr> 

<?php 
    if($_SESSION['cart']) { 
     foreach($_SESSION['cart'] as $itemname => $quantity) 
     { 
      if($quantity == 0) continue; 
      $price = $_SESSION['items'][$itemname]; 
      $prod = $price*$quantity; 
      $_SESSION['total'] += $prod; 
      echo "<tr>"; 
      echo "<td>" . $itemname . "</td>"; 
      echo "<td>" . $price . "</td>"; 
      echo "<td>" . $quantity . "</td>"; 
      echo "<td>" . $prod . "</td>"; 
      echo "</tr>"; 
     } 
     echo "<tr>"; 
     echo "<td></td>"; 
     echo "<td></td>"; 
     echo "<td></td>"; 
     echo "<td>" . $_SESSION['total'] . "</td>"; 
     echo "</tr>"; 
     echo "</table>"; 
    }  
?> 

<a href="#tab1">Continue Shopping</a> 

</div> 

Проблема у меня в том, что изображение меняется правильно (меняется только тогда, когда я нажимаю его и переключает через четыре различных изображений), но при просмотре содержимое корзины, оно не меняется. Он выполняет все 4 заявления php немедленно. Я знаю, потому что, если я удалю последний тумблер (где я сброшу количество до 0) и просмотрю тележку, он уже показывает, что у меня есть 3 предмета, которые нужно приобрести, прежде чем я даже кликнуть один раз.

Любая помощь будет оценена по достоинству. Я предполагаю, что я мог бы также создать изображения как входные данные формы или гиперссылки, которые выполняют скрипт при щелчке, но я пробовал оба подхода без везения.

Заранее спасибо.

Answer 1

Javascript выполняется в браузере, а php выполняется на сервере, прежде чем страница будет обслуживаться пользователем.

Ваши PHP-фрагменты не выполняются при вызове javascript, скорее они выполняются на сервере, прежде чем пользователь даже увидит страницу.

Вместо того чтобы помещать PHP-код непосредственно в функции javascript, вам необходимо использовать вызов AJAX, который отправляет запрос на сервер.

Это говорит о том, что в данном конкретном случае лучше хранить данные о корзине в куки, а не в сеансе.