Function JQUERY funziona solo una volta
Salve a tutti.
Sono alle prese con un problema, credo banale, ma che non riesco a risolvere.
Sto sviluppando un e-commerce, inizialmente gestivo le aggiunte al carrello con il metodo POST di PHP e tutto funzionava bene, poi ho deciso di gestirle con delle chiamate Ajax per velocizzare il tutto.
Non essendo un grande esperto di Ajax e Javascript mi sono arrangiato adattando qualche tutorial alle mie esigenze. Fatte tutte le modifiche, l'incremento del carrello funziona bene, ma la popup (o finestra modale) che da la notifica "Prodotto aggiunto al carrello" fine visualizzata solo al primo acquisto: se clicco sul pulsante "Acquista" per comprare un secondo prodotto, la popup di notifica non compare.
Vi inserisco il codice nella speranza che qualcuno più capace di me riesca a capire il problema (in pratica la function displayPopupAdd() viene eseguita solo la prima volta
Grazie in anticipo a tutti
Codice:
<?php
$cm = new CartManager();
if(isset($_GET['page'])) {
$a = $_GET['page'];
if (strpos($a, 'categorie') !== false) {
$page = $_GET['page'];
$arr = explode("?", $page, 2);
$page = $arr[0];
$id_category = $arr[1];
$arr = explode("=", $id_category, 2);
$categoryId = $arr[1];
}
}
$tab = 'category';
$chiave = ['id' => $categoryId];
$tabella = new DatabaseTable($pdo, $tab, $chiave);
$cat = $tabella->SelectByKey($chiave);
$info_categoria = InfoCategoria($cat);
$pm = new ProductManager();
$products = $pm->GetProducts($categoryId);
?>
Codice HTML:
<div class="popin" id="popupAdd" style="display:none;">
<input id="popin_check_1" type="checkbox" class="popin_check" hidden checked="true" />
<label class="layer fadeIn" for="popin_check_1"></label>
<div class="content fadeIn">
<div class="header">Prodotto aggiunto al carrello</div>
<a class="modal-button" href="="<?php echo ROOT_URL; ?>shop/?page=cart0">Vai al carrello</a>
<label class="modal-button close" for="popin_check_1"
onlick="closePopupAdd()">Chiudi</label>
</div>
</div>
</div>
Codice:
<?php if (count($products) > 0) : ?>
<?php
$i = 1;
?>
Codice HTML:
<div class="row">
Codice:
<?php foreach($products as $product) : ?>
<?php
$desc_um = um($pdo, $product->id);
$desc_um2 = um2($pdo, $product->id);
$nome_prodotto = $product->name;
$prezzo = $product->price;
$stprezzo = number_format($prezzo, 2, ',', '.');
$qta_mag = $product->qta;
$proimg = $pm->GetProductWithImages($product->id);
if($product->qta <= 1){
$btn="disabled";
$qta="Qta: Non Disp.";
}else{
$btn="";
$qta="Qta: <span class='qta'>".$product->qta . "</span>";
}
if($product->qta <= 1){
$btn="disabled";
$qta="Qta: Non Disp.";
}else{
$btn="";
$qta="Qta: <span class='qta'>".$product->qta . "</span>";
}
?>
Codice HTML:
<div class="catcol-3">
<div class="card altezza product-card" style="border-style: none;"
<img class="card-img-top" src="<?php echo ROOT_URL ."images/" . $product->immagine ?>" alt="<?php echo $product->name?>">
<div class="card-body" style=" background-color: #fdf5e0;">
<h4 class="card-title product-name text-center" ><?php echo stripslashes($product->name); ?></h4>
<p class="card-text"><?php echo stripslashes($product->metadescription); ?></p>
<p class="card-text product-price text-center">€ <?php echo $stprezzo ?> <?php echo $desc_um2 ?></p>
<a class="btn btn-info btn-small" href="<?php echo ROOT_URL; ?>shop/?page=product?id=<?php echo $product->id; ?>">Dettaglio</a>
<input type="hidden" name="id" value="<?php echo esc_html($product->id); ?>">
<input data-id="<?php echo esc_html($product->id); ?>" name="add_to_cart" type="submit"
class="btn btn-success btn-small" value="Acquista" <?php echo $btn;?>>
</form>
</div>
<div class="card-footer" style=" background-color: #fdf5e0; border-style: none;">
<a class="btn btn-info btn-small" style="color: #954514; background-color: #fdf5e0; border-style: none;" href="<?php echo ROOT_URL; ?>shop/?page=product?id=<?php echo $product->id; ?>">Dettaglio</a>
<input type="hidden" name="id" value="<?php echo esc_html($product->id); ?>">
<input data-id="<?php echo esc_html($product->id); ?>" name="add_to_cart" type="submit" class="btn btn-success btn-small" style="color: #954514; background-color: #fdf5e0; border-style: none;" value="Acquista">
</div>
</div>
</div>
Codice:
<?php endforeach; ?>
Codice:
<?php else : ?>
<p>Nessun prodotto disponibile...</p>
<?php endif;?>
Codice HTML:
</div>
<script>
var $document = $(document);
var $productsTable = $('#products-table');
var $spinner = $('#spinner');
$document.ready(function(){
$document.find('.product-card input:submit').on('click', addToCart);
$document.find('.product-card input:submit').on('click', displayPopupAdd);
function displayPopupAdd()
{
{ $('#popupAdd').css('display', 'block');}
//{ $('#aaa').css('display', 'block');}
}
});
</script>
<script>
function closePopupAdd() {
document.getElementById("#popupAdd").style.display = "none";
}
</script>
