Включите кнопку добавления в корзину с помощью Ajax в пользовательском цикле продуктов в Woocommerce

Это код, который я написал для кода настраиваемого цикла для страницы архива продукта. Я хочу использовать ajax для добавления товаров в корзину. Как мне это сделать? Я также хотел бы знать, какая функция woocommerce показывает клиенту уведомления woocommerce. Например, когда я нажимаю кнопку «Добавить в корзину», клиенту должно быть показано уведомление о том, что продукт был добавлен.

$args = array(
    'post_type' => 'product',
    'posts_per_page' => 12,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) {
    while ($loop->have_posts()): $loop->the_post();
      ?>
        <!-- tab product -->
        <li class = "col-sx-12 col-sm-4">
          <div class = "product-container">
            <div class = "left-block">
              <a href = "<?php echo get_permalink(); ?>" target = "_blank">
                <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($loop->post->ID), 'single-post-thumbnail');?>
                <img height = "300px" width = "300px" class = "img-responsive" alt = "product" src = "<?php echo $image[0]; ?>">
              </a>
              <div class = "quick-view">

              </div>
              <div class = "add-to-cart ">
                <a href = "<?php echo $product->add_to_cart_url(); ?>" class = "cart">
                  <span>
                    <span class = "add-to-cart-content">Add To Cart
                    </span>
                  </span>
                </a>
              </div>
            </div>
            <div class = "right-block">
              <h5 class = "product-name">
                <a href = "<?php echo get_permalink(); ?>" target = "_blank" class = "product-block-click">
                  <?php echo $product->get_title(); ?>
                </a>
              </h5>
              <div class = "content_price">
                <span class = "price product-price">
                  <i class = "fa fa-inr" aria-hidden = "true">
                  </i>
                  <?php echo $product->get_regular_price(); ?>
                </span>
                <span class = "price old-price">
                  <i class = "fa fa-inr" aria-hidden = "true">
                  </i>
                  <?php echo $product->get_sale_price(); ?>
                </span>
                <span class = "discount-block">50 % OFF
                </span>
              </div>
            </div>
          </div>
        </li>
      <?php
    endwhile;
}
echo "</ul>";
wp_reset_postdata();
?>

В Интернете довольно много руководств по добавлению продукта WooCommerce в корзину через AJAX. Вы пробовали что-нибудь?

— 26.10.2018 21:42

Я просмотрел их, но в этом цикле я совершенно запутался.

— 26.10.2018 21:45

Спасибо, посмотрю и отвечу после.

— 26.10.2018 21:50

Подробнее о точке @LoicTheAztec, вы должны включить кнопку корзины с поддержкой Ajax в настройках WooCommerce -> Продукты, если вы не включили ее.

— 26.10.2018 22:15

php ajax wordpress woocommerce product

26.10.2018 21:38

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...

4 661

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для кнопки добавления в корзину Ajax вам просто нужно использовать тот же код, что и в шаблоне loop/add-to-cart.php(что не так просто, если вы не привыкли к Woocommerce).

There is no notices on Ajax add to cart action, but instead a "view cart" button appears on the right of the add to cart button that did the action.

Примечание:

Кнопка добавления в корзину Ajax не работает с переменными или сгруппированными товарами.
Добавление Ajax в корзину необходимо включить в Woocommerce> Настройки> Продукты:

Ваш обновленный код с функциональной кнопкой добавления в корзину Ajax:

$loop = new WP_Query( array(
    'post_type' => 'product',
    'posts_per_page' => 12,
) );

if ($loop->have_posts()) {
    while ($loop->have_posts()): $loop->the_post();
      $product = wc_get_product($loop->post->ID);
      ?>
        <!-- tab product -->
        <li class = "col-sx-12 col-sm-4">
          <div class = "product-container">
            <div class = "left-block">
              <a href = "<?php echo get_permalink(); ?>" target = "_blank">
                <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($loop->post->ID), 'single-post-thumbnail');?>
                <img height = "300px" width = "300px" class = "img-responsive" alt = "product" src = "<?php echo $image[0]; ?>">
              </a>
              <div class = "quick-view">

              </div>
              <div class = "add-to-cart "><?php
                echo sprintf( '<a href = "%s" data-quantity = "1" class = "%s" %s>%s</a>',
                    esc_url( $product->add_to_cart_url() ),
                    esc_attr( implode( ' ', array_filter( array(
                        'button', 'product_type_' . $product->get_type(),
                        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
                        $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
                    ) ) ) ),
                    wc_implode_html_attributes( array(
                        'data-product_id'  => $product->get_id(),
                        'data-product_sku' => $product->get_sku(),
                        'aria-label'       => $product->add_to_cart_description(),
                        'rel'              => 'nofollow',
                    ) ),
                    esc_html( $product->add_to_cart_text() )
                );
              ?></div>
            </div>
            <div class = "right-block">
              <h5 class = "product-name">
                <a href = "<?php echo get_permalink(); ?>" target = "_blank" class = "product-block-click">
                  <?php echo $product->get_title(); ?>
                </a>
              </h5>
              <div class = "content_price">
                <span class = "price product-price">
                  <i class = "fa fa-inr" aria-hidden = "true">
                  </i>
                  <?php echo $product->get_regular_price(); ?>
                </span>
                <span class = "price old-price">
                  <i class = "fa fa-inr" aria-hidden = "true">
                  </i>
                  <?php echo $product->get_sale_price(); ?>
                </span>
                <span class = "discount-block">50 % OFF
                </span>
              </div>
            </div>
          </div>
        </li>
      <?php
    endwhile;
}
echo "</ul>";
wp_reset_postdata();
?>

Проверено и работает.

подтвердил, отлично работает. очень качественный ответ. Продолжайте хорошую работу.

— 25.04.2019 07:46

26.10.2018 22:15