この記事では、TangibleeをPDP上のCarouselに統合することに重点を置き、そのユースケースでTangibleeがサポートする統合方法と、各PDP構造に適合する可能性のある統合タイプについて概説します。
[.good] 注意:PDPにカルーセルが含まれていない場合、統合はかなり単純で、記事の残りの部分はあまり重要ではないため、以下に基づくクライアント側統合の使用をお勧めします。 セミマネージド または 管理対象 統合。[.良い]
PDPにカルーセルが含まれていて、カルーセルが変更可能な場合（たとえば、ページのレンダリング中に外部JSスクリプトによってクライアント側で変更できる）、やはり統合はかなり簡単です。Tangiblee のアカウントマネージャーに、カルーセルが変更可能であることを伝えてください。
それ以外の場合、カルーセルはあっても変更できない場合は、次のオプションを使用できます。
1。カルーセルにプレースホルダーを追加 (有形CTA用)
すべての PDP にプレースホルダーが必要なわけではないため、実際にプレースホルダーをページに追加する必要があるかどうかを確認する必要があります。そのためには、Tangiblee プラットフォームに API リクエストを送信して、PDP 上の現在の SKU が Tangiblee で公開されている場合は TRUE を返し、公開されていない場合は FALSE を返すという方法があります。
この API 呼び出しは Tangiblee サーバーに直接送信され、以下で使用される Tangiblee API スクリプトで使用可能な API メソッドには依存しません。 セミマネージド そして セルフサービス 統合。以下の API コールの例をご覧ください。
カルーセルが一度作成されても変更されない場合（たとえば、ページにSKUが1つしかなく、ブラウザのサイズ変更やPDPアクションでカルーセルが更新されない場合）、その間にプレースホルダーを追加する必要があります（Tangiblee APIが特定のSKUに対してFALSEを返した場合は追加しないでください） カルーセル初期化 イベント。
ページの有効期間中にカルーセルを更新できる場合（たとえば、ページに多数のSKUがあり、アクティブなSKUの変更時にカルーセルが更新される場合や、ブラウザのサイズ変更時にカルーセルが更新される場合など）、プレースホルダーをその間に追加する必要があります。 カルーセル初期化 イベントと各カルーセルの後 再ペイント または 再建 イベント。
プレースホルダーは、クライアント側またはサーバー側に追加できます。各オプションの詳細は以下のとおりです。
1.a。サーバー側にプレースホルダーを追加します。
サーバー側でギャラリーを操作する方が便利な場合は、そこにAPI呼び出しを実装できます。
サーバー側プラットフォームとして使用される C# と ASP.NET で記述されたサーバー側 API 呼び出しのコード例:
WebRequest request = WebRequest.Create("https://api.tangiblee.com/api/tngimpr?ids=GREEN_PRODUCT_SKU,WHITE_PRODUCT_SKU,LIME_PRODUCT_SKU&domain=www.example.com");
WebResponse response = request.GetResponse();
using (Stream dataStream = response.GetResponseStream())
{
StreamReader reader = new StreamReader(dataStream);
string responseFromServer = reader.ReadToEnd();
Console.WriteLine(responseFromServer);
/*
responseFromServer will be a JSON object in the following format.
The "exists" object contains all the data needed to determine if the CTA should be displayed for a given SKU.
In the example below Tangiblee placeholder should not be added when WHITE_PRODUCT_SKU is currently selected on the PDP as the Active SKU.
If Active SKU is GREEN_PRODUCT_SKU or LIME_PRODUCT_SKU then Tangiblee placeholder should be added.
{
"exists":{
"GREEN_PRODUCT_SKU": true,
"WHITE_PRODUCT_SKU": false,
"LIME_PRODUCT_SKU": true
},
"products":{
"GREEN_PRODUCT_SKU":{
"approved":true,
"category":"Handbags",
"gender":"Unisex",
"id":"GREEN_PRODUCT_SKU"
},
"WHITE_PRODUCT_SKU":{
"approved":false,
"category":"Handbags",
"gender":"Unisex",
"id":"WHITE_PRODUCT_SKU"
},
"LIME_PRODUCT_SKU":{
"approved":true,
"category":"Handbags",
"gender":"Unisex",
"id":"LIME_PRODUCT_SKU"
}
}
}
*/
}
response.Close();
1.b。クライアント側にプレースホルダーを追加します。
クライアント側でギャラリーを操作する方が便利な場合は、そこにAPI呼び出しを実装できます。
クライアント側 API 呼び出しのコード例:
var url = 'https://api.tangiblee.com/api/tngimpr?ids=GREEN_PRODUCT_SKU,WHITE_PRODUCT_SKU,LIME_PRODUCT_SKU&domain=www.example.com';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState > 3 && xhr.status >= 200 && xhr.status > 400) {
var response = xhr.responseText.length && JSON.parse(xhr.responseText);
/* response will be a JSON object in the following format.
The "exists" object contains all the data needed to determine if the CTA should be displayed for a given SKU.
In the example below Tangiblee placeholder should not be added when WHITE_PRODUCT_SKU is currently selected on the PDP as the Active SKU.
If Active SKU is GREEN_PRODUCT_SKU or LIME_PRODUCT_SKU then Tangiblee placeholder should be added.
{
"exists":{
"GREEN_PRODUCT_SKU": true,
"WHITE_PRODUCT_SKU": false,
"LIME_PRODUCT_SKU": true
},
"products":{
"GREEN_PRODUCT_SKU":{
"approved":true,
"category":"Handbags",
"gender":"Unisex",
"id":"GREEN_PRODUCT_SKU"
},
"WHITE_PRODUCT_SKU":{
"approved":false,
"category":"Handbags",
"gender":"Unisex",
"id":"WHITE_PRODUCT_SKU"
},
"LIME_PRODUCT_SKU":{
"approved":true,
"category":"Handbags",
"gender":"Unisex",
"id":"LIME_PRODUCT_SKU"
}
}
}
*/
}
};
xhr.send(data);
1.c。 フォールバック:常にプレースホルダーを追加
Tangiblee API リクエストなしで、カルーセルの作成/更新ごとにプレースホルダーを追加できます。この場合、 tangiblee-mapper.js API リクエストを実行します 後 プレースホルダーが追加されます。API リクエストが FALSE を返す場合は、 tangiblee-mapper.js プレースホルダーが非表示になります。
この方法を使用する場合 (常にプレースホルダーを追加する場合)、Tangiblee API リクエストが FALSE を返す場合、2 つの欠点があります。
- プレースホルダーを非表示にするとちらつきが発生します。
- プレースホルダーを非表示にしたり削除したりしても、カルーセルの実装によって問題が発生しない場合があります。たとえば、カルーセルの幅は初期化時にのみ設定され、カルーセルアイテムが削除されても更新されない場合などです。
[.悪い]警告: この方法では、非表示にしたり、実際の Tangiblee CTA に置き換えたりすると、サムネイルがちらつくことがあります。[.bad]
以下は、常に追加されるプレースホルダーの例です。 BX スライダー カルーセルプラグインの例として使用：
HTML:
<div class="bxslider">
<div><img src="/assets/images/coffee1.jpg" title="Funky roots"></div>
<div><img src="/assets/images/coffee2.jpg" title="The long and winding road"></div>
<div><img src="/assets/images/coffee3.jpg" title="Happy trees"></div>
<div class="tangiblee-placeholder"></div>
</div>
JS:
$(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
});
[.good] 注意:カルーセルにプレースホルダーを追加するときは、実装したオプションに関係なく、必ずそのプレースホルダーをPDP内のすべてのカルーセルに追加してください。たとえば、一部のPDPにはPDP自体用のカルーセルがあり、製品のズームインビューを開くと別のカルーセルが含まれます。[.good]
2。カルーセルを更新して可変にする
通常、これにはサーバー側とクライアント側の両方で変更が必要です。カルーセルが機能するために必要な HTML を準備するために、サーバー側での変更が必要になることがあります。カルーセルコードを実行するには、クライアント側の変更が必要です。
これは、その場で動的なアイテムを追加できるSlickカルーセルプラグインの使用例です。これにより、Tangiblee スクリプトが API リクエストを実行し、レスポンスを待ってから、Tangiblee API リクエストが返された場合に新しいカルーセルアイテム (Tangiblee CTA) を挿入できます。 本当。
HTML:
<div class="product-gallery">
<div>
<h3>First slide</h3>
</div>
<div>
<h3>Second slide</h3>
</div>
</div>
JS (クライアントのコード):
$('.product-gallery').slick({ slidesToShow: 3, slidesToScroll: 3 });
JS (有形コード):
$('.add-remove').slick('slickAdd','<div><a href="javascript:void(0)" class="tangiblee-cta">View Size</a></div>'); });
