Sincronizar automaticamente os preços dos pacotes quando houver alterações nos preços das variantes

Quando utiliza a aplicação Shopify «Bundles» para criar pacotes de produtos, a alteração do preço de uma variante de um produto componente não atualiza automaticamente o preço da variante do produto do pacote. O gatilho «Product Variant Price Changed» disponível em Workflow Trigger Extensions resolve esta situação, detetando a alteração de preço e recalculando e atualizando automaticamente o preço da variante do pacote.


Vamos partir do seguinte cenário para compreender como podemos utilizar o gatilho «Alteração do preço da variante do produto» para manter os preços dos pacotes sincronizados.

Cenário: Atualização automática do preço do pacote quando o preço de uma variante de um componente muda

Imagine que tem um produto em pacote (por exemplo, um pacote de t-shirts) criado com a aplicação Shopify da Bundles. O pacote contém três produtos componentes: t-shirt preta, t-shirt cinzenta e t-shirt branca, cada uma com um preço de 10,00 € por variante. O preço da variante do pacote é de 30,00 € (a soma de todos os preços dos produtos que o compõem). Quando alterar o preço de uma variante de um produto que compõe o pacote, este fluxo atualizará automaticamente o preço da variante correspondente do pacote.

Ative este gatilho nas definições da aplicação -> Variantes do produto -> Alterações de preço das variantes

Alteração do preço de uma variante do produto

Obter o produto principal do pacote, calcular os preços atualizados das variantes e atualizar em massa os preços das variantes do pacote através da API de administração

Guia em vídeo

Também pode ver os passos visualmente neste vídeo (o vídeo não tem áudio; pode ajustar a velocidade do vídeo de acordo com as suas necessidades)

Como vamos organizar isto

Compreender a configuração

  • Temos um produto composto (por exemplo, uma t-shirt cinzenta) com as variantes S, M, L, XL e 2XL, cada uma com o preço de 10,00 €.
  • Temos um produto em pacote criado com a aplicação «Shopify Bundles». Contém 3 produtos incluídos no pacote (camisola preta, camisola cinzenta, camisola branca), cada um com 5 variantes. O preço da variante do pacote é de 30,00 (soma dos preços dos componentes: 3 × 10,00 €).

Pode ver aqui, de forma visual, os passos a seguir:

  • Em «Workflow Trigger Extensions», abra a secção «Triggers», procure por «Price» e ative a opção «Product Variant Price Changed». Esta opção requer acesso aos dados de «Product», «Variant» e «Collection»; a aplicação solicitará essa autorização caso não esteja definida.
  • Crie um novo fluxo de trabalho em branco a partir da aplicação Shopify Flow e selecione o gatilho «Alteração do preço da variante do produto» da aplicação «Workflow Trigger Extensions»
  • Adicione uma ação «Obter dados do produto» para recuperar o produto alterado através de uma consulta avançada, ordenada por «data de criação» em ordem crescente. Este passo obtém as informações do pacote pai do produto através do campo productParents. A consulta é a seguinte: id:{{productVariant.product.id | split: "gid://shopify/Product/" | last}}
  • Adicione um passo de código «Executar» para extrair o ID do produto principal do pacote a partir do resultado de getProductData. O código extrai os IDs dos produtos principais de productParents e cria uma cadeia de caracteres idsCondition para a consulta.

A etapa «Executar código» utiliza a seguinte entrada GraphQL, código JavaScript e resultados para obter os IDs dos produtos principais:

Executar o passo «Executar código» que mostra a entrada GraphQL, o código JavaScript e a pré-visualização do resultado

A página «Triggers» efetuou uma pesquisa por «Preço», com a opção «Alteração do preço da variante do produto» ativada
Na aplicação: em «Gatilhos», procure «Preço» e ative a opção «Alteração do preço da variante do produto».
Seletor de variáveis do Flow para «Alteração do preço da variante do produto», com os parâmetros «preço antigo», «novo preço», «diferença», «variação percentual» e «direção»
A secção «Preço alterado da variante do produto» apresenta o fluxo de trabalho: o preço anterior e o posterior, a diferença, a percentagem e a direção.
bash
{
  getProductData {
    productParents {
      id
    }
  }
}
javascript
export default function main(input) {
  const productIds = input.getProductData[0]?.productParents?.map(p => p.id) ?? [];
  const productId = productIds[0] ?? null;

  const idsCondition = productIds
    .map(gid => "id:" + gid.split("gid://shopify/Product/").pop())
    .join(" OR ");

  return {
    productId: productId,
    productIds: productIds,
    idsCondition: idsCondition,
  };
}
typescript
type Output {
  productId: String
  productIds: [String!]!
  idsCondition: String!
}
  • Adicione um passo «Condição» que verifique se a saída do código de execução productId não está vazia e se existe. Isto garante que só avançamos quando o produto alterado faz efetivamente parte de um pacote.
  • Verdadeiro → continuar a atualizar o preço do pacote
  • Falso → parar (o produto não faz parte de um pacote)
  • Se a condição for «True», adicione outra ação «Obter dados do produto (1)» para recuperar os dados relativos às variantes e aos preços do produto do pacote principal, utilizando o idsCondition da etapa «Executar código».
  • Adicione um segundo passo «Executar código (1)» para calcular os novos preços das variantes de pacotes com base nos preços atualizados dos componentes. Este passo gera uma matriz variantPrices com os novos preços para cada variante de pacote.

Esta etapa do código «Run» (1) consiste em recalcular os preços das variantes do pacote com base no preço atualizado do componente. Eis o que faz: em primeiro lugar, obtém duas informações essenciais a partir do gatilho:

  • changedVariantId a variante que acabou de ser alterada (...158920)
  • newPrice o novo preço dessa variante (11.00). Em seguida, percorre todas as variantes do pacote e recalcula o seu preço total. Cada variante do pacote tem 3 variantes de componentes (Camisola preta, Camisola cinzenta, Camisola branca). Para cada componente, verifica: será esta a variante que acabou de ser alterada? Se sim, utiliza newPrice (11,00) em vez do preço desatualizado ainda armazenado em Shopify (10,00). Se não, utiliza o existente component.productVariant.price.It soma os preços dos componentes para obter o novo preço da variante do pacote. Pode ver como isto funciona nos seus dados de saída. Observe a variante ...088840: os seus componentes incluem ...158920 (a variante alterada). Assim, o seu preço é 11 + 10 + 10 = 31, enquanto todas as outras variantes do pacote continuam a totalizar 30, uma vez que nenhum dos seus componentes foi alterado.Esta é a ideia-chave desta etapa: Shopify ainda não atualizou o preço do componente nos dados do pacote, pelo que o código não pode simplesmente somar os preços existentes, tendo de substituir o novo preço da variante alterada em tempo real. Sem isto, todas as variantes continuariam a apresentar o valor 30. A matriz de saída variantPricesé então passada para o ciclo «For each», que chama productVariantsBulkUpdatepara, efetivamente, gravar estes preços recalculados de volta no produto do pacote.
bash
{
  productVariant {
    id
  }
  priceChange {
    oldPrice { amount }
    newPrice { amount }
  }
  getProductData1 {
    id
    variants {
      id
      productVariantComponents {
        productVariant {
          id
          price
        }
      }
    }
  }
}
javascript
export default function main(input) {
  const changedVariantId = input.productVariant.id;
  const newPrice = parseFloat(input.priceChange.newPrice.amount);

  const variantPrices = input.getProductData1.flatMap(product =>
    product.variants.map(variant => ({
      productId: product.id,
      id: variant.id,
      price: variant.productVariantComponents.reduce((sum, component) => {
        const p = component.productVariant.id === changedVariantId
          ? newPrice
          : parseFloat(component.productVariant.price);
        return sum + p;
      }, 0)
    }))
  );

  return { variantPrices };
}
yaml
type VariantPrice {
  productId: String!
  id: String!
  price: Float!
}
type Output {
  variantPrices: [VariantPrice!]!
}
  • Adicione um ciclo «For each» (iterar) que percorra cada item da lista runCode1.variantPrices. Para cada preço de variante, executa a ação de pedido à API «Send Admin» utilizando a mutação «productVariantsBulkUpdate» para atualizar o preço da variante do pacote. Pode utilizar esta entrada para a Mutação:
json
{
  "variants": [
    {
      "id": "{{variantPricesForeachitem.id}}",
      "price": "{{variantPricesForeachitem.price}}"
    }
  ],
  "productId": "{{variantPricesForeachitem.productId}}",
  "allowPartialUpdates": true
}

Como tudo isto funciona em conjunto

Quando o preço de uma variante de um produto componente é alterado (por exemplo, se atualizar a variante «Camisola Cinzenta S» de 10,00 € para 15,00 €):

  1. O gatilho «Alteração do preço da variante do produto» é acionado
  2. O fluxo recupera o pacote pai do produto utilizando productParents
  3. A etapa «Executar código» extrai o ID do produto do pacote
  4. Esta condição verifica se este produto faz parte de um pacote
  5. Se sim, recupera os dados do produto em pacote
  6. Uma segunda etapa de execução do código recalcula os preços das variantes do pacote
  7. O ciclo percorre cada variante e atualiza o preço do pacote através da mutação «productVariantsBulkUpdate» da API de administração

O preço da variante «S» do pacote passaria agora de 30,00 € para 35,00 € (15,00 € + 10,00 € + 10,00 €).