Comment ne pas rafraîchir les pages dans les codes PHP ?

Question

Je travaille à la création d'un panier d'achat. J'utilise un item_id pour chaque produit afin de sauvegarder les valeurs pour chaque panier d'achat. Comme j'appelle le nouveau index.php, chaque fois que j'ajoute/supprime des articles du panier, il se déplace toujours vers le haut de la page.

J'ai essayé d'enregistrer la position de défilement en tant que variable et de déplacer l'écran à la position de défilement précédente, mais cela n'a pas fonctionné : ....(neither calling #names).

Quelqu'un sait-il comment ne pas actualiser les pages pour résoudre ce problème ?

Voici mon code

<?php

session_start();

$page = 'index.php'; 
$con = mysqli_connect('localhost','root','0801','mystore') ;
mysqli_select_db($con,'mystore') ;

#for adding, removing, deleting the products from the cart
if(isset($_GET["add"])){ //same name with cart.php?add <--
 $_SESSION['cart_'.(int)$_GET["add"]] += 1;
echo '<script>window.location="index.php"; window.scrollTo(0,1200);</script>';
}

if(isset($_GET['remove'])){
  $_SESSION['cart_'.(int)$_GET['remove']] -- ;
  header("Location: ".$page);
}

if(isset($_GET['delete'])){
  $_SESSION['cart_'.(int)$_GET['delete']] = 0 ;
  header('Location: '.$page);
}

#function for displaying products
function product(){
  global $con;
  $get = mysqli_query($con, 'SELECT * FROM inventory ORDER BY id ASC');

  if (mysqli_num_rows($get) == 0){
    echo("There are no products to display");
  } else {
    while ($get_row = mysqli_fetch_assoc($get)){
    echo '<br /><img src="images/products/'.$get_row['image'].'" width=100px;>';
    echo '<br>'.$get_row['name'].'<br /> &dollar;'.number_format($get_row['price'],2);

echo '<br> <a href="cart.php?add='.$get_row['id'].'">Add To Cart</a>  
    }
  }
} #end of function

# function for display cart
function cart(){
  foreach ($_SESSION as $key => $value) { 
    if ($value > 0){
      if(substr($key, 0 , 5) =='cart_'){
        global $con; //DON'T FORGET TO ADD THIS!!!
        $id = substr($key, 5, (strlen($key)-5)); //take out the string part 
        $partid = mysqli_real_escape_string($con, $id); 
        $get = mysqli_query($con,'SELECT * FROM inventory WHERE id='.(int)$partid);

        while($get_row = mysqli_fetch_assoc($get)){
            $subTotal = $get_row['price'] * $value;
            echo '<br /><img src="images/products/'.$get_row['image'].'" width=30px;>';
            echo $get_row['name'].' x '.$value.' @ &dollar;'.number_format($get_row['price'], 2);
            echo ' = &dollar;'.number_format($subTotal,2);
            echo '<a href="cart.php?remove='.$id.'"> [-] </a> <a href="cart.php?add='.$id.'">[+]</a> <a href="cart.php?delete='.$id.'"> [delete] </a><br />';
        }
      }
      $total += $subTotal;
    }
  }
    if ($total ==0 ){
      echo "Your cart is empty";
    } else {
      echo '<p /> TOTAL: &dollar;'.number_format($total, 2);
    }
}

print_r($_SESSION);

?>

Answer 1

Envisager l'utilisation d'un jQuery Ajax pour ajouter/supprimer des articles du panier. Cette opération ne nécessite pas le rechargement de la page.

Answer 2

Vous pouvez utiliser le stockage de session pour enregistrer la position, puis revenir à la position lorsque la page est rechargée, comme ceci :

Jquery :

$(window).scroll(function() {
  sessionStorage.scrollTop = $(this).scrollTop();
});

$(document).ready(function() {
  if (sessionStorage.scrollTop != "undefined") {
    $(window).scrollTop(sessionStorage.scrollTop);
  }
});

Ou code JavaScript avec utilisation d'un cookie comme :

JavaScript :

<script>
    cookieName="page_scroll"
    expdays=365

    function setCookie(name, value, expires, path, domain, secure){
    if (!expires){expires = new Date()}
    document.cookie = name + "=" + escape(value) + 
    ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
    ((path == null) ? "" : "; path=" + path) +
    ((domain == null) ? "" : "; domain=" + domain) +
    ((secure == null) ? "" : "; secure")
    }

    function getCookie(name) {
    var arg = name + "="
    var alen = arg.length
    var clen = document.cookie.length
    var i = 0
    while (i < clen) {
    var j = i + alen
    if (document.cookie.substring(i, j) == arg){
    return getCookieVal(j)
    }
    i = document.cookie.indexOf(" ", i) + 1
    if (i == 0) break
    }
    return null
    }

    function getCookieVal(offset){
    var endstr = document.cookie.indexOf (";", offset)
    if (endstr == -1)
    endstr = document.cookie.length
    return unescape(document.cookie.substring(offset, endstr))
    }

    function deleteCookie(name,path,domain){
    document.cookie = name + "=" +
    ((path == null) ? "" : "; path=" + path) +
    ((domain == null) ? "" : "; domain=" + domain) +
    "; expires=Thu, 01-Jan-00 00:00:01 GMT"
    }

    function saveScroll(){ // added function
    var expdate = new Date ()
    expdate.setTime (expdate.getTime() + (expdays*24*60*60*1000)); // expiry date

    var x = (document.pageXOffset?document.pageXOffset:document.body.scrollLeft)
    var y = (document.pageYOffset?document.pageYOffset:document.body.scrollTop)
    Data=x + "_" + y
    setCookie(cookieName,Data,expdate)
    }

    function loadScroll(){ // added function
    inf=getCookie(cookieName)
    if(!inf){return}
    var ar = inf.split("_")
    if(ar.length == 2){
    window.scrollTo(parseInt(ar[0]), parseInt(ar[1]))
    }
    }
<script>

HTML :

<body onload="loadScroll()" onunload="saveScroll()" >