モバイルアプリの統合

モバイルアプリとの統合方法:

商品詳細画面が開いたら、SKUを検証する必要があります。API リクエストは次のエンドポイントに送信する必要があります。

https://api.tangiblee.com/api/tngimpr?ids=<sku1>&domain=<domain>&activeLocale=en

どこ sku は現在のバリエーション SKU で、ドメインはあなたのドメインでなければなりません。

ユーザーがPDPをクリックすると、WebViewコンポーネントを含む画面が開き、次の形式でURLを渡す必要があります。

https://cdn.tangiblee.com/widget/index.html?id=sku&domain=<retailer domain>&useCookies=true&price=<price>&currency=<currency symbol>

アプリ構成

ARを表示する必要がある場合は、カメラの権限を指定する必要があります。

iOS‍

1。info.plist に次のコードを追加する必要があります (追加するには、右クリックして [ソースコードとして表示] を選択します)。

<key>NSCameraUsageDescription</key>
<string>Camera Access</string>

2。WebView を作成し、Web 設定の AllowsInlineMediaPlayback フィールドを true に設定します。

コード例:

class ViewController: UIViewController, WKUIDelegate {
var webView: WKWebView!

	override func loadView() {
	    let webConfiguration = WKWebViewConfiguration()
	    webConfiguration.allowsInlineMediaPlayback = true
	    webView = WKWebView(frame: .zero, configuration: webConfiguration)
	    webView.uiDelegate = self
	    view = webView
	}
	
	override func viewDidLoad() {
	    super.viewDidLoad()         
	    let myURL = URL(string:"https://cdn.tangiblee.com/widget/index.html?id=th1791880&domain=titan.co.in&useCookies=true&price=13495.00&currency=₹&version=3.1.1.180")
	    let myRequest = URLRequest(url: myURL!)
	    webView.load(myRequest)
	}
}

アンドロイド‍

1。マニフェストファイルに追加:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA" />

2。WebView エレメントを activity_main.xml (または別の.xml ファイル) に追加します。

コード例:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

3。MainActivity.kt (または別の.java または.kt ファイル) に次のコードを追加します。

class MainActivity : AppCompatActivity() {
    val PERMISSION_CAMERA_REQUEST_CODE = 200
    lateinit var webView: WebView;

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        requestPermissions(this, arrayOf(Manifest.permission.CAMERA), PERMISSION_CAMERA_REQUEST_CODE)

        webView = findViewById(R.id.webview)
        webView.setWebChromeClient(object : WebChromeClient() {
            override fun onPermissionRequest(request: PermissionRequest) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    request.grant(request.resources)
                }
            }
        })

        webView.loadUrl("https://cdn.tangiblee.com/widget/index.html?id=th1791880&domain=titan.co.in&useCookies=true&price=13495.00¤cy=₹&version=3.1.1.180")
        webView.settings.javaScriptEnabled = true
    }
}

‍

アプリの「閉じる」ボタンと ATC ボタンの削除

デフォルトでは、Tangiblee ウィジェットには「閉じる」ボタンと「カートに追加」ボタンが含まれています。

通常のウィジェットのATCボタンと閉じるボタンは、 メッセージを投稿 () Tangiblee iFrameからPDPの統合スクリプトまで。これにより、カートにアイテムを追加したり、オーバーレイを閉じたりできます。

ただし、Tangiblee iFrameと統合スクリプトを使用した場合のこの関係 メッセージを投稿 () アプリ内では使用できません。そのため、最適なユーザーエクスペリエンスを実現するために、これらの Tangiblee ボタンをアプリから削除することをおすすめします。

アプリから ATC ボタンと「閉じる」ボタンを削除する方法:

1. 有形ATCボタンを削除する場合：
   1. を削除する 価格、 通貨、および ディスカウント WebView の URL からのパラメータ。
2. タンジブルの「閉じる」ボタンを削除する方法：
   1. 追加 & 外部クラス = モバイルアプリ WebView の URL へのパラメータ。

変更前:

https://cdn.tangiblee.com/widget/index.html?id=zptxce&domain=www.ldj.com&useCookies=1&price=240.00&currency=$&discount=300.00&wishlist=&outOfStock=0&ifn=default&v=5.1.1

後:

https://cdn.tangiblee.com/widget/index.html?id=zptxce&domain=www.ldj.com&useCookies=1&outOfStock=0&externalClasses=mobile-app

‍

制限事項

Tangiblee にはまだモバイル SDK がありません。モバイルアプリに Tangiblee を追加したい場合は、アカウントマネージャーに知らせてください。オプションを提供させていただきます。

iOS 上の AR は v14.3 からサポートされています。これより古いバージョンでは、Tangiblee CTA を非表示にする必要があります。

‍