Hulp nodig bij "gekoppelde" keuzelijsten voor webshop

Status
Niet open voor verdere reacties.
P

PietensA

Gebruiker
Lid geworden
12 jul 2015
Berichten
10
Hallo,

Ik ben voor mijn webshop (putolineshop.com) bezig met een optie om een smeeradvies te kunnen geven. Hiervoor moet ik met HTML werken, maar ik heb dit nog nooit eerder gedaan. Hoewel dit misschien dus lastig kan gaan worden is doen denk ik wel de beste manier om het te leren.

Het idee is dat je door eerst in een keuzelijst te kiezen wat voor merk motor je hebt, dan het model en vervolgens nog het type te zien krijgt welke olie er in jouw motor moet met een link waardoor je gelijk naar dat product toe kan.

Wat ik hier dus voor nodig heb zijn "gekoppelde" keuzelijsten (misschien verwoord ik dat wel helemaal verkeerd). Stel je bent op zoek naar de juiste olie voor de Honda CBR 500R. Je moet dan dus in de eerste keuzelijst kiezen voor 'Honda', in de tweede kies je voor 'CBR' en in de laatste kies je voor CBR 500R en dan krijg je als resultaat: Putoline Ester Tech Syntech 4+ 10W-30. Je moet dus in de tweede keuzelijst dus geen modellen van Yamaha zien staan als je al voor Honda hebt gekozen.

Wat ik nu heb is een keuzeformulier waarin je een merk kan kiezen, maar daar wordt vervolgens nog niets meegedaan. Ik wil het eerst voor een paar merken/types doen, om te leren hoe het moet zodat ik daarna het nog wel eens kan doen voor alle motoren.

De code die ik daarvoor heb gebruikt is de onderstaande:

HTML: 
<FORM METHOD="post" ACTION="bestemming">
<BR>
<BR> <SELECT NAME="MERK">
<OPTION style="color: #cccccc;">>Kies uw merk...</OPTION>
<OPTION>BMW</OPTION>
<OPTION>Ducati</OPTION>
<OPTION>Harley-Davidson</OPTION>
<OPTION>Honda</OPTION>
<OPTION>Kawasaki</OPTION>>
<OPTION>Suzuki</OPTION>
<OPTION>Yamaha</OPTION>

Ik heb de opzet van een site en vervolgens gewoon wat merken ingevuld, maar als ik dit in de webshop zet doet hij het wel. Ik weet dus niet precies wat alle stukjes betekenen.

Mijn vraag is dus of iemand mij kan helpen om alle keuzelijsten te maken en te koppelen en kan uitleggen wat elk stukje code doet, zodat ik er zelf ook nog van leer. Als je te weinig informatie hebt om me verder te helpen hoor ik dat ook graag, want dan probeer ik het aan te vullen. Ook als je me niet tot de laatste stap kan helpen, maar me wel op weg kan helpen hoop ik dat je wilt reageren.

De meest logische volgende stap lijkt mij dan ook een keuzelisjt maken voor de modellen en die koppelen aan de merken... Het lijk me goed om bij Honda te beginnen met de modellen: ANF, CBR en MSX. Ik hoop dat iemand me kan helpen, dat zou me enorm helpen.

Groeten,
PietensA
 
Dit is de html:

HTML: 
<select name="merken" id="merken">
<option value="1">Selecteer een item</option>
<option value="2">Honda</option>
<option value="3">test 1</option>
<option value="4">test 2</option>
</select>


<select name="select2" id="select2">
<option value="1">Selecteer een item</option>
<option value="2">ANF</option>
<option value="2">CBR</option>
<option value="2">MSX</option>
<option value="3">test 1.1</option>
<option value="3">test 1.2</option>
<option value="4">test 2.1<option>
</select>

Dit de jquery:
[JS]$("#merken").change(function() {
if($(this).data('options') == undefined){
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
[/JS]


En een jsfiddle: https://jsfiddle.net/umzLy7mq/
 
mastermindzh zei:
En een jsfiddle: https://jsfiddle.net/umzLy7mq/
Klik om te vergroten...

Bedankt voor je reactie! Ik heb nu de HTML iets verder aangepast waardoor de derde keuzelijst (die voor het type) erbij komt. Instellen dat je alleen maar CBR 500R kan kiezen als je bij de tweede lijst hebt gekozen voor CBR krijg ik niet voor elkaar.. Dit moet met die jquery denk ik??

De HTML die ik nu heb:
HTML: 
<select name="merken" id="merken">
<option value="1" style="color: #cccccc;">Kies uw merk...</option>
<option value="2">Honda</option>
<option value="3">Kawasaki</option>
<option value="4">Yamaha</option>
</select>


<select name="select2" id="select2">
<option value="1" style="color: #cccccc;">Kies uw model...</option>
<option value="2" style="color: #cccccc;">Kies uw model...</option>
<option value="2">ANF</option>
<option value="2">CBR</option>
<option value="2">MSX</option>
<option value="3" style="color: #cccccc;">Kies uw model...</option>
<option value="3">KDX</option>
<option value="3">GT 750</option>
<option value="4" style="color: #cccccc;">Kies uw model...</option>
<option value="4">FJ<option>
</select>

<select name="select3" id="select3">
<option value="1" style="color: #cccccc;">Kies uw type...</option>
<option value="2" style="color: #cccccc;">Kies uw type...</option>
<option value="2">CBR 500R</option>
</select>

Aan de JQuery heb ik niets veranderd, omdat ik daar vrijwel niks van snap.

Nieuwe JSFiddle: https://jsfiddle.net/umzLy7mq/12/

Wat er nu bij moet is dat je alleen maar kan kiezen voor een type dat bij een model past en dat je dan op een zoekknop klikt, waardoor je naar de volgende pagina-url gaat: http://www.putolineshop.com/service/honda-cbr-cbr500r in dit specifieke geval. Hij moet dus automatisch een url genereren die deze opmaak heeft: http://www.putolineshop.com/service/merk-model-type

Zou je mij hier verder mee kunnen helpen? Reactie van anderen die het weten is natuurlijk ook welkom.
 
Laatst bewerkt:
Aangezien jsfiddle al de hele dag tegen zit te werken gebruik ik nu codepen:

http://codepen.io/anon/pen/aOGxeo

uitleg
Bij de 2de select box gebruik je nummers in de tientallen als je weer wilt selecteren in de 3rde lijst.
In de eerste lijst selecteer ik honda (nummer 2) en dus alle items die BEGINNEN met een 2 komen in lijst 2.
In de 2de lijst selecteer ik CBR (nummer 22) en dus alle items die EINDIGEN op een 2 komen in lijst 3.
Selecteer ik in de 2de lijst ANF (nummer 21) dan komen alle items die EINDIGEN op een 1 in lijst 3.

nadat alle 3 de vakken zijn ingevuld verschijnd de submit knop en zodra daar op geklikt wordt ga je naar de juiste pagina.


html
HTML: 
<select name="merken" id="merken">
<option value="1" style="color: #cccccc;">Kies uw merk...</option>
<option value="2">Honda</option>
<option value="3">Kawasaki</option>
<option value="4">Yamaha</option>
</select>

<!-- 
    kies uw vakjes hebben 1 cijfer
    Waardes hebben er 2. het eerste is waar ze op filteren bij het eerste vak.
    De 2de is waar het 3rde vak weer op moet filteren.
    
    bijv. 23 betekend dat hij weergegeven wordt als bij #merken value 2 is gekozen
    en dat hij in #type weer op nummer 3 gaat sorteren
-->
<select name="model" id="model">
<option value="1" style="color: #cccccc;">Kies uw model...</option>
<option value="2" style="color: #cccccc;">Kies uw model...</option>
<option value="21">ANF</option>
<option value="22">CBR</option>
<option value="23">MSX</option>
<option value="3" style="color: #cccccc;">Kies uw model...</option>
<option value="31">KDX</option>
<option value="32">GT 750</option>
<option value="4" style="color: #cccccc;">Kies uw model...</option>
<option value="41">FJ<option>
</select>

<select name="type" id="type">
    <option value="1">CBR 500R</option>
    <option value="2">item 2</option>
    <option value="2">item 2.1</option>
    <option value="2">item 2.2</option>
    <option value="3">item 3</option>
</select>


    <input type = "submit" value = "Button" id="btnSubmit">


js

[JS]$("#merken").change(function() {

/* als "kies uw merk" geselecteerd is de rest niet weergeven */
if($(this).val() == 1){
$("#model").hide();
$("#btnSubmit").hide();
$("#type").hide();
}else{
$("#model").show();
}

if($(this).data('options') == undefined){
$(this).data('options',$('#model option').clone());
}
var id = String($(this).val()).charAt(0);
var options = $(this).data('options').filter('[value^=' + id + ']');
$('#model').html(options);
});

$("#model").change(function() {
/* als "kies uw model" geselecteerd is de rest niet weergeven */
/* Kies uw model items moeten altijd 1 cijfer hebben. */
if(String($(this).val()).length > 1){
$("#type").hide();
$("#btnSubmit").show();
$("#type").show();
}else{
$("#type").hide();
$("#btnSubmit").hide();
}

if($(this).data('options') == undefined){
$(this).data('options',$('#type option').clone());
}
var id = String($(this).val()).charAt(1);
var options = $(this).data('options').filter('[value^=' + id + ']');
$('#type').html(options);
});

$(document).ready(function() {
$("#model").hide();
$("#type").hide();
$("#btnSubmit").hide();


$("#btnSubmit").click(function(){
var url = 'http://www.putolineshop.com/service/'+ $( "#merken option:selected" ).text();
url = url +'-'+ $( "#model option:selected" ).text();
url = url +'-'+ $( "#type option:selected" ).text();

/* zelfde venster*/
window.location.href = url;
/*nieuw venster*/
window.open(url)
});
});
[/JS]
 
mastermindzh zei:
Aangezien jsfiddle al de hele dag tegen zit te werken gebruik ik nu codepen:

http://codepen.io/anon/pen/aOGxeo

uitleg
Bij de 2de select box gebruik je nummers in de tientallen als je weer wilt selecteren in de 3rde lijst.
In de eerste lijst selecteer ik honda (nummer 2) en dus alle items die BEGINNEN met een 2 komen in lijst 2.
In de 2de lijst selecteer ik CBR (nummer 22) en dus alle items die EINDIGEN op een 2 komen in lijst 3.
Selecteer ik in de 2de lijst ANF (nummer 21) dan komen alle items die EINDIGEN op een 1 in lijst 3.

nadat alle 3 de vakken zijn ingevuld verschijnd de submit knop en zodra daar op geklikt wordt ga je naar de juiste pagina.


html
HTML: 
<select name="merken" id="merken">
<option value="1" style="color: #cccccc;">Kies uw merk...</option>
<option value="2">Honda</option>
<option value="3">Kawasaki</option>
<option value="4">Yamaha</option>
</select>

<!-- 
    kies uw vakjes hebben 1 cijfer
    Waardes hebben er 2. het eerste is waar ze op filteren bij het eerste vak.
    De 2de is waar het 3rde vak weer op moet filteren.
    
    bijv. 23 betekend dat hij weergegeven wordt als bij #merken value 2 is gekozen
    en dat hij in #type weer op nummer 3 gaat sorteren
-->
<select name="model" id="model">
<option value="1" style="color: #cccccc;">Kies uw model...</option>
<option value="2" style="color: #cccccc;">Kies uw model...</option>
<option value="21">ANF</option>
<option value="22">CBR</option>
<option value="23">MSX</option>
<option value="3" style="color: #cccccc;">Kies uw model...</option>
<option value="31">KDX</option>
<option value="32">GT 750</option>
<option value="4" style="color: #cccccc;">Kies uw model...</option>
<option value="41">FJ<option>
</select>

<select name="type" id="type">
    <option value="1">CBR 500R</option>
    <option value="2">item 2</option>
    <option value="2">item 2.1</option>
    <option value="2">item 2.2</option>
    <option value="3">item 3</option>
</select>


    <input type = "submit" value = "Button" id="btnSubmit">


js

[JS]$("#merken").change(function() {

/* als "kies uw merk" geselecteerd is de rest niet weergeven */
if($(this).val() == 1){
$("#model").hide();
$("#btnSubmit").hide();
$("#type").hide();
}else{
$("#model").show();
}

if($(this).data('options') == undefined){
$(this).data('options',$('#model option').clone());
}
var id = String($(this).val()).charAt(0);
var options = $(this).data('options').filter('[value^=' + id + ']');
$('#model').html(options);
});

$("#model").change(function() {
/* als "kies uw model" geselecteerd is de rest niet weergeven */
/* Kies uw model items moeten altijd 1 cijfer hebben. */
if(String($(this).val()).length > 1){
$("#type").hide();
$("#btnSubmit").show();
$("#type").show();
}else{
$("#type").hide();
$("#btnSubmit").hide();
}

if($(this).data('options') == undefined){
$(this).data('options',$('#type option').clone());
}
var id = String($(this).val()).charAt(1);
var options = $(this).data('options').filter('[value^=' + id + ']');
$('#type').html(options);
});

$(document).ready(function() {
$("#model").hide();
$("#type").hide();
$("#btnSubmit").hide();


$("#btnSubmit").click(function(){
var url = 'http://www.putolineshop.com/service/'+ $( "#merken option:selected" ).text();
url = url +'-'+ $( "#model option:selected" ).text();
url = url +'-'+ $( "#type option:selected" ).text();

/* zelfde venster*/
window.location.href = url;
/*nieuw venster*/
window.open(url)
});
});
[/JS]
Klik om te vergroten...

Dankjewel! Ik snap ongeveer hoe het werkt met die drie lijsten achter elkaar... Maar nu bedenk ik me dat als ik het zo doe, ik misschien wel 2000 pagina's aan moet maken, omdat elk type motor een eigen pagina krijgt. Mijn webshop wordt daardoor heel in de backend heel onoverzichtelijk. Is het ook mogelijk om met een klik op de zoekknop een url te openen waarop een rapport wordt getoond met daarin de links naar de juiste producten? Als voorbeeld heb ik argos genomen http://www.argosdirect.nl/productadvies hoe zij het doen wil ik het ook doen, maar dan met afrolkeuzelijsten ipv die keuzevakken. De pagina waarop dat rapport zou moeten openen is: http://www.putolineshop.com/service/productadvies/ terwijl de drie keuzevakken op de homepage staan, tenzij het veel makkelijker is om beide op dezelfde pagina te hebben dan is dat ook goed genoeg.
 
Veel gegevens opslaan doe je eigenlijk altijd in een database.
Staan de gegevens in een database?
 
Nee dat gaat niet zomaar in excel.
Dat moet met mysql of een andere database omgeving.

Wat je dan kan doen is per motor wel 10 olie's toevoegen.
dan kan je ze op de website ook alle 10 laten zien.


Ik zou me dan maar eens gaan verdiepen in mysql als ik u was.
Als de basis een beetje bekent is dan zie ik hier graag weer een reactie met het volgende:

Alle informatie van producten.

Dus merk model type en dan wat voor olie moet er bij.
Als er verder nog meer nodig is om de juiste informatie te vinden dan dat ook.
Dus ook de "advies" gegevens zoals bij argos.


Als u dan voor 5 producten wat gegevens verzameld kan ik voor u een script maken dat de standaard database opzet. Vanaf daar kunnen we dan weer verder


Als u dat gedaan heeft zet ik voor u de database op (de scripts om deze op te zetten) en zal ik in php een voorbeeld geven hoe we die lijsten kunnen verwezenlijken.
 
mastermindzh zei:
Nee dat gaat niet zomaar in excel.
Dat moet met mysql of een andere database omgeving.

Wat je dan kan doen is per motor wel 10 olie's toevoegen.
dan kan je ze op de website ook alle 10 laten zien.


Ik zou me dan maar eens gaan verdiepen in mysql als ik u was.
Als de basis een beetje bekent is dan zie ik hier graag weer een reactie met het volgende:

Alle informatie van producten.

Dus merk model type en dan wat voor olie moet er bij.
Als er verder nog meer nodig is om de juiste informatie te vinden dan dat ook.
Dus ook de "advies" gegevens zoals bij argos.


Als u dan voor 5 producten wat gegevens verzameld kan ik voor u een script maken dat de standaard database opzet. Vanaf daar kunnen we dan weer verder


Als u dat gedaan heeft zet ik voor u de database op (de scripts om deze op te zetten) en zal ik in php een voorbeeld geven hoe we die lijsten kunnen verwezenlijken.
Klik om te vergroten...

Ik heb geen MySQL, maar wel Access als ik daar de database in maak is dat dan ook goed?
 
MySQL moet op de zelfde locatie draaien als waar de website staat.

Volgens mij onderzoek is dat bij"Byte"
In de kennisbank vond ik vervolgens een artikel hoe je een mysql database kunt opzetten: https://www.byte.nl/kennisbank/item/databases/

Als je dat hebt doorlopen en je bent ingelogd bij phpmyadmin zie je als het goed is aan de linkerkant de nieuw gemaakte database staan.
Als je zo ver bent en je geeft mij de gegevens dan gaan we vanaf dat punt weer verder :)
 
mastermindzh zei:
MySQL moet op de zelfde locatie draaien als waar de website staat.

Volgens mij onderzoek is dat bij"Byte"
In de kennisbank vond ik vervolgens een artikel hoe je een mysql database kunt opzetten: https://www.byte.nl/kennisbank/item/databases/

Als je dat hebt doorlopen en je bent ingelogd bij phpmyadmin zie je als het goed is aan de linkerkant de nieuw gemaakte database staan.
Als je zo ver bent en je geeft mij de gegevens dan gaan we vanaf dat punt weer verder :)
Klik om te vergroten...

Ik heb de webshop via SEOshop. Byte is volgens mij voor Magento en wordpress. Ik kan m'n domeinnaam daarin ook niet vinden. Via www.db4free.net kan ik wel in een phpMyAdmin komen voor MySQL, maar hij gaat wel heel traag..
 
Ahha, de whois geeft aan dat u bij byte zit. Waarschinlijk is SEOshop een tussenpersoon.

U zou eens kunnen navragen bij SEOshop hoe u een mysql database op kunt zetten bij hun :)
 
Dat lijkt me inderdaad het beste ik zal morgen eens bellen.

Edit: Ik heb ze vandaag gebeld, maar het was te druk doordat de klantenservice morgen niet bereikbaar is. Heb dus maar een bericht gestuurd, maar nog geen antwoord ontvangen.. even afwachten dus.
 
Laatst bewerkt:
mastermindzh zei:
Ahha, de whois geeft aan dat u bij byte zit. Waarschinlijk is SEOshop een tussenpersoon.

U zou eens kunnen navragen bij SEOshop hoe u een mysql database op kunt zetten bij hun :)
Klik om te vergroten...

Ik heb net weer met SeoShop gebeld en volgens hen kan ik niet een MySQL database aan de software koppelen. Hoe ik wel een productadvies in de site kon krijgen wist de man aan de telefoon ook niet... Heb jij misschien een idee of er een andere manier is om dit voor elkaar te krijgen?
 
Wat een bedrijf...

Een andere optie heb ik zo ook niet.
Je zou de database ergens anders kunnen opzetten, dat kost alleen wel wat.
 
Wel erg balen dat een database opzetten niet mogelijk is (ook wel opmerkelijk). Ik ga de komende week nadenken over hoe ik dit wel in kan richten, ik kom hier nog op terug.
 
Ik heb wel een idee hoe het kan werken... Namelijk door het met een wordpress website koppelen, maar ik ga eerst alle producten er helemaal goed in zetten voordat ik verder ga.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan