Frontend componibili di Shopware

Il toolkit per lo sviluppo avanzato e rapido del front-end del negozio

Scopri il nostro SDK all’avanguardia per la creazione di interfacce utente personalizzate. Trasforma il tuo modo di lavorare e crea esperienze di acquisto senza pari con la suite di strumenti più avanzata.

Contattaci

Headless

Libera il tuo frontend dal backend. Iterare e innovare più rapidamente. Definisci uno stack frontend completamente personalizzato in base alle tue specifiche esigenze aziendali.

Composable

Rinnovate l’esperienza d’acquisto senza reinventare la ruota. Utilizzate funzionalità collaudate per comporre le varie parti del vostro negozio online proprio dove ne avete bisogno.

Compatibile con il cloud

Semplifica tutto. Lascia che sia Shopware a occuparsi dell'hosting, degli aggiornamenti software automatici e della manutenzione, così potrai concentrarti sulla crescita della tua attività.

App supportata

Sono supportate tutte le app basate su sistemi di plugin/app che offrono funzionalità tramite l'API. È possibile accedere a queste funzionalità API tramite il client API e i composable di Vue.js.

Semplicità, scala e flessibilità per innovare con creatività

Realizza le tue idee più velocemente. Shopware Composable Frontends offre un set semplice di API JavaScript e componenti Vue.js. Crea i tuoi frontend da zero e mantieni il pieno controllo sul tuo stack tecnologico, senza alcun obbligo di aggiornamento.

Collage with a working team, a developer at the computer, code and symbols for time and documentation. Symbolizes collaboration and software development.

Il manuale ti guiderà passo dopo passo nell'integrazione delle funzionalità di Shopware nel tuo negozio online personalizzato, come la lista dei desideri o il blog. Grazie al client API e ai composables, non dovrai preoccuparti di come funziona il tutto: funziona e basta.

Image shows a product page for ground pepper with an 'Add to cart' button. A code example is overlaid showing the function to add the product to the shopping cart. A notification confirms that the item has been successfully added. A small image of a developer is also visible.

Il client API è una libreria TypeScript indipendente che non dipende nemmeno da Vue.js. Puoi utilizzarla in qualsiasi progetto basato su JavaScript/Node.js. Puoi usarla con React, Svelte o semplicemente con JavaScript vanilla. Parti da zero e inserisci le funzionalità di e-commerce dove preferisci.

Website with summer trends, shows pictures of a girl outdoors and a group of people by the pool. Caption reads 'Fresh ideas for hot summer days'.

Vuoi riutilizzare la nostra implementazione di Shopping Experiences nel tuo frontend personalizzato? Fai pure: il CMS di Shopware è headless. Oppure preferisci usare il tuo CMS headless? Nessun problema: le funzionalità di Composable Frontends sono integrate in modo da consentirti di integrare facilmente il tuo CMS.

A team of developers working on computers. Logos of React, Svelte and Astro are arranged around the central image, symbolizing different web development frameworks.

Frontend: da zero a eroe

Il modo in cui configuri il tuo progetto determina il processo di implementazione. Scegli da dove vuoi iniziare: da zero o con un progetto esistente. Con Shopware Composable Frontends hai tre opzioni:

Image montage shows a developer, code on a screen and a 'Hello World! message. A large, central symbol with the number 1 overlays the elements.

Puoi iniziare con un modello vuoto, ovvero un'applicazione Nuxt.js vuota con le dipendenze di Shopware Composable Frontends già installate. Nuxt.js è un framework "meta" basato su Vue.js che aggiunge funzionalità per il routing e la gestione dei file.

Image montage shows a website, code on a screen and colored UI elements. A large, central symbol with the number 2 overlays the elements.

In alternativa, puoi utilizzare il modello di negozio demo che rappresenta un'implementazione di riferimento. Esso include la maggior parte delle funzionalità di Shopware e ti permette di visualizzare un'anteprima del tuo frontend. Puoi usare il modello di negozio demo come base per il tuo progetto o semplicemente come fonte di ispirazione e punto di riferimento.

Image montage shows a user interface, logos of Astro, React and Svelte, as well as code for installing packages. A large, central symbol with the number 3 overlays the elements.

La terza opzione consiste nel partire da un progetto JavaScript Node.js esistente, includere Composable Frontends come dipendenza JavaScript e installarlo nel proprio progetto. Ad esempio, il modello di avvio Astro utilizza Composable Frontends in un progetto non basato su Vue.js, mettendo in evidenza la versatilità del framework.

Accesso facile e veloce.

Se hai già dimestichezza con Vue.js e sai sviluppare applicazioni in JavaScript, riuscirai a comprendere la nostra documentazione approfondita e a iniziare subito a usare i Composable Frontend. Non sono necessarie conoscenze specifiche su Shopware e c'è ben poco da imparare sull'SDK stesso. Ovviamente, dovrai capire quali composable utilizzare per sviluppare il tuo frontend, ma le nostre guide introduttive ti saranno di aiuto. Non ci sono framework, sintassi complicate o elementi aggiuntivi da conoscere.

Three smiling people at a table, one holding a smartphone, laptop on the table. Scene shows joy and cooperation.

Quando è necessario approfondire le proprie conoscenze?

Se il tuo obiettivo è creare un negozio online completo con i Composable Frontend di Shopware, devi avere esperienza con le complessità di Nuxt.js o del framework che hai scelto. È necessario comprendere come affrontare sfide quali il routing, i dati e lo stato, la cache e qualsiasi altro argomento avanzato.

Close-up of hands typing on a laptop keyboard.

Approfondisci gli aspetti tecnici

Perché abbiamo creato i Composable Frontend? In cosa differiscono esattamente dalle PWA di Shopware? E in quali progetti dovresti utilizzarli? Scoprilo in questa intervista con Niklas Dzösch (Shopware Developer Evangelist) e Dominic Klein (Manager Developer Experience).

"Composable Frontends consente agli sviluppatori di sfruttare le funzionalità di Shopware in stack tecnologici componibili. Siamo consapevoli che l’ecosistema degli sviluppatori frontend è in continua evoluzione e guidato dal miglioramento e dall’innovazione costanti. Ecco perché non imponiamo l’uso di alcuna tecnologia, ma lasciamo a voi la scelta. Allo stesso tempo, forniremo esempi concisi che vi permetteranno di iniziare nel modo giusto. Composable Frontends è il framework a prova di futuro per la creazione di frontend personalizzati con Shopware”.

banner-avatar-dominic-k
Dominic Klein
Manager Developer Experience, shopware AG

Two Shopware employees sit at a table and shake hands while smiling at the camera. The Shopware logo can be seen in the background. A play symbol indicates a video.
Copiato negli appunti