Integrazione ShopEngine con Gutenberg per WooCommerce Store

Pubblicato: 2022-04-05

Finalmente l'attesa è finita! ShopEngine è ora compatibile con il tuo editor di blocchi Gutenberg . In precedenza, potevi accedere ai widget ShopEngine solo tramite la finestra di Elementor, giusto?

Ma ora ShopEngine è disponibile anche oltre. Oltre ad accedere ai widget ShopEngine tramite Elementor, puoi utilizzare ShopEngine in Gutenberg per il negozio WooCommerce . Tuttavia, in Gutenberg, questi widget verranno visualizzati come blocchi.

In effetti, le funzioni dei widget Elementor e dei blocchi Gutenberg sono identiche. Allora, dov'è la differenza? La differenza sta nell'applicazione. Per i widget Elementor, dovevi trascinare e rilasciare i widget nelle aree designate per visualizzare l'output. Ma per i blocchi Gutenberg, devi semplicemente fare clic sui blocchi e il tuo lavoro è fatto.

I contenuti si nascondono
1 Una panoramica di Gutenberg:
2 Perché integrare ShopEngine con Gutenberg:
3 Alcuni dei notevoli blocchi ShopEngine di Gutenberg:
3.1 Titolo del prodotto:
3.2 Elenco prodotti:
3.3 Descrizione del prodotto:
3.4 Pagamento alla cassa:
3.5 Archivia i prodotti:
3.6 Tabella del carrello:
3.7 Prodotti visti di recente:
4 Chiusura:

Una panoramica di Gutenberg:

Come utente di WordPress, devi avere familiarità con il termine Gutenberg . È un editor di contenuti di WordPress, altrimenti noto come editor di blocchi di WordPress. Al giorno d'oggi, Gutenberg è l'editor di WordPress più popolare tra gli utenti di WordPress grazie alla sua facilità d'uso. Molti plugin di WordPress Gutenberg sono disponibili anche da sviluppatori di terze parti.

In precedenza, le persone erano più abituate a utilizzare "Classic Editor", un altro editor di WordPress. Dall'avvento di Gutenberg, le persone hanno abbracciato maggiormente l'editor di blocchi rispetto all'editor classico. La specialità di Gutenberg è il suo contenuto basato su blocchi .

Non importa se si tratta di un paragrafo, un'immagine o un pulsante, ciascuno di questi elementi è un blocco. A differenza dell'editor classico, questo editor di contenuti basato su blocchi ti consente di manipolare i tuoi contenuti con un maggiore controllo. La parte migliore di questo editor di blocchi è che consente agli sviluppatori di terze parti di incorporare blocchi personalizzati.

E questo è esattamente ciò su cui ci concentreremo in questo blog informativo poiché d'ora in poi, un mucchio di funzionalità di ShopEngine sarà a tua disposizione in Gutenberg per WooCommerce. Prima di dilungarci sui blocchi personalizzati di ShopEngine in Gutenberg, lasciami fare luce sul motivo per cui abbiamo integrato ShopEngine con Gutenberg per WooCommerce .

Perché integrare ShopEngine con Gutenberg:

ShopEngine è stato inizialmente progettato esclusivamente per Elementor. Ciò significa che puoi creare le tue pagine WooCommerce solo per Elementor. Ma ora, come ho detto prima, ShopEngine ha fatto un passo avanti dopo essere stato integrato con Gutenberg.

Integrazione di ShopEngine Gutenberg

Allora, cosa ci ha fatto integrare ShopEngine con Gutenberg per WooCommerce ? Per rispondere a questa domanda, lascia che ti presenti alcuni dati-

Secondo gutenstats.blog, Gutenberg ha ricevuto 76 milioni di installazioni attive fino ad ora. Inoltre, 264,5 milioni di post scritti con Gutenberg fino ad oggi.

Ritengo che questi dati siano sufficienti per convincere chiunque del motivo per cui abbiamo ampliato la gamma di ShopEngine a Gutenberg. Milioni di persone stanno implementando Gutenberg per sviluppare i propri contenuti e non vogliamo che si perdano le avvincenti funzionalità offerte da ShopEngine.

Alcuni altri motivi per l'integrazione di ShopEngine con Gutenberg:

Vorrei sottolineare un punto che Gutenberg non è solo un editor di contenuti . Il progetto Gutenberg mira a trasformare l'editor di blocchi in uno strumento di editing completo del sito nel prossimo futuro.

L'idea è di farti progettare al 100% il tuo sito WooCommerce con l'editor Gutenberg. Se ciò accade, è probabile che la domanda di Gutenberg salga alle stelle. Quindi, vale la pena integrare ShopEngine con Gutenberg per WooCommerce, giusto?

  • Con Gutenberg, non è necessario utilizzare codici brevi per incorporare contenuti. Invece, puoi distribuire i blocchi per aggiungere gli elementi di pagina necessari.
  • Gutenberg è privo di problemi di compatibilità, quindi gli sviluppatori possono facilmente incorporare il supporto Gutenberg nei loro plugin.
  • Gutenberg emette un codice leggero ed è anche uno strumento di caricamento rapido.
Vai al download di ShopEngine

Alcuni dei notevoli blocchi ShopEngine a Gutenberg:

Prima di far luce sui blocchi di ShopEngine, vorrei chiarire che ShopEngine viene fornito con oltre 65 widget , oltre 13 moduli e una miriade di modelli per le pagine del negozio WooCommerce rivolte agli utenti di Elementor. Dopo l'integrazione di ShopEngine con Gutenberg per WooCommerce, ora puoi accedere a oltre 45 blocchi ShopEngine in Gutenberg .

Blocchi ShopEngine a Gutenberg

A seconda del tipo di pagina che selezioni per creare un modello per il tuo negozio WooCommerce, i blocchi di Gutenberg verranno visualizzati di conseguenza. Inoltre, avrai accesso a moduli come Quick View, Variation Swatches, Product Comparison e Wishlist .

Diamo un'occhiata ad alcuni dei blocchi ShopEngine in Gutenberg per il negozio WooCommerce-

Titolo del prodotto:

Il cartiglio del prodotto viene visualizzato su una singola pagina per un prodotto specifico. Dopo aver selezionato il tipo di pagina singola per creare il tuo modello, devi solo fare clic sul cartiglio del prodotto dalla barra laterale.

Subito dopo, il titolo del tuo prodotto apparirà sulla pagina. Dalla barra laterale destra, puoi modificare il tag del titolo, l'allineamento, il colore e la tipografia.

Elenco prodotti:

L'elenco dei prodotti mostra tutti i tipi di prodotti che vendi nel tuo negozio WooCommerce. Il blocco dell'elenco dei prodotti viene visualizzato in tutti i tipi di pagine, comprese le pagine singole, negozio, checkout e carrello. Dopo aver selezionato il tipo di pagina, fai clic sull'elenco dei prodotti dal popup o dalla barra laterale.

Assicurati di selezionare la categoria di prodotto in modo che i prodotti vengano visualizzati. Dalla barra laterale di destra, puoi selezionare e personalizzare diversi elementi dell'elenco dei prodotti. Puoi selezionare il numero di prodotti per pagina, tag, mostra/nascondi badge di vendita, percentuale di sconto, ecc.

Descrizione del prodotto:

Se crei un modello di pagina singola, il blocco della descrizione del prodotto verrà visualizzato nella barra laterale. Per visualizzare la descrizione del prodotto sulla tua pagina, fai clic sul blocco della descrizione del prodotto. Puoi personalizzare la descrizione e anche stilizzarla modificando tipografia, colore, allineamento, ecc.

Pagamento alla cassa:

Come il widget Pagamento alla cassa in Elementor, il blocco Pagamento alla cassa funziona in Gutenberg. Puoi visualizzare il blocco "Pagamento alla cassa" se vai sul modello di creazione per la tua pagina di pagamento. Successivamente, puoi aggiungere il blocco di pagamento del checkout di cui hai bisogno per il tuo negozio WooCommerce.

Avrai le opzioni per modificare lo stile del contenuto, i metodi di pagamento, il pulsante, ecc. Puoi modificare la posizione della casella di controllo, il colore del pulsante, la tipografia, il bordo, ecc.

Archivi prodotti:

La pagina dei prodotti archiviati contiene tutti i prodotti pubblicati in un unico posto. Per creare un modello per la pagina di archivio in Gutenberg per WooCommerce, vai alla barra laterale sinistra e fai clic sul blocco Prodotti di archivio . Tutti i prodotti dell'inventario verranno visualizzati uno dopo l'altro.

La pagina dei prodotti dell'archivio vanta numerosi segmenti tra cui layout, contenuto, impaginazione, valutazione, ecc. La pagina contiene molti elementi come il titolo del prodotto, l'immagine del prodotto, il prezzo del prodotto, la descrizione del prodotto, il piè di pagina del prodotto e così via.

Tabella del carrello:

Nella tabella del carrello, vengono visualizzati tutti i dettagli dei prodotti selezionati, inclusi il nome dei prodotti, il prezzo, la quantità, il totale parziale e l'importo totale. Con il blocco Cart Table di ShopEngine, puoi mostrare ai tuoi acquirenti tutte le informazioni relative ai tuoi prodotti attraverso una tabella del carrello nella pagina del carrello di WooCommerce.

Per personalizzare il contenuto e stilizzare diversi elementi della tabella del carrello, otterrai i parametri nella barra laterale destra. Puoi modificare i colori dell'intestazione e del piè di pagina del prodotto, il colore del bordo, il colore del testo e personalizzare le sezioni dei contenuti tra cui titolo, prezzo, quantità, totale, ecc.

Prodotti visionati recentemente:

Con il blocco Prodotti visualizzati di recente di ShopEngine, puoi mostrare i prodotti che i tuoi utenti hanno recentemente sfogliato o visualizzato nel tuo negozio WooCommerce. Puoi visualizzare i prodotti visualizzati di recente nella pagina del negozio, nella pagina del prodotto, nella pagina del carrello, ecc.

Come gli altri blocchi, puoi notare i parametri relativi ai prodotti visti di recente nella barra laterale di destra. Sfruttando i parametri, puoi specificare il numero di prodotti da visualizzare, mostrare/nascondere i badge di vendita, impostare lo spazio tra colonne e righe, regolare l'altezza delle immagini dei prodotti, ecc.

In chiusura:

Allora, qual è la tua opinione sulla nostra mossa per integrare ShopEngine con Gutenberg per WooCommerce ? Facci sapere della tua esperienza nell'implementazione di blocchi ShopEngine nel negozio Gutenberg per WooCommerce.

Sei il benvenuto a fornire qualsiasi feedback positivo o negativo sull'integrazione di Gutenberg per WooCommerce. Apprezzeremmo anche ricevere suggerimenti da te per semplificare il nostro processo di integrazione. Tuttavia, i nostri lavori sull'integrazione di ShopEngine con Gutenberg sono ancora in corso. A breve termineremo il progetto.

Prendi ShopEngine ora

Vuoi sapere come realizzare un sito e-commerce con ShopEngine? Vai al blog facendo clic sul link qui sotto-

Come costruire un sito di e-commerce con ShopEngine?