Combinando Componentes de Refeição para Gerar um Rótulo

Se você tem um site de refeições preparadas ou restaurante, provavelmente vai querer inserir os componentes da refeição uma vez e exibir um rótulo com base na seleção do cliente. Por exemplo, se você oferece uma proteína com um carboidrato, deseja gerar um rótulo com base na seleção de cada um deles. Se o usuário selecionar frango e arroz, o rótulo deve conter os nutrientes combinados de frango e arroz. Se ele selecionar frango e batata assada, o rótulo deve conter os nutrientes combinados de frango e batata assada. Etc.

Isso pode ser feito por meio das seguintes etapas:

1. Criar rótulos que não estão associados a um produto da Shopify
2. Criar um rótulo para o produto pai da Shopify
3. Adicionar o código da API Combine ao seu site

Criar Rótulos Que Não Estão Associados a um Produto da Shopify

Para poder usar componentes de refeição, você deve criar um rótulo com a opção Não associado a um produto da Shopify marcada:

Em Nome, insira o nome do componente da refeição exatamente como ele aparece no seu site, por exemplo Batata Doce Frita (Grande). Depois, insira as informações nutricionais e salve o rótulo.

Criar um Rótulo para o Produto Pai da Shopify

Se o produto for um pacote ou recipiente, ou seja, algo que não contém dados nutricionais, por exemplo, plano de almoço de 10 dias, você pode pular esta parte. Se o produto for um prato ou componente de refeição, você também deve inserir as informações nutricionais para ele.

Neste cenário, você não deve marcar Não associado a um produto da Shopify. Em vez disso, digite os primeiros caracteres do nome do produto, selecione-o na lista, insira as informações nutricionais e salve.

Adicionar o Código da API Combine ao Seu Site

Depois de inserir as informações nutricionais no aplicativo, você deve adicionar código ao seu site para recuperar e inserir o rótulo com base na seleção do cliente. Esse código deve recuperar as variantes selecionadas e passá-las para a API combine do It's Got. Isso envolve duas etapas:

1. Carregar a API Combine e o Snippet

O snippet pode ser encontrado na página de configurações. Onde quer que esse snippet seja colocado é onde o rótulo será exibido. Ele pode ser inserido em qualquer lugar do seu site. Veja este exemplo.

2. Recuperar as Variantes Selecionadas e Chamar a API Combine

Isso é o que carregará o rótulo com base nas variantes selecionadas no snippet adicionado na etapa 1 acima. Como obter as variantes selecionadas depende do seu tema. Não há uma solução única para todos os casos. Você pode entrar em contato com o suporte para obter orientação, mas primeiro tente o exemplo abaixo.

A API Combine requer a seguinte chamada JavaScript:

ItsGot.combine(components, options)

Argumento	Descrição
components	Uma matriz de strings contendo os componentes da refeição para os quais o rótulo será criado. Esses valores virão das variantes atualmente selecionadas.
options	Opcional. Um objeto que pode conter as seguintes propriedades:
	format - Formato do rótulo a ser renderizado. O padrão é us:2016:nutrition_facts:emblems. Outros formatos suportados são: ca:legacy:nutrition_facts:vertical, de:eu:nutrition_facts:vertical, dk:eu:nutrition_facts:vertical, se:eu:nutrition_facts:vertical, uk:eu:nutrition_facts:vertical, us:2016:nutrition_facts:tabular, us:2016:nutrition_facts:vertical, us:legacy:nutrition_facts:vertical, us:legacy:supplement_facts:vertical_columns, us:legacy:supplement_facts:vertical, us:2016:supplement_facts:vertical_columns e us:2016:supplement_facts:vertical
	only - Uma matriz de nutrientes a serem exibidos. Quando especificada, apenas os valores nutricionais para os nutrientes fornecidos serão mostrados. Por exemplo, sodium, calories. Válido apenas para o formato us:2016:nutrition_facts:emblems.

Exemplo da API Combine

Adicione isto à descrição do produto ou ao arquivo Liquid apropriado no local onde deseja que o rótulo apareça (observe que o snippet da sua conta pode ser encontrado na página de configurações):

<script async="async" src="//itsgot.com/embed.js"></script>
<div data-itsgot-user="YOUR_ID" data-itsgot-combine></div>

Em seguida, adicione isto ao modelo Liquid do produto (ou similar):

<script>
  document.addEventListener('DOMContentLoaded', _ => {
    // ====================
    // AVISO: getSelectedVariants() é um exemplo e não funcionará com todos os temas do Shopify.
    // Como obter as variantes selecionadas depende do seu tema. Não há uma solução única para todos os casos.
    // ====================
    function getSelectedVariants() {
      return document.querySelectorAll('[class^=single-option-selector]');
    }

    function showLabel() {
      const components = [];

      getSelectedVariants().forEach(element => {
        if(element.value) components.push(element.value);
      });

      ItsGot.combineLabels(components, {
        format: 'us:2016:nutrition_facts:emblems',
        only: ['calories', 'protein', 'total carbohydrate', 'total fat', 'dietary fiber', 'total sugars']
      });
    }

    getSelectedVariants().forEach(element => element.addEventListener('change', showLabel));
  });
</script>