Zelf heb ik een orderbutton gemaakt met een quantity plus en min knop.
Op de artikelpagina werkt de button prima echter zodra ik mijn design op de artikellijst pagina wil gebruiken gaat het mis. Nu ben ik erachter gekomen wat het probleem is.
Op de artikellijst pagina worden 30 artikelen getoond, zodra je de eerst button aanklikt op de pagina telt hij 30 erbij. Dit komt omdat de id's het zelfde zijn. Hoe kan ik zorgen dat als ik op de plus en min klik dat hij kijkt naar de quantity die daarbij hoort?
Werken met this en hoe verwerk ik dat in mijn code?
$(document).ready(function(){
//klik element
$('#plus').click(function(){
//maak variabel en pak de value
var quantity_old = $('#quantity').val();
//string pak eerste gatal
if ( parseFloat(quantity_old) >= 1 ) {
//variabel = oude variabel + 1
var quantity_new = parseFloat(quantity_old) + 1;
//value = variabel nieuw
$('#quantity').val(quantity_new);
if (quantity_new > 1){
$("#quantity").fadeIn();
};
};
});//einde klik functie
//klik element
$('#minus').click(function(){
//maak variabel en pak de value
var quantity_old = $('#quantity').val();
//string pak eerste gatal
if ( parseFloat(quantity_old) >= 2 ) {
//variabel = oude variabel - 1
var quantity_new = parseFloat(quantity_old) - 1;
//value = variabel nieuw
$('#quantity').val(quantity_new);
if (quantity_new < 2){
$("#quantity").fadeOut();
};
};
});//einde klik functie
$("#quantity").blur(function(){
if ($("#quantity").val() < 2){
$("#quantity").val("1");
$("#quantity").fadeOut()}
});
}); //einde script
Dit is je probleem: je artikelen hebben geen unieke identificatie (maar maken gebruik van een of ander volgnummer).
Als je aan een uniek product-id kunt refereren heb je dit probleem helemaal niet; het maakt dan immers niet uit op welke pagina dit product staat, of in welke volgorde of positie.
Dat klopt inderdaad. Dat is wat ik in mijn topic al aanga dat de id's het zelfde zijn.
In de onclick staat {$article.nr} dit is een smarty output, deze geeft het artikelid mee.
nu dacht ik dit simpelweg te kunnen realiseren door {$article.nr} in de id te zetten.
Echter jquery pakt de waarde niet van {$article.nr}.
Wat zou ik dan nog kunnen doen? Natuurlijk zou ik een attribuut kunnen maken met het artikelid maar dan weet jquery nog niet om welke element het gaat.
Ik weet verder niets van smarty, maar heb je de documentatie gelezen?
Hier staat:
If you need template tags embedded in a {literal} block, consider using {ldelim}{rdelim} to escape the individual delimiters instead.
Misschien biedt dat soelaas?
Ik zou altijd eerst proberen dit met conventionele middelen op te lossen.
Daarnaast: als alles in een omvattende container zit en/of de opbouw van elementen altijd vast is, kun je prima via jQuery "navigeren" van een button(click) naar het bijbehorende input-veld.
Als je HTML-structuur logisch is opgezet kun je overal bij.
Uhm, en wat is nu het probleem?
Als je voor je buttons ids gebruikt kun je deze niet hergebruiken.
Als je hier classes voor gebruikt kan dit wel (waarom trouwens divs en niet gewoon buttons?).
Je zou hier click events voor kunnen definieren. Vervolgens selecteer je met $(this).parent().parent() je orderbtn block. Plak je hier .find('input') aan vast heb je je inputveld en met .val() kun je de waarde uitlezen / wegschrijven.
EDIT: ook hier zou ik het id uit verwijderen, omdat dit herbruikbaarheid belemmert. Tenzij dat element ook echt maar 1x voorkomt op de pagina.
