在基于 WooCommerce 变体自定义字段的相关属性选项下方添加文本

Question

在 woocommerce 网站中，我想添加一个标签或工具包或其他东西来显示其推荐/最常选择/最畅销商品的文本，我想在我从后端选择的变体选项周围显示它。

即我有 1mm、3mm 和 5mm 三个版本。所以我想显示最多选择的文本大约 3 毫米的变化。

我的方法：

我想做的是，对于可变产品，我们在变体选项中添加一个自定义复选框，这样我就可以选择一个变体。对于这个变体添加一个class =“choosen-variant”。对于此类，在之前或之后添加一个伪选择器，并添加此 html 元素：Most Choosen Option

我尝试过的代码：

我尝试使用此代码添加自定义复选框并添加类。它添加了一个变体自定义复选框，但没有添加该类。

add_action('woocommerce_product_after_variable_attributes', 'add_most_chosen_variation_field', 10, 3);
function add_most_chosen_variation_field($loop, $variation_data, $variation)
{
    $most_chosen = get_post_meta($variation->ID, '_most_chosen_variation', true);
    ?>
    <label for="most-chosen-variation-<?php echo $loop; ?>">
        <input type="checkbox" name="most_chosen_variation[<?php echo $loop; ?>]" id="most-chosen-variation-<?php echo $loop; ?>" value="1" <?php checked($most_chosen, '1'); ?> />
        Most Chosen Variation
    </label>
    <?php
}

add_action('woocommerce_save_product_variation', 'save_most_chosen_variation_field', 10, 2);
function save_most_chosen_variation_field($variation_id, $loop)
{
    if (isset($_POST['most_chosen_variation'][$loop])) {
        $most_chosen = $_POST['most_chosen_variation'][$loop] ? '1' : '0';
        update_post_meta($variation_id, '_most_chosen_variation', $most_chosen);
    }
}


add_action('wp_head', 'add_most_chosen_variation_css');
function add_most_chosen_variation_css()
{
    ?>
    <style>
        .most-chosen-label {
            display: inline-block;
            margin-left: 5px;
            background-color: #f0ad4e;
            color: #fff;
            padding: 2px 5px;
            border-radius: 3px;
        }
    </style>
    <?php
}

add_action('wp_footer', 'add_most_chosen_variation_js');
function add_most_chosen_variation_js()
{
    ?>
    <script>
        jQuery(document).ready(function($) {
            $('form.variations_form').on('show_variation', function(event, variation) {
                // Remove the "Most Chosen" label from all variation options
                $('.most-chosen-label').remove();

                // Add the "Most Chosen" label to the selected variation option
                var mostChosenOptionValue = variation.variation_id;
                var variationOption = $('.variations .value select option[value="' + mostChosenOptionValue + '"]');
                variationOption.after('<span class="most-chosen-label">Most Chosen Option</span>');
            });
        });
    </script>
    <?php
}

来自商店的 HTML 代码：

<div class="cfvsw-swatches-container cfvsw-product-container" swatches-attr="attribute_kies-uw-capaciteit">

<div class="cfvsw-swatches-option cfvsw-label-option" data-slug="11.6 Ah €320,00" data-title="11.6 Ah €320,00" style="min-width:100px;min-height:50px;border-radius:10px;">

<div class="cfvsw-swatch-inner">11.6 Ah €320,00</div></div>

<div class="cfvsw-swatches-option cfvsw-label-option" data-slug="13.4 Ah €370,00" data-title="13.4 Ah €370,00" style="min-width:100px;min-height:50px;border-radius:10px;">

<div class="cfvsw-swatch-inner">13.4 Ah €370,00</div></div></div>

我在参考网站上找到的脚本使用类似的逻辑：

<script type="text/javascript">
       var spConfig = new Product.Config({"attributes":{"183":{"id":"183","code":"far_vermogen_na_revisie","label":"Capaciteit na revisie","options":[{"id":"596","label":"8,7 Ah (313 Wh)","price":"0","oldPrice":"0","products":["1250"]},{"id":"799","label":"11 Ah (396 Wh)","price":"50","oldPrice":"50","products":["1251"]},{"id":"739","label":"13,6 Ah (490 Wh)","price":"95","oldPrice":"95","products":["1252"]}]}},"template":"\u20ac\u00a0#{price}","basePrice":"299","oldPrice":"299","productId":"1249","chooseText":"Kies een optie...","taxConfig":{"includeTax":true,"showIncludeTax":true,"showBothPrices":false,"defaultTax":21,"currentTax":21,"inclTaxTitle":"Incl. BTW"}});
        // Values overnemen vanuit de select
        jQuery('.super-attribute-select').each(function() {
            var attributeId = jQuery(this).data('atributeid'),
                outputHtml = [];

            jQuery(this).find('option').each(function(index, element) {

                let $element = jQuery(element), value = $element.val();

                if (value !== '') {
                    let productId;

                    if (element.config && element.config['products'] && element.config['products'].length > 0) {
                        productId = element.config['products'][0];
                    }

                    let mostChosenOptions = [];
                    let isMostChosenOption = index === 2;

                    if (mostChosenOptions.length > 0) {
                        isMostChosenOption = mostChosenOptions.toString().includes(productId);
                    }

                    let optionClasses = ['option-item', 'col-xs-4'];

                    if (isMostChosenOption) {
                        optionClasses.push('option-item-most-chosen');
                    }

                    outputHtml.push('<div class="' + optionClasses.join(' ') + '" data-attribute="' + attributeId + '" data-value="' + value + '">');
                    outputHtml.push('<span>' + $element.html() + '</span>');

                    if (isMostChosenOption) {
                        outputHtml.push('<span class="most-chosen-label">Meest gekozen optie</span>');
                    }
                    outputHtml.push('</div>');
                }
            });

            jQuery('#product-option-values-' + attributeId).html(outputHtml.join(''));
        });

       jQuery('.product-option-values').on('click', '.option-item', function(e) {
           e.preventDefault();
           setAttributeValueCustom(jQuery(this).data('attribute'), jQuery(this).data('value'));
       });

        function setAttributeValueCustom(attributeId, value) {
            jQuery('#product-option-values-' + attributeId + ' > .option-item').each(function () {
                if (jQuery(this).data('value') === value) {
                    jQuery(this).addClass('selected');
                } else {
                    jQuery(this).removeClass('selected');
                }
            });
            jQuery('#attribute' + attributeId).val(value);
            spConfig.reloadPrice();
        }

        jQuery('body').bind('form_submitted', function() {
            // Vorige fouten verwijderen
            jQuery('.validation-advice-copy').each(function() {
                jQuery(this).remove();
            });

            // Controleren of er fouten zijn... deze zijn namelijk verborgen
            jQuery('.super-attribute-select').each(function() {
                if(jQuery(this).hasClass('validation-failed')) {
                    attribute_id = jQuery(this).data('atributeid');
                    validationadvice = jQuery(this).next('.validation-advice').html();
                    jQuery('#product-option-values-'+attribute_id).after('<div class="validation-advice validation-advice-copy">'+validationadvice+'</div');
                }
            });
        });
       jQuery(function(){
           jQuery('.option-item').first().click();
       });
    </script>

Answer 1

首先，我使用管理产品自定义复选框设置字段的最新代码版本修改了您的代码：

add_action('woocommerce_product_after_variable_attributes', 'add_most_chosen_variation_field', 10, 3);
function add_most_chosen_variation_field($loop, $variation_data, $variation) {
    printf('<label for="most-chosen-%s">
        <input type="checkbox" name="most_chosen[%s]" id="most-chosen-%s" %s /> %s</label>', 
        $loop, $loop, $loop, checked( get_post_meta($variation->ID, '_most_chosen', true), '1', false ),
        __("Most Chosen Variation", "woocommerce") );

}

add_action('woocommerce_admin_process_variation_object', 'save_most_chosen_variation_field', 10, 2);
function save_most_chosen_variation_field($variation, $loop) {
    if (isset($_POST['most_chosen'][$loop])) {
        $variation->update_meta_data('_most_chosen', $_POST['most_chosen'][$loop] ? '1' : '0');
    }
}

现在，您需要首先检索您提供的 HTML 代码中显示的“最常选择”变体的属性值。

在下面的函数中，您需要设置正确的属性分类法（始终以“pa_”+属性段开头，例如“Color”属性，分类法为“pa_color”）。

function get_most_chosen_variation_attribute( $product ) {
    $taxonomy = 'pa_color'; // <== Define the correct attribute taxonomy

    foreach ( $product->get_available_variations('') as $variation ) {
        if ( $variation->get_meta('_most_chosen') ) {
            return $variation->get_attribute($taxonomy);
        }
    }
    return null;
}

然后现在要在相关选项下方显示“最常选择的选项”，请使用以下（假设“11.6 Ah €320,00”是真实属性值）：

add_action( 'woocommerce_before_variations_form', 'most_chosen_variation_display_js' );
function most_chosen_variation_display_js() {
    global $product;

    if ( $attribute_slug = get_most_chosen_variation_attribute( $product ) ) :

    $text = __('Most Chosen Option', 'woocommerce');

    wc_enqueue_js("const mostChosen = '{$attribute_slug}';
    $('.cfvsw-swatches-container .cfvsw-label-option').each( function(){
        if( $(this).data('title') === mostChosen ) {
            $(this).addClass('most-chosen').append('<span>{$text}</span>');
        }
    });");

    endif;
}

add_action('wp_head', 'most_chosen_variation_css');
function most_chosen_variation_css() {
    ?>
    <style>
    .most-chosen span {
        display: inline-block;
        margin-left: 5px;
        background-color: #f0ad4e;
        color: #fff;
        padding: 2px 5px;
        border-radius: 3px;
    }
    </style>
    <?php
}

如果相关属性值是“11.6 Ah €320,00”的子字符串，例如“11.6”，则应替换此行：

if( $(this).data('title') === mostChosen ) {

与：

var dataTitle = $(this).data('title');
if( dataTitle.includes(mostChosen) ) {

代码位于子主题的functions.php 文件中（或插件中）。应该可以。