Блог

Главная - Вопросы по программированию - как изменить кнопку добавить в корзину после добавления товара в корзину с помощью php

как изменить кнопку добавить в корзину после добавления товара в корзину с помощью php

#javascript #php #html #jquery

#javascript #php #HTML #jquery

Вопрос:

я понятия не имею, как это сделать, после того, как пользователь добавит определенный товар в корзину, я хочу изменить кнопку «Добавить в корзину», чтобы моя корзина работала на сеансах

   <?php require'admin/dist/db.php';
  $sql = " SELECT * FROM products";
  $res = $conn->query($sql);
  if ($res->num_rows > 0) {
  while ($row = $res->fetch_assoc()) {
  $id=$row['id'];
  $_SESSION['product_id']=$id;?>
  <div class="cards ">
    <div class="wrapper">
      <div class="colorProd"></div>
      <div class="imgProd" style="background-image: url(img/product/<?echo $row['img_path'];?>);"></div>
      <div class="infoProd">
        <p class="nombreProd"><?echo $row['product_name'];?></p>
        <p class="extraInfo"></p>
        <div class="actions">
          <div class="preciosGrupo">
            <p class="precio precioOferta">9,999</p>
            <p class="precio precioProd"><?echo $row['product_price'];?>
            </p>
          </div>
          <div class="icono action aFavs" title="Add TO Wishlist">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <path d="M47 5c-6.5 0-12.9 4.2-15 10-2.1-5.8-8.5-10-15-10A15 15 0 0 0 2 20c0 13 11 26 30 39 19-13 30-26 30-39A15 15 0 0 0 47 5z">
              </path>
            </svg>
          </div>
           <form action="" method="post">
          <label >
            <button  class="  pointer addtocart " id="<? echo $row['id'];?>" type="submit" >
            </button>
            <div class="icono action alCarrito">
              <!-- alCarrito -->
              <svg class="inCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                <title>Added To Cart !</title>
              <path d="M30 22H12M2 6h6l10 40h32l3.2-9.7"></path>
              <circle cx="20" cy="54" r="4"></circle>
              <circle cx="46" cy="54" r="4"></circle>
              <circle cx="46" cy="22" r="16"></circle>
            <path d="M53 18l-8 9-5-5"></path>
          </svg>
          <svg class="outCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
            <title>Add To Cart</title>
          <path d="M2 6h10l10 40h32l8-24H16"></path>
          <circle cx="23" cy="54" r="4"></circle>
          <circle cx="49" cy="54" r="4"></circle>
        </svg>
      </div>
    </label>
    <input type="hidden" name="id" value="<?echo $row['id'];?>">
    <input type="hidden" name="name" value="<?echo $row['product_name'];?>">
    <input type="hidden" name="price" value="<?echo $row['product_price'];?>">
  </form>
</div>
</div>
</div>
</div>
<? }}?>
</div>
<?if(isset($_POST['id']))
{$name = $_POST['name'];
$price = $_POST['price'];
$id = $_POST['id'];
$cart  = array('id' => $id,'name' => $name,'price' => $price);
$_SESSION['cart'][$id]= $cart;
}?>


эти 3 карточки выводятся из моей базы данных, что я хочу сделать, это просто сообщить php, что кнопка корзины уже добавленного товара изменяется,
и после добавления пользователем товара в корзину я хочу отобразить кнопку добавить в корзину примерно так
см. Корзину svg я хочу изменить ее следующим образом после добавления товарав корзину

у меня есть этот класс для css enCarrito, если я добавлю этот класс, <div class="cards enCarrito"> тогда корзина svg изменится, как я загрузил на 2-м изображении

Спасибо!

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

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

2. посмотрите svg-файл корзины покупок рядом с ценами, он выглядит по-разному на обоих изображениях

3. Вы уверены? Мои глаза могут быть не такими, какими они были раньше, но ‘ i.stack.imgur.com/HxsFQ.png » и » i.stack.imgur.com/HxsFQ.png «по-моему, они выглядят совершенно одинаково в том, что касается ссылок.

Ответ №1:

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

Я предполагаю, что вы будете хранить свою корзину в сеансе, как в: $_SESSION['cart'][] = $_POST['id'] .

Теперь, во время (повторного) создания страницы, вы можете использовать in_array функцию, чтобы определить, находится ли уже создаваемый товар в корзине.

 while ($row = $res->fetch_assoc()) {
  $id=$row['id'];
  $inCart = (in_array($id, $_SESSION['cart']) ? 'enCarrito' : '';
?>
  <div class="cards <?= $inCart ?>">

Предполагая, что вы хотите сделать это с помощью jQuery, вы должны присвоить своему div правильный идентификатор, как в <div id='product_<?= $id ?>'> , а затем добавить класс с $('#product' ID).addClass('enCarrito'); , как описано в https://api.jquery.com/addClass /

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

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

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