Prijzen van bundels automatisch synchroniseren bij prijswijzigingen van varianten

Wanneer je de app (Shopify) gebruikt om productbundels aan te maken, wordt de variantprijs van het bundelproduct niet automatisch bijgewerkt als de variantprijs van een afzonderlijk product in de bundel wordt gewijzigd. De trigger ‘Product Variant Price Changed’ van Workflow Trigger Extensions lost dit op door de prijswijziging te detecteren en de variantprijs van de bundel automatisch opnieuw te berekenen en bij te werken.

We gaan uit van het volgende scenario om te begrijpen hoe we de trigger ‘Prijswijziging productvariant’ kunnen gebruiken om de prijzen van bundels synchroon te houden.

Scenario: De prijs van een bundel automatisch bijwerken wanneer de prijs van een componentvariant verandert

Stel je voor dat je een bundelproduct hebt (bijvoorbeeld een T-shirtbundel) dat is aangemaakt met de app ‘ShopifyBundles’. De bundel bevat drie afzonderlijke producten: een zwart T-shirt, een grijs T-shirt en een wit T-shirt, elk met een prijs van € 10,00 per variant. De prijs van de bundelvariant is € 30,00 (de som van alle prijzen van de afzonderlijke producten). Wanneer je de prijs van een variant van een afzonderlijk product wijzigt, wordt de prijs van de bijbehorende bundelvariant automatisch bijgewerkt via deze workflow.

Schakel deze trigger in via de app-instellingen -> Productvarianten -> Prijswijzigingen per variant

Prijswijziging productvariant

Haal het bovenliggende bundelproduct op, bereken de bijgewerkte variantprijzen en werk de prijzen van de bundelvarianten in één keer bij via de Admin API

Videogids

Je kunt de stappen ook visueel bekijken in deze video (de video heeft geen geluid; je kunt de afspeelsnelheid naar eigen wens aanpassen)

Hoe we dit gaan aanpakken

Inzicht in de opzet

We hebben een product met varianten (bijvoorbeeld een grijs T-shirt) in de maten S, M, L, XL en 2XL, die elk € 10,00 kosten.
We hebben een bundelproduct aangemaakt met de app ‘Shopify Bundles’. Deze bevat 3 gebundelde producten (zwart T-shirt, grijs T-shirt, wit T-shirt), elk met 5 varianten. De prijs van de bundelvariant bedraagt € 30,00 (som van de prijzen van de afzonderlijke producten: 3 × € 10,00).

Hier kun je de gevolgde stappen visueel bekijken:

Ga in ‘Workflow Trigger Extensions’ naar ‘Triggers’, zoek naar ‘Price’ en schakel ‘Product Variant Price Changed’ in. Hiervoor is toegang tot product-, variant- en collectiegegevens vereist; de app vraagt hierom als deze toegang ontbreekt.
Maak een nieuwe lege workflow aan vanuit de app Shopify Flow en selecteer de trigger ‘Productvariantprijs gewijzigd’ uit de app ‘Workflow Trigger Extensions’
Voeg een actie ‘Productgegevens ophalen’ toe om het gewijzigde product op te halen met behulp van een geavanceerde zoekopdracht, gesorteerd op ‘created at’ in oplopende volgorde. Deze stap haalt de informatie over de bovenliggende bundel van het product op via het veld productParents. De zoekopdracht ziet er als volgt uit: id:{{productVariant.product.id | split: "gid://shopify/Product/" | last}}
Voeg een stap ‘Run code’ toe om de product-ID van het bovenliggende bundelproduct uit het resultaat van getProductData te halen. De code haalt de product-ID’s van de bovenliggende producten uit productParents en stelt een tekenreeks samen voor idsCondition om een zoekopdracht uit te voeren.

De stap 'Code uitvoeren' maakt gebruik van de volgende GraphQL-invoer, JavaScript-code en uitvoer om de ID's van de bovenliggende producten op te halen:

Voer de stap ‘Code uitvoeren’ uit om de GraphQL-invoer, de JavaScript-code en de voorbeelduitvoer weer te geven

Op de pagina ‘Triggers’ werd gezocht op ‘Prijs’, waarbij de optie ‘Prijs van productvariant gewijzigd’ was ingeschakeld — Zoek in de app onder ‘Triggers’ naar ‘Prijs’ en schakel ‘Prijswijziging productvariant’ in.

De variabelenkiezer van Flow voor ‘Prijswijziging productvariant’ met oldPrice, newPrice, delta, percentChange en direction — Onder ‘Welke productvariant is in prijs gewijzigd?’ wordt de workflow weergegeven: de prijs voor en na de wijziging, het verschil, het percentage en de richting.

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!
}

Voeg een stap ‘Voorwaarde’ toe die controleert of de uitvoer van de code ‘Uitvoeren’ productId niet leeg is en bestaat. Zo zorgen we ervoor dat we alleen verdergaan als het gewijzigde product daadwerkelijk deel uitmaakt van een bundel.
Waar → de bundelprijs blijven bijwerken
Onjuist → stop (het product maakt geen deel uit van een bundel)
Als de voorwaarde ‘True’ is, voeg dan nog een actie ‘Productgegevens ophalen (1)’ toe om de variant- en prijsgegevens van het bovenliggende bundelproduct op te halen met behulp van de idsCondition uit de stap ‘Code uitvoeren’.
Voeg een tweede stap ‘Code uitvoeren (1)’ toe om de prijzen van de nieuwe bundelvarianten te berekenen op basis van de bijgewerkte componentprijzen. Deze stap genereert een array met de waarde variantPrices met daarin de nieuwe prijzen voor elke bundelvariant.

Deze stap ‘Run code (1)’ berekent de prijzen van de bundelvarianten opnieuw op basis van de bijgewerkte componentprijs. Dit is wat er gebeurt: eerst haalt het twee belangrijke gegevens uit de trigger:

changedVariantId de variant die zojuist is gewijzigd (...158920)
newPrice de nieuwe prijs voor die variant (11.00). Vervolgens doorloopt het programma alle bundelvarianten en berekent het de totale prijs opnieuw. Elke bundelvariant bestaat uit 3 componentvarianten (zwart T-shirt, grijs T-shirt, wit T-shirt). Voor elk onderdeel wordt gecontroleerd: is dit de variant die zojuist is gewijzigd? Zo ja, gebruik dan newPrice (11,00) in plaats van de verouderde prijs die nog steeds is opgeslagen in Shopify (10,00). Zo nee, gebruik dan de bestaande component.productVariant.price.It telt de prijzen van de onderdelen bij elkaar op om de nieuwe prijs van de bundelvariant te berekenen. Je kunt zien hoe dit werkt in je uitvoergegevens. Kijk naar variant ...088840; de componenten daarvan zijn onder andere ...158920 (de gewijzigde variant). De prijs is dus 11 + 10 + 10 = 31, terwijl alle andere bundelvarianten nog steeds in totaal 30 bedragen omdat geen van hun componenten is gewijzigd.Dit is het belangrijkste inzicht van deze stap: Shopify heeft de prijs van de component in de bundelgegevens nog niet bijgewerkt, dus de code kan niet zomaar de bestaande prijzen bij elkaar optellen, maar moet de nieuwe prijs voor de gewijzigde variant direct ter plekke invullen. Zonder dit zouden alle varianten nog steeds 30 weergeven. De output-variantPrices-array wordt vervolgens doorgegeven aan de For-each-lus die productVariantsBulkUpdateaanroept om deze herberekende prijzen daadwerkelijk terug te schrijven naar het bundelproduct.

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!]!
}

Voeg een ‘For each’-lus (iteratie) toe die elk item in runCode1.variantPrices doorloopt. Voor elke variantprijs voert deze de actie ‘Send Admin API-verzoek’ uit met behulp van de mutatie **productVariantsBulkUpdate** om de prijs van de bundelvariant bij te werken. Je kunt deze invoer gebruiken voor de Mutatie:

json

{
  "variants": [
    {
      "id": "{{variantPricesForeachitem.id}}",
      "price": "{{variantPricesForeachitem.price}}"
    }
  ],
  "productId": "{{variantPricesForeachitem.productId}}",
  "allowPartialUpdates": true
}

Hoe het allemaal in elkaar zit

Wanneer de prijs van een variant van een componentproduct verandert (bijvoorbeeld: je past de prijs van de variant ‘Grijs T-shirt S’ aan van € 10,00 naar € 15,00):

De trigger ‘Prijswijziging productvariant’ wordt geactiveerd
De flow haalt de bovenliggende bundel van het product op via productParents
De stap ‘Code uitvoeren’ haalt de product-ID van de bundel op
Deze voorwaarde controleert of dit product deel uitmaakt van een bundel
Zo ja, dan haalt het de productgegevens van de bundel op
In een tweede stap van de 'Run code'-procedure worden de prijzen van de bundelvarianten opnieuw berekend
De lus doorloopt elke variant en werkt de bundelprijs bij via de ‘productVariantsBulkUpdate’-mutatie van de Admin API

De prijs van de S-variant van de bundel zou nu worden aangepast van € 30,00 naar € 35,00 (€ 15,00 + € 10,00 + € 10,00).