compre-junto v1.0.0

Compre Junto

Sobre

Componente com abstração de todos o funcionamento necessários para um compre junto.

Dependências

Não há.

Instalação

• Instale o app através do seu terminal

npm install @wapstore/compre-junto

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/compre-junto": "^1.1.3"
}

Agora a loja está apta para o uso da aplicação.

Uso

O padrão para o template de compre junto para as prateleiras da loja pode ser inserido em qualquer lugar da pasta "components". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para o compre junto na página de produto:

<template>
  <template v-for="(combinacao, i) in dataProd.combinacoes">
    <div :key="`prod-${i}`" class="weContainer-deskAutoCol8">
      <div class="compreJunto-produtos">
        <!-- Produto atual -->
        <produtoDetalheCompre-juntoCard
          v-if="dataProd"
          :dataProd="dataProd"
          :precoCombinacao="combinacao.precos.produtoPrincipal"
          :exibirParcelamento="exibirParcelamento"
          :index="i"
        />
        <!-- Icone de soma -->
        <div class="compreJunto-icone">
          <slot name="somaIcone">
            <svg xmlns="http://www.w3.org/2000/svg" width="21.012" height="22.319" viewBox="0 0 21.012 22.319">
              <path d="M3364.643,1927.733h-5.79v8.233h-7.622v5.5h7.622v8.59h5.79v-8.59h7.6v-5.5h-7.6Z" transform="translate(-3351.231 -1927.733)" fill="#2d2d2d" />
            </svg>
          </slot>
        </div>
        <!-- Produto combinação -->
        <produtoDetalheCompre-juntoCard
          v-if="dataProd"
          :dataProd="combinacao.produto"
          :precoCombinacao="combinacao.precos.produtoIndicado"
          :exibirParcelamento="exibirParcelamento"
          :index="i"
        />
        <!-- Icone de igual -->
        <div class="compreJunto-icone compreJunto-iconeIgual">
          <slot name="igualIcone">
            <svg xmlns="http://www.w3.org/2000/svg" width="18.824" height="14.086" viewBox="0 0 18.824 14.086">
              <path d="M3772.274,1932.983H3753.45v4.969h18.824Zm0,9.117H3753.45v4.969h18.824Z" transform="translate(-3753.45 -1932.983)" fill="#2d2d2d" />
            </svg>
          </slot>
        </div>
      </div>
    </div>
    <!-- Preços -->
    <div :key="`preco-${i}`" class="weContainer-deskAutoCol4">
      <!-- Titulo -->
      <p class="compreJunto-precosT1">
        <slot name="tituloPrecos">
          Compre junto e economize!
        </slot>
      </p>
      <!-- Preço de -->
      <div class="compreJunto-precosDe">
        <p>
          <slot name="precoTotalLabel">
            Total dos produtos
          </slot>
        </p>
        <p>{{ combinacao.precos.combinacao.de | formatPrice }}</p>
      </div>
      <!-- Desconto do compre junto -->
      <div v-if="combinacao.desconto && descontoCompreJunto" class="compreJunto-precosDesconto">
        <p>
          <slot name="descontoCompreJuntoLabel">
            Desconto compre junto
          </slot>
        </p>
        <p v-if="combinacao.tipoDesconto === 'valor'">
          {{ combinacao.desconto | formatPrice }}
        </p>
        <p v-else-if="combinacao.tipoDesconto === 'porcentagem'">
          {{ combinacao.desconto }}% ({{ combinacao.precos.combinacao.descontoCombinacao | formatPrice }})
        </p>
      </div>
      <!-- Desconto à vista -->
      <div v-if="combinacao.precos.combinacao.descontoVista && descontoVista" class="compreJunto-precosDescontoVista">
        <p>
          <slot name="descontoVistaLabel">
            Desconto à vista
          </slot>
        </p>
        <p>
          {{ combinacao.precos.combinacao.descontoVista }}%
          ({{ combinacao.precos.combinacao.por - combinacao.precos.combinacao.vista | formatPrice }})
        </p>
      </div>
      <!-- Preço à vista -->
      <p class="compreJunto-precosVista">
        {{ combinacao.precos.combinacao.vista | formatPrice }}
      </p>
      <!-- Texto de parcelamento -->
      <p
        class="compreJunto-precosParcelamento"
        v-html="$options.filters.totalParcelado(combinacao.precos.combinacao.parcelamento)"
      />
      <!-- Container do botão comprar -->
      <div class="compreJunto-btComprarContainer">
        <!-- Botão comprar -->
        <button id="compreJunto-btComprar" type="button" name="button" :disabled="travaComprar" @click="comprar(i)">
          <slot name="labelComprar">
            Comprar
          </slot>
        </button>
        <!-- Icone de compra segura -->
        <div v-if="compraSegura" class="compreJunto-compraSegura">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="17.969" viewBox="0 0 14 17.969">
            <path d="M3879.247,1300h-.874v-1.711a4.376,4.376,0,0,0-8.75,0V1300h-.875a1.736,1.736,0,0,0-1.75,1.711v8.557a1.735,1.735,0,0,0,1.75,1.711h10.5a1.736,1.736,0,0,0,1.751-1.711v-8.557A1.736,1.736,0,0,0,3879.247,1300Zm-5.249,7.7a1.712,1.712,0,1,1,1.75-1.712A1.736,1.736,0,0,1,3874,1307.705Zm2.712-7.7h-5.425v-1.711a2.713,2.713,0,0,1,5.425,0Z" transform="translate(-3866.998 -1294.015)" fill="#12bc00" />
          </svg>
          <p>Compra segura</p>
        </div>
      </div>
    </div>
  </template>
</template>

<script>
  export default {
    props: {
      exibirParcelamento: {
        type: Boolean,
        default: true
      },
      descontoCompreJunto: {
        type: Boolean,
        default: true
      },
      descontoVista: {
        type: Boolean,
        default: true
      },
      compraSegura: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        dataProd: null,
        linkCarrinho: null,
        travaComprar: false,
        selectAttrs: null
      };
    },
    computed: {
      attrs () {
        return this.$store.state.compreJunto.attrSimples;
      },
      attrsAnterior () {
        return this.$store.state.compreJunto.attrSimplesAnterior;
      }
    },
    watch: {
      attrs: {
        deep: true,
        handler (newVal) {
          // Lê os atributos de cada combinação
          newVal.forEach((combinacao, i) => {
            // Caso o atributo seja diferente do valor anterior, realiza uma request
            // para calcular os novos valores e link para o carrinho
            if (JSON.stringify(combinacao) !== JSON.stringify(this.attrsAnterior[i])) {
              this.travaComprar = true; // <- bloqueia o botão comprar até que a request seja finalizada
              this.validaAttrs(i);

              const data = this.getDataRequest(i, combinacao);
              this.$axios.request({
                method: 'post',
                url: '/v2/front/product/combination',
                data
              }).then(res => {
                this.dataProd.combinacoes[i].precos.produtoPrincipal = res.data.precos.produtoPrincipal;
                this.dataProd.combinacoes[i].precos.produtoIndicado = res.data.precos.produtoIndicado;
                this.dataProd.combinacoes[i].precos.combinacao = res.data.precos.combinacao;

                this.linkCarrinho = res.data.carrinho.url;

                this.travaComprar = false;
              }).catch(error => {
                console.error(error.response.data.error);
              });
            }
          });
        }
      }
    },
    created () {
      // Quebra conexão da variavel com a store
      this.dataProd = JSON.stringify(this.$store.state.detalhe.dataProd.conteudo);
      this.dataProd = JSON.parse(this.dataProd);
    },
    methods: {
      comprar (i) { // Libera/acusa erro de attr ao clicar em comprar
        // Libera o redirect para o carrinho quando todos os attrs estiverem selecionados
        if (this.validaAttrs(i)) {
          window.location.href = this.linkCarrinho;
        }
      },
      validaAttrs (i) { // Valida attrs ao clicar em comprar
        const idProd       = this.dataProd.id;
        const idCombinacao = this.dataProd.combinacoes[i].produto.id;
        const attrs        = this.attrs[i];
        let liberar        = true;

        // Valida attrs do produto principal
        if (attrs[idProd] && !Object.keys(attrs[idProd]).length) {
          liberar = false;
          this.findSelectToError(i);
        }
        else {
          this.findSelectToError(i, false);
        }

        // Valida attrs do produto combinação
        if (attrs[idCombinacao] && !Object.keys(attrs[idCombinacao]).length) {
          liberar = false;
          this.findSelectToError(i + 1);
        }
        else {
          this.findSelectToError(i + 1, false);
        }

        return liberar;
      },
      findSelectToError (i, add = true) { // Pega os selects de attr não selecionados e marca com erro
        if (!this.selectAttrs) {
          this.selectAttrs = this.$children.filter(({ $refs }) => {
            return Object.keys($refs).find(el => el.search('compreJunto-cardProd-attr') >= 0) !== undefined;
          });
        }

        if (this.selectAttrs[i]) {
          const select = this.selectAttrs[i].$refs['compreJunto-cardProd-attr'];

          if (add) {
            // Scrolla para o select que está com erro
            const scrollSelect = select.offsetTop - (window.screen.height / 2);
            document.querySelector('html').scrollTop = scrollSelect;
            // Adiciona classe de erro no select
            select.classList.add('error');
            return;
          }

          select.classList.remove('error');
        }
      },
      getDataRequest (i, attrsSelecionados) { // Une os dados para a realização da request de attr
        const idProd = this.dataProd.id;
        const idCombinacao = this.dataProd.combinacoes[i].produto.id;
        const data = {
          produtoPrincipal: {
            id: idProd,
            idAtributoValor: 0,
            preco: this.dataProd.precos.por
          },
          produtoIndicado: {
            id: idCombinacao,
            idAtributoValor: 0,
            preco: this.dataProd.combinacoes[i].produto.precos.por
          }
        };

        if (attrsSelecionados[idProd] && Object.keys(attrsSelecionados[idProd]).length) {
          data.produtoPrincipal.idAtributoValor = attrsSelecionados[idProd].idAtributoValor;
          data.produtoPrincipal.preco = attrsSelecionados[idProd].precos.por;
        }
        if (attrsSelecionados[idCombinacao] && Object.keys(attrsSelecionados[idCombinacao]).length) {
          data.produtoIndicado.idAtributoValor = attrsSelecionados[idCombinacao].idAtributoValor;
          data.produtoIndicado.preco = attrsSelecionados[idCombinacao].precos.por;
        }

        return data;
      }
    }
  };
</script>

<style>
  ...
</style>

-Este é um exemplo da chamada do template de compre junto em uma página de produto:

<template>
  <div class="weContainer">
    <compre-junto id="compreJuntoDetalhe" :prodInfo="pageData.conteudo" />
  </div>
</template>

Recursos

Props

Slots

Eventos

Métodos

Exemplo genérico da chamada de um método:

<template>
  <CompreJunto ref="compreJunto">
    /*...*/
  </CompreJunto>
</template>
<script>
  export default {
    methods: {
      handleCompraCompreJunto() {
        this.$refs.compreJunto.comprarCombinacao();
      },
    },
  }
</script>

Estilização

Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.

Classes CSS

Tentativas de compra invalida

Se você procura uma forma de estilizar um atributo simples sinalizando um erro em uma tentativa de compra falha, essas classes é a que você precisa. Essas classes somem conforme é alterado o atributo ou personalização do produto.

Produto invalido

Essa classe é exibida enquanto o produto é inválido para uma compra da combinação. Essas classes somem após o produto ser apto.

Combinação invalida

Essa classe é exibida enquanto a combinação é inválida para compra.