Bloques de código personalizado

El bloque Custom code agrega tu propio HTML o React al carrito. Colócalo en cualquier sección del cajón, o anídalo dentro de Cart items como sub-bloque para que se repita en cada línea. A diferencia de otros bloques, no tiene configuraciones de Content ni sección de Design: el bloque es el código, así que trabajas completamente en su pestaña Code.

1. Agrega un bloque Custom code a cualquier sección, o como sub-bloque bajo Cart items.
2. Selecciónalo y abre la pestaña Code.
3. Elige HTML o React component. Los bloques nuevos usan HTML de forma predeterminada.
4. Escribe tu código.
5. Si elegiste React, haz clic en Compile.
6. Activa “Use custom template”. Para este bloque, ese interruptor significa “mostrar mi código personalizado”, y viene desactivado de forma predeterminada, por lo que nada se renderiza hasta que lo habilites.
7. Mantén activado el conmutador del ojo de la barra lateral para que el bloque siga siendo visible para los compradores.

• El bloque no renderiza nada hasta que el carrito se ha cargado.
• Tampoco renderiza nada cuando el ojo de la barra lateral está desactivado, “Use custom template” está desactivado, el código está vacío o React falla al compilar o renderizar. Como una falla es silenciosa, revisa tu bloque en la vista previa antes de publicar.

• Las etiquetas <script> en línea no se ejecutan, y el modo HTML no tiene acceso al SDK ni a window.
• Para lógica, usa el modo React o los scripts personalizados con el Cart SDK.

<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>

• El editor bloquea el envoltorio en function CustomCode(props: CustomCodeProps) { … }, y tú editas solo el cuerpo entre esas líneas.
• Debes hacer clic en Compile y luego activar “Use custom template”, antes de que el bloque se muestre.
• Tu componente puede usar useState, useEffect, useMemo, useRef y useCallback.
• A diferencia del modo HTML, React se ejecuta en el contexto de la página, por lo que puede llamar a window y al Cart SDK cuando están disponibles.
• Si tu componente lanza errores en tiempo de ejecución, el bloque no renderiza nada y el resto del carrito sigue funcionando.

• line solo se establece en un sub-bloque de Cart items, donde tu componente se renderiza una vez por línea. Colocado como sección, line es null y en su lugar lees cart.items.
• Los componentes de un bundle no están en cart.items. Cuando las líneas están agrupadas en un bundle, solo aparece la línea ancla; sus componentes viven en line.bundle.children.
• Las líneas ocultas por una transformación de línea tampoco están ahí, aunque siguen contando para cart.totalPrice.

function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}

function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}

function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}

function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

• Región: cualquiera (superior, cuerpo o inferior). También disponible como sub-bloque de Cart items.
• Máximo: ilimitado.
• Estado: carrito lleno y vacío (como bloque de sección). Como sub-bloque de Cart items, solo se renderiza cuando el carrito tiene líneas, una instancia por línea.
• No está bloqueado, así que puedes eliminarlo u ocultarlo.
• No hay sección de Design por bloque. Dale estilo a través de tu propio marcado, el CSS personalizado y tus configuraciones de diseño globales.