Month: March 2018

Add Custom Cart Item Data in WooCommerce

Add custom field in WooCommerce product.

 

Add a Custom Field to Your Product

/**
 * Output engraving field.
 */
function iconic_output_engraving_field() {
	global $product;

	if ( $product->get_id() !== 1741 ) {
		return;
	}

	?>
	

<div class="iconic-engraving-field">
		<label for="iconic-engraving"><?php _e( 'Engraving (10 characters)', 'iconic' ); ?></label>
		<input type="text" id="iconic-engraving" name="iconic-engraving" placeholder="<?php _e( 'Enter engraving text', 'iconic' ); ?>" maxlength="10">
	</div>


	<?php
}

add_action( 'woocommerce_before_add_to_cart_button', 'iconic_output_engraving_field', 10 );

Add Engraving Data to the Cart Item

/**
 * Add engraving text to cart item.
 *
 * @param array $cart_item_data
 * @param int   $product_id
 * @param int   $variation_id
 *
 * @return array
 */
function iconic_add_engraving_text_to_cart_item( $cart_item_data, $product_id, $variation_id ) {
	$engraving_text = filter_input( INPUT_POST, 'iconic-engraving' );

	if ( empty( $engraving_text ) ) {
		return $cart_item_data;
	}

	$cart_item_data['iconic-engraving'] = $engraving_text;

	return $cart_item_data;
}

add_filter( 'woocommerce_add_cart_item_data', 'iconic_add_engraving_text_to_cart_item', 10, 3 );

Display Engraving Data in the Cart

/**
 * Display engraving text in the cart.
 *
 * @param array $item_data
 * @param array $cart_item
 *
 * @return array
 */
function iconic_display_engraving_text_cart( $item_data, $cart_item ) {
	if ( empty( $cart_item['iconic-engraving'] ) ) {
		return $item_data;
	}

	$item_data[] = array(
		'key'     => __( 'Engraving', 'iconic' ),
		'value'   => wc_clean( $cart_item['iconic-engraving'] ),
		'display' => '',
	);

	return $item_data;
}

add_filter( 'woocommerce_get_item_data', 'iconic_display_engraving_text_cart', 10, 2 );

Add engraving text to order.


/**
 * Add engraving text to order.
 *
 * @param WC_Order_Item_Product $item
 * @param string                $cart_item_key
 * @param array                 $values
 * @param WC_Order              $order
 */
function iconic_add_engraving_text_to_order_items( $item, $cart_item_key, $values, $order ) {
	if ( empty( $values['iconic-engraving'] ) ) {
		return;
	}

	$item->add_meta_data( __( 'Engraving', 'iconic' ), $values['iconic-engraving'] );
}

add_action( 'woocommerce_checkout_create_order_line_item', 'iconic_add_engraving_text_to_order_items', 10, 4 );

Reference

Advertisements

Play Pause Vimeo or YouTube multiple video JavaScript

have found a solution to starting/pausing multiple Vimeo and YouTube videos from separate buttons

YouTube


<a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;playVideo&quot;)">Start</a> &bull; <a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;pauseVideo&quot;)">Pause</a> &bull; <a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;stopVideo&quot;)">Stop</a> - Hover over the links to see the called function




<div id="whateverID"><iframe width="640" height="390" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>




<a href="javascript:void callPlayer(&quot;whateverID1&quot;,&quot;playVideo&quot;)">Start</a> &bull; <a href="javascript:void callPlayer(&quot;whateverID1&quot;,&quot;pauseVideo&quot;)">Pause</a> &bull; <a href="javascript:void callPlayer(&quot;whateverID1&quot;,&quot;stopVideo&quot;)">Stop</a> - Hover over the links to see the called function




<div id="whateverID1"><iframe width="640" height="390" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/AkwVg9viC-g?enablejsapi=1"></iframe></div>




function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}

Vimeo

Single video (simpler) version here: <a href="https://codepen.io/filipbech/pen/cbaxq">https://codepen.io/filipbech/pen/cbaxq</a>


<iframe width="560" height="315" src="//player.vimeo.com/video/5705212?api=1&player_id=video1" id="video1"></iframe>
<button class="play" data-id="video1">Play</button>
<button class="pause" data-id="video1">Pause</button>



<iframe width="560" height="315" src="//player.vimeo.com/video/5705212?api=1&player_id=video2" id="video2"></iframe>
<button class="play" data-id="video2">Play</button>
<button class="pause" data-id="video2">Pause</button>




Red background means "playing"... 
<i>(try clicking either "native" or "custom" controls, to see that both work as expected)</i>

/* Grabbing objects to play with */
var playButtons = $('.play'),
    pauseButtons = $('.pause');

/* Helper function to send a message to Vimeo-iframe */
function vimeoPost(action, value, target) {
	var data = { method: action };
	if (value) {
		data.value = value;
	}
	target.contentWindow.postMessage(JSON.stringify(data), '*');
};

/* When clicking the playButton, send a "play"-message to given iframe*/
playButtons.click(function() {
  var iframe = document.getElementById(this.dataset.id);
  vimeoPost('play',null,iframe);
});

/* When clicking the pauseButton, send a "pause"-message to given iframe */
pauseButtons.click(function() {
  var iframe = document.getElementById(this.dataset.id);
  vimeoPost('pause',null,iframe);
});

/* When a message is received, deal with it */
window.addEventListener('message', function(event) {
  /* Get message and sender from the event */
  var message = JSON.parse(event.data);
  var sender = document.getElementById(message.player_id);
 
  /* If the message.event is "ready", then send a message to add eventlisteners for play and pause also */
  if(message.event == "ready") {
 	vimeoPost('addEventListener','play',sender);
   vimeoPost('addEventListener','pause',sender);
  }
  
  /* Because of the above, we will start receiving events when video is played or paused - we will toggle a class, just to show it visually */ 
  if(message.event == 'play') {
		sender.classList.add('playing');    
  }
  if(message.event == 'pause') {
    sender.classList.remove('playing');
  }
  
}, false);

YouTube Vimeo