# ec studio
# 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チーム）。
* [デザイン・バージョン](https://docs.r.design/pages/viewpage.action?pageId=69402876)について、以下の設定が必要です。
* 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
下記コードを、ウェブサイトの開発者の方に該当するページに適用頂くよう、ご依頼ください。但し、`
// 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](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#browser_compatibility)
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.
## `` `document.querySelector('#rdesign_studio_iframe').src += ""` **Iframe in a popup (Wordpress & use Plugin** Popup Maker)
- add iframe to content of popup.
The html exmaple:
`` - 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/](https://material-db.herokuapp.com/studio/manage_store_views/am_shop_ja)
* Step 3: Set iframe's src attribute, it should be the EC Studio URL [https://ec.streaming.r.design/ec-studio?design_version_id=](https://ec.streaming.r.design/ec-studio?design_version_id=a4010000000k3zaAAA)&store_view=
Preparation:
* A web page where you want to embed our EC Studio streaming
* [デザイン・バージョン](https://docs.r.design/pages/viewpage.action?pageId=69402876) 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/](https://material-db.herokuapp.com/v1/design_versions/a4010000000k3zaAAA)
手順:
* 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=](https://ec.streaming.r.design/ec-studio?design_version_id=a4010000000k3zaAAA)&store_view=
# 設定項目
| 1 | Property | 2 | 3 | Files |
|:----|:---------|:----|:----|:------|
| **右パネル**
バリエーション選択 | [メッシュ・タブ](/doc/44oh44od44k344ol44o744k44ow-LLhVHb6HWD) | | | |
| | [マテリアル・タブ](/doc/44oe44og44oq44ki44or44o744k44ov44kz-WIJ0dvcgdS) | | [マテリアル定義レコード](https://docs.r.design/pages/viewpage.action?pageId=69402801)の下記項目にて設定
•
アイテム設定での表示ラベル(英)
•
アイテム設定での表示ラベル(日) |  |
| | [カスタム・アイテム・タブ](/doc/44kr44k544k44og44o744ki44kk44og44og44o744k44ow-deI4id5ZzX) | | | |
| メッシュ・タブ内 | [Untitled](/doc/untitled-DSyxEF3fvU) | | • メッシュ名
•
メッシュ名（日） |  |
| | [Untitled](/doc/untitled-dqNsUGZ0Ah) | | | |
| カスタム・アイテム・タブ内 | [Untitled](/doc/untitled-wQEHNoRTP9) | | [カスタム・アイテムの保存](https://docs.r.design/pages/viewpage.action?pageId=71992016)
[カスタム・アイテムの公開](https://docs.r.design/pages/viewpage.action?pageId=71992076) |  |
| | [Untitled](/doc/untitled-FKMsF4CPsT) | | [カスタム・オプション用のデザイン・ファミリー](https://docs.r.design/pages/viewpage.action?pageId=91193645)
ファブリック・コレクションを各アイテムに紐づける場合
‐ 各デザイン・ファミリー |  |
| | [Untitled](/doc/untitled-GQLdrytjFe) | | [商品属性と属性値の登録](https://docs.r.design/pages/viewpage.action?pageId=71991851) |  |
# 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](https://docs.r.design/pages/viewpage.action?pageId=69402876) 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/](https://material-db.herokuapp.com/v1/design_versions/a4010000000k3zaAAA)
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
* 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:
```XML
allowfullscreen="allowfullscreen"
```
```XML
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](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#browser_compatibility)
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.
# 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
```JavaScript
{
func: "addToCartFromIframe",
message: {
products: [
option_1: "",
option_1_amount: 0,
option_1_sfid: "",
option_2: "",
option_2_amount: 0,
option_2_sfid: ""
sku: ""
qty: 1
]
}
}
```
* From parent website, add an \`message\` event listener to catch that one. It looks like this
```JavaScript
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
```JavaScript
Success case:
{
func: "addToCartResultFromIframe",
message: { success: true }
}
failure case:
{
func: "addToCartResultFromIframe",
message: { success: false, message: "" }
}
```
* The JS script should looks like
```JavaScript
var iFrame = document.getElementById("