Respo

templates/tickets/main-view.php

@@ -218,7 +218,7 @@ if (isset($_POST['selected_date'])) {
   <div class="bottom-info__background "></div>
 </div>
 <div class="shopping-cart-container">
-  <div class=" <?= $this->cart ? 'shopping-cart shopping-cart--active' : "shopping-cart" ?>">
+  <div class="shopping-cart">
     <div class="basket"><i class="fa-solid fa-ticket"></i></div>
     <div class="quantity">
       <p>Bilety</p>
@@ -226,10 +226,14 @@ if (isset($_POST['selected_date'])) {
     <ul class="tickets__list">
       <?php
         $summary = 0;
+        $tickets = 0;
+
         foreach ($this->cart as $ticket_id => $combinations) :
           foreach ($combinations as $key => $value) :
             $summary_ticket = $value['ticket_price'] * $value['quantity'];
             $summary += $summary_ticket;
+            $tickets = $tickets + $value['quantity'];
+
             ?>
               <li class="ticket">
                 <p class="ticket__description">
@@ -250,12 +254,51 @@ if (isset($_POST['selected_date'])) {
     <a href="/tickets/basket_view/" class="buy-btn">Kup teraz</a>
     <button class="off-btn">x</button>
   </div>
+  <input type="hidden" name="tickets" value="<?= $tickets ?>">
 </div>
-<script type="text/javascript">
-$(function() {
 
+<div class="mobile-cart-btn">
+  <span><?php echo $tickets; ?></span>
+  <div class="mobile-cart-btn--img">
+    <img src="/layout/images/shopping-basket.svg" alt="">
+  </div>
+</div>
+
+<script type="text/javascript">
+$(document).ready(function () {
+  let lastValue = null;
+
+  setInterval(function () {
+      const input = $('.shopping-cart-container input[name="tickets"]');
+      if (!input.length) return;
+
+      const currentValue = input.val();
+      if (currentValue !== lastValue) {
+        $('.mobile-cart-btn span').html(currentValue);
+        lastValue = currentValue;
+
+        if(currentValue == 0){
+          $('.mobile-cart-btn').removeClass('hide');
+          $('.shopping-cart-container').removeClass('shopping-cart-container--active');
+        }
+      }
+  }, 300);
+});
+
+
+$(function() {
+  $('body').on('click', '.mobile-cart-btn', function() {
+    if($('span', this).text() != 0){
+      $(this).addClass('hide');
+      $('.shopping-cart-container').addClass('shopping-cart-container--active');
+    }
+  })
+})
+
+$(function() {
   $('body').on('click', '.shopping-cart .off-btn', function() {
-    $('.shopping-cart').removeClass('shopping-cart--active');
+    $('.shopping-cart-container').removeClass('shopping-cart-container--active');
+    $('.mobile-cart-btn').removeClass('hide');
   });
 
   //add