Поддержка WooCommerce Вывод атрибутов текущей вариации

  • Решено dmitrylutsenko

    (@dmitrylutsenko)


    Добрый день, уважаемые форумчане.

    У меня есть такая ситуация:

    Есть товар с вариациями, у которых атрибуты меняют свои значения.
    Но в таблице с параметрами/»Детали» просто производится перечисление всех доступных значений атрибутов основного товара.

    Например, в таблице будет «Категория ткани» : 1 категория,2 категория,3 категория
    Вместо «Категория ткани»: 2 категория.

    Есть масса инструкций, как кастомизировать хук ‘woocommerce_available_variation’ чтобы выводилось значение полей выбранной вариации над кнопкой «Корзина» с ценой. Но такой вариант не подходит (Выводить простыню из характеристик товара такое себе решение.

    Как же можно вывести атрибуты выбранной вариации в таблице товара «Детали»?

    • Тема изменена 5 месяцев назад пользователем dmitrylutsenko.
Просмотр 3 ответов — с 1 по 3 (всего 3)
  • Это вообще хоть как-то реализуется? Или без вариантов?

    <script>
    function empty( mixed_var ) { // Determine whether a variable is empty
    return ( mixed_var === «» || mixed_var === 0 || mixed_var === «0» || mixed_var === null
    || mixed_var === false || ( Array.isArray(mixed_var) && mixed_var.length === 0 ) );
    }

    jQuery(function() {
    jQuery(«select»).change(function() {
    var a = jQuery(this).val();
    jQuery(«#variation_id»).val(a)
    });
    jQuery.valHooks.input = {
    get: function(a) {
    return a.value
    },
    set: function(a, b) {
    var c = a.value;
    a.value = b;
    «variation_id» == a.id && c !== b && jQuery(a).trigger(«change»)
    }
    };
    jQuery(«#variation_id»).on(«change», function() {
    console.log(this.value)

    var variation_id = this.value;
    })
    });
    </script>
    В этом скрипте производится перехват скрытого поля с variation_id.
    Я планирую произвести перезапись таблицы «Детали» при помощи JS(AJAX).
    Подскажите, пожалуйста, как в functions.php темы прописать Ajax передачу данных через functions.php? :

    1.Получаю variation_id через JS.- Сделано
    2.Готовлю данные для передачи через Ajax: data: {variation_id: variation_id} — Сделано
    3.Передаю данные через functions.php(Там все окружение, $product, $post, WC_Product и тп.) — Пока не знаю как
    4.В случае успеха произвести перезапись/перегенерацию таблицы Детали с помощью JS (Это не сложно, знаю, умею и практикую)

    • Ответ изменён 4 месяца, 4 недели назад пользователем dmitrylutsenko.

    Эх, как всегда, нашел решение сам…

    Я не знаю, почему на этом вукоммерс не реализовали необходимый функционал по выводу характеристик выбранной вариации в таблице, без костылей и синей изоленты никуда…

    Инструкция (Я разработал минимально рабочий код, оставляю на Ваше усмотрение оптимизацию кода.).
    Инструкция по внедрению в таблицу Детали значения выбранной вариации

    Идем в файл \wp-content\themes\{Ваша_тема}\woocommerce\single-product\add-to-cart\variation.php
    Инициализируем Все необходимые поля. И скрываем в публичной части сайта. {У меня есть свои кастомные поля, можете посмотреть, как их добавлять в админке, ищите по ключевым словам «woocommerce_wp_text_input» «load_variation_settings_fields» }

    
    <script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description" style="display:none;">
    <code>data.variation.variation_description</code>
    </div>
    <div class="woocommerce-sleep_place-description" style="display:none;">
    <code>data.variation.sleep_place</code>
    </div>
    <div class="woocommerce-volume-description" style="display:none;">
    <code>data.variation.volume</code>
    </div>
    <div class="woocommerce-volume-description" style="display:none;">
    <code>data.variation.cloth_type</code>
    </div>
    <div class="woocommerce-variation-availability" style="display:none;">
    <code>data.variation.availability_html</code>
    </div>
    <div class="woocommerce-open_size-availability" style="display:none;">
    <code>data.variation.open_size</code>
    </div>
    <div class="woocommerce-max_load-availability" style="display:none;">
    <code>data.variation.max_load</code>
    </div>
    <div class="woocommerce-carcas_material-availability" style="display:none;">
    <code>data.variation.carcas_material</code>
    </div>
    <div class="woocommerce-prod_time-availability" style="display:none;">
    <code>data.variation.prod_time</code>
    </div>
    <div class="woocommerce-garantee-availability" style="display:none;">
    <code>data.variation.garantee</code>
    </div>
    <div class="woocommerce-variation-price">
    <code>data.variation.price_html</code>
    </div>
    </script>
    

    В functions.php Вашей активной темы прописываете JS, где производится сбор скрытых ранее полей атрибутов, очищение таблицы «Детали» и формирование новой
    Код в functions.php

    add_action( 'wp_footer', 'variations_change_javascript', 99999 ); // для фронта
    function variations_change_javascript() { ?>
    <script>
    function empty( mixed_var ) {	// Determine whether a variable is empty
      return ( mixed_var === "" || mixed_var === 0   || mixed_var === "0" || mixed_var === null  
          || mixed_var === false  ||  ( Array.isArray(mixed_var) && mixed_var.length === 0 ) );
    }
    
    jQuery(document).ready(function($) {
      
      var attributes = new Map(); 
      
      jQuery("#variation_id").bind("change", function() {
          // console.log("ID: " + jQuery(this).val()); 
         
         if($(".sku").text().length > 0) {
            attributes.set('Артикул',$(".sku").text()+"");
         }
         if ($(".woocommerce-sleep_place-description").text().length > 0) {
           attributes.set('Спальное место, мм',$(".woocommerce-sleep_place-description").text()+"");
         }
         if ($(".woocommerce-volume-description").text().length > 0) {
           attributes.set('Объем, кб. м',$(".woocommerce-volume-description").text()+"");
         }
         if ($(".woocommerce-open_size-availability").text().length > 0) {
           attributes.set('Габариты в разложенном виде, мм',$(".woocommerce-open_size-availability").text()+"");
         }
         if ($(".woocommerce-max_load-availability").text().length > 0) {
           attributes.set('Максимальная нагрузка, кг',$(".woocommerce-max_load-availability").text()+"");
         }
         if ($(".woocommerce-carcas_material-availability").text().length > 0) {
           attributes.set('Материалы каркаса',$(".woocommerce-carcas_material-availability").text()+"");
         }
         if ($(".woocommerce-prod_time-availability").text().length > 0) {
           attributes.set('Сроки изготовления',$(".woocommerce-prod_time-availability").text()+"");
         }
         if ($(".woocommerce-garantee-availability").text().length > 0) {
           attributes.set('Гарантия изготовителя',$(".woocommerce-garantee-availability").text()+"");
         }
        
        jQuery(".options-product tbody").empty();
        var fields="";
        
        if (attributes.size > 0) {
          
          attributes.forEach(function(value, key) {
            
            if(value.length > 0){
              fields+='<tr>';
              fields+='<th class="product-attributes-item__label">'+key+'</th>';
              fields+='<td class="product-attributes-item__value">'+value+'</td>';
              fields+='</tr>';
              jQuery(".options-product tbody").append(fields);
              fields = "";
            }
          });
        
        }
        
      }); 
      
      
     });
        </script>	
    <?}

    Получаете то, что нужно. Код можно доработать, чем я и занимаюсь

Просмотр 3 ответов — с 1 по 3 (всего 3)