Ricerca 
Autore: Marino C.
Visite 1435,
Followers 3,
Condiviso 0
Vorrei creare una ricerca nel sito come in questo esempio: https://www.nuvolaristore.com/index.php/
Come posso fare?
Postato il
identico no, ma puoi provare ad inserire il campo di Ricerca al fianco del tuo menu...
... la barra in alto grigia, [RICERCA GUIDATA], si può creare semplicemente ed in modo molto simile con l'uso dei livelli...
.
OPPPPSSSSS...
non avevo notato quella grigia....
Autore
KolAsim: Uso dei livelli? Mi puoi aiutare? Come posso cominciare?
... non posso dirti molto perchè sono senza PC e sarebbe lungo e complesso da spiegare anche se in fondo la logica da applicare è semplice, basta sperimentare; ...questo per rimanere in ambito del programma, altrimenti dovresti ricercare in RETE risorse EXTRA, DB+PHP...
... al passo_3 nel MENU inserisci NUOVO LIVELLO per le volte che ti serve, ed in ogni livello inserisci NUOVA PAGINA per le volte che ti serve, ed a queste pagine assegni l'opzione NASCOSTA...
... se noti, nel sito che hai linkato ogni marca e sotto selezioni aprono dei sotto-siti (*), quindi devi ragionare su quella logica, che è la stessa contemplate nella Guida per i siti multi lingue...
... (*) - sotto-siti = progetti separati da esportare in sotto-directory
.
Ciao Marino, se te la cavi un pochino con codice extra potresti fare come ho fatto io per il mio sito web https://www.ilmioproduttoredifiducia.it
Esattamente a quali liste avevi pensato di presentare ?
Autore
Grazie Roberto: è proprio quello che vorrei fare. Ma devo inserire codice aggiuntivo? mi spieghi un po' le basi?
Autore
Non capisco quale sia l'oggetto da inserire per la lista a discesa.
Marino C. sotto trovi il codice che ho utilizzato per creare il form con le liste che ho utilizzato e dalla quale puoi prendere spunto per crearne uno tuo in base alle tue esigenze... prova a vedere se ci capisci qualcosa...
l'oggetto che crea il campo lista è il tag <select> che poi alimenti con il tag <option> per indicare le opzioni che appariranno nella lista...
Il Codice form di Ricerca personalizzato è da inserire nell'oggetto 'Codice HTML'
Lo Script function-provincia-change.js deve essere caricato in HEAD per visualizzare correttamente la lista delle province in base alla regione selezionata con la seguente istruzione...
<script src="../js/function-provincia-change.js"></script>
<!-- Regole dello stile da applicare al form-->
<style>
/* .Classe */
.DivPrincipale {
display:block;
position:relative;
float:left;
background:#78ABCE;
width:100%;
height:auto;
padding:5px;
box-sizing:border-box;
}
/* .Classe */
.DivEsterno {
display: block;
position: relative;
float: left;
background: #78ABCE;
width: 30%;
height: 40px;
padding: 5px 5px;
box-sizing: border-box;
}
/* .Classe */
.DivInterno {
display: block;
position: relative;
float: left;
background: #E7EFF5;
width: 100%;
height: 29px;
box-sizing: border-box;
}
/* #Id */
#DivEsternoRicerca {
width: 10%;
border-radius: 3px;
}
/* #Id */
#DivInternoRicerca {
border-radius: 3px;
}
/* .Classe */
.OggettoSelect {
display: block;
position: relative;
float: left;
background: #E7EFF5;
width: 100%;
height: 29px;
box-sizing: border-box;
border-style: none;
font-family: Tahoma, sans serif;
font-size: 11pt;
font-weight: normal;
font-style: normal;
}
/* .Classe */
.OggettoInput {
display: block;
position: relative;
float: left;
background: #E7EFF5;
width: 100%;
height: 29px;
box-sizing: border-box;
border-style: none;
font-family: Tahoma, sans serif;
font-size: 11pt;
font-weight: normal;
font-style: normal;
}
/* Larghezza dell’area di visualizzazione compresa tra n pixel e n pixel */
@media screen and (min-width: 100px) and (max-width: 480px) {
#DivEsternoRegione {
width: 27%;
}
#DivEsternoProvincia {
width: 27%;
}
#DivEsternoProdotto {
width: 26%;
}
#DivEsternoRicerca {
width: 20%;
}
}
/* Larghezza dell’area di visualizzazione compresa tra n pixel e n pixel */
@media screen and (min-width: 481px) and (max-width: 600px) {
#DivEsternoRegione {
width: 29%;
}
#DivEsternoProvincia {
width: 29%;
}
#DivEsternoProdotto {
width: 29%;
}
#DivEsternoRicerca {
width: 13%;
}
} /* Larghezza dell’area di visualizzazione compresa tra n pixel e n pixel */
@media screen and (min-width: 601px) and (max-width: 720px) {
#DivEsternoRegione {
width: 30%;
}
#DivEsternoProvincia {
width: 30%;
}
#DivEsternoProdotto {
width: 30%;
}
#DivEsternoRicerca {
width: 10%;
}
} /* Larghezza dell’area di visualizzazione compresa tra n pixel e n pixel */
@media screen and (min-width: 721px) and (max-width: 960px) {
#DivEsternoRegione {
width: 30%;
}
#DivEsternoProvincia {
width: 30%;
}
#DivEsternoProdotto {
width: 31%;
}
#DivEsternoRicerca {
width: 9%;
}
}
/* Larghezza dell’area di visualizzazione compresa tra n pixel e n pixel */
@media screen and (min-width: 961px) and (max-width: 1050px) {
#DivEsternoRegione {
width: 31%;
}
#DivEsternoProvincia {
width: 31%;
}
#DivEsternoProdotto {
width: 30%;
}
#DivEsternoRicerca {
width: 8%;
}
}
/* Larghezza dell’area di visualizzazione compresa tra n pixel e n pixel */
@media screen and (min-width: 1051px) and (max-width: 1280px) {
#DivEsternoRegione {
width: 31%;
}
#DivEsternoProvincia {
width: 31%;
}
#DivEsternoProdotto {
width: 32%;
}
#DivEsternoRicerca {
width: 6%;
}
}
/* Larghezza dell’area di visualizzazione superiore a n pixel */
@media screen and (min-width: 1281px) {
#DivEsternoRegione {
width: 32%;
}
#DivEsternoProvincia {
width: 32%;
}
#DivEsternoProdotto {
width: 32%;
}
#DivEsternoRicerca {
width: 4%;
}
}</style>
<!-- Qui inizia il codice per creare il form -->
<div class="DivPrincipale">
<form id="imObjectForm_3" action="/ricerca-produttori-prodotti.php" method="post"> <!-- img id="imObjectForm_3_3_tip" class="imObjectForm_3_tip" src="images/Icona-info-18x18.png" title="" width="20" onmouseover="x5engine.imTip.Show(this, { text: 'Seleziona una Regione oppure una Provincia e/o digita un Prodotto da ricercare', position: 'top' })" alt="Tip" / -->
<!-- Regioni -->
<div class="DivEsterno" id="DivEsternoRegione">
<div class="DivInterno">
<select class="" id="imObjectFormRegione" name="regione" onchange="provinciaChange(this);" style="display:block;position:relative;float:left;background:#E7EFF5;width:100%;height:29px;box-sizing:border-box; border-style:none; font-family:Tahoma, sans serif; font-size:11pt; font-weight:normal; font-style:normal;">
<option value="empty">Regione (Nessuna)</option>
<option value="Abruzzo">Abruzzo</option>
<option value="Basilicata">Basilicata</option>
<option value="Calabria">Calabria</option><option value="Campania">Campania</option>
<option value="Emilia-Romagna">Emilia-Romagna</option>
<option value="Friuli-Venezia Giulia">Friuli-Venezia Giulia</option>
<option value="Lazio">Lazio</option><option value="Liguria">Liguria</option><option value="Lombardia">Lombardia</option>
<option value="Marche">Marche</option><option value="Molise">Molise</option>
<option value="Piemonte">Piemonte</option><option value="Puglia">Puglia</option>
<option value="Sardegna">Sardegna</option><option value="Sicilia">Sicilia</option>
<option value="Toscana">Toscana</option><option value="Trentino-Alto Adige">Trentino-Alto Adige</option>
<option value="Umbria">Umbria</option>
<option value="Valle d'Aosta">Valle d'Aosta</option><option value="Veneto">Veneto</option>
</select>
</div>
</div>
<!-- Province -->
<div class="DivEsterno" id="DivEsternoProvincia">
<div class="DivInterno">
<select class="" id="imObjectFormProvincia" name="provincia" style="display:block;position:relative;float:left;background:#E7EFF5;width:100%;height:29px;box-sizing:border-box; border-style:none; font-family:Tahoma, sans serif; font-size:11pt; font-weight:normal; font-style:normal;">
<option value="Provincia (Nessuna)">Provincia (Nessuna)</option>
<option value="Agrigento - AG">Agrigento - AG</option><option value="Alessandria - AL">Alessandria - AL</option><option value="Ancona - AN">Ancona - AN</option><option value="Aosta - AO">Aosta - AO</option><option value="Arezzo - AR">Arezzo - AR</option><option value="Ascoli Piceno - AP">Ascoli Piceno - AP</option><option value="Asti - AT">Asti - AT</option><option value="Avellino - AV">Avellino - AV</option>
<option value="Bari - BA">Bari - BA</option><option value="Barletta-Andria-Trani - BT">Barletta-Andria-Trani - BT</option><option value="Belluno - BL">Belluno - BL</option><option value="Benevento - BN">Benevento - BN</option><option value="Bergamo - BG">Bergamo - BG</option><option value="Biella - BI">Biella - BI</option><option value="Bologna - BO">Bologna - BO</option><option value="Bolzano - BZ">Bolzano - BZ</option><option value="Brescia - BS">Brescia - BS</option><option value="Brindisi - BR">Brindisi - BR</option>
<option value="Cagliari - CA">Cagliari - CA</option><option value="Caltanissetta - CL">Caltanissetta - CL</option><option value="Campobasso - CB">Campobasso - CB</option><option value="Caserta - CE">Caserta - CE</option><option value="Catania - CT">Catania - CT</option><option value="Catanzaro - CZ">Catanzaro - CZ</option><option value="Chieti - CH">Chieti - CH</option><option value="Como - CO">Como - CO</option><option value="Cosenza - CS">Cosenza - CS</option><option value="Cremona - CR">Cremona - CR</option><option value="Crotone - KR">Crotone - KR</option><option value="Cuneo - CN">Cuneo - CN</option>
<option value="Enna - EN">Enna - EN</option>
<option value="Fermo - FM">Fermo - FM</option><option value="Ferrara - FE">Ferrara - FE</option><option value="Firenze - FI">Firenze - FI</option><option value="Foggia - FG">Foggia - FG</option><option value="Forlì-Cesena - FC">Forlì-Cesena - FC</option><option value="Frosinone - FR">Frosinone - FR</option>
<option value="Genova - GE">Genova - GE</option><option value="Gorizia - GO">Gorizia - GO</option><option value="Grosseto - GR">Grosseto - GR</option>
<option value="Imperia - IM">Imperia - IM</option><option value="Isernia - IS">Isernia - IS</option>
<option value="L'Aquila - AQ">L'Aquila - AQ</option><option value="La Spezia - SP">La Spezia - SP</option><option value="Latina - LT">Latina - LT</option><option value="Lecce - LE">Lecce - LE</option><option value="Lecco - LC">Lecco - LC</option><option value="Livorno - LI">Livorno - LI</option><option value="Lodi - LO">Lodi - LO</option><option value="Lucca - LU">Lucca - LU</option>
<option value="Macerata - MC">Macerata - MC</option><option value="Mantova - MN">Mantova - MN</option><option value="Massa-Carrara - MS">Massa-Carrara - MS</option><option value="Matera - MT">Matera - MT</option><option value="Messina - ME">Messina - ME</option><option value="Milano - MI">Milano - MI</option><option value="Modena - MO">Modena - MO</option><option value="Monza e della Brianza - MB">Monza e della Brianza - MB</option>
<option value="Napoli - NA">Napoli - NA</option><option value="Novara - NO">Novara - NO</option><option value="Nuoro - NU">Nuoro - NU</option>
<option value="Oristano - OR">Oristano - OR</option>
<option value="Padova - PD">Padova - PD</option><option value="Palermo - PA">Palermo - PA</option><option value="Parma - PR">Parma - PR</option><option value="Pavia - PV">Pavia - PV</option><option value="Perugia - PG">Perugia - PG</option><option value="Pesaro e Urbino - PU">Pesaro e Urbino - PU</option><option value="Pescara - PE">Pescara - PE</option><option value="Piacenza - PC">Piacenza - PC</option><option value="Pisa - PI">Pisa - PI</option><option value="Pistoia - PT">Pistoia - PT</option><option value="Pordenone - PN">Pordenone - PN</option><option value="Potenza - PZ">Potenza - PZ</option><option value="Prato - PO">Prato - PO</option>
<option value="Ragusa - RG">Ragusa - RG</option><option value="Ravenna - RA">Ravenna - RA</option><option value="Reggio di Calabria - RC">Reggio di Calabria - RC</option><option value="Reggio nell'Emilia - RE">Reggio nell'Emilia - RE</option><option value="Rieti - RI">Rieti - RI</option><option value="Rimini - RN">Rimini - RN</option><option value="Roma - RM">Roma - RM</option><option value="Rovigo - RO">Rovigo - RO</option>
<option value="Salerno - SA">Salerno - SA</option><option value="Sassari - SS">Sassari - SS</option><option value="Savona - SV">Savona - SV</option><option value="Siena - SI">Siena - SI</option><option value="Siracusa - SR">Siracusa - SR</option><option value="Sondrio - SO">Sondrio - SO</option><option value="Sud Sardegna - SU">Sud Sardegna - SU</option>
<option value="Taranto - TA">Taranto - TA</option><option value="Teramo - TE">Teramo - TE</option><option value="Terni - TR">Terni - TR</option><option value="Torino - TO">Torino - TO</option><option value="Trapani - TP">Trapani - TP</option><option value="Trento - TN">Trento - TN</option><option value="Treviso - TV">Treviso - TV</option><option value="Trieste - TS">Trieste - TS</option>
<option value="Udine - UD">Udine - UD</option>
<option value="Varese - VA">Varese - VA</option><option value="Venezia - VE">Venezia - VE</option><option value="Verbano-Cusio-Ossola - VB">Verbano-Cusio-Ossola - VB</option><option value="Vercelli - VC">Vercelli - VC</option><option value="Verona - VR">Verona - VR</option><option value="Vibo Valentia - VV">Vibo Valentia - VV</option><option value="Vicenza - VI">Vicenza - VI</option><option value="Viterbo - VT">Viterbo - VT</option>
</select>
</div>
</div> <!-- Prodotti -->
<div class="DivEsterno" id="DivEsternoProdotto">
<div class="DivInterno"> <input type="text" class="OggettoInput" id="imObjectFormProdotto" list="lista_prodotti" name="prodotto" autocomplete="on" placeholder="(Prodotto o Categoria)" style="background:#E7EFF5;"/>
<!-- Lista Prodotti Parola Chiave-->
<datalist id="lista_prodotti" style="border:none; border-style:none; height:100%;">
<option>Abamele</option><option>Abbigliamento Calzature</option><option>Abbigliamento Ciabatte</option><option>Abbigliamento Sabot</option><option>Abbigliamento Scarpe</option><option>Abbigliamento sportivo</option><option>Abbigliamento Sportivo Ciclismo</option><option>Abbigliamento Sportivo Triathlon</option><option>Aceto</option><option>Aceto balsamico</option><option>Aceto di vino</option><option>Aglio</option><option>Aglio bianco</option><option>Aglio rosso</option><option>Agricoltura Biodinamica</option><option>Agriturismo</option><option>Agrume</option><option>Allarme</option><option>Allevatore di Asine</option><option>Allevatore di Bovini</option><option>Allevatore di Bufale</option><option>Allevatore di Capponi</option><option>Allevatore di Capre</option><option>Allevatore di Cavalle</option><option>Allevatore di Chiocciole</option><option>Allevatore di Mitili</option><option>Allevatore di Pecore</option><option>Allevatore di Pecore razza Lamon</option><option>Allevatore di Polli</option><option>Allevatore di Storioni</option><option>Allevatore di Suini</option><option>Allevatore di Vacche razza Bruna alpina</option><option>Allevatore di Vacche razza Fassona</option><option>Allevatore di Vacche razza Pezzata rossa</option><option>Allevatore di Vitelli</option><option>Antifurto</option><option>Antifurto Agricolo</option><option>Antifurto da Cantiere</option><option>Antifurto Pannelli solari</option><option>Antifurto Protezione rame</option><option>Apicoltore</option><option>Arancia</option><option>Arancia di Ribera</option><option>Arancia Vaniglia</option><option>Arancia Washington Navel</option><option>Asparagi</option><option>Asparagi bianchi</option><option>Asparagi verdi</option><option>Attrezzo</option><option>Attrezzo per Giardiniere</option><option>Attrezzo Sportivo</option>
<option>Zafferano</option><option>Zucca</option><option>Zucchina</option>
</datalist>
</div>
</div>
<!-- Pulsante Avvia ricerca -->
<div class="DivEsterno" id="DivEsternoRicerca">
<div class="DivInterno" id="DivInternoRicerca">
<!-- input type="submit" value="Avvia ricerca" style="width:100%;height:20px;padding:2px 0px;" onmouseover="x5engine.imTip.Show(this, { text: 'Selezionare una Regione oppure una Provincia, digitare un eventuale Prodotto o Categoria, infine premere \'Avvia ricerca\'', width: 250});"/ -->
<!-- input type="image" src="/images/icona-lente.png" name="clicca" style="padding:2px 0px;" onmouseover="x5engine.imTip.Show(this, { text: 'Selezionare una Regione oppure una Provincia, digita un eventuale Prodotto o Categoria, infine premi sulla icona con la Lente', width: 250});"/ -->
<!-- button type="submit"> <img src="/images/Icona-Lente.png" alt="Immagine di una icona con disegnato una lente di ingrandimento" style="display:inline;"/> </button -->
<input type="image" src="/images/Icona-Lente.png" name="clicca" title="Avvia ricerca" alt="Immagine di una icona con disegnato una lente di ingrandimento" style="padding:2px 0px;"/>
</div>
</div>
</form>
</div><!-- Script per visualizzare correttamente nei Browser NON compatibili la Lista Prodotti Parola Chiave-->
<script src="/appsresources/datalist-polyfill.js" async></script><!-- Script function-provincia-change.js per visualizzare correttamente la lista delle province in base alla regione selezionata. Da inserire in 'Statistiche SEO e Codice' sezione 'Codice' 'Prima della chiusura del tag HEAD' -->
<!-- script src="/appsresources/function-provincia-change.js" async></script -->
... forse ci ho visto male, ma, ad occhio e croce, mi pare che manchino i riferimenti al PHP o DB che sia...
... oppure non servono...!...?...
.
ciao
.
Ciao KolAskim, il riferimento al PHP c'è ed è richiamato in questa istruzione...
<form id="imObjectForm_3" action="/ricerca-produttori-prodotti.php" method="post">
sarà poi nel file richiamato nel mio caso per l'appunto "ricerca-produttori-prodotti.php" che dovrà gestire ciò che viene selezionato per aprire le pagine associate oppure per leggere un database e generare pagine o oggetti che servono... (al momento non ho chiaro cosa voglia fare esattamente Marino).
... allora è quello che ho immaginato (php-db)
, ...manca proprio il cuore, o il motore...!...
ciao
.