Question

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

选择值为Electronics Protection的属性时，它将在具有CSS类yith_magnifier_gallery的Yith Magnifier Gallery中隐藏奇数缩略图。

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

然后我对其进行了一些编辑。但是我觉得我的代码中有错误，因为当我将代码放入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();
    }
}

以及Yith放大镜图库的HTML代码：

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

非常感谢您的帮助。

Answer 1

您问题中的链接代码答案需要在“购物车”页面中独家使用。

因此，它将无法在单个产品页面上正常工作。

您只需将单个产品页面定位为可变产品。

以下代码使用非常简单的SQL查询，并且当选定的变体ID具有属性术语名称值“电子保护” 时，将隐藏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

希望您需要在产品单页中进行修改，但是您正在尝试购物车挂钩。您需要使用产品单页挂钩中的任何一个。将此添加到主题的“ functions.php”中。将下面给出的class Serializer1(Serializer): ... class Serializer2(Serializer): .... class Serializer3(Serializer): serializer1 = Serializer1() serializer2 = Serializer2() class Meta: fields = ('serializer1', 'serializer2')更改为适当的值。

attribute_id

似乎您正在使用一些自定义插件来显示站点中的属性，因此我也添加了额外的代码。希望不需要与“样本”相关的代码，在这种情况下可以随时删除。

Answer 3

尝试一下：也许这会对您有所帮助

 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 4

首先对此行发表评论

 $(".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();。它不应该在您的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>

这应该有效。

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

4 个答案: