1. Overview of the workflow

Thank you very much for your interest on our platform „pod – Pattern on Demand^®„!
On the following pages you will find instructions on how to create a plugin for another shop integration. This is illustrated using the example with WordPress and WooCommerce. If you have any questions or uncertainties, we will be happy to help you as much as possible.

To start, we would like to give you an overview of the workflow and how it works.

ECOMMERCE CMS

As you can see from the above illustration, there are a number of points to consider. In the following, we will go into more detail on individual points:

• Products:
  – We need to create a new product with some custom attributes (e.g: POD-Item-Id, …)
  
• Custom Page:
  – We need a new custom page where we can customize and embed the iframe inside.
  – The new product will be loaded in the background in the custom page.
  – Once the product is loaded, we have the custom attributes (POD-Item-Id, ….)
  – Then we can embed the iFrame with the Frontend Link (this link will be provided by POD) with some parameters
  – At the end, we will load exactly the expected product.
  
• Window.postMessage & Window.addEventListener
  – We use those events to exchange the data between iFrame & the custom page (in eCommerce CMS)
  – As you see the below screenshot, we have Finish Customizing, Restart Design & Back.
  When user press at Finish customizing, we execute something in the Frontend then post a message back to the custom page.
  At this point, the custom page need to register an event to receive the request from the iFrame and execute some logics.

<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>

POD SERVER

• As you see on the right side, POD Server will include Frontend & Web API

FRONTEND

• Includes a complete configurator so that the end customer can act as a co-designer and also receive appropriate visual feedback.
• We have all the UI, behaviours where end-user able to customize product

WEB API

• Where all the business logics are located
• Receive the request & response data to the Frontend

DATABASE

• Where we store all the data