LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

【jQuery】LaunchCartでAjaxによるカートイン

テクニック

【jQuery】LaunchCartでAjaxによるカートイン

スターフィールドのブログで、以前カートインのアニメーションについて紹介させていただきました。このようにページ遷移させずにカートインさせる場合、実際にはAjaxによる処理を行う必要があります。

そこで今回は、LaunchCart上でAjaxによるカートインを実装する方法についてご紹介いたします。

方法

  1. カートインアニメーションのJavaScriptを用意
  2. LaunchCartのカートのテンプレートページでAjaxの処理を記述
  3. 各テンプレートの商品のカートインボタンにカートインのフォームを設置
  4. JavaScriptによるカートインアニメーションにAjaxの処理を追加

1. カートインアニメーションのJavaScriptを用意

今回は以前紹介したカートインアニメーションをLaunchCartに設置する場合を想定します。

※ Twigによりシステムから情報を動的に受け取る必要があるため、このJavaScriptのコードはLaunchCartのテンプレート上に記述する必要があります。

DEMO

【jQuery】放物線を使ったカートインアニメーション

2. LaunchCartのカートのテンプレートページでAjaxの処理を記述

LaunchCart管理画面で「デザイン」 > 「システムテンプレート」 > 「カート」でカートのテンプレートページに入ります。

ここで、Ajaxでカートページにアクセスした場合は、JSON形式で返すように場合分けします。

ポイントは、

{% set http_x = app.request.server.get(‘HTTP_X_REQUESTED_WITH’) %}

でリクエストヘッダのHTTP_X_REQUESTED_WITHプロパティを参照し、Ajaxかどうかを判定することです。

3. 各テンプレートの商品のカートインボタンにカートインのフォームを設置

各テンプレートの商品のカートインボタンに、通常のページ遷移と同様のフォームを設置します。

 

4. JavaScriptによるカートインアニメーションにAjaxの処理を追加

いよいよカートインアニメーションにAjaxの処理を追加します。

今回のアニメーションでは、まずカートインボタンをクリックしたタイミングで、Ajaxの処理を開始するようにします。

元のカートインアニメーションの処理では、アニメーションが終わったタイミングでダミーでカートイン成功のアニメーションやカートの数を変更する処理を行っていましたが、
カートイン成功のアニメーションとカートの数を変更する処理を、Ajaxでのカートインに成功したタイミングで、Ajaxで返ってきた情報をもとに行うように変更します。

アニメーション終了処理の記述を変更

Ajaxに成功した場合の処理を記述する箇所に、先程アニメーションの終了処理で削除した処理を一部変更して移植

Ajaxでの通信の場合にJSON形式のデータを返す方法は他のシステムページでの処理にも応用でき、LaunchCartでの表現の幅を大きく広げることが可能ですので、ぜひ試してみてください。

 

今回のカートインアニメーションのJavaScript全文

 

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。

LaunchCart のお申込みはこちら

1ヶ月無料でご利用いただけます