POC: Kaartje printen

Workshop : Proof of Concept

Aanleiding

Het is nu mogelijk om een order aan te maken met vijf gekozen horecazaken.  Het samemstellen is dus geen enkel probleem. Deze order data moet nu worden omgezet naar een printbaar kaartje. Het is niet de bedoeling dat een ontwerper bij iedere order zelf een kaartje moet gaan ontwerpen.  Het idee ligt er dus ook al langer om het kaartje dynamisch printbaar te maken. De mede-tagiair bij Gravity Media genaamd Tom, heeft een drukwerkportaal gebouwd waarmee je drukwerk automatisch kan laten opsturen naar een drukkerij. Tijdens de stageperiode zijn Tom en ik tot de conclusie gekomen dat onze twee stageopdrachten perfect te combineren zijn. Hoe tof zou het namelijk zijn als een Koffiekaartje automatisch geprint kan worden en opgestuurd wordt naar de klant zonder dat Gravity Media hier nog extra werk aan heeft.

https://github.com/Casie150/horecaartje

Onderzoeksvraag:
Hoe print je een dynamisch ontwikkeld Koffiekaartje?

Doelen

  • Woocommerce data omzetten naar printbaar bestand
  • Automatisch doorsturen naar het drukwerk portaal
  • Kaartje omzetten naar 300 DPI pdf

Resultaten

We hebben onze handen ineengeslagen om samen een Horekaartje print plug-in te bouwen. Hiermee worden Koffiekaartje bestellingen automatisch omgezet naar een printbaar PDF dit is gebeurd via een print API genaamd dompdf. Deze printbare bestanden worden via het drukwerkportaal van Tom direct ontvangen en doorgestuurd naar de drukkerij die vervolgens het geprinte kaartje opstuurt naar de drukker. Tom en ik hebben ons lettelrijk zeven dagen opgesloten in een aparte ruimte om deze plug-in te realiseren. Deze plugin-werkt nauw samen met Woocommerce. Hij haalt namelijk de order data op vnauit een nieuw gemaakte order. Hieruit haalt hij de namen van de gekozen horecazaken, een uniek order ID en de logo’s van een zaakje op. Vervolgens zet de plug-in via een API genaamd dompdf de data via HTML en CSS om naar een drukwerk bestand van 300DPI op een business-card formaat. De plug-in heeft de volgende structuur;

Binnen dompdf bouw je een pdf op doormiddel van HTML/CSS er is dus ook ruimte om zelf foto’s of andere lettertypes toe te voegen. Hiervoor is een losse folder aangemaakt binnen de plug-in. Als de Woocommerce order compleet is gaat de machine pas aan de gang. Als de Woocommerce function op order complete staat start hij de Horekaartje generator. Hij haalt dan van de aangemaakte order alle data op die nodig is om een kaartje te printen.

$order = wc_get_order( $order_id );
    $items = $order->get_items();
    $html = "";
    foreach ( $items as $item ) {
      $product_name .= '<div>' . $item->get_name() . '</div>';
      $product_id = $item->get_product_id();
      $product_variation_id = $item->get_variation_id();
      $product_img = wp_get_attachment_image_src( get_post_thumbnail_id( $item->get_product_id() ), 'single-post-thumbnail' );
      $product_img_print .= '<div class="card_img"><div class="card_img_wrap"><img class="card_img_img" src="' . strval($product_img[0]) . '"/></div><div class="card_text">' . $item->get_name() . '</div></div>';
     
    }

Dompdf zet deze html om naar een pdf in pixels. Echter, om een product te kunnen printen moet het bestand opgeleverd worden in millimeters. Via internet hebben we een berekening gevonden die het mogelijk maakt om pixels om te zetten naar millimeter. Zo hebben we via een aantal rekensommen het bestand kunnen omzetten naar een business-card met 300 DPI als resolutie.

$heightmm = 55;
  $widthmm = 85;
  $dpi = 300;
  $marginmm = 0;
  $fill = 1;


  $height = ($heightmm + (2 * $marginmm)) * 2.8346456693;
  $width = ($widthmm + (2 * $marginmm)) * 2.8346456693;
  $aspect_ratio =  $widthmm / $heightmm;
 
  $dpiaspect = $dpi / 96;
  $pixels96 = $heightmm * 3.7795275591;
  $pixelsheight = $pixels96 * $dpiaspect;
  $pixelswidth = $pixelsheight * $aspect_ratio;

Vervolgens roept dompdf deze instellingen op, en gaat hij het vooraf ingestelde html template bouwen.

  // Setup the paper size and orientation
    $docsize = array(0,0,$width,$height);
    $dompdf->setPaper($docsize);
   
   
    // Render the HTML as PDF
    $dompdf->render();

Conclusie

Dit is de basis werking van de plug-in echter zit er nog een hoop meer achter. Voor extra informatie over de gehele werking van de pdf print plug-in wil ik je dan ook graag doorverwijzen naar de onderstaande video. Door de realisatie van de plug-in,  is het nu mogelijk om het Koffiekaartje compleet autonoom te laten werken. Mensen kunnen zelf de samenstelling kiezen, het kan besteld en betaald worden vervolgens wordt er dan automatisch een PDF gegeneerd die wordt opgestuurd naar de drukker. De drukker stuurt vervolgens het uitgeprinte document in een mooie verpakking op naar de klant. Koffiekaartje kan door dit automatisch Koffiekaartjes verkopen zonder er zelf werk aan te hebben. Het enige wat ze moeten doen is bedrijven lobbyen.