wordpress 在WooCommerce后端产品编辑页面中添加额外的图片上传字段用于产品变化

lfapxunr  于 2022-11-22  发布在  WordPress
关注(0)|答案(2)|浏览(192)

我需要帮助将自定义图像字段添加到我的产品变体中，这些字段与默认字段相同，但具有不同的名称和值或自定义 meta，以便区分默认图像和自定义图像。
我尝试使用此插件
Additional Variation Images Gallery for WooCommerce
但它破坏了我的前端功能。我只是想在我的后端（见附件图片）

我也试过

或者根据我的知识更改一些自定义代码，但对我不起作用。

wordpress

2条答案

按热度按时间
kyxcudwk

kyxcudwk1#

通过查看WC源代码，我能够通过以下php代码使其工作：

add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );

function variation_settings_fields( $loop, $variation_data, $variation ) {
    $my_custom_image_field = $variation_data['my_custom_image_field'][0] ?? null;
    ?>
    <p class="form-row form-row-first upload_my_custom_field">
        <a
            href="#"
            class="upload_my_custom_field_button tips <?php echo $my_custom_image_field ? 'remove' : ''; ?>"
            data-tip="<?php echo $my_custom_image_field ? esc_attr__( 'Remove this image', 'woocommerce' ) : esc_attr__( 'Upload an image', 'woocommerce' ); ?>"
            rel="<?php echo esc_attr( $variation->ID ); ?>">
            <img src="<?php echo $my_custom_image_field ? esc_url( wp_get_attachment_thumb_url( $my_custom_image_field ) ) : esc_url( wc_placeholder_img_src() ); ?>" />
            <input
                type="hidden"
                name="upload_my_custom_image_field[<?php echo esc_attr( $loop ); ?>]"
                class="upload_my_custom_image_field" value="<?php echo esc_attr( $my_custom_image_field ); ?>" />
        </a>
    </p>
    <?php
}

function save_variation_settings_fields( $variation_id, $loop ) {
    if (isset( $_POST['upload_my_custom_image_field'][ $loop ] )) {
        $value = wc_clean( wp_unslash( $_POST['upload_my_custom_image_field'][ $loop ] ) );
        update_post_meta( $variation_id, 'my_custom_image_field', esc_attr( $value ));
    }
}

和下面的js代码：

(function($) {
    var settings = {
        setting_variation_image: null,
        setting_variation_image_id: null
    }
    function add_my_custom_field(event) {
        var $button = $( this ),
            post_id = $button.attr( 'rel' ),
            $parent = $button.closest( '.upload_my_custom_field' );

        settings.setting_variation_image    = $parent;
        settings.setting_variation_image_id = post_id;

        event.preventDefault();

        if ( $button.is( '.remove' ) ) {

            $( '.upload_my_custom_image_field', settings.setting_variation_image ).val( '' ).trigger( 'change' );
            settings.setting_variation_image.find( 'img' ).eq( 0 )
                .attr( 'src', woocommerce_admin_meta_boxes_variations.woocommerce_placeholder_img_src );
            settings.setting_variation_image.find( '.upload_my_custom_field_button' ).removeClass( 'remove' );

        } else {

            // If the media frame already exists, reopen it.
            if ( settings.variable_image_frame ) {
                settings.variable_image_frame.uploader.uploader
                    .param( 'post_id', settings.setting_variation_image_id );
                settings.variable_image_frame.open();
                return;
            } else {
                wp.media.model.settings.post.id = settings.setting_variation_image_id;
            }

            // Create the media frame.
            settings.variable_image_frame = wp.media.frames.variable_image = wp.media({
                // Set the title of the modal.
                title: woocommerce_admin_meta_boxes_variations.i18n_choose_image,
                button: {
                    text: woocommerce_admin_meta_boxes_variations.i18n_set_image
                },
                states: [
                    new wp.media.controller.Library({
                        title: woocommerce_admin_meta_boxes_variations.i18n_choose_image,
                        filterable: 'all'
                    })
                ]
            });

            // When an image is selected, run a callback.
            settings.variable_image_frame.on( 'select', function () {

                var attachment = settings.variable_image_frame.state()
                    .get( 'selection' ).first().toJSON(),
                    url = attachment.sizes && attachment.sizes.thumbnail ? attachment.sizes.thumbnail.url : attachment.url;

                $( '.upload_my_custom_image_field', settings.setting_variation_image ).val( attachment.id )
                    .trigger( 'change' );
                settings.setting_variation_image.find( '.upload_my_custom_field_button' ).addClass( 'remove' );
                settings.setting_variation_image.find( 'img' ).eq( 0 ).attr( 'src', url );

                wp.media.model.settings.post.id = settings.wp_media_post_id;
            });

            // Finally, open the modal.
            settings.variable_image_frame.open();
        }
    }

    $(document).on('click', '.upload_my_custom_field', add_my_custom_field);
})(jQuery)
赞(0）分享  回复(0）举报  2022-11-22
brgchamk

brgchamk2#

关于atlantehs的回答中的JS部分，我认为click事件应该被添加到按钮本身。我已经用$(document).on('click', '.upload_my_custom_field_button', add_my_custom_field);替换了$(document).on('click', '.upload_my_custom_field', add_my_custom_field);，图像的删除工作正常，因为在更改之前它对我不起作用。
这是我用过的，都写在child主题的functions.php中：

//Product Variations Upload Custom Image Field

add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );

function variation_settings_fields( $loop, $variation_data, $variation ) {
    $my_custom_image_field = $variation_data['my_custom_image_field'][0] ?? null;
    ?>
    <p class="form-row form-row-first upload_my_custom_field">
        <a
            href="#"
            class="upload_my_custom_field_button tips <?php echo $my_custom_image_field ? 'remove' : ''; ?>"
            data-tip="<?php echo $my_custom_image_field ? esc_attr__( 'Remove this image', 'woocommerce' ) : esc_attr__( 'Upload an image', 'woocommerce' ); ?>"
            rel="<?php echo esc_attr( $variation->ID ); ?>">
            <img src="<?php echo $my_custom_image_field ? esc_url( wp_get_attachment_thumb_url( $my_custom_image_field ) ) : esc_url( wc_placeholder_img_src() ); ?>" />
            <input
                type="hidden"
                name="upload_my_custom_image_field[<?php echo esc_attr( $loop ); ?>]"
                class="upload_my_custom_image_field" value="<?php echo esc_attr( $my_custom_image_field ); ?>" />
        </a>
    </p>
    <?php
}

function save_variation_settings_fields( $variation_id, $loop ) {
    if (isset( $_POST['upload_my_custom_image_field'][ $loop ] )) {
        $value = wc_clean( wp_unslash( $_POST['upload_my_custom_image_field'][ $loop ] ) );
        update_post_meta( $variation_id, 'my_custom_image_field', esc_attr( $value ));
    }
}

function product_variation_img_script() {
$screen = get_current_screen();
    if ($screen->post_type === 'product') :
        ?>
        <style>
            .upload_my_custom_field_button:focus {
                outline: none !important;
                box-shadow: none !important;
            }
        </style>
        <script>
           (function($) {
        var settings = {
            setting_variation_image: null,
            setting_variation_image_id: null
        }
        function add_my_custom_field(event) {
            var $button = $( this ),
                post_id = $button.attr( 'rel' ),
                $parent = $button.closest( '.upload_my_custom_field' );

            settings.setting_variation_image    = $parent;
            settings.setting_variation_image_id = post_id;

            event.preventDefault();
            
            if ( $button.hasClass('remove')) {
                console.log("remove");
                $( '.upload_my_custom_image_field', settings.setting_variation_image ).val( '' ).trigger( 'change' );
                settings.setting_variation_image.find( 'img' ).eq( 0 )
                    .attr( 'src', woocommerce_admin_meta_boxes_variations.woocommerce_placeholder_img_src );
                settings.setting_variation_image.find( '.upload_my_custom_field_button' ).removeClass( 'remove' );

            } else {
                
                // If the media frame already exists, reopen it.
                if ( settings.variable_image_frame ) {
                    settings.variable_image_frame.uploader.uploader
                        .param( 'post_id', settings.setting_variation_image_id );
                    settings.variable_image_frame.open();
                    return;
                } else {
                    wp.media.model.settings.post.id = settings.setting_variation_image_id;
                }

                // Create the media frame.
                settings.variable_image_frame = wp.media.frames.variable_image = wp.media({
                    // Set the title of the modal.
                    title: woocommerce_admin_meta_boxes_variations.i18n_choose_image,
                    button: {
                        text: woocommerce_admin_meta_boxes_variations.i18n_set_image
                    },
                    states: [
                        new wp.media.controller.Library({
                            title: woocommerce_admin_meta_boxes_variations.i18n_choose_image,
                            filterable: 'all'
                        })
                    ]
                });

                // When an image is selected, run a callback.
                settings.variable_image_frame.on( 'select', function () {

                    var attachment = settings.variable_image_frame.state()
                        .get( 'selection' ).first().toJSON(),
                        url = attachment.sizes && attachment.sizes.thumbnail ? attachment.sizes.thumbnail.url : attachment.url;

                    $( '.upload_my_custom_image_field', settings.setting_variation_image ).val( attachment.id )
                        .trigger( 'change' );
                    settings.setting_variation_image.find( '.upload_my_custom_field_button' ).addClass( 'remove' );
                    settings.setting_variation_image.find( 'img' ).eq( 0 ).attr( 'src', url );

                    wp.media.model.settings.post.id = settings.wp_media_post_id;
                });

                // Finally, open the modal.
                settings.variable_image_frame.open();
            }
        }

        $(document).on('click', '.upload_my_custom_field_button', add_my_custom_field);
        })(jQuery)
        </script>
<?php
    endif;
}
add_action('admin_footer', 'product_variation_img_script');
赞(0）分享  回复(0）举报  2022-11-22
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com