web-dev-qa-db-ja.com

WooCommerceのライトボックスポップアップadd_to_cartアクション

「カートに追加」ボタンがクリックされたときに表示されるWooCommerceのモーダル「ポップアップ」ウィンドウを作成したいと思います。 after 実際に商品をカートに追加するが、リダイレクトの前に/代わりにWCアクションを実行する必要があります。

私は私にとって有用かもしれないいくつかの可能性のある/可能性のあるフック、アクション、そしてフィルターを見つけましたが、私は私が必要とするものとそれらを正しく使う方法がわからないです。

  • woocommerce_template_loop_add_to_cart
  • woocommerce_template_single_add_to_cart
  • woocommerce_after_add_to_cart_button
  • $ url 用のadd_to_cart_redirectフィルタもあります

また、実際にどのようにしてPHP内から表示されるように trigger lightboxにするかもわかりません。 （HTMLでは、クリックしなければならないハイパーリンクのような要素を使用しますが、PHP実行の特定の時点で同じことをトリガーする方法は？ - AJAXが必要ですか？）

最後に、ThickBoxをWordPressにバンドルされているので使用することを計画していましたが、これを回避する理由はありますか、それとももっと良い選択肢がありますか。

すべての助けをありがとう。

jquerypluginsthickbox
5
Chris

私にとっては、次のような商品アーカイブページが機能します（たとえば、メインショップページと商品カテゴリのアーカイブページの両方が含まれます）。

現在のカートの内容が厚いボックスに表示されます。この例では、これを表示することにしました。これは、カートに追加ボタンをクリックした後にAjaxを介して返されるデータだからです。ただし、ボックスに別の種類の情報が必要な場合もあります。例えば、周囲のhtml要素を見ることで、追加されたばかりの商品のproduct_idを取得できます。

あなたのテーマのfunctions.php（またはテーマのクラス定義がある場合はそのクラス定義）に、おそらくいくつかの 'enqueue_scripts'関数があります。 thickboxスクリプトが確実にロードされるようにするには、これをこの関数に追加する必要があります。

if (is_woocommerce() && is_archive()) {
    wp_enqueue_script( 'frontend-custom', get_template_directory_uri() . '/js/frontend-custom.js', array("jquery"));
    add_thickbox();
}

テーマディレクトリ内のファイルjs/frontend-custom.js（またはテーマのjsがある場所はどこでも）：

jQuery(document).ready(function($) {
    $('body').on('added_to_cart',function(e,data) {
        //alert('Added ' + data['div.widget_shopping_cart_content']);
        if ($('#hidden_cart').length == 0) { //add cart contents only once
            //$('.added_to_cart').after('<a href="#TB_inline?width=600&height=550&inlineId=hidden_cart" class="thickbox">View my inline content!</a>');
            $(this).append('<a href="#TB_inline?width=300&height=550&inlineId=hidden_cart" id="show_hidden_cart" title="<h2>Cart</h2>" class="thickbox" style="display:none"></a>');
            $(this).append('<div id="hidden_cart" style="display:none">'+data['div.widget_shopping_cart_content']+'</div>');
        }
        $('#show_hidden_cart').click();
    });
});

その他の注意事項

  • Phpから直接JavaScriptをページに出力することもできます。この場合、あなたはおそらくadd_action('woocommerce_ajax_added_to_cart', 'myfunction');でフックしたいと思うでしょう。このアクションは、カートに商品を追加した直後（検証に合格したなど）、リダイレクトする前にwoocommerce_ajax_add_to_cart()内で実行されます。

  • 単一の商品ページは同じようには動作しません（ 'カートに追加'は通常のphp形式です、ajaxは関係ありません）。

  • 私はこれをテストしていませんが、WooCommerceには独自の 'prettyphoto.js'が付属しています。これは、hrefリンクに 'rel = "prettyPhoto"'を追加することによって機能します。あなたはそれをWooCommerceとのデザインの一貫性を保つために試してみることをお勧めします。

6
adelval