隐藏产品图库中的奇数缩略图以选择特定的产品属性术语名称

Question

我试图在我的产品页面中隐藏属性选择中的奇怪缩略图。

When the attribute with the value Electronics Protection is selected, it should hide the odd thumbnails in the Yith Magnifier Gallery which has the CSS class yith_magnifier_gallery.

我从以下线程的答案中找到了代码：Show Message in Woocommerce Cart only for specific product variation Attribute

我对它进行了一些编辑。但是我觉得我的代码中有错误，因为当我将代码放入 functions.php.

时出现以下错误

This page isn’t working

powermatic7.com is currently unable to handle this request.

HTTP ERROR 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代码：

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

非常感谢任何帮助。

Answer 1

试试这个：也许这会对你有所帮助

 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";
        }
    }
 }

Answer 2

先评论这一行

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

喜欢

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

Run the app and check if error still exists, if you are still getting error, it might be some other issue, not related to the code you posted.

如果没有报错就这样进行

您需要在页面加载时调用 JavaScript $(".yith_magnifier_gallery img:nth-child(odd)").hide();。它不应该在你的 functions.php

像这样在 PHP 函数的末尾设置一个全局变量

$GLOBALS['jsVarFound'] = $found;

你不需要

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
    }
}

好像您正在使用一些自定义插件来显示您网站中的属性，所以我也添加了额外的代码。希望 'swatch' 相关代码不是必需的，在这种情况下可以随意删除。

Answer 4

The linked code answer in your question need to be used in exclusively in Cart page.

So it will not work anyways on single product pages.

您只需要针对可变产品定位单个产品页面。

The following code use a very light SQL query and will hide ODD thumbnails, when a selected variation ID has the attribute term name value "电子保护":

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 图库结构。

隐藏产品图库中的奇数缩略图以选择特定的产品属性术语名称

Hide odd thumbnails from product gallery for specific product attribute term name selection

html

php

jquery

cart

woocommerce