WP - 属性和过滤器区域大小调整（欧盟、英国、美国..）

Question

Here 是我想要达到的目标：

如您所见，您可以根据地区（欧盟、英国、美国）选择鞋码。

经过大量研究，我发现来自 @Hambos22 there 的解决方案正是我想要做的。但是 @Hambos22 或 @mikejolley 解决方案都不可能到位。我想我缺少一些知识将这些代码部分放在哪里，因为我试图将所有内容都放在 'function.php' 中，但它只显示我切换器。

我在属性 size（英国、美国）中添加了另外 2 个自定义字段。

My website link

我的属性 slug: size

随 ACF 添加的变量：uk-size、us-size

我的属性默认值：EU

我想放置的代码（但不知道位置）：

这是一个php片段

$us_size = get_field('us_size', $term);
    $uk_size = get_field('uk_size', $term);
    $cm_size = get_field('cm_size', $term);
    printf( '<div class="sizeRadio">
        <input type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s>
        <label for="%3$s">
        <span class="label_show" data-region="eu">%5$s</span>
        <span data-region="us">%6$s</span>
        <span data-region="uk">%7$s</span>
        <span data-region="cm">%8$s</span>
        </label>
        </div>', $input_name, $esc_value, $id, $checked, $filtered_label, $us_size, $uk_size, $cm_size );
}

这是一个 JS 片段

$('[data-chooseregion]').on('click', function(e) {
                        $(this).addClass('active--sizeSelect').siblings().removeClass('active--sizeSelect');

                        var $active = $('[data-region=' + $(this).data('chooseregion') + ']').addClass('label_show');

                        $('[data-region]').not($active).removeClass('label_show');
                        e.preventDefault();
                    });

这是切换器的标记

<?php
    echo '<a class="sizeSelect active--sizeSelect" data-chooseregion="eu" href="#">EU</a>';
    echo '<a class="sizeSelect" data-chooseregion="us" href="#" >US</a>';
    echo '<a class="sizeSelect" data-chooseregion="uk" href="#" >UK</a>';
    echo '<a class="sizeSelect" data-chooseregion="cm" href="#" >CM</a>';
?>

谁能帮我解决一下？

顺便说一句，我也很想将其应用于 my shop page 作为左侧面板中的过滤器！

如果需要更多信息，请不要犹豫，我会在 12 小时内回复。

干杯:)

Answer 1

对于单品页面：

我终于整理好了，我没有创建 "dynamic" 数据更改，而是选择从我的 pa_size 下的 2 个字段创建一个 table，如下所示：

if(!empty($terms)){
    echo '<button class="accordion">Size Chart <i class="fa-sitemap"></i></button>
        <div class="panel">
            <table class="sf-table standard_bordered"><tbody><tr><td><strong>EU</strong></td>';
                foreach ($terms as $term) {
                    $eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
                    echo '<td>'. $eu_s .'</td>';
                }
            echo '</tr><tr><td><strong>UK</strong></td>';
            foreach ($terms as $term) {
                    $uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
                    echo '<td>'. $uk_s .'</td>';
                }
            echo '</tr><tr><td><strong>US</strong></td>';   
                foreach ($terms as $term) {
                    $us_s = get_field('us-size', 'pa_size_' . $term->term_id);
                    echo '<td>'. $us_s .'</td>';
                }   
            echo '</tr></tbody></table></div>';
}

WC 商店页面上的过滤器：

我创建了一个新的 "widget" 到我的过滤器面板，还安装了方便的插件 PHP 文本小部件 扩展了默认的 WordPress 文本小部件使其能够执行 PHP 代码。

然后把下面的代码放进去：

<div class="filter-size">
<input type="button" name="filterEU" value="EU" onclick="sizesEU()" />
<input type="button" name="filterUK" value="UK" onclick="sizesUK()" />
<input type="button" name="filterUS" value="US" onclick="sizesUS()" />
</div>

    <?php
        global $product;
        $terms = get_terms( 'pa_size', $args );
        $page_url = esc_url( home_url( '/' ) );?>

    <div id="filterEU"> 
        <ul class="jcaa_attr_select jcaa_attr_variable_select  jcaa_size_medium">
            <?php foreach( $terms as $term ):
            $slug = $term->slug;
            $num = (float)$slug;
            if ($num > 20){
                $eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
                $uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
                $us_s = get_field('us-size', 'pa_size_' . $term->term_id);
                $term_link = $page_url . 'product-tag/cf-size-eu-' . $eu_s . '-uk-' . $uk_s . '-us-' . $us_s; ?>
                <li><a class="jcaa_attr_option jcaa_obj_text" href="<?php echo esc_url($term_link ); ?>"><?php echo $eu_s ?></a>
            <?php } ?>
        <?php endforeach; ?>
        </ul>
    </div>

    <div id="filterUK" style="display:none">
        <ul class="jcaa_attr_select jcaa_attr_variable_select  jcaa_size_medium">
            <?php foreach( $terms as $term ):
            $slug = $term->slug;
            $num = (float)$slug;
            if ($num > 20){
                $eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
                $uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
                $us_s = get_field('us-size', 'pa_size_' . $term->term_id);
                $term_link = $page_url . 'product-tag/cf-size-eu-' . $eu_s . '-uk-' . $uk_s . '-us-' . $us_s; ?>
                <li><a class="jcaa_attr_option jcaa_obj_text" href="<?php echo esc_url($term_link ); ?>"><?php echo $uk_s ?></a></li>
            <?php } ?>          
        <?php endforeach; ?>
        </ul>
    </div>

    <div id="filterUS" style="display:none">
        <ul class="jcaa_attr_select jcaa_attr_variable_select  jcaa_size_medium">
            <?php foreach( $terms as $term ):
            $slug = $term->slug;
            $num = (float)$slug;
            if ($num > 20){
                $eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
                $uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
                $us_s = get_field('us-size', 'pa_size_' . $term->term_id);
                $term_link = $page_url . 'product-tag/cf-size-eu-' . $eu_s . '-uk-' . $uk_s . '-us-' . $us_s; ?>
                <li><a class="jcaa_attr_option jcaa_obj_text" href="<?php echo esc_url($term_link ); ?>"><?php echo $us_s ?></a></li>
            <?php } ?>  
        <?php endforeach; ?>
        </ul>
    </div>

    <script>
    function sizesEU() {
       document.getElementById('filterEU').style.display = "block";
       document.getElementById('filterUK').style.display = "none";
       document.getElementById('filterUS').style.display = "none";
    }
    function sizesUK() {
       document.getElementById('filterEU').style.display = "none";
       document.getElementById('filterUK').style.display = "block";
       document.getElementById('filterUS').style.display = "none";
    }
    function sizesUS() {
       document.getElementById('filterEU').style.display = "none";
       document.getElementById('filterUK').style.display = "none";
       document.getElementById('filterUS').style.display = "block";
    }
    </script>

如有任何疑问，请不要犹豫。

干杯

WP - 属性和过滤器区域大小调整（欧盟、英国、美国..）

WP - Attribute and filter Region Sizing (EU, UK, US..)

javascript

php

wordpress

attributes

custom-wordpress-pages

我想放置的代码（但不知道位置）：