load_customizations

Sua loja pode oferecer produtos com personalização para seus clientes. Produtos personalizados são produtos que permitem adicionar uma customização, como uma gravação ou item adicional no produto. Para auxiliar o controle desses itens temos a tag load_customizations. Essa tag lista as personalizações disponíveis de um produto.

❗️

Pré-requisitos

Fique atento aos requisitos para utilizar a Produtos Personalizados. O uso da tag load_customizations está diretamente relacionado a ativação da funcionalidade de personalização.

• Ative a funcionalidade no Admin:
  1. Acesse Configurações > Gerais > Extras.
  2. Selecione a caixa de seleção ☑ Habilitar cadastro e configuração de produtos personalizados;
  3. Clique em Salvar.
• Garanta que o template ou layout utilizado na loja suporte a funcionalidade de personalização.

Saiba mais sobre produtos personalizados em Funcionalidades: Produtos Personalizados.

Utilização e Estrutura

Para utilizar a tag utilize o parâmetro de identificação do produto product_id:

{% load_customizations product_id: product.id %}

A tag _irá retornar dois _arrays

• loaded_customization: com todas as personalizações disponíveis;
• loaded_customization_types: com as personalizações disponíveis agrupadas por tipo de personalização.

📘

Na estrutura base dos templates, as personalizações são tratadas com o agrupamento pelo tipo. Isso permite fazer seletores no front de forma mais organizada. Se precisar alterar, não esqueça de verificar o restante da montagem no arquivo _customizations.liquid.

Elas também recebem a mesma estrutura de HTML que os atributos: mesmas classes, hierarquia e ordem dos elementos. Isso permite reutilizar a estilização, mantendo o mesmo visual já aplicado nos atributos.

Exemplo de uso

Quando montamos personalizações do produto, normalmente precisamos prever 2 tipos, com base no cadastro delas no admin. Além disso, cada uma dessas personalizações requer uma estrutura HTML diferentes:

• Personalizações do tipo Texto: são personalizações onde os usuários do site digitam em um campo o texto que desejam. No código, devem ser tratadas com inputs do tipo text.
• Personalizações do tipo Opções: são um conjunto de opções, das quais o usuário do site escolhe uma opção para cada grupo. No código, devem ser tratadas com inputs do tipo radio.

Todos os inputs de personalização recebem alguns atributos em específico, de forma obrigatória. Isso significa que, caso você precisa adicionar ou alterar algo, atente-se para estes atributos e garanta que estejam corretos:

• name: precisa ser no formato customizations[][{{ customization.name }}]
• data-customization: define que é um input referente a uma personalização. Recebe tratamentos específicos das personalizações na adição do produto
• data-customization-name="{{ customization.name }}": utilizado no processo de adição do produto no carrinho, auxilia na definição da personalização correta que está sendo adicionada com o produto
• data-customization-price="{{ option.price }}": para exibir o preço da personalização, caso tenha. O preço é exibido no elemento que possui o atributo data-value, dentro do bloco da própria customização. Nos templates, este elemento é um , junto do título:
  Liquid

  <p class="option-title">
    <span>{{ customization.name }}</span>
    <span class="value" data-value></span>
  </p>
  

Exemplo de um input de personalização do tipo Texto:

<input
  type="text"
  placeholder="{{ customization.name }}"
  name="customizations[][{{ customization.name }}]"
  id="{{ customization.name }}-customization-{{ forloop.index }}"
  data-customization
  data-customization-price="{{ option.price }}"
  data-customization-name="{{ customization.name }}"
/>

Exemplo de múltiplos inputs de personalização do tipo Opção:

{% assign options_list = customization.customizations | sort: 'name' %}

{% for option in options_list %}
  <input
    type="radio"
    name="customizations[][{{ customization.name }}]"
    value="{{ option.name }}"
    id="{{ customization.name }}-customization-{{ forloop.index }}"
    class="input"
    data-customization
    data-customization-price="{{ option.price }}"
    data-customization-name="{{ customization.name }}"
  />
{% endfor %}

📘

Inputs e Labels

Nos exemplos aqui, só demonstramos a criação dos inputs pois eles que são mais restritos, e com atributos obrigatórios que devem ser atentados na hora da criação.

Os elementos de label, para tratar da exibição mais gráfica das opções, já estão previstas nos templates também e você pode alterá-los conforme a necessidade.

🚧

Alteração de valores em produtos personalizados

No caso de personalizações com valor adicional em um produto o preço deve ser alterado. Atente-se a realizar o cálculo do novo valor do item. Isso porque a soma do novo preço não é feita nativamente na página do produto. Esse cálculo é feito automaticamente apenas na página de carrinho.