web-dev-qa-db-ja.com

AjaxifyヘッダーカートアイテムはWoocommerceでカウントされます

WordPress用のカスタムwoocommerce統合テーマを作成しています。

カート内のアイテムの総数を表示するblobが上部にあり、Jqueryを使用してこのblobを更新したい（ページをリロードせずに）現在の数を取得することでアイテムの数を増やすことができましたブロブをクリックするたびに+1ずつ増やすと、問題はカートに追加するオプションにカートに追加するアイテムの数を選択できることです。したがって、3つのアイテムを選択してボタンをクリックすると、ブロブは1つだけ増加します。

追加するアイテムの数をフロントエンドから取得する方法を作成することはできますが、それは不要だと思います。 jqueryを使用してPHPセッションから合計数を取得できるようにしたいので、アイテムの追加または削除をクリックするたびに、サーバーから現在の数を動的に取得します。

これまでに行ったことは、カートの合計をエコーするreloadCart.phpファイルを作成することです。これがコードです。

<?php
require('../../../wp-blog-header.php');
global $woocommerce;
echo $woocommerce->cart->get_cart_contents_count();
?>

このページにアクセスすると、現在のアイテムの合計がエコーされますが、jqueryからこのデータを取得できません。最後に使用してからしばらく経ちますAJAXまた、Webプロジェクトに長い間取り組んでいません時間ですが、私が覚えていることでは、私が行っているAJAX呼び出しは正しいです。

Jqueryのget（）関数とpost（）関数、および通常のajax（）関数を使用してみましたが、何も機能しないようです。誰か助けてもらえますか？

$(".ajax_add_to_cart").click(function () {
   /*$("#bag-total").html(function () {
        var bagTotal = parseInt($(this).html());
        return ++bagTotal;
    });*/
    alert('clicked');
    $.get("<?php echo get_template_directory_uri(); ?>/reloadCart.php", function(data){
        alert("Data: " + data);
    });
});

コメントされている行は、フロントエンドから現在のカート番号を取得してカートの合計を追加するために以前に使用した行です。

どんな助けでもいただければ幸いです。前もって感謝します！

phpjqueryajaxwordpresswoocommerce
3
Rohit Nair

リロードは使用しないでくださいカートのコンテンツ数を更新します…代わりに、専用の_woocommerce_add_to_cart_fragments_アクションフックを使用する必要がありますAjaxパワード。

1）更新するHTML：したがって、最初にテーマの_header.php_ファイルで、定義された一意のID（またはクラス）を持つ特定のhtmlタグにカートカウントを埋め込む必要があります。たとえば、次のようなものです。

_?>
    <div id="mini-cart-count"></div>
<?php
_

または：

_echo '<div id="mini-cart-count"></div>';
_

2）コード：

_add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments){
    ob_start();
    ?>
    <div id="mini-cart-count">
        <?php echo WC()->cart->get_cart_contents_count(); ?>
    </div>
    <?php
        $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}
_

htmlタグでクラスを使用する場合は、_['#mini-cart-count']_を_['.mini-cart-count']_に置き換えます。このフックは、ミニカートの内容を更新するためにも使用されます。

コードは、アクティブな子テーマ（またはテーマ）のfunction.phpファイル、または任意のプラグインファイルに含まれます。

数年後、_global $woocommerce;_ + _$woocommerce->cart_は古くなり、WooCommerceカートオブジェクトにアクセスするためにWC()->cartに置き換えられました。

そのカウントを強制的に更新するためにjQueryが必要な場合は、次のような_wc_fragment_refresh_または_wc_fragments_refreshed_委任イベントを試すことができます。

_$(document.body).trigger('wc_fragment_refresh');
_

または：

_$(document.body).trigger('wc_fragments_refreshed');
_
4
LoicTheAztec

適切なajaxの実装が必要な場合は、次の方法を使用してください。

functions.phpで

add_action('wp_ajax_cart_count_retriever', 'cart_count_retriever');
add_action('wp_ajax_nopriv_cart_count_retriever', 'cart_count_retriever');
function cart_count_retriever() {
    global $wpdb;
    echo WC()->cart->get_cart_contents_count();
    wp_die();
}

スクリプトファイル内（スクリプトファイルをエンキューし、ajaxオブジェクトをスクリプトに渡したと仮定します。このブロックをsetIntervalまたはその他のjqueryアクションに配置する必要もあります。

var data = {
  'action': 'cart_count_retriever'
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
  alert('Got this from the server: ' + response);
});
0
besabestin

私はこれまでwoocommerceを使用したことがありませんが、投稿で次のように言うと、非常に簡単なオプションが1つあります。

このページにアクセスすると、現在のアイテムの合計がエコーされますが、JQueryからこのデータを取得できません

...表示にユーザー側のJavaScript変数を使用し、PHPを使用してカートにアイテムを追加するためのAJAX updateメソッドを呼び出すだけです。 =（コードを提供していないため、以下には示しません）。

<?php
    //hardcoded value for $woocommerce->cart->get_cart_contents_count()
    $woocommerce = 59;
?>
<button class="ajax_add_to_cart">Add to cart</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    //user sided variable for PHP value
    var total = parseInt($(".totalCost").text()); 
    $(".ajax_add_to_cart").click(function(){
        total++;                     //add to cart
        $(".totalCost").text(total); //update
    });
});
</script>

<p class="totalCost">
    <?php echo json_encode($woocommerce); ?>
</p>

このスニペットは次の場所でコピーしてテストできます： http://phpfiddle.org/

基本的に上記のコードでは、ページの読み込み時にPHP値を段落テキストとして設定し、その値をJS変数に読み込んで、アプリケーションのクライアント側のデータをいじります。次に、必要に応じて表示テキストを更新します。

0
ViaTech