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

Ao usar o aplicativo 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 pacote. O gatilho “Product Variant Price Changed” disponível em Workflow Trigger Extensions resolve esse problema ao detectar a alteração de preço e recalcular e atualizar automaticamente o preço da variante do pacote.


Vamos considerar o seguinte cenário para entender como podemos usar o gatilho “Alteração no 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 do componente é alterado

Imagine que você tenha um produto em pacote (por exemplo, um pacote de camisetas) criado com o aplicativo Shopify da Bundles. O pacote contém três produtos componentes: camiseta preta, camiseta cinza e camiseta branca, cada uma com preço de € 10,00 por variante. O preço da variante do pacote é de €30,00 (a soma dos preços de todos os produtos componentes). Quando você alterar o preço da variante de um produto componente, esse fluxo atualizará automaticamente o preço da variante do pacote correspondente.

Ative esse gatilho nas configurações do aplicativo -> Variantes do produto -> Alterações no preço das variantes

Alteração no preço da variante do produto

Obtenha o produto principal do pacote, calcule os preços atualizados das variantes e atualize em massa os preços das variantes do pacote por meio da API de administração

Guia em vídeo

Você também pode ver os passos visualmente neste vídeo (o vídeo não tem áudio; você pode ajustar a velocidade do vídeo conforme sua necessidade)

Como vamos fazer isso funcionar

Entendendo a configuração

  • Temos um produto composto (por exemplo, camiseta cinza) com as variantes P, M, G, GG, XGG, cada uma com o preço de € 10,00.
  • Temos um produto em pacote criado com o aplicativoShopify Bundles”. Ele contém 3 produtos no pacote (Camiseta preta, Camiseta cinza, Camiseta 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).

Você pode ver as etapas seguidas de forma visual aqui:

  • No “Workflow Trigger Extensions”, abra a seção “Triggers”, procure por “Price” e ative a opção “Product Variant Price Changed”. Essa opção requer acesso aos dados de “Product”, “Variant” e “Collection”; o aplicativo solicitará essa autorização caso ela esteja faltando.
  • Crie um novo fluxo de trabalho em branco no aplicativo Shopify Flow e selecione o gatilho “Alteração no preço da variante do produto” no aplicativoWorkflow Trigger Extensions
  • Adicione uma ação “Obter dados do produto” para recuperar o produto alterado por meio de uma consulta avançada, ordenada por “data de criação” em ordem crescente. Essa etapa busca as informações do pacote pai do produto por meio do campo productParents. A consulta é a seguinte: id:{{productVariant.product.id | split: "gid://shopify/Product/" | last}}
  • Adicione uma etapa de código “Executar” para extrair o ID do produto pai do pacote a partir do resultado de getProductData. O código extrai os IDs dos produtos pais de productParents e gera uma string idsCondition para consulta.

A etapa “Executar código” utiliza a seguinte entrada GraphQL, código JavaScript e saídas para obter os IDs dos produtos pai:

Etapa “Executar código” que mostra a entrada GraphQL, o código JavaScript e a pré-visualização da saída

A página “Gatilhos” fez uma busca por “Preço”, com a opção “Alteração no preço da variante do produto” ativada
No aplicativo: em “Gatilhos”, procure por “Preço” e ative a opção “Alteração no preço da variante do produto”.
Seletor de variáveis do Flow para “Alteração no preço da variante do produto” com os parâmetros oldPrice, newPrice, delta, percentChange e direction
A seção “Preço alterado da variante do produto” apresenta o fluxo de informações: o preço anterior e o posterior, a diferença, a porcentagem e a direção da variaçã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 uma etapa “Condição” que verifique se a saída do código de execução productId não está vazia e se existe. Isso garante que só prosseguiremos quando o produto alterado fizer parte, de fato, de um pacote.
  • Verdadeiro → continuar atualizando o preço do pacote
  • Falso → parar (o produto não é um componente do pacote)
  • Se a condição for True, adicione outra ação “Obter dados do produto (1)” para buscar os dados de variantes e preços do produto do pacote pai, utilizando o parâmetro idsCondition da etapa “Executar código”.
  • Adicione uma segunda etapa “Executar código (1)” para calcular os novos preços das variantes do pacote com base nos preços atualizados dos componentes. Essa etapa gera uma matriz variantPrices com os novos preços para cada variante do pacote.

Esta etapa do código “Run” (1) recalcula os preços das variantes do pacote com base no preço atualizado do componente. Veja o que ela faz: primeiro, ela obtém duas informações importantes do gatilho:

  • changedVariantId a variante que acabou de ser alterada (...158920)
  • newPrice o novo preço dessa variante (11.00). Em seguida, ele percorre todas as variantes do pacote e recalcula o preço total de cada uma. Cada variante do pacote possui três variantes de componentes (camiseta preta, camiseta cinza, camiseta branca). Para cada componente, ele verifica: esta é a variante que acabou de ser alterada? Se sim, use newPrice (11,00) em vez do preço desatualizado ainda armazenado em Shopify (10,00). Se não, use o existente component.productVariant.price.It soma os preços dos componentes para obter o novo preço da variante do pacote. Você pode ver isso funcionando nos seus dados de saída. Observe a variante ...088840: seus componentes incluem ...158920 (a variante alterada). Portanto, seu preço é 11 + 10 + 10 = 31, enquanto todas as outras variantes do pacote ainda somam 30, pois nenhum de seus componentes foi alterado.Essa é a ideia principal desta etapa: Shopify ainda não atualizou o preço do componente nos dados do pacote; portanto, o código não pode simplesmente somar os preços existentes, mas precisa substituir o preço da variante alterada em tempo real. Sem isso, todas as variantes continuariam exibindo 30. A matriz de saída variantPrices é então passada para o loop For each, que chama productVariantsBulkUpdate para efetivamente gravar esses 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 loop “For each” (iteração) que percorra cada item em runCode1.variantPrices. Para cada preço de variante, ele executa a ação de solicitação da API “Send Admin” usando a mutação **productVariantsBulkUpdate** para atualizar o preço da variante do pacote. Você pode usar essa entrada para a Mutação:
json
{
  "variants": [
    {
      "id": "{{variantPricesForeachitem.id}}",
      "price": "{{variantPricesForeachitem.price}}"
    }
  ],
  "productId": "{{variantPricesForeachitem.productId}}",
  "allowPartialUpdates": true
}

Como tudo isso funciona em conjunto

Quando o preço de uma variante de um produto (por exemplo, você atualiza a variante “Camiseta Cinza S” de € 10,00 para € 15,00):

  1. O gatilho “Preço da variante do produto alterado” é acionado
  2. O fluxo recupera o pacote pai do produto usando productParents
  3. A etapa “Executar código” extrai o ID do produto do pacote
  4. A condição verifica se este produto faz parte de um pacote
  5. Se sim, ele busca os dados do produto do pacote
  6. Uma segunda etapa do código de execução recalcula os preços das variantes do pacote
  7. O loop percorre cada variante e atualiza o preço do pacote por meio da mutação da API de administração **productVariantsBulkUpdate**

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