Blocs Custom code

Le bloc Custom code ajoute votre propre HTML ou React au panier. Placez-le dans n’importe quelle section du tiroir, ou imbriquez-le dans Cart items en tant que sous-bloc pour qu’il se répète à chaque ligne. Contrairement aux autres blocs, il n’a pas de paramètres Content ni de section Design : le bloc est le code, vous travaillez donc entièrement dans son onglet Code.

1. Ajoutez un bloc Custom code à n’importe quelle section, ou en tant que sous-bloc sous Cart items.
2. Sélectionnez-le et ouvrez l’onglet Code.
3. Choisissez HTML ou React component. Les nouveaux blocs sont en HTML par défaut.
4. Écrivez votre code.
5. Si vous avez choisi React, cliquez sur Compile.
6. Activez “Use custom template”. Pour ce bloc, cet interrupteur signifie « afficher mon code personnalisé », et il est désactivé par défaut, donc rien ne s’affiche tant que vous ne l’activez pas.
7. Gardez le bouton œil de la barre latérale activé pour que le bloc reste visible pour les acheteurs.

• Le bloc n’affiche rien tant que le panier n’est pas chargé.
• Il n’affiche rien non plus lorsque l’œil de la barre latérale est désactivé, que “Use custom template” est désactivé, que le code est vide, ou que React échoue à compiler ou à s’afficher. Comme un échec est silencieux, vérifiez votre bloc en aperçu avant de publier.

• Les balises <script> en ligne ne s’exécutent pas, et le mode HTML n’a aucun accès au SDK ni à window.
• Pour la logique, utilisez le mode React ou les Custom scripts avec le Cart SDK.

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

• L’éditeur verrouille l’enveloppe sur function CustomCode(props: CustomCodeProps) { … }, et vous ne modifiez que le corps entre ces lignes.
• Vous devez cliquer sur Compile puis activer “Use custom template”, avant que le bloc ne s’affiche.
• Votre composant peut utiliser useState, useEffect, useMemo, useRef et useCallback.
• Contrairement au mode HTML, React s’exécute dans le contexte de la page, il peut donc appeler window et le Cart SDK lorsqu’ils sont disponibles.
• Si votre composant génère des erreurs à l’exécution, le bloc n’affiche rien et le reste du panier continue de fonctionner.

• line n’est définie que sur un sous-bloc de Cart items, où votre composant s’affiche une fois par ligne. Placé en tant que section, line est null et vous lisez cart.items à la place.
• Les composants de bundle ne figurent pas dans cart.items. Lorsque des lignes sont regroupées en bundle, seule la ligne d’ancrage apparaît ; ses composants se trouvent dans line.bundle.children.
• Les lignes masquées par une transformation de ligne n’y figurent pas non plus, bien qu’elles comptent toujours dans 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>
  );
}

• Région : n’importe laquelle (haut, corps ou bas). Également disponible en tant que sous-bloc de Cart items.
• Maximum : illimité.
• État : panier rempli et vide (en tant que bloc de section). En tant que sous-bloc de Cart items, il ne s’affiche que lorsque le panier contient des lignes, une instance par ligne.
• Non verrouillé, vous pouvez donc le supprimer ou le masquer.
• Il n’y a pas de section Design par bloc. Stylisez via votre propre balisage, le CSS personnalisé et vos paramètres de design globaux.