Question

我在编辑产品页面的选项卡部分创建了一个自定义选项卡，您可以在其中使用钩子 woocommerce_product_data_tabs 编辑/添加产品变体。我的自定义选项卡名称是 Product Swatches，我在其中显示颜色属性，并具有将图像添加到色板框的颜色属性的功能。问题是当我创建一个新产品并添加属性然后我转到 Product Swatches 部分时，它不会在其中显示属性，除非我保存并刷新页面。我认为当我打开自定义选项卡 Product Swatches 时通过 ajax 引用可以解决这个问题。
Screenshot 1
Screenshot 2

我的代码：

<?php

class ProductSwatches {
    public function __construct() {
        add_filter('woocommerce_product_data_tabs', array($this, 'add_swatches_tab'), 99 , 1);
        add_action('woocommerce_product_data_panels', array($this, 'add_product_swatches_data_fields'));
        add_action('woocommerce_process_product_meta', array($this, 'save_product_swatches'));
    }
    
    // Create a tab in product data tabs
    public function add_swatches_tab($product_data_tabs) {
        $product_data_tabs['product-swatches'] = array(
            'label' => __('Product Swatches', 'zyne'),
            'target' => 'product_swatches_data',
            'class'    => array('show_if_variable'),
            'priority' => 60,
        );
        return $product_data_tabs;
    }

    public function add_product_swatches_data_fields() {
        global $post;
        $product = wc_get_product($post->ID);
        $attributes = $product->get_variation_attributes();

        $html = '<div id="product_swatches_data" class="panel woocommerce_options_panel">';
        $html .= '<div class="wcSwatches">';
        
        $images = get_post_meta($post->ID, 'product_swatches_images', true);
        foreach ($attributes['Color'] as $color) {
            $image_id = $images[$color.'_variant_image'];
            $image = '<img src="" class="swatch-preview-image" style="display:none" />';
            $class = '';
            if(intval($image_id) > 0) {
                $class = ' active';
                $image = wp_get_attachment_image($image_id, 'medium', false, array('class' => 'swatch-preview-image'));
            }
            $html .= "<div class='wcSwatches-item'>
                        <div class='wcSwatches-item--title'>$color</div>
                        <div class='wcSwatches-item--upload$class'>
                            <label class='wcSwatches-item--upload__btn'>$image</label>
                            <input type='hidden' class='wcSwatches-item--upload__input' name='".$color."_variant_image' id='".$color."_variant_image' value='$image_id'/>
                        </div>
                    </div>";
        }

        $html .= '</div>';
        $html .= '</div>';

        echo $html;
    }

    // Saving swatches images
    public function save_product_swatches($post_id){
        // .......
    }
}

if (class_exists('ProductSwatches')) {
    $swatches = new ProductSwatches();
}

我在 google 上搜索了如何引用 ajaxify 我的自定义选项卡，但找不到任何钩子来做到这一点。你能帮我吗？

在产品中添加属性时参考自定义 woocommerce_product_data_tabs

0 个答案: