Data la presenza di un solo campo variante stò cercando di personalizzazione il pulsante "Agguingi al carrello" mediante x5engine.cart.ui.addToCart. Mi spiego meglio. Devo realizzare una pagina in cui l'utente possa scegliere un maniera rapida la taglia del prodotto da acquistare e una combinazione di massimo tre colori che ne definiranno la lavorazione. Ho creato uno script java che controlla la compilazione dei campi minimi necessari e aggiunto un pulsante che "dovrebbe" aggiungere al carrello l'oggetto selezionato attraverso l'istruzione "x5engine.cart.ui.addToCart('4bv88l1c',1, descrizione );" dove descrizione e il risultato delle selezioni effettuate dal cliente (esempio taglia-m - colore-verde,colore-giallo).

Pur avendo definito le varianti per il prodotto nel carrello Ecommerce quando aggiungo al carrello viene sempre selezionata la prima variante esistente. Il problema come immaginate è che non utilizzando questa soluzione l'utente si troverebbe a dover selezionare la variante tra 4 taglie e per ciascuna le combinazioni dei 12 colori possibili.

Per me andrebbe bene anche che la selezione "taglia e colore" venissero aggiunte alla descrizione del prodotto in manierà però dinamica così che al ricevimento dell'ordine si vedrebbe la risultante della descrizione dell'oggetto nell'ecommerce di EVO10 + la selezione fatta di volta in volta dall'utente.

Vi prego di aiutarmi al più presto :-(

Riporto lo script e il relativo foglio di stile per rendere meglio l'idea e testarlo:

<style>

ul.container

{ margin:0;padding:0;list-style-type: none; }

ul.container li

{ margin:0;padding:0;width:40px; height:30px;  float: left; margin-right: 5px;  font-weight:bold; text-align: center; cursor: hand; cursor: pointer; border: 2px solid #EAEAEA;}

ul.container li.default

{ border: 2px solid #EAEAEA; }

ul.container li.selezionato

{ border: 2px solid Red; }

/*ul.container li:hover { border: 2px solid #CCCCCC; }*/

.verde

{ background-color: Green; }

.rosso

{ background-color: Red; }

.giallo

{ background-color: Yellow; }

.bianco

{ background-color: White; }

.nero

{ background-color: Black; }

input[type=text]

{ width: 300px; }

</style>

<h3>Taglia</h3>

<ulclass="container"id="container-taglie">

<liid="taglia-s">S</li>

<liid="taglia-m">M</li>

<liid="taglia-l">L</li>

<liid="taglia-xl">XL</li>

<liid="taglia-xxl">XXL</li>

</ul>

<brclear=all>

<p>Hai selezionato:<spanid="taglia-selezionata"></span></p>

<brclear=all>

<hr>

<h3>Seleziona i colori della lavorazione (Max.3)</h3>

<ulclass="container"id="container-colori">

<liclass="rosso"id="colore-rosso"></li>

<liclass="verde"id="colore-verde"></li>

<liclass="giallo"id="colore-giallo"></li>

<liclass="bianco"id="colore-bianco"></li>

<liclass="nero"id="colore-nero"></li>

</ul>

<brclear=all>

<p>Hai selezionato:<spanid="colori-selezionati"></span></p>

<hr>

<p><inputtype="submit"id="aggiungi-carrello"value="aggiungi al carrello"></p>

<formid="form-dati">

<inputautocomplete="off"type="text"name="taglia"value="">

<br>

<inputautocomplete="off"type="text"name="colori"value="">

</form>

<script>

$( document ).ready(function() {

    $( "ul#container-taglie li" ).click(function() {

    var $taglia = $(this);

    $('#container-taglie li').removeClass("selezionato")

    $taglia.addClass("selezionato");

    $('#taglia-selezionata').text( $taglia.attr("id") )

    $('#form-dati input[name=taglia]').val( $taglia.attr("id") )

    });

    $( "ul#container-colori li" ).click(function() {

    var $colore = $(this);

    var $coloriSelezionati = $('ul#container-colori li.selezionato');

    var nColori = $coloriSelezionati.length;

    if ( $colore.hasClass('selezionato') == true ) {

    $colore.removeClass("selezionato")

    } else {

    if ( nColori

< 3) {

    $colore.addClass("selezionato");

    } else {

    alert("Puoi selezionare al massimo 3 colori")

    }

    }

var listaColori = $('ul#container-colori li.selezionato').map(function() { //lista delle rate

return $(this).attr("id");

}).get().join(',');

    var nColoriTotali = $('ul#container-colori li.selezionato').length;

    $('#colori-selezionati').text( listaColori + ' (' + nColoriTotali + ')')

    $('#form-dati input[name=colori]').val( listaColori )

    });

    $('#aggiungi-carrello').click(function(e){

    taglia = $('#form-dati input[name=taglia]').val();

    colori = $('#form-dati input[name=colori]').val();

    if ( taglia.length && colori.length ) {

    descrizione = taglia + ' - ' + colori;

    x5engine.cart.ui.addToCart('4bv88l1c',1, descrizione );

    e.preventDefault()

    } else {

    alert("Selezionare una taglia e almeno un colore")

    }

    })

});

</script

>