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!!!!!!!