Zen Cartカスタマイズ：商品情報や購入ボタンをランディングページに埋め込むAPIモジュール開発

Zen Cartの弊社独自版「 Zen Cartハイエンド」のカスタマイズ事例をご紹介します。

Zen Cartのデータベースに格納された商品情報を、ランディングページなど任意のページで表示できる「 商品情報表示API」モジュール を開発しました。

Zen Cart 商品情報表示APIモジュールの概要

このモジュールでは、APIを経由して商品説明、価格、在庫情報、オプション（色やサイズなど）、[カートに入れる]ボタンなどを、別のページに埋め込むことができます。商品の説明や価格はデータベースを参照して動的にアップデートされるので、価格や在庫が頻繁に変動する商品などで活用すると特に便利です。

他にも、こんなメリットがあります。

[カートに入れる]ボタンを押すとZen Cartのショッピングカート画面に遷移し、そのまま決済が可能
APIの問い合わせ結果はJSONで返されるため軽量で、出力先ページのCSSを適用できるのでデザインの統一が容易
管理画面から[許可ドメイン]を設定することで、別のドメイン内にあるページにも商品情報を表示可能

実際の組み込み方

商品情報を表示したいページで、以下のようにJSを読み込みます。

＜script type="text/javascript" src="js/purl.js"＞＜/script＞
＜script type="text/javascript" src="js/shop_api.js"＞＜/script＞

※コード中の【n】は注釈番号であり、実際のコードでは必要ありません。

＜script＞
$(document).ready(function(){

    shopApi.add_to_cart({
        p_model : 'SAMPLE-T47',    【1】
        description : 'OFF',       【2】
        after_success : function(res, mode) {
            【3】
            $("#shop-api-result").prepend(res); // ※商品情報を表示する位置を指定
            
            【4】
            if (mode === 'iframe') {
              $("#shop-api-result iframe").css('width',  '800px');
              $("#shop-api-result iframe").css('height', '150px');
              $("#shop-api-result iframe").css('border', '0px black solid');
            }
        }
    });
});
＜/script＞

HTMLには id="shop-api-result" のdivを用意しておきます。

＜div id="shop-api-result"＞＜/div＞

準備するものはこれだけです。

【1】商品型番を指定する
【2】商品詳細の出力のON/OFF
【3】id="shop-api-result"というdivタグを用意し、そこに res の内容を出力
【4】クロスドメインで接続する際にIE10以下の場合は iframe を利用。iframeのサイズを記述 (同一ドメインであればAjax可能)

商品情報を表示したいページと、商品情報を持つZen Cartが別ドメインの場合でも、管理画面で許可済みのドメインに クロスドメイン通信（CORS：Cross-Origin Resource Sharing） で出力するので問題ありません。

---

アークウェブは、Zen Cartによるオンラインショップの構築、さまざまなカスタマイズ開発を数多く経験しています。ご興味があれば、ぜひお問い合わせください。