React JS добавить класс..

tm.weBreath

Создатель
Регистрация
8 Июл 2015
Сообщения
39
Реакции
12
Всем привет...
Подскажите плиз..

Код:
function changeCart(id, quantity = 1) {
  let requestParams = {
    method: 'post',
    url: "/index.php?route=ajax/product",
    responseType: "json",
    data: "product_id=" + id
  }
  let action = "";
  if (quantity >= 1) {
    dataLayer.push({ 'event': 'addToCart' });
    action = "add"
  } else if (quantity < 0) {
    dataLayer.push({ 'event': 'removeFromCart' });
    action = "remove"
  }
  if (action != "")
   
  axios({
    method: "post",
    url: "index.php?route=checkout/cart/add",// + command,
    data: "product_id=" + id + "&" + "quantity=" + quantity,
    dataType: "json"
  }).then(() => updateCart());
 
}

Тут получается обновление корзины при изменении количества товара, как мне после обновления прописать для блока с классом cart-menu доп класс showcartbyjd ?
 

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
453
Тут получается обновление корзины при изменении количества товара, как мне после обновления прописать для блока с классом cart-menu доп класс showcartbyjd ?
Покажите содержимое updateCart...
 

tm.weBreath

Создатель
Регистрация
8 Июл 2015
Сообщения
39
Реакции
12
Покажите содержимое updateCart...
Код:
function updateCart() {

  axios("index.php?route=common/cart/info").then((e) => {
    // console.log(e);
    let cartContainer = document.getElementById("cart_container");
    cartContainer.innerHTML = e.data;

    initCartFunctions(cartContainer);
  })
  let homeCartContainer = document.getElementById("home-cart-container");
  if (homeCartContainer) {
    axios("index.php?route=common/cart_for_home/info").then((e) => {
      homeCartContainer.innerHTML = e.data;
      initCartFunctions(homeCartContainer);
    })
  }
}
 
Последнее редактирование:

tm.weBreath

Создатель
Регистрация
8 Июл 2015
Сообщения
39
Реакции
12
Покажите содержимое updateCart...
Код:
function onReady() {
  // let buttons = document.querySelectorAll(".addToCart");
  // initAddToCart(buttons);

  updateCart();
}
function initAddToCart(buttons, callback) {
  buttons.forEach(element => {
    let product_id = element.dataset.productid;

    element.addEventListener("click", () => {
      changeCart(product_id)
      if (callback) {
        callback(element)
      }
    })
  });
}
function initRemoveOneFromCart(buttons) {
  buttons.forEach(element => {
    let product_id = element.dataset.productid;
    element.addEventListener("click", () => changeCart(product_id, -1))
  });
}
function initRemoveAllFromCart(buttons) {
  buttons.forEach(element => {
    let product_id = element.dataset.productid;
    let quantity = element.dataset.quantity
    element.addEventListener("click", () => changeCart(product_id, -1 * quantity - 10))
  });
}

function changeCart(id, quantity = 1) {
  let requestParams = {
    method: 'post',
    url: "/index.php?route=ajax/product",
    responseType: "json",
    data: "product_id=" + id
  }
  let action = "";
  if (quantity >= 1) {
    dataLayer.push({ 'event': 'addToCart' });
    action = "add"
  } else if (quantity < 0) {
    dataLayer.push({ 'event': 'removeFromCart' });
    action = "remove"
  }
  if (action != "")
   
  axios({
    method: "post",
    url: "index.php?route=checkout/cart/add",// + command,
    data: "product_id=" + id + "&" + "quantity=" + quantity,
    dataType: "json"
  }).then(() => updateCart());
 
}

let cartActive = { active: false };
function dropDownElementInit(el, controlObject) {
  let dropdown = document.getElementById(el.dataset.dropid);
  let dropdownSetState = (ddActive) => {
    if (!dropdown) return;
   
   
  }
  dropdownSetState(controlObject.active);
  if (dropdown) {
    el.addEventListener("click", () => {

      dropdown.classList.toggle('showcartbyjd')
      if (controlObject.active) {
        controlObject.active = false;
        dropdownSetState(controlObject.active)
      } else {
        controlObject.active = true;
        dropdownSetState(controlObject.active)
      }
    })
    el.addEventListener("mouseover", () => {
      if (!controlObject.active) {
        controlObject.active = true;
        dropdownSetState(controlObject.active)
      }
    })
  }
}
function updateCart() {

  axios("index.php?route=common/cart/info").then((e) => {
    // console.log(e);
    let cartContainer = document.getElementById("cart_container");
    cartContainer.innerHTML = e.data;

    initCartFunctions(cartContainer);
  })
  let homeCartContainer = document.getElementById("home-cart-container");
  if (homeCartContainer) {
    axios("index.php?route=common/cart_for_home/info").then((e) => {
      homeCartContainer.innerHTML = e.data;
      initCartFunctions(homeCartContainer);
    })
  }
}

function initCartFunctions(cart) {
  let dropDowns = cart.querySelectorAll(".drop-down-button");
  dropDowns.forEach(el => dropDownElementInit(el, cartActive));

  let addToCartButtons = cart.querySelectorAll(".add-one-product")
  initAddToCart(addToCartButtons)

  let removeCartButtons = cart.querySelectorAll(".delete-one-product")
  initRemoveOneFromCart(removeCartButtons)

  let removeAllCartButtons = cart.querySelectorAll(".delete-many-products")
  initRemoveAllFromCart(removeAllCartButtons)
}
document.addEventListener("DOMContentLoaded", onReady);


Если разбираешься, подскажи плиз..
Вот полный код, это по всплывающей корзине - в ней отображается добавленый товар и кнопки изменения количества товара
При клике на надпись - корзины - я сделал что бы блоку с товаром (который по умолчанию имеет стиль display:none!important;) добавлялся класс - вот так dropdown.classList.toggle('showcartbyjd') - И собственно корзина моя раскрывается... Но при изменении количества товара корзина обновляется и добавленный при клике класс сбрасывается и приходится еще раз клацать по корзине, что бы раскрыть товары
 

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
453
Но при изменении количества товара корзина обновляется и добавленный при клике класс сбрасывается и приходится еще раз клацать по корзине, что бы раскрыть товары
Если корзина в вашем приложении - это, например, Для просмотра ссылки Войди или Зарегистрируйся, то вам надо найти этот соответствующий компонент, где написан UI корзины (как правило это JSX синтаксис) и вносить изменения в него. Если же ваша корзина не VDOM-сущность, то
Код:
document.querySelector('.cart-menu').classList.add('showcartbyjd')
 

tm.weBreath

Создатель
Регистрация
8 Июл 2015
Сообщения
39
Реакции
12
Если корзина в вашем приложении - это, например, Для просмотра ссылки Войди или Зарегистрируйся, то вам надо найти этот соответствующий компонент, где написан UI корзины (как правило это JSX синтаксис) и вносить изменения в него. Если же ваша корзина не VDOM-сущность, то
Код:
document.querySelector('.cart-menu').classList.add('showcartbyjd')
Так а если несколько раз изменят количество? Несколько раз добавится класс?
 

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
453
Так а если несколько раз изменят количество? Несколько раз добавится класс?
Тогда classList.toggle - всё правильно, извиняюсь, следующее ваше сообщение только сейчас заметил. Высока вероятность, что у вас состояние корзины, как объекта изменяется в реакт-компоненте, который подписан на ивенты корзины. Не видя проект, это гадание на кофейной гуще :)
 

tm.weBreath

Создатель
Регистрация
8 Июл 2015
Сообщения
39
Реакции
12
Тогда classList.toggle - всё правильно, извиняюсь, следующее ваше сообщение только сейчас заметил. Высока вероятность, что у вас состояние корзины, как объекта изменяется в реакт-компоненте, который подписан на ивенты корзины. Не видя проект, это гадание на кофейной гуще :)
А если classList.toggle - то при первом изменении количества класс добавится, а при втором удалится, а нужно, что бы если класса нет, он добавился, а если есть то не добавлялся и не удалялся
 

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
453
А если classList.toggle - то при первом изменении количества класс добавится, а при втором удалится, а нужно, что бы если класса нет, он добавился, а если есть то не добавлялся и не удалялся
HTML:
  let el = document.querySelector('.cart-menu');
  if(!el.classList.contains('showcartbyjd')){
       el.classList.add('showcartbyjd');
  }
 

tm.weBreath

Создатель
Регистрация
8 Июл 2015
Сообщения
39
Реакции
12
HTML:
  let el = document.querySelector('.cart-menu');
  if(!el.classList.contains('showcartbyjd')){
       el.classList.add('showcartbyjd');
  }
Решил проблему на самом деле проще, переназначил блок который обновляется теперь это происходит с дочерним блоком и добавленный мной при клике class не теряется =)
 
Сверху