代码之家 › 专栏 › 技术社区 › Hamza Ahmad

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

cart woocommerce html jquery php

1

Hamza Ahmad · 技术社区 · 7 年前

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

Electronics Protection 如果选中,则应在具有CSS类的Yith放大镜库中隐藏奇数缩略图 yith_magnifier_gallery

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

functions.php .

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>

4 回复 | 直到 5 年前

1

Outsource WordPress 7 年前

产品单页挂钩 . 将此添加到主题中函数.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
    }
}

似乎你正在使用一些自定义插件来显示你的站点中的属性,所以我也添加了额外的代码。希望'样本'相关的代码是没有必要的,并随时删除在这种情况下。

2

Community Mohan Dere 5 年前

专享购物车页面

所以它不会在单一产品页面上工作。

您只需要针对可变产品的单一产品页面。

一个非常简单的SQL查询 当选定的变体ID具有属性term name值时,将隐藏奇数缩略图 “电子保护” :

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
}

测试并使用给定的html库结构。

3

0

Deepak Sharma 7 年前

试试这个: 也许这对你有帮助

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

4

0

kiranvj 7 年前

第一条评论这行

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

喜欢

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

错误,可能是其他问题,与您所使用的代码无关

如果没有错误,就这样继续。

$(".yith_magnifier_gallery img:nth-child(odd)").hide(); 当页面加载时。它不应该在你的房间里函数.php

在PHP函数的末尾设置一个全局变量,如下所示

你不需要

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

相反,把 $GLOBALS['jsVarFound'] = $found; 那里

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

这应该管用。