Bloc Cart items

Le bloc Cart items est la liste des lignes d’articles du panier, affichant chaque produit ajouté par l’acheteur avec son image, son titre, sa variante, son prix, son sélecteur de quantité et son contrôle de suppression. C’est un bloc obligatoire, et c’est le conteneur qui héberge les sous-blocs du panier (la ligne Product, Subscription upgrade et Custom code), fournissant la structure à laquelle les sous-blocs par ligne s’attachent.

• Product title — le nom du produit sur chaque ligne. Prend également en charge une famille de police personnalisée.
• Variant — le libellé de la variante (par exemple, Size: Medium).
• Subscription plan — le libellé de plan en lecture seule affiché sur les lignes d’abonnement.

• Price — le prix actuel de la ligne.
• Compare-at price — le prix d’origine barré.
• Savings — le libellé des économies (par exemple, Save $5.00). Uniquement la taille et l’interligne — le gras et la couleur sont définis dans l’éditeur de texte enrichi ci-dessus.

• Bundle toggle — l’en-tête dépliable qui déploie la liste des composants d’un bundle.
• Bundle item title — le titre de chaque composant à l’intérieur d’un bundle.
• Bundle item variant — le libellé de variante pour chaque composant de bundle.

• Les sous-blocs ordonnés avant la ligne Product apparaissent au-dessus du contenu produit dans chaque ligne.
• Les sous-blocs ordonnés après la ligne Product apparaissent en dessous du contenu produit dans chaque ligne.

• Lorsque le panier ne contient aucun article, le tiroir bascule vers l’état vide et ce bloc n’est pas affiché.
• Une seule modification du panier s’exécute à la fois. Pendant qu’une mise à jour de quantité ou une suppression est en cours, les contrôles de la ligne sont désactivés pour garder le panier cohérent, puis réactivés une fois la modification effectuée.
• Faire passer la quantité d’une ligne sous 1 la supprime. Une quantité rejetée par la boutique (par exemple, au-delà du stock disponible) se resynchronise sur la dernière valeur valide.
• Les bundles changent d’un bloc. Ajuster la quantité sur la ligne d’ancrage d’un bundle met à l’échelle tout le bundle en une seule opération — si un composant est inclus à raison de 3 par ancre, faire passer l’ancre de 1 à 2 fait passer ce composant à 6. Supprimer l’ancre supprime tous les membres du bundle en une fois.
• Certains bundles ne peuvent pas être requantifiés. Si l’un des composants d’un bundle est inclus à un taux fractionnaire (1,5 par ancre, par exemple), le sélecteur de quantité de ce bundle est verrouillé : les boutons +/− et le champ de quantité sont tous deux désactivés, et les quantités saisies ne sont pas acceptées. Le bundle peut toujours être supprimé.
• Les lignes d’abonnement affichent leur plan. Lorsqu’une ligne a un plan de vente et que le sous-bloc Subscription upgrade est désactivé ou non ajouté, la ligne Product affiche un libellé de plan en lecture seule sous la variante — par exemple, Delivers every month (save 30%). Lorsque ce sous-bloc est activé, il présente le plan dans son propre sélecteur, de sorte que le libellé en lecture seule est supprimé plutôt que dupliqué.

• Région : corps.
• Maximum : 1 par état de panier.
• État : panier rempli uniquement.
• Verrouillé et ajouté par défaut. Cart items ne peut être ni supprimé ni masqué, seulement repositionné.

function CustomTemplate(props) {
  return (
    <div className="cart-external-cart-items__row" style={{ display: 'flex', gap: '12px', opacity: props.busy ? 0.6 : 1 }}>
      {props.imageUrl && <img src={props.imageUrl} alt="" width={64} height={64} />}

      <div style={{ flex: 1 }}>
        {props.url ? <a href={props.url}>{props.title}</a> : <span>{props.title}</span>}
        {props.variantTitle && <div style={{ opacity: 0.6 }}>{props.variantTitle}</div>}
        {props.sellingPlanLabel && <div style={{ opacity: 0.6 }}>{props.sellingPlanLabel}</div>}

        {props.discountTags.map((tag) => (
          <span key={tag} style={{ fontSize: '11px', border: '1px solid', borderRadius: '4px', padding: '1px 5px' }}>
            {tag}
          </span>
        ))}

        {!props.stepperLocked && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}>
            <button type="button" onClick={props.decrement} disabled={props.busy}>&minus;</button>
            <input
              value={props.quantityInput}
              onInput={props.onQuantityInput}
              onBlur={props.commitQuantity}
              onKeyDown={props.onQuantityKeyDown}
              size={2}
            />
            <button type="button" onClick={props.increment} disabled={props.busy}>+</button>
            <button type="button" onClick={props.remove} disabled={props.busy}>
              {props.pending === 'remove' ? 'Removing…' : 'Remove'}
            </button>
          </div>
        )}
      </div>

      <div style={{ textAlign: 'right' }}>
        <div>{props.price}</div>
        {props.compareAtPrice && <s style={{ opacity: 0.5 }}>{props.compareAtPrice}</s>}
        {props.savingsHtml && <div dangerouslySetInnerHTML={{ __html: props.savingsHtml }} />}
      </div>
    </div>
  );
}

function CustomTemplate(props) {
  return (
    <div>
      <div>{props.title} {props.price}</div>

      {props.bundle && (
        <ul style={{ margin: '4px 0 0 12px', fontSize: '12px', opacity: 0.7 }}>
          {props.bundle.children.map((child, i) => (
            <li key={child.key ?? i}>{child.quantity} × {child.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}