#php #ajax #woocommerce
Вопрос:
Мне интересно, как улучшить мой код ниже. Он полностью работает на 100%, но я хочу использовать ajax, чтобы мы могли предотвратить перезагрузку страницы после добавления товаров в корзину.
Приведенный ниже код добавляет две кнопки для непосредственного добавления 6 или 12 товаров в корзину. Но если я нажму кнопку, страница перезагрузится. Как я могу сделать это лучше с ajax?
add_action( 'woocommerce_after_add_to_cart_button', 'additional_simple_add_to_cart', 20 ); function additional_simple_add_to_cart() { global $product; // Only for simple product type if( ! $product-gt;is_type('simple') ) return; // Only for products from category "bier" AND/OR "Cider" if ( has_term( array('bier', 'cider', 'getraenke'), 'product_cat', $product-gt;get_id() ) ) { // Open parent layout wrapper echo 'lt;div class="flex-container-pack-wrapper"gt;'; // Open child left layout wrapper echo 'lt;div class="flex-container-pack-child left"gt;'; // Only display when more than 6 are available if( $product-gt;get_stock_quantity() gt;= 6 ) { $href = '?add-to-cart=' . esc_attr( $product-gt;get_id() ) . 'amp;quantity=6'; $class = 'single_add_to_cart_button-6 button alt'; $style = 'display: inline-block; margin-top: 12px;'; $button_text = __( "6er Pack", "woocommerce" ); // Output add to cart button echo 'lt;a rel="no-follow" href="'.$href.'" class="'.$class.'" style="'.$style.'"gt;'.$button_text.'lt;/agt;'; } else { echo 'lt;a class="single_sold_out_button button alt disabled "gt;6er Packlt;p class="pack_soldout"gt;(Ausverkauft)lt;/pgt;lt;/agt;'; } // Close child left layout wrapper echo 'lt;/divgt;'; // Open child right layout wrapper echo 'lt;div class="flex-container-pack-child right"gt;'; // Only display when more than 12 are available if( $product-gt;get_stock_quantity() gt;= 12 ) { $href = '?add-to-cart=' . esc_attr( $product-gt;get_id() ) . 'amp;quantity=12'; $class = 'single_add_to_cart_button-12 button alt'; $style = 'display: inline-block; margin-top: 12px;'; $button_text = __( "12er Pack", "woocommerce" ); // Output add to cart button echo 'lt;a rel="no-follow" href="'.$href.'" class="'.$class.'" style="'.$style.'"gt;'.$button_text.'lt;/agt;'; } else { echo 'lt;a class="single_sold_out_button button alt disabled "gt;12er Packlt;p class="pack_soldout"gt;(Ausverkauft)lt;/pgt;lt;/agt;'; } // Close child right layout wrapper echo 'lt;/divgt;'; // Close parent layout wrapper echo 'lt;/divgt;'; // Open wrapper shipping info echo 'lt;div class="container_pack_wrapper_shipping_ino"gt;'; // Output Info text for "bier" or "cider" products //echo 'lt;p class="shipping_info"gt;Wähle 6, 9-12 oder 24 Biere einer Brauerei aus.lt;/pgt;'; //echo 'lt;p class="shipping_info_extra"gt;*Spezial Angebote z.B Probierpakete sind von dieser Beschränkung ausgeschlossen.lt;/pgt;'; // Tsting link to vendor global $product; $seller = get_post_field( 'post_author', $product-gt;get_id()); $author = get_user_by( 'id', $seller ); $vendor = dokan()-gt;vendor-gt;get( $seller ); $store_info = dokan_get_store_info( $author-gt;ID ); if ( !empty( $store_info['store_name'] ) ) { // Output Info text for "bier" or "cider" products echo 'lt;p class="shipping_info"gt;Wähle 6, 9-12 oder 24 Biere einer Brauerei aus.lt;/pgt;'; // Output Vendor link printf( 'lt;i class="fas fa-angle-double-right pack"gt;lt;/igt;lt;a class="vendor_pack_info" href="%s"gt;Mehr von %slt;/agt;', $vendor-gt;get_shop_url(), $vendor-gt;get_shop_name() ); // Output shipping Info echo 'lt;p class="shipping_info_extra"gt;*Spezial Angebote z.B Probierpakete sind von dieser Beschränkung ausgeschlossen. Versand wird je Brauerei berechnet.lt;/pgt;'; } // Close wrapper shipping info echo 'lt;/divgt;'; } } Ответ №1:
На всех ваших товарах у вас уже есть кнопка, которая добавляет товары в корзину, присваивает им класс (например, добавить в корзину) и добавляет в него еще один атрибут data-id.
lt;button type="button" class="add-to-cart" data-id="product-id"gt;Add to Cartlt;/buttongt; В вашем JS вы вызываете прослушиватель событий щелчка класса button.add-to-cart. использовать querySelector() и получить данные-идентификатор нажатой кнопки, Отправить идентификатор продукта с AJAX-вызов, чтобы ваш PHP-код в обратном вызове AJAX (на возврат), возвращает количество элементов в корзине:: я полагаю, что счетчик корзину (где тебе показывают, сколько элементов в корзине) имеют идентификатор, который можно использовать для обновления по возврату добавить в корзину AJAX-вызова.
Ответ №2:
Woocommerce Предоставляет функцию добавления Ajax в корзину
Следуйте этому подходу
Панель мониторинга gt;gt;gt; woocommerce gt;gt;gt;gt;gt;gt;gt; настройки gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt; Продукт gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt; Установите флажок(Включить кнопки добавления AJAX в корзину в архивах) .
lt;a href="?add-to-cart=420" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="420" data-product_sku="" aria-label="Add “Product Simple only” to your cart" rel="nofollow"gt;Add to cartlt;/agt;