ec studio

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.

How to embed the ec studio on your website

Step 1　Whitelist the domain of website to which the studio will be embed

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

Step 2　Create an ec studio package for each item

対象アイテムが属するデザイン・ファミリーについて、ecスタジオ向けにベイク作業を行い、ecスタジオ向けにパッケージを行います（R.Designチーム）。
デザイン・バージョンについて、以下の設定が必要です。
- Active=TRUE
- Debug=FALSE
デザイン・ファミリーのStatus | ec studioフィールドの値を「Requested」にして、R.Designチームに作業依頼をしてください。

Step 3　Get an URL for the target item's streaming

Step 4　Configure an iframe

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

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

CSS and HTML to apply

下記コードを、ウェブサイトの開発者の方に該当するページに適用頂くよう、ご依頼ください。但し、<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();
	})
})

ℹ️

Full Screen Mode

In order to make your EC Studio goes fullscreen mode, you must add `allowFullScreen="allowFullScreen"` attribute to the iframe
To support full browser, please use these attributes:



`Most recent browsers`	`allowfullscreen="allowfullscreen"`
`Old Firefox`	`mozallowfullscreen="mozallowfullscreen"`
Old Internet Explorer	`msallowfullscreen="msallowfullscreen"`
Old Opera	`oallowfullscreen="oallowfullscreen"`
Old Chrome	`webkitallowfullscreen="webkitallowfullscreen"`

❌

Fullscreen button for iOS Safari browser

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.

`<iframe>` の src 属性の値（iframeで埋め込むURL）

Step 4-2　Configure an iframe in a popup

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 += ""; }) })

「カートに入れる」ボタンをECサイトと連動させたい場合（オプション機能）

手順１　Manage Store Viewレコードの作成

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>

設定項目

1	Property	3
右パネルバリエーション選択	メッシュ・タブ
	マテリアル・タブ	マテリアル定義レコードの下記項目にて設定 • アイテム設定での表示ラベル(英) • アイテム設定での表示ラベル(日)
	カスタム・アイテム・タブ
メッシュ・タブ内	Untitled	• メッシュ名 • メッシュ名（日）
	Untitled
カスタム・アイテム・タブ内	Untitled	カスタム・アイテムの保存カスタム・アイテムの公開
	Untitled	カスタム・オプション用のデザイン・ファミリーファブリック・コレクションを各アイテムに紐づける場合 ‐　各デザイン・ファミリー
	Untitled	商品属性と属性値の登録

Embed the ec studio on your site by iframe

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.

ℹ️

Iframe permission

In order to make your EC Studio goes fullscreen mode, you must add `allowFullScreen="allowFullScreen"` attribute to the iframe

❌

Support fullscreen for browsers

To support full browser, please use these attributes:

allowfullscreen="allowfullscreen"

mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"

EC Studio layout settings

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

❌

EC Studio with setting changes

Please copy your EC Studio URL after finishing your setting so that all your settings can be applied correctly

iFrame size settings for desktop and for mobile

Default iframe size: 1280px x 720px

Fullscreen button for iOS Safari browser

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

Add to cart button

Step 1: Enable the Add to cart button for your design family at Community Site.

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.

Step 2: Update the new studio URL to your iframe's src

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

Step 3: Implement a JS script at your website to receive a message sent out from EC Studio.

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

Step 4: Send a result to iframe with `postMessage` method

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 } }, "*")

ℹ️

Whitelist your site URL for the streaming

Iframe in a popup

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

ec studio

ec studio

How to embed the ec studio on your website

Step 1 Whitelist the domain of website to which the studio will be embed

Step 2 Create an ec studio package for each item

Step 3 Get an URL for the target item's streaming

Step 4 Configure an iframe

CSS and HTML to apply

<iframe> の src 属性の値（iframeで埋め込むURL）

Step 4-2 Configure an iframe in a popup

「カートに入れる」ボタンをECサイトと連動させたい場合（オプション機能）

手順１ Manage Store Viewレコードの作成

設定項目

Embed the ec studio on your site by iframe

EC Studio layout settings

iFrame size settings for desktop and for mobile

Fullscreen button for iOS Safari browser

Add to cart button

Step 1: Enable the Add to cart button for your design family at Community Site.

Step 2: Update the new studio URL to your iframe's src

Step 3: Implement a JS script at your website to receive a message sent out from EC Studio.

Step 4: Send a result to iframe with `postMessage` method

Iframe in a popup

Step 1　Whitelist the domain of website to which the studio will be embed

Step 2　Create an ec studio package for each item

Step 3　Get an URL for the target item's streaming

Step 4　Configure an iframe

`<iframe>` の src 属性の値（iframeで埋め込むURL）

Step 4-2　Configure an iframe in a popup

手順１　Manage Store Viewレコードの作成