4. How to communicate with POD over iFrame

In the previous sections, we already knew how to setup product / page and setting page.
Now, we will jump into the main business logic.

In this section, we will find out how to communicate with POD system over iframe.
Let have a look at the custom template (which we already defined in the section 2), we need to take some settings from the setting page.

iFrame URL
Let set iFrame URL as https://pod.fashionsoftware.ch/app/configuration/
But this url is not enough to load the configuration page. We need some additional parameters,

product_id (required):
In the section 2, we already knew how to get it.
We used shortcode ([product_page id=“259″ /]) to load the defined product in background.
In this case, the product id is 259.
item_id (required):
From the point 1, we already loaded the product in the background.
So we are able to get the custom attribute of this product.
In this case, the item_id is 23
locale (required):
We can get the current locale from the eCommerce setting.
Normally, the locale code will be like en_US, de_DE based on the eCommerce setting.
This is used to display the right language in the configurator.
country_code (required):
We need to get the country_code from our current location.
That means if you’re in Swtizerland, the country code must be CH.
That is used to get the price-list as well the right VAT. Because we show both in our configurator.
currency (required):
We can get the currency from the eCommece setting.
That is used to get the price-list as well the VAT.
cart_session (required):
Normally, all the eCommerce site always has cart-session where we store all items and customer information.
We need this session to keep the session between eCommerce and POD system alive.
You can also build up your own uniqe cart-session-number.
pod_mode (optional):
As we metioned in the section 3, this option is optional.
Based on the option, we will have some different business logics in POD system.
profile (optional):
This information is used to store and make a profile in POD system.
That mean if we already logged in the eCommece site, we will have almost informaion from the logged user.
We can pickup user_id or user_name in this case and combine them as the unique-key in POD system.
Before push this unique key in the iFrame, we need to encode as base64.
The goail is, we don’t want to show any unfriendly data like 1-user1 or 2-customer1.
Then from the POD system, we will decode it.

Finally, we will have a full url like https://pod.fashionsoftware.ch/app/configuration/?
product_id=259&
item_id=23&
locale=en_US&
country_code=VN&
currency=CHF&
cart_session=1%7C1645540759%7C1645537159%7Cb177f8e50edae0fa82de4188164fc1bc&
pod_mode=B2C&
profile=MWFkbWlu

Now, we are able to load the configuration in the custom page (based on the custom template)

Shop Page ID / Page ID
From the above result, we need to get the Shop Page Id and Cart Page Id from the setting page
The goal is, if end-user would like to back to shop page or cart page in the iFrame, the eCommece need to know which page it should redirect to.
That means we need to register an event in the custom page to receive events from the iFrame.
So we must add the below code in the custom page and replace with the right code (based on eCommerce).

$cart_url is built up from Cart-Page-Id
$shop_url is built up from Shop-Page-Id

There is another event in the below script, it’s open_video
We listen this event to open a new browser for video.
In this case, we open the video for measurement guide.

<?php 
    $site_url = get_site_url();
    $shop_page_id = get_option('pod_woocommerce_shop_page_id');
    $cart_page_id = get_option('pod_woocommerce_cart_page_id');
    $shop_url = $site_url;
    $cart_url = $site_url;
    $redirect_url = home_url();

    if( isset($shop_page_id) ) {
        $shop_url = get_permalink($shop_page_id);
    }
    if( isset($cart_page_id) ) {
        $cart_url = get_permalink($cart_page_id);
    }
?>

// an example code in wordpress woocommerce
<script type="text/javascript">
	window.addEventListener('message', function(ev) {
		var action = ev.data.action;
		if (action === 'cart') {
			window.location.href = '<?php echo $cart_url; ?>';
		} else if (action === 'shop') {
			window.location.href = '<?php echo $shop_url; ?>';
		} else if (action === 'open_video') {
			var value = ev.data.value;
			window.open(value.link, '_blank');
		}
	});
</script>

Let refer the below code
You might to replace some codes with your own business logic.

<?php
    /*
    * Header section
    */
    global $woocommerce;
    get_header();    

    global $current_user;
    wp_get_current_user();
?>


<?php
    $session = new WC_Session_Handler();
    $session_data = $session->get_session_cookie();
    $cart_session = '';
    if( isset($session_data) && $session_data != '') {
        $cart_session = implode("|", $session_data);
    }

    $atts = shortcode_parse_atts($post->post_content);
    $id = $atts['id'];
    $_product = new WC_Product($id);
    $pod_product_id = $_product->get_attribute('pod_woocommerce_product_id');
    $currency = get_option('woocommerce_currency');        
    $locale = get_locale();
    $location = WC_Geolocation::geolocate_ip();
    $country_code = $location['country'];
    $user_param = empty($current_user->ID) ? '' : '&profile='.base64_encode($current_user->ID.$current_user->user_login);
    $iframe_url = get_option('pod_woocommerce_iframe_url');
    $full_url = $iframe_url.'?product_id='.$id.
                        '&item_id='.$pod_product_id.
                        '&locale='.$locale.
                        '&country_code='.$country_code.
                        '&currency='.$currency.
                        '&cart_session='.urlencode($cart_session).
                        '&pod_mode='.$pod_mode.
                        $user_param;
?>

<div class="pod-iframe-container">
    <? if (isset($iframe_url)) { ?>
    <iframe id="pod_iframe"
        src="<?php echo $full_url; ?>"
        width="100%"
        height="100%"
        frameborder="1"></iframe>
    <? } ?>
</div>

<?php 
    $site_url = get_site_url();
    $shop_page_id = get_option('pod_woocommerce_shop_page_id');
    $cart_page_id = get_option('pod_woocommerce_cart_page_id');
    $shop_url = $site_url;
    $cart_url = $site_url;
    $redirect_url = home_url();

    if( isset($shop_page_id) ) {
        $shop_url = get_permalink($shop_page_id);
    }
    if( isset($cart_page_id) ) {
        $cart_url = get_permalink($cart_page_id);
    }
?>

<script type="text/javascript">
    window.addEventListener('message', function(ev) {
        var action = ev.data.action;
        if (action === 'cart') {
            window.location.href = '<?php echo $cart_url; ?>';
        } else if (action === 'shop') {
            window.location.href = '<?php echo $shop_url; ?>';
        } else if (action === 'open_video') {
            var value = ev.data.value;
            window.open(value.link, '_blank');
        }
    });
</script>

<?php
    /*
    * Footer section
    */
    get_sidebar();
    get_footer();
?>

Previous Section

Next Section