[英]Woocommerce - Product Page - How to create AJAX on "Add To Cart" button?
[英]How to make a product add to cart with ajax?
我正在創建一個電子商務 web 頁面,它幾乎完成了,但我注意到在將產品添加到購物車時,它會重定向到 PC 上產品部分的開頭(即產品 1)幾乎不會影響任何事情,因為產品可以顯示在整個屏幕上,但是如果您在移動設備上並且添加了 1 個非常糟糕的產品,這將非常乏味,起初我嘗試添加重定向到產品 id 在表單的操作中,因此避免在開始時進行,但是這種重定向很糟糕,可能會讓客戶頭暈目眩。 然后嘗試用 ajax 來做,我已經查看了其他帖子,我什至看到了教程,但它們都不適合我。 我想要的是當我按下添加到購物車時,它會被添加。 以下是部分代碼:
產品部分:
<div class="container">
<div class="back-container"><button class ="back" onclick="location.href='productos.php'"><i class="fa-solid fa-arrow-left-long"></i></button></div>
<section class="Productos">
<article class="panrallado-grimaldi">
<h1>Pan Rallado</h1>
<div class="productos">
<?php
$select_products = $connect->prepare("SELECT * FROM `productos` WHERE categoria='pr'") or die('query failed');
$select_products->execute();
$list_products = $select_products->fetchAll(PDO::FETCH_ASSOC);
foreach($list_products as $producto){
include 'productact.php'; } ?>
</div>
</article>
</section>
</div>
</main>
<script src="function.js"></script>
<script>
$('body').on('submit', '.formadd', function(ev){
var id = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'backend/addCart.php',
data: $(id).serialize(),
success: function(data) {
$('.nav').load(' .nav');
},
error: function() {
alert('No se pudo agregar al carrito, intente mas tarde');
}
});
ev.preventDefault();
});
</script>
</body>
</html>
productadd(所有產品的表格):
<?php
$id = $producto['id'];
$codigo = $producto['codigo'];
$imagen = "media/productos/$codigo.png";
$nombre = $producto['nombre'];
$precio = $producto['precio'];
$bulto = $producto['bulto']
?>
<div class="p" id="<?php echo $id?>">
<img src="<?php echo $imagen; ?>" alt="<?php echo $nombre?>" title="<?php echo $nombre?>">
<p ><?php echo $nombre; ?></p>
<form action="backend/addCart.php" class="formadd" id="<?php echo $id?>" method="post">
<?php if(isset($_SESSION['email'])){?>
<p>(x <?php echo $bulto; ?>)</p>
<p class="precioo pps">$<?php echo number_format($precio, 0, ',', '.') ?></p>
<input type="hidden" name="id" value="<?php echo openssl_encrypt($id,COD,KEY);?>">
<input class="cantidad pps" type="number" min="1" name="cantidad" class="cantidad" placeholder="1">
<div class="cc"><button type="submit" name="btnCart" value="Add" class="c pps">Agregar Al carrito</button></div>
<?php
}
?>
</form>
</div>
addCart.php(添加產品的功能):
<?php
if(!isset($_SESSION)) {
session_start();
};
include 'connect.php';
include 'config.php';
if (isset($_POST['id'])) {
if(is_numeric(openssl_decrypt( $_POST['id'], COD, KEY))){
$ID = openssl_decrypt( $_POST['id'], COD, KEY);
}else{ echo '<script> alert("ID incorrecto"); </script>'; exit;
}
if($_POST['cantidad']<1){
$CANTIDAD = 1;
}else{
$CANTIDAD = $_POST['cantidad'];
}
if(!isset($_SESSION['cart'])){
$producto=array(
'ID'=>$ID,
'CANTIDAD'=>$CANTIDAD,
);
$_SESSION['cart'][0] = $producto;
echo '
<script>alert("Producto Añadido Exitosamente")</script>';
}else{
$idProductos=array_column($_SESSION['cart'],"ID");
if(in_array($ID, $idProductos)){
echo
'<script>alert("El Producto Ya Ha Sido Agregado")</script>';
}else{
$producto=array(
'ID'=>$ID,
'CANTIDAD'=>$CANTIDAD,
);
array_push($_SESSION['cart'], $producto);
echo '
<script>alert("Producto Añadido Exitosamente")</script>' ;
}
}
}
?>
問題是表單成功並執行我成功執行的操作success: function(data)
但產品未添加到購物車。 並且 chrome 控制台沒有顯示任何錯誤。
我已經做到了。 如果有人想知道,這里是 ajax 代碼:
$('.formadd').on('submit', function(ev) {
var id2 = $(this);
$.ajax({
type: $(id2).attr('method'),
url: $(id2).attr('action'),
data: $(id2).serialize(),
success: function(data) {
$('.cantidad').val('');
$('.cartbasket').load(' .cartbasket');
$('.alert-co').removeClass('hide')
},
error: function() {
$('.alert-inc').removeClass('hide')
}
});
ev.preventDefault();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.