Скрыть номера элементов корзины AJAX, если в корзине нет элементов - PullRequest
Новая
       5

Скрыть номера элементов корзины AJAX, если в корзине нет элементов

0 голосов
/ 11 сентября 2018

Я борюсь с каким-то javascript, чтобы найти правильный способ заставить его работать.

У меня есть кнопка, показывающая количество товаров в корзине. По умолчанию это ноль. По мере добавления товаров в корзину их количество увеличивается. Но в начале я не хочу показывать «0» в корзине.

HTML: 

<p id="cart_button" onclick="show_cart();">
  <input type="button" id="total_items" value="0">
</p>

<div id="mycart"></div>

<div id="item_div">

  <div class="items" id="item1">
    <input type="button" value="Add To CART" onclick="cart('item1')">
    <p>Simple Navy Blue T-Shirt</p>
    <input type="hidden" id="item1_name" value="ITEM-ID1">
  </div>

  <div class="items" id="item2">
    <input type="button" value="Add To CART" onclick="cart('item2')">
    <p>Trendy T-Shirt With Back Design</p>
    <input type="hidden" id="item2_name" value="ITEM-ID2">
  </div>

</div>

JAVASCRIPT: 

$(document).ready(function() {

  $.ajax({
    type: 'post',
    url: 'store_items.php',
    data: {
      total_cart_items: "totalitems"
    },
    success: function(response) {
      document.getElementById("total_items").value = response;
    }
  });
});

function cart(id) {
  var name = document.getElementById(id + "_name").value;

  $.ajax({
    type: 'post',
    url: 'store_items.php',
    data: {
      item_name: name
    },
    success: function(response) {
      document.getElementById("total_items").value = response;
    }
  });
}

function show_cart() {
  $.ajax({
    type: 'post',
    url: 'store_items.php',
    data: {
      showcart: "cart"
    },
    success: function(response) {
      document.getElementById("mycart").innerHTML = response;
      $("#mycart").slideToggle();
    }
  });
}

Я хочу, чтобы кнопка с 0 была скрыта, пока не получит значение. если он возвращается к нулю, я хочу, чтобы он снова был скрыт. Спасибо за помощь!

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Вы можете добавить слушателя события 'change' к этой кнопке: 

let totalItems = $('#total_items');

totalItems.change(function () {
  if (totalItems.val() == 0) {
    totalItems.hide();
  }
  else totalItems.show();
});

Также вы должны вызвать это событие в вашем методе успеха ajax: 

success: function(response) {
      document.getElementById("total_items").value = response;
      totalItems.change();
    }

И, наконец, скрыть эту кнопку при запуске: 

<input type="button" id="total_items" value="0" style="display: none">

Проверьте это, работая в скрипке: https://jsfiddle.net/xpvt214o/771844/

0 голосов
/ 11 сентября 2018

Вы можете показать / скрыть при обновлении корзины: 

// Add this function
function update_cart(value) {
  document.getElementById("total_items").value = response;

  if (value > 0) {
    // Show the cart
    document.getElementById("total_items").style.display = "block";
  } else {
    // Hide the cart
    document.getElementById("total_items").style.display = "none";
  }
}

Затем вам нужно изменить свой код, при обновлении корзины: 

$.ajax({
  type: 'post',
  url: 'store_items.php',
  data: {
    total_cart_items: "totalitems"
  },
  success: function(response) {
    update_cart(response);
  }
});
...