Componenti personalizzati (React)
Webround integra un ambiente di sviluppo che permette di scrivere codice React personalizzato. Grazie a un compilatore basato su esbuild, ogni componente viene isolato e servito tramite standard moderni, permettendo di implementare qualsiasi componente venga in mente all'utente.
1. L'ambiente di Sviluppo
Il codice viene gestito tramite l'integrazione nativa con Monaco Editor, lo stesso motore di VS Code. Questo garantisce shortcut classiche, evidenziazione della sintassi e intellisense direttamente nel browser.
- Linguaggi: Supporto per
.jsx,.tsx,.csse.json. - Tailwind v4: Puoi scrivere classi Tailwind nativamente. Queste vengono estratte durante il build, processate e iniettate localmente.
- Compilazione Real-time: Ogni salvataggio avvia un processo di build che impacchetta il codice in un bundle isolato.
2. Architettura e Shadow DOM
Per evitare conflitti tra il codice custom e il resto della piattaforma, Webround trasforma ogni file sorgente in un Web Component (Custom Element).
Isolamento Totale
L'utilizzo di Web Components e l'isolamento con lo Shadow DOM garantisce diversi vantaggi:
- CSS Scoped: Il CSS (incluso quello generato da Tailwind) è incapsulato. Non può "uscire" dal componente e influenzare lo stile globale del sito.
- Indipendenza dalle Dipendenze: Ogni build include le proprie dipendenze. Se Webround aggiorna il suo core (es. una nuova versione di React), il tuo componente continuerà a funzionare con la versione specificata nel suo bundle, evitando breaking changes.
- Conflitti di Script: Gli script globali o le librerie esterne caricate nel sito non possono manipolare accidentalmente il DOM interno del tuo componente.
Webround fornisce ogni singolo editor con un dominio specifico per Draft ID. Questo significa che ogni codice sorgente sarà in grado di comunicare solo ed esclusivamente all'interno dell'editor, senza la possibilità di comunicare con il wrapper (editor.webround.com) o con editor di altri draft, che, avendo una origin diversa, non possono essere interpellati negli script grazie alla Same Origin Policy dei browser, che evita l'iniezione di script o la lettura di cookie e dati locali tra origini diverse.
3. Gestione Dipendenze e package.json
Il file package.json deve risiedere nella root del progetto. È il file di istruzioni per il compilatore: qui definisci il punto di ingresso e le librerie esterne che vuoi utilizzare.
- Installazione pacchetti: È possibile integrare qualsiasi libreria disponibile su NPM.
- Specifiche Versioni: Non essendo presente un comando
npm installinterattivo, è necessario recuperare la versione esatta dal sito ufficiale di NPM e inserirla manualmente.
Ecco un esempio:
{
"name": "wr-custom-component",
"version": "1.0.0",
"dependencies": {
"react": "18.3.1",
"react-dom": "18.3.1",
"react-router-dom": "^6.22.0"
}
}
4. Webround Bridge & SDK (Prop wr)
Ogni componente custom riceve automaticamente una prop chiamata wr. Questo oggetto funge da ponte (bridge) tra il tuo codice e l'ecosistema Webround, esponendo dati e funzioni vitali:
- State: Accesso in tempo reale ai dati reattivi di
Shop,Customer,CarteAccount. Qualsiasi modifica a questi stati nel core della piattaforma aggiorna automaticamente il tuo componente. - Actions: Metodi universali per interagire con il sistema, come la gestione del carrello, il trigger della navigazione programmatica (cambio pagina) o il cambio di localizzazione.
- Events: Sincronizzazione automatica tramite Custom Events (es.
wr-shop-update) che mappano i dati di sistema allo stato interno del componente.
Nelle sezioni successive, vedremo alcuni esempi di componenti che mostrano i vantaggi di programmare in React su Webround.
5. Modalità di Inserimento
Il codice custom può essere integrato nel tuo draft in tre modalità:
- Sezione Custom: Un blocco indipendente inserito direttamente nell'editor. È ideale per sezioni visibili come componenti delle landing pages, integrazioni esterne visibili e molto altro.
- Override: Sostituzione integrale della logica di un componente standard esistente con il proprio codice. Così puoi sostituire componenti hard-coded, come l'header del sito oppure le card di prodotto.
- Injection: Inserimento dinamico tramite slot (punti di aggancio) predefiniti nel layout del template. Estendi lo stile dei componenti classici grazie all'aggancio di ulteriori componenti custom.
Il compilatore supporta l'importazione di file locali. Puoi scomporre la logica in più file e sottocartelle; il processo di build aggregherà tutto in un unico bundle ottimizzato.
6. Esempi rapidi
Di seguito vedremo 3 semplici esempi che mostrano come integrare i componenti personalizzati nel tuo sito webround.
1. Landing Page personalizzata
Questo esempio mostra come caricare i componenti in sezioni di codice personalizzato.
Apri il tuo draft e accedi ad editor.webround.com
La barra superiore ti consente di accedere ai file custom che hai creato per questo draft. Clicca sull'icona della cartella: entrerai nell'editor di codice custom di Webround.
Sei entrato nell'editor di codice custom di Webround
Per prima cosa, creiamo un file package.json facendo click destro su un'area vuota della sidebar:
Fai click destro su un'area vuota della sidebar per creare un nuovo file. Chiamalo package.json e premi Invio.
Inseriamo il seguente contenuto:
{
"name": "@webround/landing-page",
"version": "1.0.0",
"description": "A sample landing page to showcase how Webround integrates React",
"dependencies": {
"react": "18.3.1",
"react-dom": "18.3.1",
"react-router-dom": "^6.22.0",
"framer-motion": "^11.0.0"
}
}
Utilizza la shortcut Ctrl + S per salvare.
Quando la versione locale del tuo file non è sincronizzata con la versione in Cloud, noterai un pallino vicino al file.
Puoi anche salvare con Click destro > Save file.
Inserimento del codice
Creiamo ora una nuova cartella, chiamiamola 'src'.
Il procedimento è sempre uguale: Click destro > new Folder > inserisci 'src' e premi Invio.
Ora, fai click destro sulla cartella e crea un nuovo file:
Chiama il file 'LandingPage.jsx' e premi Invio.
Ora che hai creato il tuo nuovo file, dovresti avere questa struttura:
Ora sei pronto a inserire il codice personalizzato.
Dopo aver costruito questa struttura, seleziona il file LandingPage.jsx e incolla il seguente codice React:
import React from "react";
import { motion, AnimatePresence } from "framer-motion";
/**
* Componente LandingPage
* Un esempio di interfaccia con animazioni d'ingresso coordinate.
*/
const LandingPage = () => {
// Definizione delle animazioni per le linee decorative laterali
const stripeVariants = {
initial: { height: 0 },
animate: {
height: "100%",
transition: { duration: 0.6, ease: [0.87, 0, 0.13, 1] }
},
exit: {
height: 0,
transition: { duration: 0.4, ease: "easeInOut" }
}
};
// Definizione delle animazioni per i blocchi di testo principali
const textVariants = {
initial: { x: -200, opacity: 0 },
animate: (custom) => ({
x: 0,
opacity: 1,
transition: {
delay: 0.2 + custom * 0.1,
type: "spring",
stiffness: 150,
damping: 15
}
}),
exit: (custom) => ({
x: 200,
opacity: 0,
transition: {
delay: custom * 0.05,
duration: 0.3
}
})
};
return (
<div className="h-screen w-full flex flex-col items-center justify-center font-black italic overflow-hidden relative border-[12px] bg-yellow-400 border-black text-black">
<AnimatePresence>
{/* Elementi grafici di sfondo */}
<motion.div
variants={stripeVariants}
initial="initial"
animate="animate"
exit="exit"
className="absolute left-10 top-0 w-4 bg-black hidden md:block"
/>
<motion.div
variants={stripeVariants}
initial="initial"
animate="animate"
exit="exit"
className="absolute right-10 bottom-0 w-4 bg-black hidden md:block"
/>
{/* Sezione Hero principale */}
<div className="relative z-10 flex flex-col items-center select-none">
<div className="flex flex-col text-[18vw] md:text-[14vw] leading-[0.75] tracking-[-0.05em] uppercase">
<motion.div
custom={0}
variants={textVariants}
initial="initial"
animate="animate"
exit="exit"
className="flex items-center"
>
<span className="bg-black text-yellow-400 px-4 py-2 transform -rotate-2">NEW</span>
<span className="ml-4">DROP</span>
</motion.div>
<motion.div
custom={1}
variants={textVariants}
initial="initial"
animate="animate"
exit="exit"
className="text-right"
>
ONLINE
</motion.div>
</div>
{/* Badge informativo con effetto spring */}
<motion.div
initial={{ scale: 0, rotate: -15 }}
animate={{ scale: 1, rotate: 2 }}
exit={{ scale: 0, opacity: 0 }}
transition={{ delay: 0.5, type: "spring" }}
className="mt-8 bg-black text-white px-6 py-2 text-xl md:text-2xl shadow-[8px_8px_0px_#fff]"
>
CUSTOM CODE // COMPONENT
</motion.div>
</div>
{/* Footer / Call to Action animata */}
<motion.div
initial={{ y: 200 }}
animate={{ y: 0 }}
exit={{ y: 200 }}
transition={{ duration: 0.5, ease: "backIn" }}
className="absolute bottom-0 w-full h-24 md:h-32 bg-black text-yellow-400 text-2xl md:text-4xl font-black uppercase tracking-tighter flex items-center justify-center group cursor-pointer hover:bg-white hover:text-black transition-colors duration-300"
>
<span className="group-hover:mr-8 transition-all duration-300">SCOPRI LA COLLEZIONE</span>
<span className="hidden group-hover:inline">[→]</span>
</motion.div>
</AnimatePresence>
</div>
);
};
export default LandingPage;
Non resta che salvare e avviare la compilazione (dopo aver salvato):
Salva con Ctrl + S, attendi che il salvataggio sia completato e clicca su "Avvia compilazione".
Attendi che la compilazione sia completa: vedrai un banner in basso a destra che mostra lo stato della build.
Ora che hai completato la compilazione, puoi inserire il codice in una sezione di codice personalizzato.
- Chiudi l'editor di codice ed entra nell'interfaccia di modifica del sito.
- Apri il menù contestuale su un Canvas (click destro) e scorri fino alla sezione "AGGIUNGI". Scegli "Aggiungi codice personalizzato".
Clicca su "Aggiungi codice personalizzato".
Questa sezione di codice personalizzato sarà vuota e proverà, di default, a caricare il codice dentro il percorso src/App. Noi abbiamo definito src/LandingPage.jsx. Quindi, inseriamo esattamente questo percorso dentro l'input testuale che si apre cliccando sulla rotella in alto a sinistra della sezione di codice personalizzato.
Clicca su "Aggiungi codice personalizzato".
Inseriamo src/LandingPage.jsx e clicchiamo sul pulsante blu per applicare il cambiamento.
A questo punto, vedrai il componente caricare:
Complimenti! Hai caricato il tuo primo componente custom in Webround!
Cosa abbiamo visto:
- Come accedere all'editor di codice di Webround: Clicca sulla cartella in alto a sinistra per accedere.
- Definizione delle dipendenze: Non dimenticare mai di creare il file package.json: senza questo, la compilazione non andrà a buon fine.
- Integrazione di framer-motion: Siamo riusciti ad integrare la libreria framer-motion e ad utilizzare i suoi componenti dentro la nostra Landing Page.
- Utilizzo di Tailwind: Non abbiamo eseguito alcuna configurazione per integrare le classi di Tailwind: Webround integra nativamente il parsing delle classi in fase di compilazione.
2. Header personalizzato
In questo esempio, vedremo un tipo di personalizzazione diversa, perché l'header dei siti Webround è un componente globale la cui configurazione è ripetuta in tutte le pagine. Non c'è una sezione da aggiungere o rimuovere, bensì, un override da applicare.
Di seguito, mostreremo solo il codice e pochi elementi di interfaccia perché supponiamo che tu abbia già letto come interagire con l'editor di codice.
Iniziamo con la modifica del package.json:
{
"name": "@webround/custom-integration",
"version": "1.0.0",
"description": "A sample to showcase how Webround integrates React",
"dependencies": {
"react": "18.3.1",
"react-dom": "18.3.1",
"react-router-dom": "^6.22.0",
"framer-motion": "^11.0.0",
"react-icons": "^0.284.0"
}
}
Se hai già creato un package.json con l'esempio precedente, ti basta aggiornare l'oggetto dependecies del package.json. Non c'è bisogno di specificare diversi package.json, né tantomeno di cambiare nome, versione o descrizione ad ogni modifica.
Creiamo un file personalizzato dentro la cartella src e chiamiamolo "Header.jsx".
import React, { useState } from "react";
import { VscMenu, VscClose, VscSearch, VscArrowRight } from "react-icons/vsc";
import { FiShoppingBag } from "react-icons/fi";
/**
* SiteHeader: componente per mostrare le funzioni di Webround.
* Link reali, ricerca inline, overlay giallo solido e logo fisso.
*/
const SiteHeader = ({ wr }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isSearchOpen, setSearchOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const brandName = "WEBROUND";
const navigation = [
{ label: "Home", path: "/" },
{ label: "Shop", path: "/shop" },
];
const cartCount = wr?.customer?.state?.cache?.cart?.all?.data?.items?.length || 0;
const handleLinkClick = (e, path) => {
e.preventDefault();
if (wr?.utils?.navigate) {
wr.utils.navigate(path);
setIsMenuOpen(false);
}
};
const handleSearch = (e) => {
if (e) e.preventDefault();
if (wr?.shop?.applySearch) {
wr.shop.setSearch(searchTerm);
wr.shop.applySearch(searchTerm);
setSearchOpen(false);
wr.utils.navigate("/shop");
}
};
return (
<div className="relative w-full bg-white text-black border-b-4 border-black z-[100]">
<div className="max-w-[1920px] mx-auto px-4 md:px-8 h-20 md:h-24 flex items-center justify-between relative">
{/* SEARCH INLINE */}
{isSearchOpen && (
<div className="absolute inset-0 z-[110] bg-yellow-400 flex items-center px-4 md:px-8 border-b-4 border-black animate-in slide-in-from-top duration-150">
<form onSubmit={handleSearch} className="flex w-full items-center gap-4">
<VscSearch className="text-2xl md:text-3xl" />
<input
autoFocus
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="CERCA DROP..."
className="flex-grow bg-transparent border-none text-black placeholder-black/30 text-2xl md:text-4xl font-black italic outline-none uppercase tracking-tighter"
/>
<button type="submit" className="p-2 bg-black text-white hover:bg-white hover:text-black border-2 border-black transition-all">
<VscArrowRight className="text-2xl" />
</button>
<button
type="button"
onClick={() => setSearchOpen(false)}
className="p-2 border-2 border-black hover:bg-black hover:text-white transition-all"
>
<VscClose className="text-2xl" />
</button>
</form>
</div>
)}
{/* Nav & Menu Trigger */}
<div className="flex items-center gap-4 flex-1">
<button
className="p-2 border-2 border-black hover:bg-black hover:text-white transition-colors"
onClick={() => setIsMenuOpen(true)}
>
<VscMenu className="text-xl md:text-2xl" />
</button>
<nav className="hidden lg:flex gap-6">
{navigation.map((item, idx) => (
<a
key={idx}
href={item.path}
onClick={(e) => handleLinkClick(e, item.path)}
className="text-[11px] font-black uppercase tracking-tighter italic hover:line-through transition-all"
>
{item.label}
</a>
))}
</nav>
</div>
{/* Center: Logo */}
<a
href="/"
onClick={(e) => handleLinkClick(e, "/")}
className="flex-shrink-0 cursor-pointer"
>
<h1 className="text-2xl md:text-4xl font-black italic tracking-tighter uppercase">
{brandName}<span className="text-yellow-400">.</span>
</h1>
</a>
{/* Actions */}
<div className="flex items-center justify-end gap-2 md:gap-4 flex-1">
<button
className="hidden md:flex items-center justify-center w-10 h-10 border-2 border-black hover:bg-black hover:text-white transition-all"
onClick={() => setSearchOpen(true)}
>
<VscSearch className="text-xl" />
</button>
<a
href="/cart"
onClick={(e) => handleLinkClick(e, "/cart")}
className="relative flex items-center justify-center w-10 h-10 border-2 border-black bg-black text-white hover:bg-yellow-400 hover:text-black transition-all"
>
<FiShoppingBag className="text-xl" />
<span className="absolute -top-2 -right-2 bg-red-600 text-white text-[10px] font-black px-1 border-2 border-black shadow-[2px_2px_0px_black]">
{cartCount}
</span>
</a>
</div>
</div>
{/* OVERLAY MENU */}
{isMenuOpen && (
<div className="fixed inset-0 z-[9999] bg-yellow-400 text-black flex flex-col p-6 md:p-12 w-screen h-screen overflow-hidden animate-in fade-in duration-200">
<div className="flex justify-between items-center border-b-4 border-black pb-6">
<span className="text-4xl font-black italic tracking-tighter uppercase">{brandName}</span>
<button
onClick={() => setIsMenuOpen(false)}
className="p-2 border-4 border-black bg-black text-white hover:bg-white hover:text-black transition-all"
>
<VscClose className="text-4xl" />
</button>
</div>
<nav className="flex-1 flex flex-col justify-center gap-2">
{navigation.map((item, idx) => (
<a
key={idx}
href={item.path}
onClick={(e) => handleLinkClick(e, item.path)}
className="text-5xl md:text-8xl font-black uppercase italic tracking-tighter text-left leading-none hover:text-white transition-all"
>
{item.label}
</a>
))}
</nav>
<div className="border-t-4 border-black pt-6 flex justify-between font-black uppercase italic text-[10px] md:text-xs">
<div className="flex flex-col">
<span>{brandName} Drop 01</span>
<span className="text-black/40">Webround Software</span>
</div>
<span className="self-end">{new Date().getFullYear()}</span>
</div>
</div>
)}
</div>
);
};
export default SiteHeader;
Crea il file e avvia la compilazione.
Ora che hai compilato il tuo Header personalizzato, non dobbiamo fare altro che integrarlo nel sito.
Accedi al menù di gestione dei componenti globali che trovi nell'header dell'editor e apri la sezione "Override custom":
Ora inserisci nella entry "Header del sito", il valore src/SiteHeader.jsx o qualunque sia il percorso al tuo componente personalizzato e clicca il pulsante blu per applicare.
Inserisci il path al componente custom e clicca sul pulsante blu per applicare.
Ora il tuo sito ha un nuovo header che integra al meglio le funzioni di Webround attraverso la prop nativa wr.
Cosa abbiamo visto
- Override dei componenti hard-coded: Con il menù di override puoi sostituire quasi tutti i componenti di Webround a tuo piacimento. Puoi rivoluzionare il tuo sito e integrare tutto quello che ti pare.
- Integrazione nativa WR SDK: La prop wr, passata dentro il componente, è disponibile per tutti i componenti del sistema e integra alcune funzioni di base, che ti consentono di gestire lo stato del sito e le chiamate alle API in maniera semplice e veloce. Ad esempio, per navigare verso una pagina, puoi semplicemente utilizzare wr.utils.navigate, mantenendo coerenza tra editor e sito finale, senza preoccuparti della gestione dei path o delle lingue!
- Conteggio degli elementi del carrello: Sempre grazie alla WR SDK, puoi interagire con stati e oggetti come il customer, che presenta una cache coerente di tutti i dati ad esso relativo, come il carrello.
3. Card Prodotto personalizzate
A questo punto, diamo per scontato che tu abbia preso dimestichezza con l'editor. Ti mostreremo solo il codice per le card prodotto e il risultato prima / dopo.
Le card prodotto sono tra gli elementi più importanti per un e-commerce e comunicano da subito identità visiva. In molti casi, sono ricche di funzionalità, elementi di stile complessi e shortcut, come l'aggiunta al carrello.
Tuttavia, le card prodotto vivono all'interno di griglie e liste filtrate, quindi è fondamentale ricevere le props corrette.
Se crei un componente che vuoi usare come Card di prodotto, puoi accedere alla prop wr.product, che riceverai nativamente insieme dentro l'oggetto wr se esegui l'override del componente "Card di prodotto".
Per modificare le card di prodotto, crea un file dentro src e chiamalo "ProductCard.jsx". Inserisci questo codice e salva:
import React from "react";
/**
* ProductCard - Componente per la visualizzazione dei prodotti.
* Sfrutta l'oggetto 'wr' per accedere ai dati del catalogo e alle utility di sistema.
*/
const ProductCard = ({ wr }) => {
// Estrazione dei dati del prodotto dal contesto globale fornito da webround.com
const product = wr?.product;
// Early return per evitare errori di rendering se il prodotto non è definito
if (!product) return null;
// Selezione della variante principale (preferita o la prima disponibile) e della relativa immagine
const variant = product.variants?.find((v) => v.isFavourite) || product.variants?.[0];
const coverUrl = variant?.assets?.[0]?.url || product?.assets?.[0]?.url || "";
// Calcolo del prezzo, dell'eventuale prezzo originale (per sconti) e della valuta
const priceRange = variant?.priceRanges?.[0];
const price = priceRange?.grossMin || 0;
const comparePrice = priceRange?.compareGrossMin || 0;
const currency = priceRange?.currencyCode || "EUR";
// Utility interna per formattare i valori numerici nel formato valuta locale
const formatPrice = (value) => {
return new Intl.NumberFormat("it-IT", {
style: "currency",
currency: currency,
}).format(value);
};
/**
* Gestione del click sul componente.
* Sincronizza lo stato globale dello shop e instrada l'utente alla pagina di dettaglio.
*/
const handleProductClick = () => {
if (wr?.shop) {
wr.shop.selectProduct(product);
wr.shop.selectVariant(variant);
}
if (wr?.utils?.navigate) {
wr.utils.navigate("product");
}
};
return (
<div
className="group relative flex flex-col w-full h-full bg-black border-2 border-black overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]"
onClick={handleProductClick}
>
{/* Contenitore Immagine: gestisce l'aspect ratio e l'effetto hover sulle immagini */}
<div className="relative aspect-square overflow-hidden bg-gray-200 border-b-2 border-black">
<img
src={coverUrl}
alt={product.name}
className="w-full h-full object-cover transition-all duration-500 grayscale group-hover:grayscale-0 group-hover:scale-105"
/>
{/* Badge Sconto: calcolo dinamico della percentuale di risparmio */}
{comparePrice > price && (
<div className="absolute top-0 right-0 bg-yellow-400 text-black text-xs font-black px-4 py-2 border-l-2 border-b-2 border-black z-10 rotate-0 group-hover:bg-red-500 group-hover:text-white transition-colors">
-{Math.round(((comparePrice - price) / comparePrice) * 100)}%
</div>
)}
</div>
{/* Dettagli Prodotto: visualizzazione dinamica di nome, categoria e descrizione */}
<div className="p-4 bg-white flex flex-col flex-grow justify-between">
<div>
<div className="flex justify-between items-start mb-2">
<h3 className="text-xl font-black leading-none uppercase italic tracking-tighter w-2/3">
{product.name}
</h3>
<div className="flex flex-col items-end">
<span className="text-[10px] font-bold bg-black text-white px-1 mb-1">
{product.category?.name || "DROP 01"}
</span>
</div>
</div>
<p className="text-[11px] text-gray-500 font-medium line-clamp-2 mb-4">
{product.description || "Limited edition custom piece for the webround.com showcase."}
</p>
</div>
{/* Sezione Prezzi e CTA: mostra il prezzo corrente e l'eventuale prezzo barrato */}
<div className="flex items-end justify-between border-t-2 border-black pt-4 mt-auto">
<div className="flex flex-col">
{comparePrice > price && (
<span className="text-xs text-gray-400 line-through font-bold">
{formatPrice(comparePrice)}
</span>
)}
<span className="text-2xl font-black text-black leading-none">
{formatPrice(price)}
</span>
</div>
{/* Elemento decorativo/CTA con transizione di colore al passaggio del mouse */}
<div className="bg-black text-white p-2 group-hover:bg-yellow-400 group-hover:text-black transition-colors">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="square" strokeLinejoin="miter">
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</div>
</div>
</div>
</div>
);
};
export default ProductCard;
Ora compila il nuovo codice, attendi che sia pronto e accedi al menù degli override dei componenti globali. Accedi alla proprietà "Card Prodotto" e inserisci src/ProductCard.jsx. Recati nello shop e consulta il tuo catalogo: vedrai delle card prodotto complesse e totalmente rinnovate rispetto alle banali card standard di Webround.
Prova a cliccare su un prodotto, vedrai che la navigazione verso la pagina di dettaglio è gestita grazie alle utilities di WR SDK.
Cosa abbiamo visto
- Override dello stile senza ripensare la logica: Siamo riusciti a integrare uno stile molto personalizzato rispetto a quello standard, senza perdere tempo a riprogrammare la navigazione o il recupero dei prodotti.
- WR SDK: Grazie a wr.product, possiamo accedere immediatamente all'n-esimo prodotto disponibile nella pagina, senza preoccuparci di quale parte del catalogo stiamo navigando.
- Accesso ai dati: Con le funzioni wr.shop.selectProduct e wr.shop.selectVariant, riusciamo a impostare i dati corretti per la navigazione. Grazie a questi esempi, puoi anche farti un'idea più chiara di come la prop wr gestisce i dati e le utilities.
Ora che hai visto questi esempi, sei pronto a integrare nuove funzioni!
Prossimi Passi: Siamo proprio curiosi di vedere cosa creerai su Webround, quindi mettiti comodo e integra nuovi componenti React!