load_customizations

Como utilizar a tag 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.

Como utilizar

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

{% load_customizations product_id: product.id %}

A tag irá retorna 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.

No caso de utilizar as entradas (input) dentro do formulário (form) de compra de produto, utilize o name do input:

<input type="text" name="customizations[][{{ type.name }}]"/>

Exemplo de uso

Para demonstrar como utilizar a tag, vamos fazer uma seleção das personalizações existentes de um produto.

📘

Veja o exemplo também no nosso repositório em customization.liquid.

As personalizações podem ser de duas formas: do tipo texto ou do tipo opção. As personalizações do tipo texto são as que os clientes digitam em um campo a personalização que desejam, e as personalizações do tipo opção sãos as que o cliente seleciona entre opções pré-definidas pela loja.

Cada uma dessas personalizações tem uma estrutura HTML diferentes:

  • inputs do tipo text;
  • inputs do tipo checkbox ou radio.

Então, precisamos verificar se a personalização é do tipo opções. Nesse caso, se a personalização for de opções, ordenaremos as opções disponíveis em ordem alfabética (sort: 'name').

{% for customization in loaded_customization_types %}
  {% if customization.options %}
{% assign options_list = customization.customizations | sort: 'name' %}
    <div class="prod-option">
      <p class="option-title">{{ customization.name }}</p>
      <div class="inner">
        {% for option in options_list %}

Para cada opção de personalização, vamos ter um input, do tipo radio ou checkbox, além de uma label.

Lembre-se que o name dos inputs deve seguir a estrutura: <input type="text" name="customizations[][{{ type.name }}]"/>

<input
            type="radio"
            name="customizations[][{{ customization.name }}]"
            value="{{ option.name }}"
            id="{{ customization.name }}-customization-{{ forloop.index }}"
            class="input"
            required
            data-customization
            {% if forloop.first %} checked {% endif %}
          />

          <label for="{{ customization.name }}-customization-{{ forloop.index }}" class="label">

No caso de uma personalização de cor, precisamos cadastrar a cor em hexadecimal para que a opção de cor fique disponível (como por exemplo na página do produto). Para isso, utilizaremos a estrutura Nome da cor | Cor, e para montar a estrutura HTML verificamos se a opção contém | e # para que a opção de cor (como "bolinha") fique disponível.

<label for="{{ customization.name }}-customization-{{ forloop.index }}" class="label">
              {% if option.name contains '|' and option.name contains '#' %}
              {% assign color_name = color | split: '|' | first %}
              {% assign color_hexa = color | split: '|' | last | downcase %}

              {% comment %}
                Caso a cor seja branca é bom adicionar uma classe para colocar uma borda (caso o fundo seja branco e a cor branca)
              {% endcomment %}

              {% assign color_white = '' %}
              {% if color_hexa contains '#fff' %}
                {% assign color_white = 'is-white' %}
              {% endif %}

              <span class="color {{ color_white }}" style="background: {{ color_hexa }};">
                <span class="tooltip">{{ color_name }}</span>
              </span>
            {% else %}
              {%- comment -%}
                Caso não seja uma cor, apenas mostramos o texto cadastrado no nome da opção.
              {%- endcomment -%}
              <span class="text">{{ option.name }}</span>
            {% endif %}
          </label>
      </div>
    </div>
 {% else %}
    <div class="prod-option">
      <p class="option-title">{{ customization.name }}</p>  
      <div class="inner">  
        {%- comment -%}
          Caso a personalização seja de texto, devemos montar o input de tipo (type) texto (text). 
        {%- endcomment -%}
        {% for option in customization.customizations limit: 1 %}  
          <input
            type="text"
            name="customizations[][{{ customization.name }}]"
            value=""
            id="{{ customization.name }}-customization-{{ forloop.index }}"
            required
            data-customization
          />  
        {% endfor %}
      </div>
    </div>  
  {% endif %}
{% endfor %}

🚧

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.


Did this page help you?