E-commerce: Rendere le varianti prodotto obbligatorie (Script extra?) 
Author: Stefano L.Capita spesso che i clienti effettuano gli ordini nell'e-commerce e si dimenticano di selezionare la variante o le varianti? Ci vorrebbe uno script extra per risolvere questo, in attesa che la funzione sarà implementata direttamente in WS, sempre che la Staff sia intenzionato a farlo)...
Intanto, in attesa di uno script Extra da parte di Kol... ecco il link della pagina dove sono contanuti i cataloghi dei prodotti.
Questa è una pagina tipo cartsearch, che contiene un catalogo prodotti, e tramite il menù all'interno della pagina si naviga in altre pagine contenenti ulteriori cataloghi prodotti. NOTA: non ho utilizzato la pagina di default cartsearch per il motivo che non si potevano nascondere i prodotti (con il tuo codice extra capitava spesso che gli utenti in quache modo riuscivano ad ordinare prodotti nascosti) e altri motivi legati ai filtri/categorie)
Sarebbe ideale avere il controllo della variante (se è stata selezionata ok, se non è selazionata: ALERT!) nella pagina di riepilogo del carrello "cart/index.html". Il problema è che, nel mio caso, come prima variante pre selezionata ho interito "Selezionare opzione" o "Selezionare larghezza BRP" per evitare che gli utenti sbadatamente lasciassero la prima variante senza farci caso e quindi prevenire l'ordine di una variante proposta involontariamente di default (capitava spesso!). Forse la soluzione migliore sarebbe avere il controllo individuale per determinati articoli dove impostare se la variante sia veramente obbligatoria.
Mi spiego con questo esempio:
1. IN QUESTO ARTICOLO LE VARIANTI DEVONO ESSERE SELEZIONATE OBBLIGATORIAMENTE ENTRAMBE:
2. IN QUESTO ARTICOLO LA VERIFICA DELLA VARIANTE NON DEVE ESSERE ESEGUITA, se l'utente non seleziona la variante significa che non la vuole acquistare.
Quindi il controllo sarebbe:
Se il campo contiene "Selezionare opzione" -> NESSUN ALERT/ VERIFICA,
3. ULTIMO PUNTO, IN QUESTO CASO CI VORREBBE LA VERIFICA DELLA VARIANTE ESCLUSA QUELLA "Selezionare larghezza BRP": L'utente deve selezionare obbligatoriamente una variante ma non può selezionare "Selezionare larghezza BRP".
Quindi il controllo sarebbe:
Se il campo contiene "Selezionare larghezza BRP" -> ALERT (selezionare variante),
Se il campo non contiene "Selezionare larghezza BRP" -> NESSUN ALERT/VERIFICA
Resto in attesa di eventuali chiarimenti per strutturare l'ipotesi più semplice ed applicabile...
ciao, … purtroppo il tuo caso per come lo hai esposto è più complesso, con più condizioni e variabili multiple, ...non come quelli comunemente da me trattati, occorrerebbe una progettazione molto più articolata e complessa con molte condizioni da controllare...
… il mio codice invece si basa sulla presenza o meno di un mono-select in un qualsiasi prodotto, condizionando l'avanzamento ad una selezione…
… quindi il mio codice, diventa inadeguato per il tuo attuale carrello…
… comunque è innocuo e lo puoi provare lo stesso per valutarne la potenza anche se limitata ad un select con i prodotti che lo prevedono, con un solo click copia/incolla:
<script>
/** -- select condizionato esclusivo x WSx5 by KolAsim -- **/
$(document).ready(function () {/*K>*/
const objectK = 'div[slot="contents"]';
if ($(objectK+':visible').length > 0) {/*K1>*/ $(objectK).each(function () {/*K2>*/ const $object_K = $(this); const $selectK = $object_K.find('select'); const $aggiungiK = $object_K.find('button:contains("Aggiungi")'); if (!$aggiungiK.parent().hasClass('fake-add-wrapper')) {/*K3>*/ $aggiungiK.wrap('<div class="fake-add-wrapper im-cc-products-button" style="display: inline-block; cursor: pointer;"></div>'); }/*K3<<*/ const div_customK = $aggiungiK.parent('.fake-add-wrapper'); $aggiungiK.css('pointer-events', 'none'); function isValidSelection() {/*K4>*/ if ($selectK.length === 0) return true; /*>|<<*/ const selectedText = $selectK.find('option:selected').text().toLowerCase(); return !selectedText.includes("selezionare"); }/*K4<<*/ $(div_customK).on('click', function (e) {/*K5>*/ if (!isValidSelection()) {/*K6>*/ e.preventDefault(); alert("Per questo prodotto è richiesta\nla selezione di una variante V"); $(this).parent().parent().find(".im-cc-products-options").css("border","solid 2px red"); } else { $(this).parent().parent().find(".im-cc-products-options").css("border","0"); $aggiungiK[0].click(); }/*K6<<*/ });/*K5<<*/ });/*K2<<*/ }/*K1<<*/ });/*K<<*/
</script>
.
ciao
.
Author
Ho risolto il mio problema rielaborando il tuo script con l'aiuto di chat gpt e devo dire che funziona alla grande. Ci son volute un po' di ore di lavoro ma sei stato di grande aiuto come sempre!!!! GRAZIE!!!!!!!
... OK ... mi fa piacere...
... anche AI una volta conosciuta la mia chiave "unica" può raggiungere lo scopo...
.
ciao
.
Author
Si, gli ho dato in pasto la tua chiave per iniziare e "aveva già capito tutto"... poi tra il capire e raggiungere il risultato finale c'è stato in mezzo un bel po' di lavoro
... sì. posso pensarlo, ma secondo me sarebbe bastato duplicare il controllo per il secondo select, poco impegnativo, invece forse(!) e penso sì più problematico, perchè non l'ho affrontato avendo usato il mio codice originale già pronto così com'è, sarebbe stato il condizionamento del prodotto con select facoltativo, che invece tu sei riuscito ad applicare anche se ti ha impegnato, l'importante è che AI sia stato istruito con criterio...
... pensa, non ho mai usato AI fin quando da un paio di mesi non mi son venuto a trovare con miei codici clonati da alcuni con AI e che non funzionavano più a cui ho dovuto porvi rimedio...
ciao e buona continuazione
.
... visto che ero in ballo. ... per curiosità mi domando, ...e se la prima voce del select è già in campo, selezionata, ...forse non basterebbe un semplice testo di avviso magari in rosso [controllare la variante più adatta], senza così dover ricorrere al codice EXTRA...?...
...!... non selezionando si attiverebbero le varianti per default, altrimenti quelle selezionate...!...
.
Author
Il problema è che lasciando una variante di default già selezionata, è capitato che l'utente non ci facesse caso e prendeva per buona quella, così una volta spedita la merce si rendeva conto che era quella che non voleva, quindi resi, altri ordine ecc.... Oltre tutto se noti, ho discriminato le varianti obbligatorie con ">" all'inizio nella prima variante che fa notre all'utente che deve essere selezionato qualcosa MA ci sono prodotti dove la variante la può lasciare senza selezionare niente (quindi non c'è ">"). Poi altra cosa: i miei articoli si possono aggiungere direttamente al carrello da altre pagine e non dal catalogo, quindi questi vengono aggiunti direttamente nel carrello senza variante selezionata, per questo motivo ho aggiunto anche la verifica delle varianti nel riepilogo del carrello in modo che prima di procedere con gli step dell'ordine c'è un ulteriore controllo. Ora il campo delle varianti si colora col bordo rosso se non è selezioanta la variante. vedi tutto nel sito ufficiale (senza TEST-AREA). Oltre a questo è stato aggiunto anche l'alert in inglese nel caso non fosse selezionata la lingua italiana nel traduttore automatico...
... grazie per i chiarimenti, e direi ottimo il risultato che hai ottenuto...
.
ciao
.