Ocultar Variação indisponivel

Layout
1

Opa, tem alguma maneira de ocultar a variação que esta sem estoque e mostrar somente as que ainda tem estoque, ou até mesmo aparecer um “x” no tamanho indisponivel para o clientes saber que nao tem?

1 curtida
2

Achei um bom tópico, não lembro de ter visto nenhuma dúvida ou tópico a respeito disso. Desenvolvi na pressa, mas acredito que deva funcionar.

  • Testei somente com um produto que tem grade de cores e tamanhos. Se tiver alguma grade diferente, pode ser que quebre alguma coisa, portanto, recomendo testar todos os cenários possíveis.
  • Desativei o clique do mouse, como não trabalho muito com variação tô meio por fora. Se quiser deixar habilitado é só remover no css: pointer-events: none.
  • Removi o svg de select da div, ou seja, mesmo que não tenha e você clique na variação, subia um ícone de check, agora não aparece mais.

Meu contato: (61) 9 8121-8775

<script>
$(document).ready(function () {
  const variacoesIndisponiveis = new Set();

  $('.acoes-produto.indisponivel').each(function () {
    const comboId = $(this).data('variacao-id');
    if (comboId) {
      variacoesIndisponiveis.add(comboId);
    }
  });

  $('.atributo-item').each(function () {
    const $item = $(this);
    const thisVarId = $item.data('variacao-id');
    let temDisponivel = false;

    $('.acoes-produto').each(function () {
      const $combo = $(this);
      const comboId = $combo.data('variacao-id');

      if ($combo.hasClass('indisponivel')) return;

      if (comboId && comboId.toString().split('-').includes(thisVarId.toString())) {
        temDisponivel = true;
        return false; // sai do each
      }
    });

    if (!temDisponivel) {
      $item.addClass('sem-estoque');
      $item.closest('li').find('div.selecionado').remove();
    }
  });
});
</script>
<style>
.atributo-item.sem-estoque {
  position: relative;
  opacity: 0.4;
  pointer-events: none;
}
.atributo-item.sem-estoque::after {
  content: '✖';
  color: red;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  top: 8px;
  right: 15px;
}
</style>

image
image415×690 18 KB

image
image1238×457 75.5 KB

1 curtida
3

Cara funcionou velho! Obrigado, vou ate te fazer um pix de agradecimento, confirma se é o seu telefone

1 curtida
4

Vou te enviar o pix no privado. A propósito, melhorei ainda mais o script, vi que o site dispara o clique automático/seleciona a primeira variação, mesmo que ela esteja indisponível.

Com esse script, além de mostrar que os produtos não tem em estoque, ele ativa o clique/seleciona a primeira variação DISPONÍVEL.

<script>
$(document).ready(function () {
  const variacoesIndisponiveis = new Set();

  $('.acoes-produto.indisponivel').each(function () {
    const comboId = $(this).data('variacao-id');
    if (comboId) {
      variacoesIndisponiveis.add(comboId);
    }
  });

  $('.atributo-item').each(function () {
    const $item = $(this);
    const thisVarId = $item.data('variacao-id');
    let temDisponivel = false;

    $('.acoes-produto').each(function () {
      const $combo = $(this);
      const comboId = $combo.data('variacao-id');

      if ($combo.hasClass('indisponivel')) return;

      if (comboId && comboId.toString().split('-').includes(thisVarId.toString())) {
        temDisponivel = true;
        return false; // sai do each
      }
    });

    if (!temDisponivel) {
      $item.addClass('sem-estoque');
      $item.closest('li').find('div.selecionado').remove();
    }
  });

  $('.atributo-comum').each(function () {
    const $grupo = $(this);
    const $active = $grupo.find('li.active');

    if ($active.length && $active.find('a.sem-estoque').length) {
      $active.removeClass('active');

      const $primeiroDisponivel = $grupo.find('a.atributo-item:not(.sem-estoque)').first().closest('li');

      if ($primeiroDisponivel.length) {
        $primeiroDisponivel.addClass('active');
        // Dispara o clique para atualizar seleção real no sistema
        $primeiroDisponivel.find('a.atributo-item').trigger('click');
      }
    }
  });
});
</script>
<style>
.atributo-item.sem-estoque {
  position: relative;
  opacity: 0.4;
}

.atributo-item.sem-estoque::after {
  content: '✖';
  color: red;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  top: 8px;
  right: 15px;
}
</style>
2 curtidas