Sincronización automática de los precios de los paquetes cuando cambian los precios de las variantes

Cuando utilice la aplicación Shopify y** la aplicación «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 producto del paquete no se actualiza automáticamente. El activador «Product Variant Price Changed» de 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 de la siguiente situación para comprender cómo podemos utilizar el activador «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

Imagine que tiene 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 modifique el precio de una variante de producto, este Shopify Flow actualizará automáticamente el precio de la variante correspondiente del paquete.

Active 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 de producto

Obtenga el producto principal del paquete, calcule los precios actualizados de las variantes y actualice 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 puede ver los pasos de forma visual en este vídeo (el vídeo no tiene audio; puede ajustar la velocidad del vídeo según sus necesidades).

Cómo vamos a organizar Shopify Flow para este proceso

Comprender la configuración

• Disponemos de un producto compuesto (por ejemplo, una camiseta gris) con las variantes S, M, L, XL y 2XL, cada una de ellas con un precio de 10,00 €.
• Disponemos de 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í puede ver de forma gráfica los pasos que se han seguido:

• En «Workflow Trigger Extensions», abra «Activadores», busque «Price» y active la opción «Variante de producto Price Changed». Se requiere acceso a los datos de «Product», «Variante» y «Colección»; la aplicación se lo solicitará si no lo tiene.
• Cree un nuevo flujo de trabajo en blanco desde la aplicación Shopify Flow y seleccione el activador «Variante de producto Price Changed» de la aplicación «Workflow Trigger Extensions»
• Añada 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ñada un paso de código «Ejecutar» 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 de caracteres 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 de la salida

{
  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ñada un paso «Condición» que compruebe si la salida del código «Ejecutar» productId no está vacía y existe. De este modo, se garantiza que solo se continúe cuando el producto modificado forme parte efectivamente 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ñada 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ñada un segundo paso «Ejecutar código (1)» para calcular los nuevos precios de las variantes de los paquetes a partir 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 basándose en el precio actualizado del componente. Esto es lo que hace: en primer lugar, obtiene dos datos clave del activador:

• changedVariantId la variante que acaba de modificarse (...158920)
• newPrice el nuevo precio de esa variante (11.00). A continuación, recorre todas las variantes de paquete y vuelve a calcular su precio total. Cada variante de paquete cuenta con tres variantes de componente (camiseta negra, camiseta gris y camiseta blanca). Para cada componente, comprueba: ¿se trata de la variante que acaba de cambiar? En caso afirmativo, se utiliza newPrice (11,00) en lugar del precio obsoleto que aún se encuentra almacenado en Shopify (10,00). En caso negativo, se utiliza el existente component.productVariant.price.It. A continuación, se suman los precios de los componentes para obtener el nuevo precio de la variante del paquete. Puede comprobar su funcionamiento en sus datos de salida. Fíjese en la variante ...088840: entre sus componentes se incluye ...158920 (la variante modificada). Por lo tanto, su precio es 11 + 10 + 10 = 31, mientras que el resto de 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 debe sustituir el nuevo precio de la variante modificada sobre la marcha. Sin ello, todas las variantes seguirían mostrando 30. A continuación, la salida del array variantPrices se introduce en el bucle «For each», que llama a productVariantsBulkUpdate para volver a escribir efectivamente 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ñada un bucle «For each» (iteración) que recorra cada elemento de runCode1.variantPrices. Para cada precio de variante, se lleva a cabo la acción de solicitud de la API «Send Admin» utilizando la mutación «productVariantsBulkUpdate» para actualizar el precio de la variante del paquete. Puede 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 actualiza la variante «Camiseta gris S» de 10,00 € a 15,00 €):

1. Se activa el activador «Se ha modificado el precio de una variante de producto»
2. Shopify Flow 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 producto del paquete
6. Un segundo paso de ejecución del código vuelve a calcular los precios de las variantes de los lotes
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 €).