La prop wr

Ogni componente personalizzato di Webround riceve una prop wr interamente tipizzata che fornisce l'accesso al catalogo del negozio, all'autenticazione del cliente, al carrello, allo stato dell'interfaccia dell'account e a diverse funzioni di utilità.

La prop è completamente tipizzata e documentata nel Riferimento SDK. L'editor di Webround include IntelliSense integrato: l'autocompletamento, la documentazione inline e il controllo dei tipi sono disponibili di default mentre scrivi i tuoi componenti.

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.

Proprietà di primo livello

Proprietà	Tipo	Descrizione
shop	WrShop	Catalogo, collezioni, filtri, ordinamento e ricerca
customer	WrCustomer	Dati del cliente autenticato, carrello, wishlist, ordini e azioni di autenticazione
cart	WrCartContext	Stato del carrello di checkout — consegna, spedizione e indirizzi
account	WrAccount	Stato dell'interfaccia della pagina account e dettagli dell'ordine
utils	WrUtils	Navigazione, cambio lingua, invio di moduli
locale	string	Codice ISO della lingua attiva (es. 'it', 'en')
languages	string[]	Codici ISO di tutte le lingue configurate per questo sito
inEditor	boolean	true quando il componente viene renderizzato all'interno dell'editor di Webround
currentPage	string	Percorso della pagina corrente (es. '/shop')
product	WrProduct	Disponibile solo quando il componente sovrascrive una scheda prodotto