0
I am learning about PHP and decide to set up a small menu system fondly on the page itself.
It turns out that when I click on the add or remove cart item button, PHP makes a request (and obviously a Reload on the page) and that’s just horrible for the user experience. So I was looking for help to solve via Ajax, but I only found the guys showing how to use ajax in form and this is not my case. And I understand very little how to make an Ajax request.
Follow my code (it’s all from the menu.php page without calling any external file):
<section>
<div class="container">
<?php
$consulta_cardapio = $conectar_banco->prepare("SELECT id_item, nome_item, descricao_item, preco_item FROM cardapio");
$consulta_cardapio->execute();
$resultado = $consulta_cardapio->fetchAll();
foreach ($resultado as $produto) {
?>
<div class="row linha-item-cardapio d-flex align-items-center font-icons-medium">
<div class="col-lg-9 col-9">
<h5><?php echo $produto['nome_item'] ?></h5>
<p><?php echo $produto['descricao_item'] ?></p>
</div>
<div class="col-lg-3 col-3 preco-item-cardapio">
<div class="d-flex justify-content-center">
<a href="?remove=carrinho&id=<?php echo $produto['id_item'] ?>"><i class="las la-minus-circle"></i></a>
<div class="px-2"><?php echo "R$: " . $produto['preco_item'] ?></div>
<a href="?add=carrinho&id=<?php echo $produto['id_item'] ?>"><i class="las la-plus-circle"></i></a>
</div>
</div>
</div>
<?php
}
?>
<div class="row">
<div class="col-12">
<h4 class="mt-5 pt-5"> CARRINHO </h4>
</div>
</div>
<?php
if (!isset($_SESSION['itens'])) {
$_SESSION['itens'] = array();
}
if (isset($_GET['add']) && $_GET['add'] == "carrinho") {
$idProduto = $_GET['id'];
if (!isset($_SESSION['itens'][$idProduto])) {
$_SESSION['itens'][$idProduto] = 1;
} else {
$_SESSION['itens'][$idProduto] += 1;
}
}
if (isset($_GET['remove']) && $_GET['remove'] == "carrinho") {
$idProduto = $_GET['id'];
if (isset($_SESSION['itens'][$idProduto]) && $_SESSION['itens'][$idProduto] >= 1) {
$_SESSION['itens'][$idProduto] -= 1;
if (isset($_SESSION['itens'][$idProduto]) && $_SESSION['itens'][$idProduto] == 0) {
$_SESSION['itens'][$idProduto] = 0;
unset($_SESSION['itens'][$idProduto]);
}
}
}
if (count($_SESSION['itens']) >= 1) {
$valortotal = 0;
foreach ($_SESSION['itens'] as $idProduto => $quantidade) {
$consulta_cardapio = $conectar_banco->query("SELECT * FROM cardapio WHERE id_item=$idProduto");
$produtostotal = $consulta_cardapio->fetch(PDO::FETCH_ASSOC);
$subtotal = $quantidade * $produtostotal["preco_item"];
$subtotal2 = array($subtotal);
?>
<div class="row carrinho">
<div class="col-6 text-left">
<p><?php echo $produtostotal["nome_item"]; ?></p>
</div>
<div class="col-3 text-center">
<p><?php echo "Quant.: " . $quantidade; ?></p>
</div>
<div class="col-3 text-center">
<p><?php echo "R$: " . $subtotal; ?></p>
</div>
</div>
<?php
foreach ($subtotal2 as $total) {
$valortotal += floatval($total);
}
}
} else {
$mensagem_carrinho_vazio = "Carrinho vazio";
echo $mensagem_carrinho_vazio;
}
?>
<div class="row carrinho">
<div class="col-9 text-right">
<p>TOTAL</p>
</div>
<div class="col-3 text-center">
<p> <?php
if (isset($valortotal)) {
echo "R$ " . floatval($valortotal);
} else {
echo "R$: 00";
} ?> </p>
</div>
</div>
</div>
</section>
Every time I click <a href="?remove=carrinho&id=<?php echo $produto['id_item'] ?>"><i class="las la-minus-circle"></i></a> to add an item or in <a href="?add=carrinho&id=<?php echo $produto['id_item'] ?>"><i class="las la-plus-circle"></i></a> to remove a Reload page.
Is there any way to fix this or I’ll have to redo the whole system?
To proceed with the doubt it is important [Dit] to post and replace the code with a [mcve] problem (but if I understand correctly, already have a very expressive amount of questions on the site about AJAX, SPA and request without leaving the page with PHP, worth a search before). To understand what kind of question serves the site and, consequently, avoid closures and negativities worth reading What is the Stack Overflow and the Stack Overflow Survival Guide (summarized) in Portuguese.
– Bacco