WooCommerce AJAXをカートに追加–ステップバイステップのチュートリアル
公開: 2019-11-20数週間前、カート機能をプログラムで追加して売り上げを伸ばす方法について話しました。 今日は、WooCommerce製品の[カートに追加]ボタンでAJAXを実装する方法を見ていきます。 これにより、ユーザーエクスペリエンスと全体的な販売プロセスが改善され、ストアの最適化と収益の増加にも役立ちます。
今日、成功したストアを運営したい場合は、サイトがカートを動的に更新することが重要です。 そうしないと、ユーザーが商品をカートに追加するたびにページがリロードされ、購入プロセスが非常に遅くなり、顧客が脱落する可能性が高くなります。 そのため、WooCommerce AJAXのカートへの追加機能を使用してストアを刷新することは、カートの放棄を減らし、売り上げを伸ばすために必須です。
このガイドでは、それを行う方法を段階的に説明します。
WooCommerceでのAJAXの利点
要約すると、ストアでAJAXを使用する利点は次のとおりです。
- サーバーの負荷と帯域幅を削減します
- 購入プロセスをスピードアップ
- カスタマーエクスペリエンスを向上させる
- カートの放棄を減らす
- コンバージョン率を上げる
チュートリアル：WooCommerceAJAXをカートに追加
WooCommerceでAJAXのカートへの追加機能を適用するには、次の2つのオプションがあります。
- プラグイン付き
- 自分でコーディングする
それぞれの方法を見てみましょう。
1）プラグインを使用してAJAXをカートに追加
コーディングの経験がない場合、または簡単なソリューションを好む場合は、プラグインを使用することをお勧めします。 AJAX add to cart WooCommerceプラグインをダウンロードしてインストールするだけで、ソフトウェアが残りの作業を行います。
AjaxがWooCommerceのカートに追加
WooCommerceのカートに追加するAJAXは、WooCommerceのカートに追加ボタンにAJAXを追加するのに最適なプラグインの1つです。 このツールを使用すると、買い物客は毎回サイトをリロードしなくても、カートに単一または可変の商品を含めることができます。 さらに優れているのは、WordPressテーマの99％でスムーズに実行され、初期設定が不要なことです。 インストールすると、すぐに使用できるようになります。
2）自分でコーディングする
コーディングスキルがあり、WooCommerce AJAXのカートに追加ボタンをカスタマイズしたいですか？ このガイドでは、それを行う方法を段階的に説明します。
A）子テーマをインストールする
最初に行う必要があるのは、子テーマを作成することです。 プラグインをお持ちでない場合は、プラグインを使用できます。 それらはいくつかありますので、一番好きなものを選んでストアにインストールしてください。 なぜ子テーマをインストールする必要があるのですか？ テーマのファイルを直接カスタマイズすると、次にテーマを更新したときに、新しいファイルが変更を置き換え、すべてのカスタマイズが失われるためです。 ただし、子テーマをカスタマイズした場合、変更は上書きされません。
B）JavaScript（JS）ファイルを含める
子テーマのfunctions.phpファイルに、 wp_enqueue_scriptフックを使用してJavaScriptファイルを含めます。 これは、WordPressがWebサイトをカスタマイズするために提供する最も人気のあるフックの1つです。 以下のajax_add_to_cart.jsファイルを含むスクリプトを見てみましょう。
関数ql_woocommerce_ajax_add_to_cart_js（）{
if（function_exists（ 'is_product'）&& is_product（））{
wp_enqueue_script（ 'custom_script'、get_bloginfo（ 'stylesheet_directory'）。 '/ js / ajax_add_to_cart.js'、array（ 'jquery'）、 '1.0'）;
}
}
add_action（ 'wp_enqueue_scripts'、 'ql_woocommerce_ajax_add_to_cart_js'）;2行目の条件付きif（function_exists（ 'is_product'）&& is_product（））を使用して、JQueryが製品ページにのみ適用されるようにします。
C）JSファイルを作成する
それが完了したら、前の手順で含めたファイルを作成します。 cPanelに移動してから、子テーマフォルダーに移動します。 その後、ルートwp_content / themes /フォルダーをたどります。 そこで、子テーマにjsという名前の新しいフォルダーを作成し、その中にフックajax-add-to-cart.jsで使用したのと同じ名前のファイルを作成します。 FTPクライアントを使用している場合でも、この手順は機能することに注意してください。 子テーマにすでにJSフォルダーがある場合は、新しいフォルダーを作成せずに使用できます。
D）JQuery / JSファイル
次のステップは、子テーマでアップロードしたJQueryファイルで作業することです。 そのファイルは空なので、スクリプトを追加する必要があります。 まず、次のスクリプトを使用して、[カートに追加]ボタンがページを再読み込みしないようにします。
$（ '。single_add_to_cart_button'）。on（ 'click'、function（e）{
e.preventDefault（）;
}）;$（ '。single_add_to_cart_button'）セレクターを使用して、ボタンがクリックされたときにAJAX呼び出しをトリガーすることに注意してください。 次のすべてのスクリプトはこの関数内に入るので、これを理解する必要があります。
E）JQuery WooCommerceAJAXは単一の製品のカートに追加します
したがって、単一の製品のカートに追加するAJAXの完全なJQueryスクリプトは次のとおりです。
jQuery（document）.ready（function（$）{
$（ '。single_add_to_cart_button'）。on（ 'click'、function（e）{
e.preventDefault（）;
$ thisbutton = $（this）、
$ form = $ thisbutton.closest（ 'form.cart'）、
id = $ thisbutton.val（）、
product_qty = $ form.find（ 'input [name = Quantity]'）。val（）|| 1、
product_id = $ form.find（ 'input [name = product_id]'）。val（）|| id、
バリエーションID = $ form.find（ 'input [name = Variation_id]'）。val（）|| 0;
var data = {
アクション： 'ql_woocommerce_ajax_add_to_cart'、
product_id：product_id、
product_sku： ''、
数量：product_qty、
バリエーションID：バリエーションID、
};
$ .ajax（{
タイプ： '投稿'、
url：wc_add_to_cart_params.ajax_url、
データ：データ、
beforeSend：関数（応答）{
$ thisbutton.removeClass（ 'added'）。addClass（ 'loading'）;
}、
完了：関数（応答）{
$ thisbutton.addClass（ 'added'）。removeClass（ 'loading'）;
}、
成功：関数（応答）{
if（response.error＆response.product_url）{
window.location = response.product_url;
戻る;
} それ以外 {
$（document.body）.trigger（ 'added_to_cart'、[response.fragments、response.cart_hash、$ thisbutton]）;
}
}、
}）;
}）;
}）;F）PHPスクリプト
その後、PHPハンドラーが必要になります。 最良の方法は、いくつかのWooCommerceフィルターフックを使用してカートに追加機能を構築することです。 今回はAJAXを使用して行います。 次のスクリプトをコピーして、JSファイルを含めるために使用した前のスクリプトの下の子テーマのfunctions.phpファイルに貼り付けます。
add_action（ 'wp_ajax_ql_woocommerce_ajax_add_to_cart'、 'ql_woocommerce_ajax_add_to_cart'）;
add_action（ 'wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart'、 'ql_woocommerce_ajax_add_to_cart'）;
関数ql_woocommerce_ajax_add_to_cart（）{
$ product_id = apply_filters（ 'ql_woocommerce_add_to_cart_product_id'、absint（$ _ POST ['product_id']））;
$ Quantity = empty（$ _ POST ['quantity']）？ 1：wc_stock_amount（$ _ POST ['quantity']）;
$ Variation_id = absint（$ _ POST ['variation_id']）;
$ passed_validation = apply_filters（ 'ql_woocommerce_add_to_cart_validation'、true、$ product_id、$ Quantity）;
$ product_status = get_post_status（$ product_id）;
if（$ passed_validation && WC（）-> cart-> add_to_cart（$ product_id、$ quantity、$ variation_id）&& 'publish' === $ product_status）{
do_action（ 'ql_woocommerce_ajax_added_to_cart'、$ product_id）;
if（ 'yes' === get_option（ 'ql_woocommerce_cart_redirect_after_add'））{
wc_add_to_cart_message（array（$ product_id => $ amount）、true）;
}
WC_AJAX :: get_refreshed_fragments（）;
} それ以外 {
$ data = array（
'エラー' => true、
'product_url' => apply_filters（ 'ql_woocommerce_cart_redirect_after_error'、get_permalink（$ product_id）、$ product_id））;
echo wp_send_json（$ data）;
}
wp_die（）;
}それでおしまい！ WooCommerceAJAXのカートに追加ボタンを作成しました。 しかし、すべてが正しく行われたことをどうやって知ることができますか？ 簡単に確認できます。 [カートに追加]ボタンをクリックすると、ページをリロードせずに商品がカートに追加されます。
結論
全体として、ストアを最適化する場合は、WooCommerceAJAXのカートへの追加機能が必須です。 それを適用する簡単な方法は、カートに追加するAJAXWooCommerceプラグインを使用することです。 ただし、コーディングスキルがある場合は、上記のように、子テーマと少しのPHPを使用してAJAXaddをコーディングしてカートに入れることができます。
どちらのオプションも優れているため、ニーズとスキルに適したものを選択してください。 これにより、ユーザーエクスペリエンスが向上し、コンバージョン率が向上します。 下記のコメント欄にご意見をお聞かせください。
最後に、WooCommerceに関するその他のガイドについては、WooCommerce製品を追加する方法、およびWooCommerceでデフォルトの製品属性を作成する方法に関するガイドを確認することをお勧めします。