Скрыть нечетные миниатюры из галереи продуктов для выбора имени продукта для конкретного атрибута продукта

Question

Я пытаюсь скрыть нечетные миниатюры на страницах моих товаров при выборе атрибутов.

Когда выбран атрибут со значением Electronics Protection, он должен скрывать нечетные миниатюры в Yith Magnifier Gallery, которая имеет класс CSS yith_magnifier_gallery.

Я нашел код из ответа в следующей ветке: Показать сообщение в Woocommerce Cart только для конкретного варианта товара Атрибут

И я немного его отредактировал. Но я чувствую, что в моем коде есть ошибки, потому что он дает следующую ошибку, когда я помещаю код в functions.php.

Эта страница не работает

powermatic7.com в настоящее время не может обработать этот запрос.

HTTP ОШИБКА 500

Ниже мой код:

add_action( 'woocommerce_after_cart', 'hide_thumbs_based_on_variation' );
function hide_thumbs_based_on_variation() {
    $found = false;
    // Loop through cart items
    foreach ( WC()->cart->get_cart() as $cart_item ){
        $product = $cart_item['data'];
        if( ! $product->is_type('variation')){
            continue; // Jump to next cart item
        }
        $variation_attributes = $product->get_variation_attributes();
        foreach ( $variation_attributes as $variation_attribute => $term_value ){
            $attribute_slug = str_replace('attribute_pa_', '', $variation_attribute);

            if( $term_value == 'Electronics Protection' ){
                $found = true;
                break;
            }
        }
    }
    if($found){
        $(".yith_magnifier_gallery img:nth-child(odd)").hide();
    }
}

И HTML-код Галереи Yith Magnifier:

<div class="yith_magnifier_gallery">
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
</div>

Любая помощь очень ценится.

Answer 1

Ответ по связанному коду на ваш вопрос необходимо использовать в исключительно на странице корзины .

Так что он не будет работать в любом случае на отдельных страницах продукта.

Вам нужно настроить таргетинг на отдельные страницы продукта только для переменных продуктов.

Следующий код использует очень легкий SQL-запрос и скрывает миниатюры ODD, когда выбранный идентификатор варианта имеет значение имени атрибута «Защита электроники» :

add_action( 'wp_footer' , 'hide_thumbs_based_on_variation', 5 );
function hide_thumbs_based_on_variation() {
    global $product, $wpdb;

    // Only on single product pages and for variable product type
    if( ! ( is_product() && $product->is_type('variable') ) )
        return; // Exit

    // HERE the defined product attribute term name
    $term_name = 'Electronics Protection';

    // SQL query: Find the corresponding Variation Ids for the defined term name
    $variation_ids = $wpdb->get_col( "
        SELECT pm.post_id
        FROM {$wpdb->prefix}postmeta as pm
        JOIN {$wpdb->prefix}terms as t ON pm.meta_value = t.slug
        JOIN {$wpdb->prefix}posts as p ON pm.post_id = p.ID
        WHERE t.name = '$term_name'
        AND p.post_parent = '{$product->get_id()}'
    " );

    ?>
    <script type="text/javascript">
    jQuery(function($){
        var a  = <?php echo json_encode($variation_ids) ?>,     b = 'input.variation_id';

        // Show hide thumbnails utility function
        function showHideThumbs(){
            $.each( a, function(ind, variationID){
                if( $(b).val() == variationID ){
                    $(".yith_magnifier_gallery > img:nth-child(odd)").hide();
                    return;
                } else {
                    $(".yith_magnifier_gallery > img:nth-child(odd)").show();
                }
            });
        }

        // On start, once the DOM is loaded (with a mandatory very light delay)
        setTimeout(function(){
            showHideThumbs();
        }, 100);

        // Live event: On product attribute select field change
        $('form.variations_form').on( 'blur', 'select', function(){
            showHideThumbs();
        })
    });
    </script>
    <?php
}

Код помещается в файл function.php активной дочерней темы (или активной темы).

Протестировано и работает с заданной структурой html галереи.

Answer 2

Первый комментарий к этой строке

 $(".yith_magnifier_gallery img:nth-child(odd)").hide();

как

/* $(".yith_magnifier_gallery img:nth-child(odd)").hide();*/

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

Если нет ошибок, продолжайте так.

Вам нужно вызвать JavaScript $(".yith_magnifier_gallery img:nth-child(odd)").hide(); при загрузке вашей страницы. Это не должно быть в ваших функциях. Php

Установите глобальную переменную в конце вашей функции PHP, как это

$ GLOBALS ['jsVarFound'] = $ найдено;

Вам не нужно

if($found){
        $(".yith_magnifier_gallery img:nth-child(odd)").hide();
    }

вместо этого поставьте $GLOBALS['jsVarFound'] = $found; там

В вашем теге head или везде, где вы загрузили jQuery, используйте это.

<script>
var isFound = "<?php echo($GLOBALS['jsVarFound']); >";
if(isFound == "1") {
   $(".yith_magnifier_gallery img:nth-child(odd)").hide();
}
</script>

это должно работать.

Answer 3

Надеюсь, вам нужна модификация на одной странице товара, но вы пытаетесь зацепить корзину. Вам необходимо использовать любой из одностраничных хуков продукта . Добавьте это в файл functions.php вашей темы. Замените attribute_id, указанный ниже, на соответствующий.

add_action( 'woocommerce_after_variations_form' , 'woocommerce_show_hide_images_gallery', 5 );

function woocommerce_show_hide_images_gallery() {      
    global $product;
    if( $product->is_type('variable') ){
    ?>
    <script>
    var attribute_id = 'power-system'; // change attribute id here
    function showHideImages(attval)
    {
        if(attval)
        {
            var match_data = 'Electronics Protection';  // change attribute value here

            if(attval.toUpperCase()==match_data.toUpperCase())      
                jQuery(".yith_magnifier_gallery img:odd").parent().hide();
            else
                jQuery(".yith_magnifier_gallery img:odd").parent().show();
        }
    }

    //select box change
    jQuery("#"+attribute_id).change(function(){
        showHideImages( jQuery(this).val() );
    });

    //swatch click
    jQuery(".swatchinput label[selectid=" + attribute_id + "]").click(function(){
        showHideImages( jQuery(this).data('option') );
    });

    //select box & swatch change on page load (if you are getting back again)
    jQuery(document).ready(function(){
        showHideImages( jQuery("#"+attribute_id).val() );
        showHideImages( jQuery(".swatchinput label.selectedswatch[selectid=" + attribute_id + "]").data('option') );
    });
    </script>
    <?php
    }
}

Похоже, вы используете какой-то пользовательский плагин для отображения атрибутов на вашем сайте, поэтому я добавил и этот дополнительный код. Надеюсь, что коды, связанные с «образцом», не нужны, и в этом случае их можно удалить.

Answer 4

попробуйте это: возможно, это поможет вам

 if($found){
    var gallery = document.querySelector(".yith_magnifier_gallery");
    images = gallery.children;
    for ( i=1; i<=images.length; i++){
        if( ( i % 2 ) != 0){
          images[i - 1].style.display = "none";
        }
    }
 }