[Laravel] (single) product attributen

[Dane1999]

Dag allen,

Ik ben bezig met ontwikkelen van een online order systeem in Laravel.

De applicatie bestaat uit een frontend gedeelte (zichtbaar voor alle gebruikers) en een manager gedeelte (voor beheerders/administrators).

In de manager omgeving kunnen administrators alles beheren van producten, openingstijden tot aan bestellingen.

Nu loop ik vast op het volgende onderdeel:

Als administrator wil ik product attributen / extra product opties kunnen toevoegen aan een product en dit tonen in frontend bij het product. En het liefst zou ik de product attributen willen categoriseren (bv: formaat (categorie) -> 30cm of 30cm (opties), extra beleg (groente - categorie) -> paprika, tomaat etc. (opties)).

Zodra de gebruiker de extra opties heeft geselecteerd moet dit toegevoegd worden aan de winkelmand.

Wat ik zelf geprobeerd heb is een CRUD systeem te maken waar de product attributen aangemaakt kunnen geworden en een CRUD systeem voor de extra items. De extra items kunnen gekoppeld worden aan de product attributen en de product attributen kunnen weer gekoppeld worden aan het product zelf.

Het toevoegen van een product zonder attributen/extra opties werkt. Ik loop echt vast op het bovengenoemde gedeelte.

Hoe kan ik dit het beste ontwikkelen?

[Matis]

Zonder meer informatie omtrent de database en/of architectuur kan ik er niets over zeggen.

Daarnaast: kunnen categorieën ook categorieën bevatten? Is het niet eenvoudiger om dan een "boom"-structuur te realiseren waar de leafs selecteerbaar zijn.
Dat kan prima in een relationele databases opgeslagen worden.

Het is ook mogelijk om hiervoor reeds bestaande systemen te gebruiken zoals bijvoorbeeld Algolia.

Nogmaals zonder inhoudelijk meer informatie kan ik er niet zo veel mee.

[Dane1999]

Dag Matis,

Bedankt voor je reactie.

De database structuur ziet er als volgt uit:

*knip*

Ik hoop dat je hier iets mee kan, anders hoor ik graag wat je nodig hebt.

[ Voor 86% gewijzigd door Dane1999 op 26-05-2021 10:00 ]

[HollowGamer]

Ik snap je vraag niet helemaal. Voor wat je zoekt zijn verschillende oplossingen te verzinnen denk ik.

Je zou de gebruikelijke Laravel manier kunnen doen en voor alles één model maken (Formaat, Dressing, etc.) en die koppelen met morph, zie daarvoor hun tags voorbeeld.

Mijn voorkeur gaat echter tegenwoordig uit naar een json veld in het model, met daarin al die extra attributen, die je vervolgens weer ophaalt in de view. Ik weet niet hoe je orders gaan opslaan, maar vaak doe ik het zo omdat die extra attributen nogal kunnen wisselen. Zoek hiervoor eens op Laraval Json relationships.

[Dane1999]

Bedankt voor je reactie @HollowGamer. Ga me daar eens in verdiepen.

[Dane1999]

Dag Tweakers,

Het is gelukt om de product attributen te tonen bij de producten op de front-end. Zie screenshot hieronder.

Nu loop ik alleen vast op het volgende onderdeel. Als gebruiker wil ik meerdere opties kiezen zoals het formaat, de topping en de extra groenten. Hoe zorg ik ervoor dat alleen de geselecteerde opties worden meegestuurd en worden getoond in de winkelmand? Nu wordt namelijk alles toegevoegd en getoond, ook al is het niet geselecteerd.

Hopelijk kan iemand mij dat uitleggen.

[ Voor 15% gewijzigd door Dane1999 op 14-06-2021 22:43 ]

[Postman]

Ik weet niet hoe dit precies in Laravel gebeurt en, nog belangrijker, hoe jij dit hebt geïmplementeerd, maar bijvoorbeeld een isset op de post velden zegt niets over de waarde.
Je zult dus moeten kijken wat de waarde van het veld is en dit vergelijken met hoe je het formulier opbouwt (is een checkbox checked, is het formaat van plank 26 cm, etc.).
Zonder code is het lastig iets meer te zeggen.

Ik ga er vanuit dat je een webwinkel maakt voor een bouwmarkt

[Dane1999]

Dag Postman,

Bedankt voor je bericht.

Hieronder de code:

In de blade file staat het volgende:

*knip*

In het model:
*knip*

En in de controller staat het volgende:
*knip*

[ Voor 74% gewijzigd door Dane1999 op 26-05-2021 10:00 ]

[Barryvdh]

Volgens mij mis je wat dingen.

- Je extras zijn checkboxes. Opzich goed alleen geef je nergens de waarde van het extra ID mee als value. En als hij voor dat product ingevuld is zou je hem dus op checked willen zetten (nu staat er niks in je IF statement)
- Je Cart model overschrijf de constructor, maar roept niet de originele constructor aan. Hierdoor heb je kans dat er dingen niet goed gaan. Daarnaast is $oldCart anders dan wat een Model normaal krijgt
- Je roept Cart::add() static aan, terwijl het niet static is. En daarnaast zijn je parameters van add() anders dan hoe je ze gebruikt (in je model 2 parameters, je geeft steeds 4 mee)
- Je zet $this->items etc, maar ik heb het idee dat je het Model hiervoor misbruikt. Moet het wel een Eloquent model zijn?

[Dane1999]

Dus als ik het goed begrijp moet ik in de controller meegeven met een IF-statement wanneer een extra optie geselecteerd is, zodat er van de extra optie het ID meestuurt wordt naar de cart?

Hoe zou de cart model op de juiste en correctie manier geschreven moeten worden?

[Barryvdh]

Ehm ja ik weet niet echt wat ik hier van moet maken. Je haalt gewoon van alles door elkaar. Nog wat dingetjes:
- Je hebt 2 methods om iets toe te voegen aan de cart, ik weet niet welke gebruikt wordt maar ik denk getAddToCart?
- In getAddToCart() geef je een $id mee, en dit gebruik je voor zowel het Product als Item? Lijkt me sterk dat dat allebei hetzelfde moet zijn. De $item en $item->id worden dus nu ook niet gebruikt, omdat de functie maar 2 parameters heeft
- Options doe je dus nergens iets mee.

[Dane1999]

Duidelijk, hier kan ik iets mee. Bedankt voor de uitleg.

[Dane1999]

Dag Tweakers,

Enkele maanden verder en inmiddels alles omgegooid. Ik heb het voor elkaar gekregen om alles qua product attributen werkend te krijgen en toe te voegen aan de winkelmand.

Het enige waar ik nu niet uitkom is het updaten van de product prijs die meegestuurd wordt met de request op het moment dat ik het product + attributen heb geselecteerd. Wat er op dit moment gebeurd is dat de product prijs opgeslagen wordt ook al zijn er attributen geselecteerd.

Dit is mijn code:

In de blade file:

code:

<h5>€<span id="productPrice">{{ $product->price }}</span></h5>

Het selecteren van de extra product attributen:

code:

<div class="col-12 mb-2 mt-3">
    <h4 class="my-4 text-left text-dark m-auto">
         {{ $extra->title }} {{ $extra->size }}
    </h4>
    @foreach($items as $item)
        @if($extra->items->pluck('id')->contains($item->id))
            <div class="h5 mt-3">
                <input type="checkbox" value="{{ $item->title }}" 
                    data-price="{{ $item->price }}" name="options[]" class="my-0 mt-2 float-right">
                {{ $item->title }} €{{ $item->price }}
            </div>
        @endif
    @endforeach
</div>

Tonen van de nieuwe prijs met de geselecteerde product attributen:

code:

<h4 class="pr-3">€<span id="finalPrice">{{ $product->price }}</span></h4>
       @if($product->stock <= 0)
           <button type="submit" class="btn btn-secondary" disabled="disabled">Uitverkocht</button>
       @else
            <button type="submit" class="btn btn-success btn-lg">Bestellen</button>
       @endif
       <input type="hidden" name="id" value="{{ $product->id }}">
       <input type="hidden" name="title" value="{{ $product->title }}">
       <input type="hidden" name="price" id="finalPrice" value="{{ $product->price }}">

JS

code:

$('input:checkbox').change(function(){
    let price = document.getElementById("productPrice").innerHTML;
    let attributeprice = 0;

    $('input:checkbox:checked').each(function(){
        attributeprice+= parseFloat($(this).attr('data-price'));
    });

    let finalPrice = +price + +attributeprice;

    $('#finalPrice').val(finalPrice);
    $('#finalPrice').html(finalPrice);
    console.log(finalPrice);

});

Het selecteren van de product attributen werkt en het updaten van de nieuwe prijs ook. Wat niet werkt is dat de nieuwe prijs niet toegevoegd wordt aan de shopping cart maar de product prijs.
*knip*

Shopping cart:
*knip*

Iemand een idee wat ik hier verkeerd doe?

[ Voor 6% gewijzigd door Dane1999 op 26-05-2021 10:01 ]

[Matis]

Dan zet je toch op strategische plaatsen breakpoint en/of logging?

[Oon]

Dane1999 schreef op dinsdag 16 maart 2021 @ 15:38:
Dag Tweakers,

Enkele maanden verder en inmiddels alles omgegooid. Ik heb het voor elkaar gekregen om alles qua product attributen werkend te krijgen en toe te voegen aan de winkelmand.

Het enige waar ik nu niet uitkom is het updaten van de product prijs die meegestuurd wordt met de request op het moment dat ik het product + attributen heb geselecteerd. Wat er op dit moment gebeurd is dat de product prijs opgeslagen wordt ook al zijn er attributen geselecteerd.

[...]

Iemand een idee wat ik hier verkeerd doe?

Waarom heb je een (hidden) input voor de prijs? Voor de weergave kun je gewoon een span gebruiken, maar ik zou de prijs überhaupt niet meesturen uit het formulier, want ik hoop dat je hier in de verwerking ook niks mee doet. Anders zou iemand in z'n browser dev tools de prijs gewoon op 0 kunnen zetten en een gratis bestelling kunnen plaatsen.

De prijs bereken je in de controller die de POST afhandelt, niet in JavaScript, en sla je dan in de winkelwagen op bij het product.

Je hebt overigens meerdere elementen met id="finalPrice". Dat kan in de meeste moderne browsers wel, maar het is niet netjes, omdat IDs uniek zijn.

[ Voor 6% gewijzigd door Oon op 16-03-2021 16:32 ]

[Dane1999]

Dag Oon,

Nee, die hidden input fields waren echt voor het testen of het wel zou werken dan.

Dit gebeurt er in de store function:

code:

public function store(Request $request)
    {
        $product = Product::find($request->id);

        $options = $request->get('options');

        \Cart::add(
            $product->id,
            $product->title,
            $product->price,
            1,
            $options,
        );

        return redirect()->back();
    }

[Oon]

Dane1999 schreef op dinsdag 16 maart 2021 @ 17:16:
Dag Oon,

Nee, die hidden input fields waren echt voor het testen of het wel zou werken dan.

Dit gebeurt er in de store function:

code:

public function store(Request $request)
    {
        $product = Product::find($request->id);

        $options = $request->get('options');

        \Cart::add(
            $product->id,
            $product->title,
            $product->price,
            1,
            $options,
        );

        return redirect()->back();
    }

Aangezien je daar $product->price instopt verwacht je dus dat vanaf dat punt ook $product->price in de cart komt. Ik mis de prijsberekening van de $options, of gebeurt die in de weergave van het winkelmandje?

[Dane1999]

Dat gebeurt op dit moment in de weergave van het winkelmandje en de popup als de ingrediënten gewijzigd worden. Ik haal met JavaScript de product prijs op en bereken de prijs van de geselecteerde product attributen. Die tel ik bij elkaar op in het laatste gedeelte:

code:

let finalPrice = +price + +attributeprice;

[HollowGamer]

Het is allemaal vrij moeilijk met deze kleine stukjes code. Wat nu vooral gebeurt als je er ergens op vastloopt, niet (goed) lijkt te debugged en dan een vraag stelt waarom het niet werkt. Dat is geen verwijt, maar het is niet eenvoudig je zo te helpen

Probeer iets meer code te geven en het probleem wat beter te schetsen. Je hebt over variabelen en JS, gooi deze eens in een console.log en gebruik eventueel Laravel's dd/logger om te kijken welke input je nu werkelijk krijgt.

Zelf gebruik ik het momenteel niet, maar er een Laravel debugbar gemaakt door iemand op het forum hier. Deze is zeker handig als je met blade werkt of gebruik iets als Laravel Telescope.

[Voutloos]

Ik kan niet eens uit je verhaal opmaken of het in de backend, frontend, of beide niet klopt.
Doe alsjeblieft een ding tegelijk. Als inderdaad backend nog niet klopt, flikker dan aub alle javascript voorlopig aan de kant. Prijzen bepaal je in de backend. Punt.
Pas als dat werkt, kan je leuk dynamisch de prijs in je formulier renderen terwijl klant wat opties aan en uit klikt. Maar ook dan zou je dat alsnog via backend kunnen doen.

Anyway, doe aub maar 1 subprobleem tegelijk.

[Dane1999]

Thanks voor je antwoord Foxgamer2019.

Het probleem is als volgt:

In de blade file kan je extra ingrediënten toevoegen aan het geselecteerde product.

code:

let price = document.getElementById("productPrice").innerHTML;

Hiermee haal ik de product prijs op. Die als {{ $product->price }} geschreven staat in de blade file.

code:

    let attributeprice = 0;

    $('input:checkbox:checked').each(function(){
        attributeprice+= parseFloat($(this).attr('data-price'));
    });

    let finalPrice = +price + +attributeprice;

Dan maak ik een nieuwe variable aan attributeprice waar ik de prijzen van de geselecteerde extra opties in wil opslaan. Als een checkbox geselecteerd is wordt de data-price opgeteld bij de productprijs.

Als ik dit log krijg ik de juiste totaalprijs terug.

Product prijs zonder extra ingrediënten geselecteerd:
*knip*

Product prijs met een extra optie geselecteerd:
*knip*

Als ik in de dev tools kijk krijg ik de juiste prijs terug.
*knip*

Het stuk wat ik niet begrijp hoe ik die nieuwe prijs die met javascript berekend is kan vervangen/updaten voor de huidige product prijs. Want bij het versturen van het formulier wordt de oude prijs meegestuurd en getoond in de winkelmand.

[ Voor 28% gewijzigd door Dane1999 op 26-05-2021 10:01 ]

[Hiroj]

Wat jij eigenlijk zoekt is een hidden field, waarin je de totaalprijs opslaat en vervolgens in het formulier meestuurt. Zo te zien in de eerdere reacties heb je jQuery aardig onder de knie en zou het op deze manier je moeten lukken.

code:

<input type="hidden" name="final_price" value="" />

Echter zou ik het je totaal afraden om op deze manier een totaalprijs op te slaan in je database. De kans bestaat namelijk dat iemand die hidden field gaat vinden en vervolgens manipuleert door het bijv. maar slechts 1 euro te laten kosten. Mijn advies zou zijn om enkel aan de frontend het visueel zichtbaar te maken wat de totaalprijs is en vervolgens in je backend code het daadwerkelijk berekenen van de totaalprijs te laten gebeuren.

[Dane1999]

Bedankt voor je reactie Hiroj.

Ik heb gebruik gemaakt van de hidden input fields voor het testen of het dan wel zou werken.

Zoals het nu in de backend staat wordt alles in de controller verwerkt en toegevoegd en worden er ook geen hidden input fields gebruikt. Waar mijn kennis op dit moment echt stopt is hoe ik in het back-end gedeelte ervoor kan zorgen dat de productprijs en de prijzen van de extra opties/ingrediënten met elkaar kan verrekenen en dat kan opslaan als de nieuwe productprijs.

Daar kan ik ook niet meer over uitleggen omdat de technische kennis hier stopt. Dus ik hoop vooral dat iemand mij hier een beetje in de juiste richting kan duwen, zoals wat ik nodig heb of welke mogelijkheden er zijn om dit te realiseren.

[Tubby]

Je moet dezelfde berekening ook (of beter gezegd primair) op je back-end doen. De JavaScript berekening is alleen "voor de show" (voor de gebruiker ter indicatie wat ie in elkaar aan t klikken is)

Praktisch is dat dus zoiets als

PHP:

$productPrice = 10;
$productPrice += $extraForBiggerPizza;
$productPrice += $priceOption1;
....

ergens in je controller, en ja dat voelt dubbel, maar mocht dat te lastig zijn laat iig even weten waar we uiteindelijk gratis pizza's kunnen bestellen

[ Voor 24% gewijzigd door Tubby op 17-03-2021 14:30 ]

[Hiroj]

Dane1999 schreef op woensdag 17 maart 2021 @ 13:34:
...

Daar kan ik ook niet meer over uitleggen omdat de technische kennis hier stopt. Dus ik hoop vooral dat iemand mij hier een beetje in de juiste richting kan duwen, zoals wat ik nodig heb of welke mogelijkheden er zijn om dit te realiseren.

Het is lastig om je een beetje de juiste richting in te sturen, als wij niet weten hoe je data model eruit ziet.
Als ik een kleine aanname mag doen, kan je bijvoorbeeld onderstaande implementeren.

code:

$product = Product::find($id);
$totalPrice = $product->extras->whereIn('id', $optionIds)->sum('price') + $product->price;

Het zal iets in deze richting al kunnen zijn.