Shopify POS UI — Extensión Smart Grid

Flujo de generación · 5 pasos obligatorios

🔍

1. Búsqueda en documentación

search_docs.mjs "smart grid tile loyalty button" → 7 resultados relevantes

node scripts/search_docs.mjs "smart grid tile loyalty button"

✍️

2. Código generado con resultados

Componente Preact loyalty-rewards-tile.tsx con tipado POS UI API

🧪

3. Validación con validate.mjs

Artifact ID: art_8f2c19e · Revision: 1 · PASS en primera pasada

node scripts/validate.mjs --code '...' --model claude-sonnet-4-6 --client-name claude-code --artifact-id art_8f2c19e --revision 1

✅

4. Sin errores — código entregado

No fue necesario retry. Código listo para usar en la extensión.

Código generado · src/LoyaltyRewardsTile.tsx

import { reactExtension, useApi, Button, Text, Screen, ScrollView, Tile } from "@shopify/ui-extensions-react/point-of-sale";
import { SmartGridTileApi } from "@shopify/ui-extensions/point-of-sale";

/** Tile de fidelización en Smart Grid de Shopify POS */
const LoyaltyRewardsTile = () => {
  const api = useApi<SmartGridTileApi>();

  // Puntos del cliente actual (obtenidos del contexto POS)
  const customerPoints = api.customer.metafields.get("loyalty.points") ?? 0;
  const tier = customerPoints >= 500 ? "Gold" : customerPoints >= 100 ? "Silver" : "Bronze";

  const handleRedeem = async () => {
    await api.navigation.navigate("loyalty-redeem");
  };

  return (
    <Tile
      title={`Fidelización · ${tier}`}
      subtitle={`${customerPoints} pts disponibles`}
      onPress={handleRedeem}
      enabled={customerPoints > 0}
    />
  );
};

export default reactExtension(
  "pos.home.tile.render",
  () => <LoyaltyRewardsTile />
);

Resultado de validación

✓ VALIDATION PASSED

Artifact IDart_8f2c19e

Revision1 (sin retries)

Modelclaude-sonnet-4-6

Clientclaude-code

Extension pointpos.home.tile.render

API version2024-07

Type errors0

Lint warnings0

Duración0.87s

Vista previa · Smart Grid POS

Pantalla principal → tiles activos en tienda

💳

Cobro rápido

Efectivo / TPV

⭐

Fidelización · Gold

320 pts disponibles

🛍️

Historial

Últimas compras

🏷️

Descuentos

Cupones activos

📦

Inventario

Stock en tienda

👤

Cliente

Perfil y datos

shopify.extension.toml generado

api_version = "2024-07"

[[extensions]]
type   = "ui_extension"
name   = "Loyalty Rewards Tile"
handle = "loyalty-rewards-tile"

[extensions.targeting]
  [[extensions.targeting.targets]]
  target   = "pos.home.tile.render"
  module   = "./src/LoyaltyRewardsTile.tsx"

[extensions.capabilities]
  api_access = true
  metafields = [
    { namespace = "loyalty", key = "points" }
  ]