'Cart's update on subpages

My cart doesn't want to update on subpages, even though I basically copied the same code from index.php (including the script). I checkec twice and everything is linked correctly, and it should be working properly. I have no idea what is going on :(( Plz someone help.

This is the error I get:
$ is not defined
This is my code on subpages. Excuse for the length:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Caroline | Homemade Candles</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.boothstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="favico.png" />
</head>
<body>
<div class="container">
        <div class="darmowadostawa">
    <p>Darmowa dostawa od 100zł!</p>
</div>
<div class="emailugory">
    <a href="mailto:#">E-mail:xxx</a>
    <a href="tel:#">Numer telefonu:xxx-xxx-xxx</a>
</div>

        
        
        
        <nav>

            <ul id="MenuItems" >
<li class="logo"><a href="index.php"><img src="logooficjalne.png" class="carolinepng"></a></li>
            <li style="margin-left: 400px;"><a href="swieceswiateczne.html">Boże Narodzenie</a></li>
                <li><a href="jesien.php">Jesień - Zima</a></li>     
                <li><a href="zapachy.php">Dodatkowe zapachy</a>
            </li>
            <li><a href="blog.html">Blog</a></li>




 <li class="nav-item"> <a href="cart.php"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span id="cart-item" class="badge badge-danger">0</span> </a> </li>
            </ul>
            </nav>
            

    
        <img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
    </div>
  <div class="container">
    
 <h2 class="title">Produkty</h2>
    <div class="row mt-2">
        <?php
        include 'config.php';
        $stmt = $conn->prepare("SELECT * FROM stronaproduktyphp");
        $stmt->execute();
        $result = $stmt->get_result();
        while($row = $result->fetch_assoc()):
        ?>
        <div class="col-lg-3">
                <div class="card-deck">
                    <div class="card p-2 border-secondary mb-2">
                    <a href="<?= $row['id'] ?>.php"><img style="margin-left:30px;" src="<?= $row['zdjecie_produktu'] ?>" class="card-img-top" height="250"></a>
                        <div style="margin-left: 30px; margin-right: 30px;" class="card-body p-1">
                            <h4 class="card-title text-center text-info"><?= $row['nazwa_produktu'] ?> </h4>
                            <h5 style="color:#fff;" class="card-text text-center text-danger"><?= number_format($row['cena_produktu'],2) ?>zł</h5>
                        </div>
                        <div class="card-footer p-1">
                            <form action="" class="form-submit">
                                <input type="hidden" class="pid" value="<?= $row['id'] ?>">
                                <input type="hidden" class="pname" value="<?= $row['nazwa_produktu'] ?>">
                                <input type="hidden" class="pprice" value="<?= $row['cena_produktu'] ?>">
                                <input type="hidden" class="pimage" value="<?= $row['zdjecie_produktu'] ?>">
                                <input type="hidden" class="pcode" value="<?= $row['kod_produktu'] ?>">
                                <button style="margin-left:300px;" class="btn btn-info btn-block addItemBtn"><img src="cart.png" width="20px;"></button>
                                <style>
      .btn:hover {
        background: #F5E595;
      }
    </style>
                            </form>
                        </div>
                    </div>
                </div>          
 </div>
<?php endwhile; ?>

 </div>
</div>
    
        <footer>
            <div class="column">
            <ul class="footer-links-main">
                <li><a href="onas.html">O nas</a></li>
                <li><a href="produkty.html">Produkty</a></li>
                <li><a href="polityka.html">Regulamin</a></li>
                <li><a href="contact.html">Kontakt</a></li>
                <li><a href="faq.html">FAQ</a></li>
            </ul>
        </div>
            <div class="footer-sm"> 
                <div class="column2">
                <h3 class="kontakth3">Kontakt</h3>
                <p class="kontaktp">Adres e-mail:xxx</p>
                <p class="kontaktp">Numer telefonu:xxx</p>
                        </div>
        </div>
        </footer>
<script>
        var MenuItems = document.getElementById("MenuItems");

        MenuItems.style.maxHeight = "0px";

        function menutoggle(){
            if (MenuItems.style.maxHeight == "0px")
            {
                MenuItems.style.maxHeight = "200px";
            }
            else
            {
                MenuItems.style.maxHeight = "0px";
            }
        }
    </script>
    <script src="main.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".addItemBtn").click(function(e){
                e.preventDefault(); 
                var $form = $(this).closest(".form-submit");
                var pid = $form.find(".pid").val();
                var pname = $form.find(".pname").val();
                var pprice = $form.find(".pprice").val();   
                var pimage = $form.find(".pimage").val();
                var pcode = $form.find(".pcode").val();

                $.ajax({
                    url: 'action.php',
                    method: 'post',
                    data: {pid:pid,pname:pname,pprice:pprice,pimage:pimage,pcode:pcode},
                    success:function(response){
                        $("#message").html(response);
                                    load_cart_item_number();


                    }
                });
            });
            load_cart_item_number();


        function load_cart_item_number(){
            $.ajax({
                url: 'action.php',
                method: 'get',
                data: {cartItem:"cart_item"},
                success: function(response){
                    $("#cart-item").html(response);
                }
            });
        }
    });
    </script>
</body>
</html>
phphtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions