Как можно сделать отдельные кнопки для выбора различных вариаций?

Question

StarlitSwashbuckler

php , woocommerce , wordpress

Как можно сделать отдельные кнопки для выбора различных вариаций?

У меня возникла задача: на отдельной карточке товара необходимо реализовать следующие условия: при отсутствии вариации на складе (остаток 0) отображать кнопку "Сообщить о появлении", а при первичной загрузке страницы, когда вариант товара не выбран, показывать сообщение "Выберите параметры". У нас уже все работает для товаров, не имеющих вариаций, но возникла трудность с тем, как проверить остаток и цену конкретной вариации. 

Вот какие подходы я использовал:  
<pre><code class="php">if ($product-&gt;stock_status == 'instock') {
    &lt;button&gt;...
}


if ($product-&gt;get_price() &gt; 0) {
...
} else {
    &lt;button&gt;...
}


add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_custom_single_add_to_cart_text', 10, 2 );

function woocommerce_custom_single_add_to_cart_text( $text, $product ) {
    return $product-&gt;get_price() ? $text : __( 'Выберите параметры', 'woocommerce' );
}</code></pre>

Проблема заключается в том, что если хотя бы одна вариация имеет цену, отличную от нуля, выполняется первая часть условия, а значит, кнопка назначается всем вариациям. Также остаток учитывается только в целом, а не для каждой отдельно взятой вариации. Как можно получить и проверить значения для конкретной вариации? Попытки изменить текст кнопки через JavaScript по классу также не увенчались успехом.

15 ноября 2024 г. 11:43

Ответы на вопрос 2

Похожие вопросы

Answer 1

Ваша задача заключается в отображении различных кнопок на карточке товара в зависимости от наличия вариаций, их остатка и цены. Для реализации такого функционала вам необходимо проверить статус каждой вариации отдельно. В WooCommerce вы можете сделать это, используя фильтры и хуки, а также JavaScript для динамического изменения текста кнопки.

### Шаги для реализации:

1. **Обработка вариаций на сервере**:
   Используйте хук `woocommerce_variation_options_pricing` для отображения состояния цены и остатка для каждой вариации. Также вам нужно будет использовать хук `woocommerce_single_variation` для вывода нужной кнопки в зависимости от состояния выбранной вариации.

   Пример кода:
   ```php
   add_action('woocommerce_single_variation', 'custom_variation_button');
   function custom_variation_button() {
       global $product;

       $available_variations = $product->get_available_variations();
       $variations_count = count($available_variations);
       
       if ($variations_count > 0) {
           foreach ($available_variations as $variation) {
               $variation_id = $variation['variation_id'];
               $variation_obj = new WC_Product_Variation($variation_id);
               $stock_quantity = $variation_obj->get_stock_quantity();
               $price = $variation_obj->get_price();

               if ($stock_quantity > 0 && $price > 0) {
                   echo '<button class="add-to-cart">Добавить в корзину</button>';
               } elseif ($stock_quantity == 0) {
                   echo '<button class="notify-me">Сообщить о появлении</button>';
               }
           }
       } else {
           echo '<p>Выберите параметры</p>';
       }
   }
   ```

2. **Динамическое обновление кнопки при выборе вариации**:
   Используйте JavaScript/jQuery для управления состоянием кнопки при изменении вариации:

   ```javascript
   jQuery(document).ready(function($) {
       $('form.variations_form').on('change', '.variations select', function() {
           const variation = $('form.variations_form').data('product_variations');
           const attributes = $('form.variations_form').find('.variations select');
           let selectedVariation = {};

           attributes.each(function() {
               const attributeName = $(this).attr('name');
               const attributeValue = $(this).val();
               if (attributeValue) {
                   selectedVariation[attributeName] = attributeValue;
               }
           });

           const matchedVariation = variation.find(variation =>
               Object.keys(selectedVariation).every(key =>
                   selectedVariation[key] == variation.attributes[key]
               )
           );

           if (matchedVariation) {
               const stockQuantity = matchedVariation.max_qty;
               const price = matchedVariation.display_price;

               if (stockQuantity > 0 && price > 0) {
                   $('.add-to-cart').show();
                   $('.notify-me').hide();
               } else if (stockQuantity == 0) {
                   $('.add-to-cart').hide();
                   $('.notify-me').show();
               }
           } else {
               $('.add-to-cart').hide();
               $('.notify-me').hide();
               alert('Выберите параметры');
           }
       });
   });
   ```

### Заключение:
Таким образом, при первичной загрузке карточки товара будет выводиться текст "Выберите параметры", а при выборе вариации состояние кнопки будет изменяться в зависимости от наличия остатка и цены конкретной вариации товара. Убедитесь, что у вас правильно инициализированы jQuery и другие необходимые библиотеки, а также подключены ваш скрипт и стили для корректного отображения.

Answer 2

Как можно вытащить для проверки отдельно значение каждой вариации?
 
 Метод get_available_variations() 
 Ну и дальше в зависимости от количества товара в вариации выводите кнопку