1. Januar 2017

Holland America Line – Cruise Tour 2015 / 2016 / 2017

Promotion and booking website for the Holland America Line Cruise Tour NL / BE / 2015 / 2016 / 2017

Headless WordPress
JSON API
Custom Plugin
Custom Theme
Responsive design
CSS3 / Javascript animations
Location / Time slot selection / Limited seats
Ticket Registration + Confirmation
Ticket Creation (Ticket amount, Location & Date, Registrant, QR- Verification )
PDF embed
Booking notifications & available seat monitoring
Data Export (Excel)
Custom analytics integration
Maintenance

Holland America Line – ontdekcruisen.nl

20. November 2016

Gravity Forms PHP Trait to send notifications and execute hooks on demand

When performing tasks using the Gravity Forms API, handling notifications and hook execution on demand is something that becomes really handy.

<?php

trait GravityForm{
	
	
	function GravityForm_send_notifications($form_id, $entry_id){

	  // Get the array info for our forms and entries
	  // that we need to send notifications for
  
	  $form 	= RGFormsModel::get_form_meta($form_id);
	  $entry 	= RGFormsModel::get_lead($entry_id);
  
	  // Loop through all the notifications for the
	  // form so we know which ones to send
  
	  $notification_ids = array();
  
	  foreach($form['notifications'] as $id => $info){
  
		  array_push($notification_ids, $id);
  
	  }
  
	  // Send the notifications
  
	  GFCommon::send_notifications($notification_ids, $form, $entry);

	}
	
	function GravityForm_execute_hooks($form_id, $entry_id){
	
	
		$form 				= GFAPI::get_form( $form_id );
		$entry 				= GFAPI::get_entry( $entry_id );
		$registered_addons 	= GFAddOn::get_registered_addons( );
		
		foreach( $registered_addons as $reg){
			if(method_exists($reg, "get_instance")){
				
				$execute = $reg::get_instance();				
				
				foreach($registered_addons as $addon){					
					
					$execute->maybe_process_feed( $entry, $form);
				}
			}
		}
		
		return true;
	}
		
	
}

<?php

trait GravityForm{

function GravityForm_send_notifications($form_id, $entry_id){

// Get the array info for our forms and entries

// that we need to send notifications for

$form = RGFormsModel::get_form_meta($form_id);

$entry = RGFormsModel::get_lead($entry_id);

// Loop through all the notifications for the

// form so we know which ones to send

$notification_ids = array();

foreach($form['notifications'] as $id => $info){

array_push($notification_ids, $id);

}

// Send the notifications

GFCommon::send_notifications($notification_ids, $form, $entry);

}

function GravityForm_execute_hooks($form_id, $entry_id){

$form = GFAPI::get_form( $form_id );

$entry = GFAPI::get_entry( $entry_id );

$registered_addons = GFAddOn::get_registered_addons( );

foreach( $registered_addons as $reg){

if(method_exists($reg, "get_instance")){

$execute = $reg::get_instance();

foreach($registered_addons as $addon){

$execute->maybe_process_feed( $entry, $form);

}

return true;

}

Enjoy coding ….

19. November 2016

Smart sticky elements with Sticky-Kit

Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

$("#sticky_item").stick_in_parent()
  .on("sticky_kit:stick", function(e) {
    console.log("has stuck!", e.target);
  })
  .on("sticky_kit:unstick", function(e) {
    console.log("has unstuck!", e.target);
  });

$("#sticky_item").stick_in_parent()

.on("sticky_kit:stick", function(e) {

console.log("has stuck!", e.target);

})

.on("sticky_kit:unstick", function(e) {

console.log("has unstuck!", e.target);

});

Sticky Kit

17. November 2016

WP REST API rendered output & Visual Composer

Visual Composer shortcodes are normally not converted within the WordPress REST API rendered output.

This can be accomplished by calling WPBMap::addAllMappedShortcodes();

add_action( 'rest_api_init', function ()
{
   register_rest_field(
          'page',
          'content',
          array(
                 'get_callback'    => 'convert_do_shortcodes',
                 'update_callback' => null,
                 'schema'          => null,
          )
       );
});

function convert_do_shortcodes( $object, $field_name, $request )
{
   WPBMap::addAllMappedShortcodes(); // This does all the work

   global $post;
   $post = get_post ($object['id']);
   $output['rendered'] = apply_filters( 'the_content', $post->post_content );

   return $output;
}

add_action( 'rest_api_init', function ()

{

register_rest_field(

'page',

'content',

array(

'get_callback' => 'convert_do_shortcodes',

'update_callback' => null,

'schema' => null,

)

);

});

function convert_do_shortcodes( $object, $field_name, $request )

{

WPBMap::addAllMappedShortcodes(); // This does all the work

global $post;

$post = get_post ($object['id']);

$output['rendered'] = apply_filters( 'the_content', $post->post_content );

return $output;

}

16. November 2016

Run something when a DOM element appears and when it exits – onmount

onmount allows you to detect when a DOM element appears and when it exits. No dependencies!

onmount = require('onmount')

onmount('.push-button', function () {
  $(this).on('click', function () {
    alert('working...')
  })
})

onmount = require('onmount')

onmount('.push-button', function () {

$(this).on('click', function () {

alert('working...')

})

onmount

16. November 2016

Programmatically control video and audio within IFrames using Player.js

Player.js is a library that allows you to programmatically control video and audio within iFrames across a number of services.

var player = new playerjs.Player('iframe');

player.on('ready', function(){
  player.on('play', function(){
    console.log('play');
  });

  player.getDuration(function(duration){
    console.log(duration);
  });

  if (player.supports('method', 'mute')){
    player.mute();
  }

  player.play();
});

var player = new playerjs.Player('iframe');

player.on('ready', function(){

player.on('play', function(){

console.log('play');

});

player.getDuration(function(duration){

console.log(duration);

});

if (player.supports('method', 'mute')){

player.mute();

}

player.play();

});

Player.js@GitHub

16. November 2016

Schema for your Logo – help search engines to understand your content

“Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.”

This shared vocabulary from Google, Bing and Yahoo helps to understand your content!

This shows how to associate your logo with your organization.

BEFORE

<a href="http://www.yoursite.com/">
<img src="http://www.yoursite.com/your_logo.jpg" alt="Your logo" />
</a>

</a>

AFTER

<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.yoursite.com/">
<img itemprop="logo" src="http://www.yoursite.com/yourlogo.jpg" alt="Your wonderful logo"/>
</a>
</div>

</a>

</div>

16. November 2016

Bottr – The World’s Simplest Bot Framework

Simple – Create expresive interactive bots without dealing with the low level details.
Event Based – Our event based system allows to easily chain and combine actions together.
Flexible – Use Components from the Ecosystem to add additional capabilities to your bot.
Familiar – Built ontop of proven technolgies Node.js, Javascript and Express.js

Clients: Facebook Messenger, Twillio, Twitter, WebSocket :)

import Bottr from 'bottr';

let Bot = new Bottr.Bot()

bot.on('message_received', (message, session) => {
    session.send('Hello World!')
})

bot.listen()

import Bottr from 'bottr';

let Bot = new Bottr.Bot()

bot.on('message_received', (message, session) => {

session.send('Hello World!')

})

bot.listen()

Bottr@Github

31. Oktober 2016

Easily copy text to clipboard via Javascript

“Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework. That’s why clipboard.js exists.”

clipboard.js

24. Oktober 2016

Volvo Retailer – Custom Landing Pages

Custom landing pages for new car models, option to request testdrive, get an offer or request additional material.

Fluid responsive text & images
Custom Slider
Contact forms & submission handling
Template based (TWIG)