ec studio is a web-configurator designed solely for the ecommerce website.  The app runs on a server in a datacenter and your website visitors can play the app via any browser of any device.

R.Designのサーバーエンジニアがホワイトリストの作業を行いますので、埋め込み先のWEBサイトのドメインをお知らせください。

• 対象アイテムが属するデザイン・ファミリーについて、ecスタジオ向けにベイク作業を行い、ecスタジオ向けにパッケージを行います（R.Designチーム）。

• デザイン・バージョンについて、以下の設定が必要です。
  • • Active=TRUE
  • • Debug=FALSE

• デザイン・ファミリーのStatus | ec studioフィールドの値を「Requested」にして、R.Designチームに作業依頼をしてください。

貴社ページ内にiframeを設定下さい。iframeはレスポンシブである必要があります。

デフォルトのストリーミングサイズは1280px x 720pxです。
埋め込むサイトのページ幅がこれより広い場合であっても、原則、1280px幅で表示させて下さい。
サーバーのGPUの消費を安定させる上で、iframeの最大サイズを1280pxに設定して頂く必要があります。

下記コードを、ウェブサイトの開発者の方に該当するページに適用頂くよう、ご依頼ください。但し、<iframe> の src 属性には、各対象アイテム毎に指定されたURLを記入して下さい。

To avoid the straight loading studio, we showing the image should be a requirement to implement the ec studio

<style>
.rdesign-ec-studio .rdesign-iframe{display:none}
.rdesign-ec-studio iframe {
	width: 100%; height: 100%; display: block; position: absolute; margin: 0 auto; top: 0; left: 0;
}
.rdesign-ec-studio .rdesign-iframe {
	padding-top: 56.25%; position: relative; width: 100%;
}
@media (min-width: 1280px){
	.rdesign-ec-studio iframe { width: 1280px; height: 720px; }
}
@media (max-width: 575px){
	.rdesign-ec-studio iframe{ margin: 0 15px; height: 100%; }
}
</style>
<div class="rdesign-ec-studio">
	<a class="rdesign-studio-cover" href="javascript:void(0)"><img src="...cover-image.png" /></a>
	<div class="rdesign-iframe">
		<iframe src="" data-src="https://ec.streaming.r.design/ec-studio?design_version_id=.........." frameborder="0" allowfullscreen="allowfullscreen" rel="nofollow"></iframe>
	</div>
</div>
// use jQuery to play studio when clicked on cover image
jQuery(function($){
	$('.rdesign-studio-cover').click(function(){
		var iframe = $('.rdesign-iframe');
		iframe.find('iframe').attr('src', iframe.find('iframe').data('src'));
		$(this).hide();
		iframe.show();
	})
})

Iframe in a popup (general) - add iframe to content of popup  (like Embed the ec studio on your site by iframe)
 - The popup will have size like iframe (Default iframe size: 1280px x 720px)
 - On closed popup need run the code:
//example iframe added <iframe id="rdesign_studio_iframe" ...></iframe>document.querySelector('#rdesign_studio_iframe').src += "" Iframe in a popup (Wordpress & use Plugin Popup Maker)
 - add iframe to content of popup.
The html exmaple:
<div class="rdesign-ec-studio"> <div class="rdesign-iframe"> <iframe id="rdesign_studio_iframe" src="..." frameborder="0" allowfullscreen="allowfullscreen" rel="nofollow"></iframe> </div> </div>  - make size popup is 1280px x 720px
 - on closed popup will run the code: jQuery(function($){$('.pum-close.popmake-close').click(function(){document.querySelector('#rdesign_studio_iframe').src += "";})})

• A ManageStoreView Code (manage_store_view_code) is registered. To make sure your ManageStoreView, uses this API https://material-db.herokuapp.com/studio/manage_store_views/<manage_store_view_code>

• Step 3: Set iframe's src attribute, it should be the EC Studio URL https://ec.streaming.r.design/ec-studio?design_version_id=<design_version_id>&store_view=<manage_store_view_code>

Preparation:

• A web page where you want to embed our EC Studio streaming

• デザイン・バージョン IDが付与されていること
  • • Your design version should match: Active=TRUE, Debug=FALSE
  • • To make sure your design version, uses this API https://material-db.herokuapp.com/v1/design_versions/<design_version_id>

手順:

• Step 1: Give your web page domain name to our EC Studio server. Your URL should be whitelisted by our server developer.

• Step 2: 貴社ページ内にiframeを設定下さい。iframeはレスポンシブである必要があります。Develop an iframe in your web page. That iframe can responsive with all screens to have a best experience.

• Step 3: Set iframe's src attribute, it should be the EC Studio URL https://ec.streaming.r.design/ec-studio?design_version_id=<design_version_id>&store_view=<manage_store_view_code>

Preparation:

• A web page where you want to embed our EC Studio streaming. Based on your framework/platform, please choose the best way to include an iframe tag to your page content.

• A DesignVersion ID (design_version_id) is registered in our system. Contact with us if you don't know your design version ID.
  • • Your design version should match: Active=TRUE, Debug=FALSE
  • • To make sure your design version, uses this API https://material-db.herokuapp.com/v1/design_versions/<design_version_id>

Steps:

• Step 1: Give your web page domain name to our EC Studio server. Your URL should be whitelisted by our server developer.

• Step 2: Log in to our Community site and go to My Page https://community.r.design/en/my_page/

• Step 3: Select `Design Families` tag on your page. If you cannot see it, that meant your member account is not an admin or approver. Contact us for support.
  • 

• Step 4: On that page, search for your item if you do not see it by design version ID.
  
  If your item is approved by our system, you will see the `EC Studio URL` button on the right side of the item name, click on it.
  • 

• Step 5: After clicking, you will see a popup that contains your EC Studio URL, copy it by clicking on the copy icon.

• Step 6: Develop an iframe for your web page. The iframe's src should be your EC Studio URL. That iframe can responsive to all screens to have the best experience. Our studio is implemented for responsive desktop and mobile screens.

• Hide product prices: The price table will be shown as default. With this setting, that table will be hidden and you can open it by clicking on the info icon on the left.
  • 

• Hide multi elements selector: if your item has multi slots, this setting will be displayed.
  The EC studio will show the list of slots that can be applied to the same selected material. The setting will make the list invisible on the right sidebar.
  • 

• Hide a tab: it will hide the given tab in the right sidebar

• Open a default tab: if will open as default a selected tab and stick the sidebar to open

• Open a default fabric collection: if your item has some custom fabrics, this setting will be displayed
  There is a list of fabric collections that can be applied to your item. The setting will decide which collection can be expanded as default
  • 
  • 

• Show Add to cart button: Show the Add to cart button below the price table.
  • ❌

    Please make sure you already read and completed the Add to cart button section below.
  • ℹ️

    in some case, your Cart button cannot show because your current configuration does not hit any products from our system, please contact us if you want to have it

Default iframe size: 1280px x 720px

The fullscreen feature of that browser was stopped supporting from version 12. You can check the browser compatibility here

In order to fake a feature like fullscreen mode, we can make the iframe to fixed position by CSS, the width and height of that iframe is equal to the browser and can be overlap everything in the website.

• Go the My Page on Community site

• Click on `Design families` menu item
  • 
  • ℹ️

    You cant see that menu

    Please make sure you are logging in and your account is Approver type. If you don't know about it, please contact with administrator or supporter.

• Search your design family by name or design version SFID

• Click on `Studio URL` button on the right side of your design family name

• Check on `Show Add to cart button`
  • 

• Copy the URL result by clicking on the top right copy icon.

• Go back to your website and add or replace current URL to the copied URL to iframe's src

• When the user clicks on `Add to cart` button, a JS message is sent by iframe to the parent website. The message format looks like this

  • {
    	func: "addToCartFromIframe",
    	message: {
    		products: [
    			option_1: "<name>",
    			option_1_amount: 0,
    			option_1_sfid: "<sfid>",
    			option_2: "<name>",
    			option_2_amount: 0,
    			option_2_sfid: "<sfid>"
    			sku: "<product SKU>"
    			qty: 1
    		]
    	}
    }

• From parent website, add an `message` event listener to catch that one. It looks like this

  • window.addEventListener("message", function(event) {
    	const { func, message } = event.data;
    	if (func === "addToCartFromIframe") {
    		// process to add the products to your cart feature
    	}
    })

• After processing, sends a result message to iframe with these formats

  • Success case:
    {
    	func: "addToCartResultFromIframe",
    	message: { success: true }
    }
    failure case:
    {
    	func: "addToCartResultFromIframe",
    	message: { success: false, message: "<error message>" }
    }

• The JS script should looks like

  • var iFrame = document.getElementById("<iframe id>");
    iFrame.contentWindow.postMessage({ func: "addToCartResultFromIframe", message: { success: true } }, "*")

• How to refresh the streaming after closing the popup
  • • In Javascript code, trigger the popup close event
  • • Run this script when the event is fired

      • document.querySelector("THE IFRAME OF CLOSED POPUP").src += ""

  • • Replace `THE IFRAME OF CLOSED POPUP` with your iframe CSS selector