Добавление полей количества и кнопки добавления в корзину на странице магазина WooCommerce

Question

Я пытаюсь разработать тему WordPress с интеграцией WooCommerce, однако я не понимаю, как выполнить эту особую функцию:

1. Щелкните любой сгруппированный продукт на магазин / архив, но вместо перенаправления на страницу сгруппированного продукта (я считаю, что это стандартное поведение WooCommerce), включите div ниже с дочерними отдельными продуктами и полем количества каждого. Должно быть выполнено с помощью JavaScript или JQuery.

2. С помощью сценария AJAX или JQuery снова, как только максимальное количество сгруппированных продуктов будет достигнуто, это должно "отключить" или запретить пользователю добавлять больше.

3. Добавьте выбранные элементы в корзину с помощью кнопки «Добавить в корзину» внизу.

Now, I am familiar that my problem might be solved using JavaScript with some CSS tricks, but I don't particularly know which WooCommerce functions/hooks I should be using in order for me to achieve this.

I've tried this code, but it's not exactly producing the effect of what I'm trying to do:

/**
 * Override loop template and show quantities next to add to cart buttons
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = 'add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data"> '; $ html. = Woocommerce_quantity_input (array (), $ product, false); $ html. = ' '. esc_ html ($ product-> add_to_cart_text ()). ''; $ html. = ''; } return $ html; } 

Answer 1

Я нашел решение (или, скорее, взлом) после небольшого поиска и экспериментов.

Оказывается, я могу добавлять продукты в корзину, просто получив соответствующий URL-адрес добавления в корзину. С помощью небольшого обмана JavaScript и CSS я теоретически могу создать настраиваемую функциональность, подобную той, которая показана на изображении. Я не уверен, что это правильный или наиболее эффективный способ сделать это, но я определенно считаю его обходным решением.

Вот руководство по настраиваемым URL-адресам добавления в корзину: https://www.businessbloomer.com/woocommerce-custom-add-cart-urls-ultimate-guide/

Публикация здесь на случай, если кто-то, столкнувшийся с подобной проблемой, столкнется с этим вопросом.

Подсказка: используйте JavaScript для создания пользовательских URL-адресов добавления в корзину. Например, функция, которая изменяет атрибут href вашей пользовательской кнопки добавления в корзину на странице вашего магазина. Есть много способов сделать это. Но это моя идея.

function whenProductClicked(){
     let e = document.getElementById("YourAddToCart_Button_ID");
     e.setAttribute("href", "https://yourdomain.com/?add-to-cart=3111");
}

Самая важная часть - это бит URL-адреса: ?add-to-cart=3111, когда у вас установлен WooCommerce, этот URL-адрес активирует функцию добавления в корзину WooCommerce. ?add-to-cart - это функция, а 3111 - это идентификатор существующего продукта в вашей базе данных. Итак, вам придется поэкспериментировать и проявить творческий подход к тому, как вы будете создавать свои URL-адреса, если вам нужно отклониться от стандартного способа работы WooCommerce. Лично я бы не стал этого делать, но привет.

Конечно, это может стать более сложным и потребует тщательной проверки (по крайней мере, по моим требованиям), но это самая базовая форма c о том, что я имел в виду.