POC: Kaartje vullen

Workshop : Proof of Concept

Aanleiding

Als we de functionaliteit vertalen naar burgertaal is het dynamisch vullen niks anders dan een winkelmandje vullen met maximaal vijf producten. De producten zijn in dit concept alleen geen echte producten maar horecazaken. De meest gebruikte webshop plug-ins voor WordPress zijn Woocommerce of EDD. Ik moet een van deze toevoegingen koppelen om een winkelmandje en betaalsysteem gemakkelijk te koppelen aan de website. De keuze is dan ook al snel op Woocommerce gevallen omdat deze het meest actief gebruikt wordt er hierdoor informatie over de code te vinden is.

 

https://github.com/Casie150/horecaartje

Onderzoeksvraag:
Hoe creëer je een Koffiekaartje waarin een klant zijn eigen kaartje kan samenstellen?

Doelen

  • Custom Post data omzetten naar een Woocommerce order
  • Custom Post data in een winkelmandje plaatsen

Resultaten

Ik heb zitten twijfelen om de Horecazaken als Woocommerce product in de website te zetten. Echter zit je dan té erg gebonden aan de code van Woocommerce en is het niet gemakkelijk om dingetjes aan te passen in de code. Ik heb daarom een functie geschreven waarmee ik de Custom Post Type informatie omzet naar Woocommerce data om zaakjes zo toe te kunnen voegen en te bestellen via een winkelmandje. Deze keuzes heb ik besproken met de developers binnen Gravity Media, zij delen de mening om voor een Custom Post Type te gaan. Het gebruiken van een Custom Post Type heeft als voordeel dat je qua front-end complete vrijheid hebt om de data en elementen toe te voegen die je zelf wil. Binnen Woocommerce heb je deze code vrijheid helaas niet.  Door Woocommerce te koppelen met een Custom Post Type behoud ik de vrijheid om qua front-end en back-end te bouwen wat ik wil. Terwijl ik de voordelen heb qua administratie en betalingen van Woocommerce. Het is nu mogelijk om een complete order aan te maken en te betalen. De volgende stap is om deze data omzetten naar een dynamisch ontwikkeld Koffiekaartje. Het is namelijk niet de bedoeling dat een ontwerper continu bezig is met het ontwerpen van handgemaakte Koffiekaartjes. Dit moet automatisch gaan.

In praktijk was het een moeilijke oplossing, er is namelijk maar weinig documentatie bekend om dit op te lossen. De functies die hiervoor geschreven zijn, zijn dan ook enkele honderden regels lang. Té lang om als een snippet te plaatsen. Ik ligt daarom een aantal belangrijke functies uit.

// Ajax Woommerce add to cart tellen
function iconic_cart_count_fragments( $fragments ) {
  $fragments['span.cart_contents_count'] = '<span class="cart_contents_count">' . WC()->cart->get_cart_contents_count() . '</div>';
  return $fragments;
}


add_filter( 'woocommerce_add_to_cart_fragments', 'iconic_cart_count_fragments', 10, 1 );

Snippet: Ajax winkelmandje counter

 

De onderstaande code zorgt er voor dat er maar vijf producten in het winkelmandje geplaatst kunnen worden. Ook is er een scriptje die aangeeft dat het er altijd vijf moeten zijn!

// 5 items in je mandje
function only_5_items_allowed_add_to_cart( $passed, $product_id, $quantity ) {


    $cart_items_count = WC()->cart->get_cart_contents_count();
    $total_count = $cart_items_count + $quantity;


    if( $cart_items_count > 5 || $total_count > 5 ){


        $passed = false;


         wc_add_notice( __( "Je hebt meer dan vijf producten in je mandje", "woocommerce" ), "error" );
    }
    return $passed;
}


add_filter( 'woocommerce_add_to_cart_validation', 'only_5_items_allowed_add_to_cart', 10, 3 );

Snippet: Winkelmandje vijf producten restrictie

Ieder Koffierkaartje heeft een vast bedrag, namelijk vijftien euro. Vijf keer drie is vijftien euro. Ieder zaakje heeft een waarde van drie euro. In de back-end is aangegeven dat ieder zaakje dit bedrag kost.

function my_woocommerce_product_get_price( $price, $product ) {


    if ($product->get_type() == 'horecazaak' ) {
        $price = 3;
    }
    return $price;
}
add_filter('woocommerce_get_price','my_woocommerce_product_get_price',20,2);
add_filter('woocommerce_product_get_price', 'my_woocommerce_product_get_price', 10, 2 );

Snippet: Ieder zaakje een vast bedrag geven

Conclusie

De rest van de functionaliteiten beschrijf ik in de onderstaande video. Door deze code heb ik de flexibiliteit van een CPT kunnen combineren met de financieel aantrekkelijk kant van Woocommerce. Deze regelt nu alle betalingen met facturatie. Hier is dus geen omkijken meer na.