Sincronizar automáticamente los precios de los paquetes cuando cambien los precios de las variantes

Cuando utilizas la aplicación (Shopify)** «Bundles»** () para crear paquetes de productos, al modificar el precio de una variante de un producto que forma parte del paquete, el precio de la variante del paquete no se actualiza automáticamente. El disparador «Product Variant Price Changed» () (Workflow Trigger Extensions) () resuelve este problema al detectar el cambio de precio y recalcular y actualizar automáticamente el precio de la variante del paquete.

---

Partiremos del siguiente escenario para comprender cómo podemos utilizar el desencadenador «Cambio en el precio de una variante de producto» para mantener sincronizados los precios de los paquetes.

Escenario: Actualización automática del precio del paquete cuando cambia el precio de una variante de un componente

Imagina que tienes un producto en paquete (por ejemplo, un paquete de camisetas) creado con la aplicación «Shopify Bundles». El paquete contiene tres productos que lo componen: una camiseta negra, una camiseta gris y una camiseta blanca, cada una con un precio de 10,00 € por variante. El precio de la variante del paquete es de 30,00 € (la suma de los precios de todos los productos que lo componen). Cuando modifiques el precio de una variante de uno de los productos que lo componen, este flujo actualizará automáticamente el precio de la variante correspondiente del paquete.

Activa este activador en la configuración de la aplicación -> Variantes de producto -> Cambios en el precio de las variantes

Se ha modificado el precio de una variante del producto

Consigue el producto principal del paquete, calcula los precios actualizados de las variantes y actualiza de forma masiva los precios de las variantes del paquete a través de la API de administración.

Guía en vídeo

También puedes ver los pasos de forma visual en este vídeo (el vídeo no tiene audio; puedes ajustar la velocidad del vídeo según tus necesidades).

Cómo vamos a organizar esto

Comprender la configuración

• Tenemos un producto compuesto (por ejemplo, una camiseta gris) con las variantes S, M, L, XL y 2XL, cada una de ellas a un precio de 10,00 €.
• Tenemos un producto combinado creado con la aplicación «Shopify Bundles». Contiene tres productos combinados (camiseta negra, camiseta gris y camiseta blanca), cada uno con cinco variantes. El precio de la variante del producto combinado es de 30,00 € (suma de los precios de los componentes: 3 × 10,00 €).

Aquí puedes ver gráficamente los pasos que se han seguido:

• En «Workflow Trigger Extensions», abre «Triggers», busca «Price» y activa «Product Variant Price Changed». Requiere acceso a los datos de productos, variantes y colecciones; la aplicación te lo pedirá si no lo tiene.
• Crea un nuevo flujo de trabajo en blanco desde la aplicación Shopify Flow y selecciona el desencadenante «Product Variant Price Changed» de la aplicación «Workflow Trigger Extensions».
• Añade una acción «Obtener datos del producto» para recuperar el producto modificado mediante una consulta avanzada, ordenada por «fecha de creación» en orden ascendente. Este paso recupera la información del paquete principal del producto a través del campo productParents. La consulta es la siguiente: id:{{productVariant.product.id | split: "gid://shopify/Product/" | last}}
• Añade un paso «Ejecutar código» para extraer el ID del producto principal del resultado de getProductData. El código extrae los ID de los productos principales de productParents y genera una cadena idsCondition para realizar la consulta.

El paso «Ejecutar código» utiliza la siguiente entrada GraphQL, el código JavaScript y las salidas para obtener los ID de los productos principales:

Paso «Ejecutar código» en el que se muestran la entrada de GraphQL, el código JavaScript y la vista previa del resultado

{
  getProductData {
    productParents {
      id
    }
  }
}

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,
  };
}

type Output {
  productId: String
  productIds: [String!]!
  idsCondition: String!
}

• Añade un paso «Condición» que compruebe si la salida del código «Ejecutar» productId no está vacía y existe. De este modo, nos aseguramos de que solo continuemos cuando el producto modificado forme parte realmente de un paquete.
• Verdadero → seguir actualizando el precio del paquete
• Falso → detener (el producto no forma parte de un paquete)
• Si la condición es «Verdadera», añade otra acción «Obtener datos del producto (1)» para recuperar los datos de variantes y precios del producto del paquete principal utilizando la URL idsCondition desde el paso «Ejecutar código».
• Añade un segundo paso «Ejecutar código (1)» para calcular los nuevos precios de las variantes de los paquetes en función de los precios actualizados de los componentes. Este paso genera una matriz de tipo variantPrices con los nuevos precios de cada variante de paquete.

Este paso «Ejecutar código (1)» recalcula los precios de las variantes del paquete en función del precio actualizado de los componentes. Esto es lo que hace: en primer lugar, obtiene dos datos clave del desencadenante:

• changedVariantId la variante que se acaba de modificar (...158920)
• newPrice el nuevo precio de esa variante (11.00). A continuación, recorre todas las variantes del paquete y vuelve a calcular su precio total. Cada variante del paquete tiene tres variantes de componentes (camiseta negra, camiseta gris, camiseta blanca). Para cada componente, comprueba: ¿es esta la variante que acaba de cambiar? Si es así, utiliza newPrice (11,00) en lugar del precio obsoleto que aún se encuentra almacenado en Shopify (10,00). Si no es así, utiliza el precio existente component.productVariant.price.It y suma los precios de los componentes para obtener el nuevo precio de la variante del paquete. Puedes ver cómo funciona en tus datos de salida. Fíjate en la variante ...088840: sus componentes incluyen ...158920 (la variante modificada). Por lo tanto, su precio es 11 + 10 + 10 = 31, mientras que todas las demás variantes del paquete siguen sumando 30, ya que ninguno de sus componentes ha cambiado.Esta es la idea clave de este paso: Shopify aún no ha actualizado el precio del componente en los datos del paquete, por lo que el código no puede limitarse a sumar los precios existentes, sino que tiene que sustituir sobre la marcha el precio de la variante modificada por el nuevo. Sin esto, todas las variantes seguirían mostrando 30. La salida, el array variantPrices, se introduce a continuación en el bucle «For each», que llama a productVariantsBulkUpdate para volver a escribir estos precios recalculados en el producto del paquete.

{
  productVariant {
    id
  }
  priceChange {
    oldPrice { amount }
    newPrice { amount }
  }
  getProductData1 {
    id
    variants {
      id
      productVariantComponents {
        productVariant {
          id
          price
        }
      }
    }
  }
}

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

type VariantPrice {
  productId: String!
  id: String!
  price: Float!
}
type Output {
  variantPrices: [VariantPrice!]!
}

• Añade un bucle «For each» (iteración) que recorra cada elemento de runCode1.variantPrices. Para cada precio de variante, realiza la acción de solicitud de la API «Send Admin» utilizando la mutación «productVariantsBulkUpdate» para actualizar el precio de la variante del paquete. Puedes utilizar esta entrada para la mutación:

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

Cómo funciona todo en conjunto

Cuando cambia el precio de una variante de un producto (por ejemplo, si actualizas la variante «Camiseta gris S» de 10,00 € a 15,00 €):

1. Se activa el disparador «Cambio de precio de una variante de producto»
2. El flujo recupera el paquete principal del producto mediante productParents
3. El paso «Ejecutar código» extrae el ID del producto del paquete
4. Esta condición comprueba si este producto forma parte de un paquete
5. En caso afirmativo, recupera los datos del paquete de productos
6. Un segundo paso de «Ejecutar código» vuelve a calcular los precios de las variantes del paquete
7. El bucle recorre cada variante y actualiza el precio del paquete mediante la mutación «productVariantsBulkUpdate» de la API de administración.

El precio de la variante «S» del paquete pasaría ahora de 30,00 € a 35,00 € (15,00 € + 10,00 € + 10,00 €).