Блог

Я использую php для создания некоторых элементов html-продукта для корзины покупок на основе базы данных.

Проблема заключалась в том, что если я изменил количество продукта и обновил свою страницу, количество изменится обратно на ‘1’. Поэтому я использовал localStorage для хранения количества каждого продукта. Если я обновлю, количество останется неизменным, но если я нажму на элемент изображения » «, чтобы добавить к количеству, входное значение при изменении количества продукта отображается, только если я обновлю свою страницу. Итак, проблема в том, как обновить мой код, чтобы динамически добавлять количество продукта и одновременно сохранять количество в localstorage.

Мой код :

cart.php

 <div class="cart__table table-responsive">
                      <table width="100%" class="table" id  ="cartItems">
                          <thead>
                            <tr>
                              <th>PRODUCT</th>
                              <th>NAME</th>
                              <th>UNIT PRICE</th>
                              <th>QUANTITY</th>
                              <th>TOTAL</th>
                            </tr>
                          </thead>
                          <tbody>
                            <?php 
                              if(isset($_COOKIE)){
                                $count = 0;
                                foreach($_COOKIE as $i){
                                  $count  ;
                                  if($count ==1 ){
                                    continue;
                                  }
                                  $product = json_decode($i,true);
                                  echo "
                                  <tr 
                                    class ='product-columns'>
                                      <td class ='product__thumbnail'>
                                        <img src = ".$product["image"]." />
                                      </td>
                                      <td class='product__name'>
                                        <h3> ".$product["called"]." </h3>
                                        <small class = 'cartItemID' style = 'display:none;'> ".$product["code"]." </small>
                                        <small>".$product["soldAt"]."</small>
                                      </td>
                                      <td class='product__price'>
                                        <div class='price'>
                                          <span class='new__price'>".$product["costs"]."</span>
                                        </div>
                                      </td>
                                      <td class='product__quantity'>
                                        <div class='input-counter'>
                                            <div>
                                                <span class='minus-btn'>
                                                    <svg>
                                                        <use xlink:href='../images/sprite.svg#icon-minus'></use>
                                                    </svg>
                                                </span>
                                            <!--this is the element i want to change  -->
                                                <input 
                                                  type='text'  min='1' 
                                                   max='10' 
                                                  class='counter-btn' disabled
                                                  name = ".$product["code"]."
                                                   
                                                />
                                                <span class='plus-btn' >
                                                    <svg>
                                                        <use xlink:href='../images/sprite.svg#icon-plus'></use>
                                                    </svg>
                                                </span>
                                            </div>
                                        </div>
                                      </td>
                                      <td class='product__subtotal'>
                                          <div class='price'>
                                              <span class='new__price'>$250.99</span>
                                          </div>
                                          <a class='remove__cart-item'>
                                              <svg>
                                                <use xlink:href='../images/sprite.svg#icon-trash'></use>
                                              </svg>
                                          </a>
                                      </td>
                                  </tr>
                                  ";
                                  
                                }
                               <!-- when the php loads set input values to localstorage values -->  
                                echo "
                                  <script type = 'text/javascript'>
                                    var quantities = document.querySelectorAll('.counter-btn'); 
                                     quantities.forEach(q=>q.value = getSavedValue(q.name));
                                  </script>
                                ";

                              }else{
                                echo "<h1> No products have been added.  </h1>";
                              }


                            ?>
                                
                          </tbody>
                        </table>
                      </div>
 

Итак, с помощью приведенного выше кода я создаю html-элементы с помощью php и устанавливаю их количественный ввод в значение localstorage соответствующего элемента

В скрипте jquery у меня есть функция добавления к количеству, когда вы нажимаете » » и обновляете localstorage

jquery.js

     //Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e){
  var name = e.name;  // get the sender's id to save it . 
  var val = e.value; // get the value. 
  localStorage.setItem(name, val);// Every time user writing something, the localStorage's value will override . 
}

//get the saved value function - return the value of "v" from localStorage. 
function getSavedValue  (v){
  if (!localStorage.getItem(v)) {
      return "1";// You can change this to your defualt value. 
  }
  return localStorage.getItem(v);
}

function changeValue(name,val){
  localStorage.setItem(name , val);
}


//document ready 
$(".plus-btn").click((e)=>{
    var itmQuantity = parseInt($(e.target).closest('tr').find('.counter-btn').val());
    console.log(itmQuantity); //number
    if(itmQuantity!=10){
      $(e.target).closest('tr').find('.counter-btn').attr('value' , itmQuantity 1);
      var cd =  $(e.target).closest('tr').find('.counter-btn').attr('name');
      changeValue(cd,itmQuantity 1);
    }
  }); 
 

Попробуйте поместить этот код внутри одной из ваших функций, возможно, внутри ‘ChangeValue ()’

 $('.counter-btn').attr('value', 999);
 

если вы поместите его в ChangeValue(), фактический код будет

 $('.counter-btn').attr('value', val);
 

Лучше всего ввести для .counter-btn фактический атрибут ‘id’
, тогда вы сможете быть более конкретными и использовать

 <input id="counter-btn-1" type='text'min='1' max='10' class='counter-btn' disabled name=".$product["code"]."/>                                                                                               
 

 $('#counter-btn-1').attr('value', val);
 

Вы также можете решить эту проблему из сеанса php

connection.php

 if (!session_id()) {
    session_start();
}
 

index.php

 <?php
    require 'connection.php';
?>
<div>
    <span class="plus-btn"> </span>
    <?php if (isset($_SESSION['count_val'])){ ?>
        <input type="text" name="" class="counter-btn" value="<?php echo $_SESSION['count_val']?>">
    <?php }else{ ?>
        
        <input type="text" name="" class="counter-btn" value=""> //Here's php loop value
    <?php }?>   
    <span class="minus-btn">-</span>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('.minus-btn,.plus-btn').click(function(){
            var val = $('.counter-btn').val();
            $.ajax({
                url: 'ajax.php',
                type: 'POST',
                data: {val:val},
                success:function(){
                    alert('Data has been entered in session');
                }
            })
        })
    })
</script>
 

ajax.php

 require 'connection.php';
$val = $_POST['val'];
$_SESSION['count_val'] = $val;