La prop wr

I componenti scritti con codice React possono utilizzare la prop wr per accedere a un oggetto che fa da contenitore per stati locali e utilities.

import React from "react";

/**
 * CustomProductCard1 - Template Minimal/Elegante
 * @param {Object} props.wr - L'oggetto globale con le utility di webround.com
 */
const CustomProductCard1 = ({ wr }) => {
    const product = wr.product;
    if (!product) return null;

    // Selezioniamo la variante preferita o la prima disponibile
    const variant = product.variants?.find((v) => v.isFavourite) || product.variants?.[0];

    // Accesso agli asset
    const coverUrl = variant?.assets?.[0]?.url || product?.assets?.[0]?.url || "";

    // Gestione Prezzi tramite le utility fornite da wr
    const priceRange = variant?.priceRanges?.[0];
    const price = priceRange?.grossMin || 0;
    const comparePrice = priceRange?.compareGrossMin || 0;
    const currency = priceRange?.currencyCode || "EUR";

    const formatPrice = (value) => {
        return new Intl.NumberFormat(undefined, {
            style: "currency",
            currency: currency,
        }).format(value);
    };

    const handleProductClick = () => {
        // Usiamo l'oggetto wr per interagire con lo store dell'editor/shop
        if (wr?.shop) {
            wr.shop.selectProduct(product);
            wr.shop.selectVariant(variant);
        }

        // Cambio pagina tramite utility wr
        if (wr?.utils?.navigate) {
            wr.utils.navigate("product");
        }
    };

    return (
        <div
            className="group cursor-pointer flex flex-col w-full h-full bg-white transition-all duration-300"
            onClick={handleProductClick}
        >
            {/* Immagine con Aspect Ratio fisso per uniformità */}
            <div className="relative overflow-hidden aspect-[3/4] bg-[#f7f7f7]">
                <img
                    src={coverUrl}
                    alt={product.name}
                    className="w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
                />

                {/* Badge Sconto discreto */}
                {comparePrice > price && (
                    <div className="absolute top-4 left-4 bg-black text-white text-[10px] px-3 py-1 font-semibold uppercase">
                        Promo
                    </div>
                )}
            </div>

            {/* Info Prodotto */}
            <div className="py-4 px-1 flex flex-col items-start">
                <span className="text-gray-400 text-[10px] uppercase tracking-widest mb-1">
                    {product.category?.name || "New Collection"}
                </span>

                <h3 className="text-sm font-semibold text-black mb-2 line-clamp-1">
                    {product.name}
                </h3>

                <div className="flex items-center gap-3">
                    <span className="text-sm font-bold text-black">
                        {formatPrice(price)}
                    </span>
                    {comparePrice > price && (
                        <span className="text-xs text-gray-400 line-through">
                            {formatPrice(comparePrice)}
                        </span>
                    )}
                </div>
            </div>
        </div>
    );
};

export default CustomProductCard1;

Questo oggetto è costantemente sincronizzato con l'app sottostante; quindi, i componenti personalizzati possono accedere facilmente allo stato dell'app, al cliente attualmente autenticato, al carrello e alla lista di prodotti o metadati dello store, senza la necessità di implementare doppie chiamate che causerebbero ridondanza e rallentamenti.

Le proprietà di wr

La prop wr è strutturata in questo modo:

• account: Questo elemento è popolato nel momento in cui si entra nel contesto della pagina cliente. Qui sarà possibile gestire la sezione correntemente visualizzata e raccogliere dati specifici. Consulta la documentazione specifica
• cart: Costituito da stati e utilities disponibili nella pagina del carrello, questo elemento è in grado di integrare una serie di funzionalità per tenere traccia degli stati e di manipolare il comportamento di default della pagina del carrello. Consulta la documentazione specifica
• customer: Questa proprietà è costituita di una serie di informazioni sull'utente attualmente autenticato, sul carrello caricato in memoria ed espone delle utilities pronte all'uso, come il signup, il login, il logout e la manipolazione degli elementi presenti nel carrello. Consulta la documentazione specifica
• inEditor: Il flag è impostato a true quando l'oggetto wr vive all'interno dell'editor.
• languages: L'array in questione contiene gli ISO Code delle lingue disponibili per questo sito.
• locale: L'ISO Code della lingua attualmente in uso nel sito.
• shop: È il punto di riferimento per tutte le operazioni e informazioni che riguardano il catalogo, i filtri applicati e i prodotti attualmente visualizzati. Consulta la documentazione specifica
• utils: È composto di utilities che permettono la navigazione, il cambio di lingua e la generazione di link e URL SEO-ready anche per il multi-lingua. Consulta la documentazione specifica
• product: Una prop opzionale che viene passata quando il componente fa da override alle card di prodotto. Consulta la documentazione specifica

---