[HTML+JAVASCRIPT] elenco di caratteristiche, consigli per abbreviare codice [Archivio]

View Full Version : [HTML+JAVASCRIPT] elenco di caratteristiche, consigli per abbreviare codice

virussino

13-04-2017, 17:56

Ciao a tutti :)
Sto creando una lista di tessuti per abbigliamento in una pagina web. In questa lista ci saranno diverse informazioni:

- Qualità del tessuto
-- morbido (si/no)
-- traspirante (si/no)
--
--
--

- Caratteristiche ecologiche
-- biodegradabile (si/no)
-- biologico (si/no)
--
--
--

- Certificazioni del tessuto
-- gots (si/no)
-- ocs (si/no)
--
--

ecc

Ho circa 15 tessuti da descrivere, per ogni tessuto l'elenco è lo stesso, cambia solo il SI o NO.

Il problema è che queste caratteristiche possono variare, ad esempio potrei aggiungere nel tempo ulteriori certificazioni, ed a quel punto la cosa si complicherebbe perchè dovrei modificare ad uno ad uno i singoli tessuti.

L'idea è quella di utilizzate BOOTSTRAP per creare dei pannelli a scomparsa, piccolo codice di esempio:

<div class="panel-group" id="cotone" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">

<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#cotone" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Qualità del tessuto</a> </h4>
</div>

<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="list-group">

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorisce il ricircolo di aria tra tessuto e pelle."></span>  Traspirante</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assorbe o cede il calore a seconda della temperatura del corpo."></span>  Termoregolatore</li>

</div>
</div>
</div>

Il codice è uguale per tutti i tessuti, l'unica cosa che cambia è questo:

<span class="badge">✔</span>

In pratica utilizzo il badge con il ✔ per assegnare un SI, e lascio vuoto per il no.

Ogni pannello ha il suo ID
<div class="panel-group" id="COTONE" role="tablist" aria-multiselectable="true">

<div class="panel-group" id="LANA" role="tablist" aria-multiselectable="true">

ecc

Qua potete vedere un esempio pratico con due pannelli funzionanti: https://www.vestilanatura.it/test

Chiaramente essendo molti tessuti e molti dati da inserire il codice diventa lunghissimo e molto complicato da gestire in caso di modifiche.

Sapete indicarmi una strada per abbreviare questo codice utilizzando Javascript?

Grazie mille

CODICE COMPLETO PER DUE TESSUTI

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Qualità del tessuto</a> </h4>

</div>

<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="list-group">

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorisce il ricircolo di aria tra tessuto e pelle."></span>  Traspirante</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assorbe o cede il calore a seconda della temperatura del corpo."></span>  Termoregolatore</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Ostacola la nascita dei batteri."></span>  Anti-microbico</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Non lascia passare i liquidi."></span>  Impermeabile</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assorbe prontamente l'umidità."></span>  Igroscopico</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tessuti elastici non hanno bisogno di essere mischiati con ELASTAN."></span>  Elastico</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Brillante, molto liscio, con effetto lucido."></span>  Luminoso</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Soffice, molto piacevole al tatto."></span>  Morbido</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Guardare le etichette interne per consigli su lavaggio e stiratura."></span>  Non restringe/scolora</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tende ad asciugare velocemente dopo il lavaggio."></span>  Asciugatura rapida</li>

</div>

</div>

</div>

<div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Caratteristiche ecologiche</a> </h4>

</div>

<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="list-group">

<li class="list-group-item list-group-item-success"><span class="badge">N</span><a href="https://www.vestilanatura.it/tessuti-naturali-artificiali-sintetici-differenze-blog"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  <b>N</b>aturale - <b>S</b>intetico - <b>A</b>rtificiale</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/abbigliamento-biologico"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Biologico</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Non proviene da semi geneticamente modificati."></span>  No OGM</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Lasciato in natura viene decomposto dai batteri."></span>  Biodegradabile</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="La materia prima utilizzata per la produzione è di origine naturale."></span>  Materia prima naturale</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="La materia prima utilizzata per la produzione proviene da risorse riciclate."></span>  Materia prima riciclata</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="L'estrazione del tessuto avviene tramite processi meccanici."></span>  Estrazione meccanica</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="L'estrazione del tessuto avviene tramite processi chimici con utilizzo di solventi."></span>  Estrazione chimica</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Non utilizza sostanze tossiche durante l'estrazione del tessuto."></span>  DeTox</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="L'estrazione del tessuto avviene con risparmio di acqua e energia."></span>  Risparmio energetico</li>

<li class="list-group-item list-group-item-info"><span class="badge">B</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Valutazione in termini di sostenibilità: A - B - C - D"></span>  <b>Classe di sostenibilità</b></li>

</div>

</div>

</div>

<div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Certificazioni ecosostenibili</a> </h4>

</div>

<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="list-group">

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#GOTS"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Global Organic Textile Standard</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#ORGANICCOTTON"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Organic Content Standard</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#OEKOTEX"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Oeko Tex Standard 100</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#TENCEL"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Tencel ®</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#MODAL"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Modal ®</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#NEWLIFE"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Newlife ™</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#BLUESIGN"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Bluesign ®</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#GRS"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Global Recycle Standard</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#PSV"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Plastica Seconda Vita</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#TIROLWOOL"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  TirolWool</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#REACH"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Reach</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#FWF"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Fair Wear Foundation</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#ANIMALFREE"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Animal Free</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#LAV"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Lega Anti Vivisezione</li>

</div>

</div>

</div>

</div>

<br><br><br><br>

<div class="panel-group" id="cotone" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCotone1"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#cotone" href="#collapseCotone1" aria-expanded="false" aria-controls="collapseCotone1">Qualità del tessuto</a> </h4>

</div>

<div id="collapseCotone1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCotone1"> <div class="list-group">

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorisce il ricircolo di aria tra tessuto e pelle."></span>  Traspirante</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assorbe o cede il calore a seconda della temperatura del corpo."></span>  Termoregolatore</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Ostacola la nascita dei batteri."></span>  Anti-microbico</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Non lascia passare i liquidi."></span>  Impermeabile</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Assorbe prontamente l'umidità."></span>  Igroscopico</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tessuti elastici non hanno bisogno di essere mischiati con ELASTAN."></span>  Elastico</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Brillante, molto liscio, con effetto lucido."></span>  Luminoso</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Soffice, molto piacevole al tatto."></span>  Morbido</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Guardare le etichette interne per consigli su lavaggio e stiratura."></span>  Non restringe/scolora</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tende ad asciugare velocemente dopo il lavaggio."></span>  Asciugatura rapida</li>

</div>

</div>

</div>

<div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCotone2"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#cotone" href="#collapseCotone2" aria-expanded="false" aria-controls="collapseCotone2">Caratteristiche ecologiche</a> </h4>

</div>

<div id="collapseCotone2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCotone2"> <div class="list-group">

<li class="list-group-item list-group-item-success"><span class="badge">N</span><a href="https://www.vestilanatura.it/tessuti-naturali-artificiali-sintetici-differenze-blog"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  <b>N</b>aturale - <b>S</b>intetico - <b>A</b>rtificiale</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/abbigliamento-biologico"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Biologico</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Non proviene da semi geneticamente modificati."></span>  No OGM</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Lasciato in natura viene decomposto dai batteri."></span>  Biodegradabile</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="La materia prima utilizzata per la produzione è di origine naturale."></span>  Materia prima naturale</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="La materia prima utilizzata per la produzione proviene da risorse riciclate."></span>  Materia prima riciclata</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="L'estrazione del tessuto avviene tramite processi meccanici."></span>  Estrazione meccanica</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="L'estrazione del tessuto avviene tramite processi chimici con utilizzo di solventi."></span>  Estrazione chimica</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Non utilizza sostanze tossiche durante l'estrazione del tessuto."></span>  DeTox</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="L'estrazione del tessuto avviene con risparmio di acqua e energia."></span>  Risparmio energetico</li>

<li class="list-group-item list-group-item-info"><span class="badge">B</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="" data-original-title="Valutazione in termini di sostenibilità: A - B - C - D"></span>  <b>Classe di sostenibilità</b></li>

</div>

</div>

</div>

<div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCotone3"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#cotone" href="#collapseCotone3" aria-expanded="false" aria-controls="collapseCotone3">Certificazioni ecosostenibili</a> </h4>

</div>

<div id="collapseCotone3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCotone3"> <div class="list-group">

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#GOTS"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Global Organic Textile Standard</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#ORGANICCOTTON"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Organic Content Standard</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#OEKOTEX"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Oeko Tex Standard 100</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#TENCEL"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Tencel ®</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#MODAL"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Modal ®</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#NEWLIFE"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Newlife ™</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#BLUESIGN"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Bluesign ®</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#GRS"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Global Recycle Standard</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#PSV"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Plastica Seconda Vita</li>

<li class="list-group-item list-group-item-success"><span class="badge"></span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#TIROLWOOL"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  TirolWool</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#REACH"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Reach</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#FWF"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Fair Wear Foundation</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#ANIMALFREE"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Animal Free</li>

<li class="list-group-item list-group-item-success"><span class="badge">✔</span><a href="https://www.vestilanatura.it/eco-certificazioni-abbigliamento#LAV"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>  Lega Anti Vivisezione</li>

</div>

</div>

</div>

</div>

virussino

15-04-2017, 17:11

Allora... sto studiando un pò di Javascript, ma faccio il meccanico di auto quindi ho qualche difficoltà!! :muro:

Comunque ho fatto un passetto avanti:

<script type="text/javascript">
var qualita = new Array("Traspirante","Termoregolatore","Anti-microbico","Impermeabile","Igroscopico","Elastico","Luminoso","Morbido","Non restringe-scolora","Asciugatura rapida");

var tooltip_qualita = new Array("Favorisce il ricircolo di aria tra tessuto e pelle","Assorbe o cede il calore a seconda della temperatura del corpo","Ostacola la nascita dei batteri","Non lascia passare i liquidi","Assorbe prontamente l'umidità","Tessuti elastici non hanno bisogno di essere mischiati con ELASTAN","Brillante, molto liscio, con effetto lucido","Soffice, molto piacevole al tatto","Guardare le etichette interne per consigli su lavaggio e stiratura","Tende ad asciugare velocemente dopo il lavaggio");
</script>

Nella pagina inserisco il codice HTML di BOOTSTRAP per creare i botttoni a scomparsa, in questo modo la pagina rimane abbastanza corta ed il codice javascript viene caricato solo quando clicchi sul bottone per visualizzare le caratteristiche del tessuto (visto che ci sono 20 tessuti nella pagina per me è una buona cosa):

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Qualità del tessuto</a></h4></div>

<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="list-group">

<script type="text/javascript">
for (prop in qualita) {
document.write('<li class="list-group-item list-group-item-success"><span class="badge">✔</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-original-title="'+tooltip_qualita[prop]+'" data-placement="top"></span> '+qualita[prop]+'</li>');
}
</script>

</div>
</div>
</div>

Per ora tutto ok, funziona regolare, ma mette il segno ✔ a tutte le caratteristiche, e questo non va bene.
Adesso creo una nuova variabile per assegnare il SI o NO alla caratteristica:

var qualita_cotone = new Array("✔","✔","","","✔","","","✔","✔","");

E quindi modifico lo script di scrittura in questo modo:

<script type="text/javascript">
for (prop in qualita) {
document.write('<li class="list-group-item list-group-item-success"><span class="badge">'+qualita_cotone[prop]+'</span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-original-title="'+tooltip_qualita[prop]+'" data-placement="top"></span> '+qualita[prop]+'</li>');
}
</script>

Per quanto riguarda i certificati di sostenibilità, non ho bisogno di un TOOLTIP che appare quando metto il mouse sulla glyphicon di Bootstrap, ma ho bisogno di un LINK di collegamento quando ci clicco sopra, in questo modo l'utente può ottenere ulteriori informazioni a riguardo aprendo una nuova pagina web, quindi cambio questo codice utilizzato per le altre informazioni:

<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-original-title="'+tooltip_qualita[prop]+'" data-placement="top"></span>

Con quest'altro codice utilizzato per avere un link di collegamento:

<a href="'+link_certificati[prop]+'"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>

Chiaramente ho creato una variabile link_certificati con tutti in link in sequenza ;)

In sostanza penso di aver abbreviato di parecchio il codice della pagina, perchè le variabili rimangono standard per tutti i tessuti (cotone, lana ecc), e devo modificare solo queste variabili:

var qualita_cotone = new Array("✔","✔","","","✔","","","✔","✔","");
var certificati_cotone = new Array("✔","✔","✔","","","","","","","", "✔", "✔", "✔", "✔");
var caratteristiche_cotone = new Array("✔","✔","✔","","","","","","","", "✔", "✔", "✔", "✔");
ecc

Anche dovendo aggiungere ulteriori informazioni (qualità, certificati e caratteristiche) tutto è più semplice perchè dovrò modificare solo le variabili principali che sono uguali per tutti i tessuti:

var qualita = new Array("Traspirante","Termoregolatore","Anti-microbico","Impermeabile","Igroscopico","Elastico","Luminoso","Morbido","Non restringe-scolora","Asciugatura rapida");

var tooltip_qualita = new Array("Favorisce il ricircolo di aria tra tessuto e pelle","Assorbe o cede il calore a seconda della temperatura del corpo","Ostacola la nascita dei batteri","Non lascia passare i liquidi","Assorbe prontamente l'umidità","Tessuti elastici non hanno bisogno di essere mischiati con ELASTAN","Brillante, molto liscio, con effetto lucido","Soffice, molto piacevole al tatto","Guardare le etichette interne per consigli su lavaggio e stiratura","Tende ad asciugare velocemente dopo il lavaggio");

var caratteristiche = new Array("Naturale - Artificiale - Sintetico","Biologico","No OGM","Biodegradabile","Materia prima naturale","Materia prima riciclata","Estrazione meccanica","Estrazione chimica","DeTox","Risparmio energetico", "Classe di sostenibilità");

var certificati = new Array("Global Organic Textile Standard","Organic Content Standard","Oeko Tex Standard 100","Tencel ®","Modal ®","Newlife ™","Bluesign ®","Global Recycle Standard","Plastica Seconda Vita","TirolWool", "Reach", "Fair Wear Foundation", "Animal Free", "Lega Anti Vivisezione");

var link_certificati = new Array("https://www.vestilanatura.it/eco-certificazioni-abbigliamento#GOTS","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#ORGANICCOTTON","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#OEKOTEX","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#TENCEL","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#MODAL","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#NEWLIFE","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#BLUESIGN","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#GRS","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#PSV","https://www.vestilanatura.it/eco-certificazioni-abbigliamento#TIROLWOOL", "https://www.vestilanatura.it/eco-certificazioni-abbigliamento#REACH", "https://www.vestilanatura.it/eco-certificazioni-abbigliamento#FWF", "https://www.vestilanatura.it/eco-certificazioni-abbigliamento#ANIMALFREE", "https://www.vestilanatura.it/eco-certificazioni-abbigliamento#LAV");

Cosa ne pensate? Avete qualche idea per abbreviare ancora di più il codice? :confused:

Ma soprattutto, se volessi utilizzarlo in altre pagine web, per evitare un copia incolla, come si fa? ^^

Agat

16-04-2017, 01:19

Allora... sto studiando un pò di Javascript, ma faccio il meccanico di auto quindi ho qualche difficoltà!!

Meraviglioso :D

Io andrei di xml, dove si possono fare cose così:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="clothing_items.xslt"?>
<capi>
<capo disponibile="no">
<nome>Cappotto</nome>
<tipo>Imbottito</tipo>
<foto>foto/cappotto_imbottito.jpg</foto>
</capo>
<capo disponibile="si">
<nome>Pantaloni</nome>
<tipo>Jeans</tipo>
<foto>foto/jeans.jpg</foto>
</capo>
</capi>

ma mi fermo qui, googolla un po', magari trovi qualche cosa già fatto

virussino

21-04-2017, 14:45

Meraviglioso :D

Io andrei di xml, dove si possono fare cose così:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="clothing_items.xslt"?>
<capi>
<capo disponibile="no">
<nome>Cappotto</nome>
<tipo>Imbottito</tipo>
<foto>foto/cappotto_imbottito.jpg</foto>
</capo>
<capo disponibile="si">
<nome>Pantaloni</nome>
<tipo>Jeans</tipo>
<foto>foto/jeans.jpg</foto>
</capo>
</capi>

ma mi fermo qui, googolla un po', magari trovi qualche cosa già fatto

Interessante questa soluzione, forse avrei abbreviato di un bel pò il codice! Comunque sono riuscito a farlo funzionare con javascript :)

Adesso ho un altro quesito, magari puoi aiutarmi!

Se vai a questo link https://www.vestilanatura.it/Polo-uomo-argento-ecologica-cotone-biologico-denis

Nei dettagli poco sopra il prezzo trovi queste informazioni:

Tessuto: 100% cotone organico
Dettagli: Made in Turkey, Cotone Bio
Certificati: Gots, OekoTex100, Ocs, Fwf

<table>
<?php foreach ($attribute_groups as $attribute_group) { ?>
<tbody>
<?php foreach ($attribute_group['attribute'] as $attribute) { ?>
<tr>
<td><b><?php echo $attribute['name']; ?>:</b>
<?php echo $attribute['text']; ?></td>
</tr>
<?php } ?>
</tbody>
<?php } ?>
</table>

Dove il codice <?php echo $attribute['text']; ?> corrisponde ai dettagli:
100% cotone organico, Made in Turkey, Cotone Bio, Gots, OekoTex100, Ocs, Fwf

In questa pagina io vorrei inserire una parte delle informazioni del tessuto, quindi vorrei creare uno script del genere:

if ($attribute['text'] = Cotone Bio) { set %variabile cotone }
if ($attribute['text'] = Lana ) { set %variabile lana }
ecc
ecc

A monte della pagina avrei lo script:

<script type="text/javascript">

if (%variabile = cotone) {

var qualita = new Array("✔","✔","","","","","","✔","✔","");

}

if (%variabile = lana) {

var qualita = new Array("","","","","","","","","✔","");

}

</script>

E dove voglio inserire le informazioni metterei:

<script type="text/javascript">
for (prop in qualita) {
document.write('
<li class="list-group-item list-group-item-success">
<span class="badge">'+qualita[prop]+'</span>
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-original-title="'+qualita_tooltip[prop]+'" data-placement="top">
</span> '+qualita[prop]+'</li>');
}
</script>

L'idea c'è, ma mi manca la sintassi corretta di javascript:

if ($attribute['text'] = Cotone Bio) { set %variabile cotone }

Come potrei scrivere questo codice tenendo presente che $attribute['text'] è una variabile in PHP?

virussino

24-04-2017, 15:46

Risolto, ma viene troppo lungo questo codice!!
$attribute['text'] è una variabile che ritorna come il nome del tessuto, quindi può essere Cotone o Bamboo o Lana ecc

- CERCO IL TESTO NELLA VARIABILE:

<?php if (strstr($attribute['text'], 'Cotone')) { ?>

- QUANDO LO TROVA IMPOSTA UN'ALTRA VARIABILE:

<?php $tessuto = 'Cotone'; ?>

- IMPOSTO LE VARIABILI PER JAVASCRIPT:

<script type="text/javascript">
var qualita_tessuto = qualita_cotone
var caratteristiche_tessuto = caratteristiche_cotone
var certificati_tessuto = certificati_cotone
</script>
<?php } ?>

A questo punto succede che io per ogni tessuto devo fare così:

<?php if (strstr($attribute['text'], 'Eucalipto')) { ?>
<?php $tessuto = 'Eucalipto'; ?>
<script type="text/javascript">
var qualita_tessuto = qualita_eucalipto
var caratteristiche_tessuto = caratteristiche_eucalipto
var certificati_tessuto = certificati_eucalipto
</script>
<?php } ?>

<?php if (strstr($attribute['text'], 'Bamboo')) { ?>
<?php $tessuto = 'Bamboo'; ?>
<script type="text/javascript">
var qualita_tessuto = qualita_bamboo
var caratteristiche_tessuto = caratteristiche_bamboo
var certificati_tessuto = certificati_bamboo
</script>
<?php } ?>

ecc ecc

Quello che vorrei fare per abbreviare il codice è una cosa del genere:

- CERCO TUTTI I TESSUTI IN UNA UNICA LINEA:

<?php if (strstr($attribute['text'], 'Bamboo || Cotone || Lana || ecc || ecc')) { ?>

- IMPOSTO LA VARIABILE IN BASE A QUELLO CHE HA TROVATO:

<?php $tessuto = 'QUELLO_CHE_HA_TROVATO'; ?>

come faccio a settare questa variabile in base al testo che ha trovato??

<script type="text/javascript">
var tessuto = $tessuto
var qualita_tessuto = qualita_ + tessuto
var caratteristiche_tessuto = caratteristiche_ + tessuto
var certificati_tessuto = certificati_ + tessuto
</script>
<?php } ?>

virussino

24-04-2017, 17:05

Ho quasi risolto, questo codice va all'interno del ciclo ?php foreach

<?php if (strstr($attribute['text'], 'Cotone')) { ?>
<?php $tessuto = 'cotone'; ?>
<?php } ?>

<?php if (strstr($attribute['text'], 'Bamboo')) { ?>
<?php $tessuto = 'bamboo'; ?>
<?php } ?>

ecc ecc

Cerca il tessuto corrispondente e imposta la variabile $tessuto

Successivamente, alla fine del ciclo ?php foreach, trasferisco le variabili PHP in javascript:

<?php $qualita_tessuto = "qualita_" . $tessuto ; ?>
<?php $caratteristiche_tessuto = "caratteristiche_" . $tessuto ; ?>
<?php $certificati_tessuto = "certificati_" . $tessuto ; ?>
<script type="text/javascript">
var qualita_tessuto = <?php echo($qualita_tessuto);?> ;
var caratteristiche_tessuto = <?php echo($caratteristiche_tessuto);?> ;
var certificati_tessuto = <?php echo($certificati_tessuto);?> ;
</script>

Direi che ho tagliato di parecchio il codice, ma vorrei capire se posso fare di meglio! E' possibile modificare questo codice?

<?php if (strstr($attribute['text'], 'Cotone')) { ?>
<?php $tessuto = 'cotone'; ?>
<?php } ?>

In qualcosa del genere:

<?php if (strstr($attribute['text'], 'Cotone' || ' Bamboo' || 'Lana' || ecc ecc)) { ?>
<?php $tessuto = 'TESSUTO_TROVATO'; ?>
<?php } ?>

Si può fare?