Cart Data View (Plugin) 
Author: Stiac EngineeringBuon salve Community,
sperando di fare una cosa gradita e possibilmente utile ho rispolverato alcuni "esperimenti" di codice back-end per rimpiazzare l'oggetto opzionale "Catalogo Prodotti" che come tutti sappiamo, è rimasto all'età della pietra in fatto di funzionalità e grafica.
Parlando di funzionalità, vi condivido quattro varianti, di questo "oggetto" importabile inserendo il codice all'interno di un oggetto Codice HTML.
L'abbiamo rinominato Cart Data View e per rendere più agevole le modifiche delle logiche di backend è stato suddiviso in 4 micro oggetti.
1. Cart Data View > SKU : Cosente di filtrare e mostrare solo i prodotti inserendo una lista di SKU (link->);
2. Cart Data View > Available Discount : Consente di mostrare tutti e solo i prodotti che sono flaggati nel programma come "In sconto", facendo un controllo in aggiunta per i prodotti che hanno uno sconto temporale, nascondendoli quando lo sconto è terminato (link->).
3. Cart Data View > isNew : Consente di mostrare con 3 modalità differenti e un N (numero) customizzabile, i prodotti che sono flaggati nell'e-commerce come "Novità". Tra le modalità è possibile impostare l'ordinamento in base al prezzo, o l'ordine normale (link->).
4. Cart Data View > isNew [sort-by] : Variante più recente del micro oggetto 3, con una piccola chicca in più, ovvero la possibilità di consentire all'utente la selezione di un N (numero) di prodotti da visualizzare e rispettivamente la lista di ordinamento (link->).
DISCLAIMER: Essendo dei codici non definitivi, testati ma creati tempo fa per dei clienti, non posso garantire che funzionino in ogni progetto senza modifiche al codice. Essendo il codice stato precedentemente realizzato per "lavorare" in pagine dedicate, potrebbe sicuramente non essere possibile usare in simultanea gli script. In caso di necessità o informazioni raccomando l'apertura di un post dedicato.
Author
Se quanto proposto in questo post è utile e di gradimento, lascia un "like" per apprezzamento e feedback, così capire se può essere utile condividere altri spunti in questa community.
Ulteriori codici possono essere presi nel Blog.
+1
Non uso l'ecommerce e quindi non proverò neppure quello che hai allegato... ma il feedback positivo lo meriti a prescindere ...
Author
Grazie per il feedback!
I codici di base funzionano perché li ho controllati prima di caricali online, visto che nella recente versione hanno modificato lievemente l'array.
La sola cosa è che non essendo stile "Plugin Incomedia" non è stato predisposto un ID oggetto, dunque entrano in conflitto se vengono usati tutti e 4 i codici in una singola pagina.
Tempo permettendo vorrei creare una variante per risolvere questo problema e buttare giù due righe nel blog per meglio aiutare l'utenza meno avvezza nei codici.
Wowwwwwwwwwwwwwwwwwwwww!
+1
+1
+100
Non si puo non apprezzare l impegno e la gentile condivisione...
Come scritto giá in altri post, tutti i codici utili al miglioramento del programma (dopo la supervisione di Incomedia) dovrebbero essere inclusi negli aggiornamenti...l azienda senza investimenti (o molto limitati) si prenderebbe il merito di andare incontro alle esigenze degli utenti...
Grazie Gabriele
Author
UPDATE: Ho caricato online i link per procedere con lo scaricamento dei pacchetti zip. Per i meno esperti, nella cartella src c'è il codice da copiare e incollare direttamente nell'oggetto Codice HTML.
Grazie Gabriele, ho scaricato "2. Cart Data View > Available Discount" ma non ho capito se devo copiare tutta la cartella "main" sul server in quale cartella o semplicemente la metto nella root del public_html, poi ho guardato la cartella scr ma c'e' solo un index.html, non ho idea di come o cosa devo copiare per incollarla nel modulo homl.
* HTML
Author
Il file _1_cart-data-view-available-discount.zip ha al suo interno tutti i file usati nella cartella main (così come gli altri zip).
Il primo file index.html è quello generico che contiene l'esempio integrale come mostrato nella preview online (https://www.gebher.com/quick/1ece4e10ee0d).
All'interno della cartella main, come da screen puoi trovare altre cartelle, ovvero cart (con il file JavaSript che simula quello del progetto WebSite X5. Non va importato sul server in quanto logicamente useremo quello che il programma ha già esportato online.
La cartella js invece contiene il file JavaScript (_1_cart-data-view-available-discount.js) che è il cuore di questo plugin. Puoi caricare direttamente il file se desideri usare il codice incluso nella index.html. Tutto è in base alle tue preferenze.
Nella cartella src è presente il invece il codice da copiare è incollare così come lo vedi all'interno dell'oggetto codice HTML, come indicato in precedenza. Se usi questo codice non è necessario includere altri file o caricare le cartelle sul server perché il codice JavaScript è già presente nell'HTML. Basta selezionare tutto il codice e metterlo nell'oggetto.
Per vederlo funzionare anche offline (anteprime del programma) puoi inserire il link del tuo dominio, dove viene indicato:
<scriptsrc="https://www.miodominio.com/cart/x5cart.js"></script>
Io per comodità gestisco i codici direttamente dal server per evitare ad esempio i tempi di esportazione di WebSite X5 o che determinati file vengano sovrascritti ogni volta.
Una volta online vedrai verosimilmente quanto indicato nella preview. Essendo di base solo un codice di backend sarà poi necessario adattare alle proprie necessità l'HTML e inserire del CSS.
Se avete delle idee da proporre per migliorare il frontend sentitevi liberi di contattarmi o esporle qui.
Grazie Gabriele faccio delle prove, poi ti faccio sapere.
Author
Certamente! Mi scuso se ancora non sono riuscito a mettere su un articolo descrittivo e un frontend. Tra l'attività ingegneristica e la digital agency mi tocca praticamente dividermi, un po come fa Naruto.
Ok ho provato ma è giusto che mi appare così? ho provato anche con l'anteprima di edge ed è identico, ti allego screenshot. Fammi sapere, grazie.
Author
Sì è più che normale. Il codice fornito, come ho cercato di spiegare più volte, serve solo a "pescare" i dati dei prodotti e filtrarli tra quelli che hanno degli sconti in modo automatico. Già vedere che ti mostra il testo presumo sia un grande risultato, viste le ore di programmazione e debug che ha richiesto.
La parte visuale che tecnicamente è la più semplice, va ancora realizzata, sia per questioni di tempo che per desiderio di progettarla con maggiore cura.
Puoi prendere da questo esempio la struttura CSS e HTML: https://www.gebher.com/quick/Vb81LgwZuLbj
Ti ho adattato rapidamente JS così da mostrare l'immagine e tutti i componenti basici. Ovviamente dove vedi scritto il dominio https://www.gebher.com ... varialo con il tuo o usa il collegamento relativo (../../) .
Riepilogando, ispeziona l'HTML e preleva tutto il codice che vedi nell'esempio postato. Mettilo in un oggetto codice avanzato e adattalo alle tue necessità. Consiglio di aprire un post dedicato se hai problemi nel personalizzare il CSS o altro!
Spero di essere stato utile
Grazie Gabriele, ho provato a fare come ho capito io, ho aperto il link, ho aperto l'origine della pagina "quella con i due prodotti usando Edge" ho copiato l'intero codice, ho sostituito il dominio con il mio l'ho inserito in un modulo "codice html" ma non mi appare nulla, ho provato anche a inserirlo nella scheda "esperto... dopo averlo eliminato dalla scheda codice html", ma non mi appare nulla sia in anteprima che avendolo pubblicato, forse ho capito male qualche cosa? Comunque grazie e scusa lo sbattimento che ti creo.
Author
Buongiorno e buone festività ragazzi!
Figurati Furio, lo faccio sempre con grande piacere, altrimenti non avrei condiviso questi contenuti con la community.
Mi dispiace non essere riuscito a spiegare meglio la procedura e vorrei poter meglio comprendere come rendere più facile l'uso di questi codici opzionali in modo tale che possano essere più accessibili per tutta l'utenza.
Per tagliare la testa al toro (povero toro), ti allego direttamente il file .iwzip con l'oggetto già pronto per il tuo sito (https://www.gebher.com/sharing.php?get=dI5SwAhxlw6F6aq).
Scaricalo e copia l'oggetto Codice HTML che trovi, nel tuo progetto.
Nel frattempo sono riuscito a tirare fuori una nuova versione aggiornata del Cart Data View > Available Discount inserendo oltre alla grafica, l'indicazione dello sconto. Così è molto più completo (https://gebher.com/quick/35864b377be9).
Per fare un esempio del reale funzionamento:
che sfiga, ho una versione meno recente mi dice che non può aprirlo io ho la versione 2021.3.5... he destino lol.
che sfiga, ho una versione meno recente mi dice che non può aprirlo io ho la versione 2021.3.5... he destino lol.
[/quote]
Ho provato a scaricare la demo dell'ultima versione ma non mi fa importare il progetto, pazienza, se puoi mi mandi un txt con il codice da incollare nell'html, forse è il metodo più semplice lol. Grazie!
[quote="Furio TOZZI"] che sfiga, ho una versione meno recente mi dice che non può aprirlo io ho la versione 2021.3.5... he destino lol. [/quote]
Ho provato a scaricare la demo dell'ultima versione ma non mi fa importare il progetto, pazienza, se puoi mi mandi un txt con il codice da incollare nell'html, forse è il metodo più semplice lol. Grazie!
[/quote]
Sc usa fatto, ho scaricato il file sto testando poi pubblico, grazie Gabriele... Un'abbraccio.
Gabri ho apportato delle modifiche e sembra funzionare bene, la % ho dovuta toglierla per i decimali mi dava troppi 0. per l'impostazione dell'ora giornaliera bisogna fare dalle 23,59 di oggi alle 23,59 di domani se metto dalle 00:00 alle 23:59 non piglia il prodotto anche se è in sconto, comunque va bene ho gia' pubbilcato e sembra funzionare, vediamo poi imposto altri sconti per il giorno successivo e vediamo se il tutto funza, grazie di cuore. ti faro' sapere.
LOL anziche fare le offerte di oggi faccio le offerte di domani ;-)
Ho provato questa mattina sembra che funzioni, devo solo controllare se la data prende le ore del server o quella Italiana, ho impostato i prodotti da oggi 26 aprile dalle 00:00 al 26 aprile alle 23:59 e i prodotti si vedono, ne ho impostati altri 3 per domani dal 27 aprile dalle 00:00 al 27 aprile alle 23:59, vediamo a che ora cambiano. Grazie ancora :-)
Author
Sono felice che tu sia ricucito a farlo funzionare!
Sicuramente può essere migliorato e spero possa rilevarsi utile nel vostro quotidiano. Credo sia un oggetto che potrebbe arricchire in meglio il catalogo di Incomedia. Se la community ha altre idee possiamo implementarle insieme, l'unione fa la forza dopotutto.
Javascript viene eseguito lato Client. Lo script utilizza il metodo new Date() che restituisce la data e l'ora corrente del browser del visitatore. Quindi, l'orario dipenderà dal fuso orario del browser del visitatore e non dal server. Se vuoi usare la data del server va creato un nuovo script che si basi su AJAX o Fetch.
Grazie Gabriele, ho apportato un po di modifiche per adattarlo al sito e sta funzionando bene, mi sto dilettando con l'html, per la % di sconto l'ho messa solo che non gli piace il 55% mi da una marea di 0 apparentemente solo con questa percentuale con le altre sembra funzionare. gli ho cambiato carattere ed ho aggiunto lo sfondo rosso ed ho separato il nome dell'articolo dal prezzo con una riga, sto cercando di fare tipo le schede di incomedia, vediamo se riesco. :-)
Author
Ottimo Furio! Se vuoi condividere le tue implementazioni sentiti libero di contattarmi anche per email gabriele.c(@)stiac.it così appena riesco le metto a disposizione di tutti.
Partendo dall'esempio principale, puoi realizzare un oggetto nettamente avanzato, tutto è direttamente proporzionale alla fantasia/necessità come ad esempio lato SEO puoi inserire del JSON-LD per i prodotti in sconto, mostrare un timer etc. Il problema dei codici extra è che nel tempo vanno mantenuti, tuttavia danno al di là di ogni dubbio maggiori soddisfazioni e costano poco o zero come in questo caso.
L'idea finale è quella di creare un articolo dove tutti possono facilmente visualizzare e copiare il codice gratuitamente, come ad esempio in questo post https://www.gebher.com/blog/index.php?redirect-based-on-geolocation per andare oltre i cinque passi, dove i programmatori di Incomedia dormono.
Come ho un secondo di tempo creo il file zip anche per la versione che prende la data dal server (es. https://gebher.com/quick/MYWeN2JNuwPQ), tuttavia per me questo è un mese un po incasinato tra lavoro e studio, e tra le altre cose dal fine settimana sarò nuovamente fuori dall'Italia.
Gabriele, grazie di cuore, ti invio txt con il codice modificato, fammi sapere che ne pensi, un'abbraccio.
Al momento ti mostro il risultato raggiunto.
Author
Buongiorno, devo dire che è venuto molto bene!