Product Customization

Descrição

Um componente utilizado de forma a personalizar produtos, permitindo aos usuários adicionar elementos personalizados como números, nomes, ou modificar características específicas do produto.

Instalação

npm install @wellcomponentes/product-customization

Estilização

Para estilizar o componente, você pode inserir os estilos no componente pai ou em um arquivo CSS separado. Certifique-se de usar um ID ou classe específica na tag do componente para evitar interferências indesejadas nos estilos. Se você estiver estilizando o componente para várias chamadas, é recomendado usar um arquivo CSS separado. Para usar estilos em arquivos separados, importe-os no componente pai correspondente.

Além disso este componente possui uma prop (details) específica para estilização da cor do botão principal,e das bordas utilizadas no input de texto e no select.

Dependências

Emits

• openCloseCustomization

  • Descrição: Responsável por fazer a troca entre o botão comprar quando o usuario opitar pelo input personalizado.

    created() {
      this.$store.state.vue.$on("openCloseCustomization", open => {
        this.customization = open;
      });
    },

Props

IMPORTANTE! Este componente possui duas situações para ser utilizado:

1° Caso: Formulário de compras padrão; 2° Caso: Formulário de compras com regras de atacado.

Funcionamento do componente padrão (regras de atacado desativada):

• personalizationData

  • Descrição: Dados das personalizações responsáveis por trazer os valores a serem impressos.

  • Tipo: Array

• product

  • Descrição: Dados do produto.

  • Tipo: Object

• selectedQuantity

  • Descrição: Responsável por trazer a quantidade de produtos selecionado pelo usuário.

  • Tipo: Number

  • Formato padrão: A prop deve deve receber um number gerado através do emit changeQuantidade. Para isso, será necessário criar um método no componente pai para que seja possível receber o valor:

    • Método exemplo criado no componente pai:

      methods: {
        setQuantidade() {
          this.$store.state.vue.$on("changeQuantidade", info => {
          this.quantidade = info.quantidade;
        });
        return this;
        },
      }

• details

  • Descrição: Pega os valores css gerados através da api do sistema.

  • Tipo: Object

  • Formato padrão: A prop deve deve receber um objeto contendo:

    • primaryColor sendo a cor primaria do botão comprar,
    • borderColorsendo a cor da borda dos inputs de texto e selects,
    • borderRadius sendo a curvatura dos cantos dos inputs de texto e selects.

    • :details="

      {
        primaryColor: '--cor02',
        borderColor: '--cor12',
        borderRadius: '5'
      }

      "

Funcionamento do componente com regras de atacado ativada:

• wholesaleRules

  • Descrição: Ativa a regra de atacado.

  • Tipo: Boolean

  • Valor padrão: false

• productPayload

  • Descrição: Dados dos produtos selecionados em forma de regras de atacado.

  • Tipo: Array

Recursos

Props

• txtBt

  • Descrição: Texto do botão principal.

  • Tipo: String

  • Valor padrão: Personalize

Uso

Exemplo básico de como utilizar o componente "Product Customization":

<productCustomization
  :personalizationData="personalizacoes"
  :product="produto"
  :selectedQuantity="quantidadeSelecionada"
  :details="{
    primaryColor: '--cor02',
    borderColor: '#555',
    borderRadius: '5'
  }"
/>

Exemplo básico de como utilizar o componente "Product Customization" com regras de atacado:

<productCustomization
  :personalizationData="personalizacoes"
  :product="produto"
  :selectedQuantity="quantidadeSelecionada"
  :wholesaleRules="true"
  :productPayload="produtosSelecionados"
  :details="{
    primaryColor: '--cor02',
    borderColor: '#555',
    borderRadius: '5'
  }"
/>