在商店和存档页面中选择变量时如何更改产品图像？

Question

我使用这个钩子在商店页面上显示变化。但是，选择变量后，产品图像不会改变。它适用于单个产品页面。刚接触 WordPress 和 PHP，我认为 woocommerce 挂钩的工作方式就像“复制和粘贴”。为什么它不适用于商店页面？它如何适用于商店页面？

add_action( 'woocommerce_before_shop_loop', 'show_production_variations_on_shop_page' );
function show_production_variations_on_shop_page() {

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30 );
}

Answer 1

首先，您必须将 woocommerceadd-to-cart-variation.js从商店页面出列，因为我们必须从插件或主题进行覆盖。因此，无论您在哪里开发，都需要从主题或插件中add-to-cart-variation.js克隆。enqueue

function add_custom_js(){
    
    if( is_shop() ){

        wp_dequeue_script( 'wc-add-to-cart-variation' );
        wp_deregister_script( 'wc-add-to-cart-variation' );

        $version = WC_VERSION;

        // Register the script
        wp_register_script( 'wc-add-to-cart-variation', get_template_directory_uri().'/assets/js/add-to-cart-variation.js', array( 'jquery', 'wp-util', 'jquery-blockui' ), $version );
         
        // Localize the script with new data
        
        $params = array(
            'wc_ajax_url'                      => WC_AJAX::get_endpoint( '%%endpoint%%' ),
            'i18n_no_matching_variations_text' => esc_attr__( 'Sorry, no products matched your selection. Please choose a different combination.', 'woocommerce' ),
            'i18n_make_a_selection_text'       => esc_attr__( 'Please select some product options before adding this product to your cart.', 'woocommerce' ),
            'i18n_unavailable_text'            => esc_attr__( 'Sorry, this product is unavailable. Please choose a different combination.', 'woocommerce' ),
        );

        wp_localize_script( 'wc-add-to-cart-variation', 'wc_add_to_cart_variation_params', $params );
         
        // Enqueued script with localized data.
        wp_enqueue_script( 'wc-add-to-cart-variation' );

    }
}

add_action( 'wp_enqueue_scripts', 'add_custom_js', 9999, 1 );

add-to-cart-variation.js无论您在哪里进行开发，都可以在活动主题或插件中创建一个文件。（我enqueueing来自主题）

添加以下与 woocommerce 相同的 js 代码add-to-cart-variation.js，但我们必须根据要求修改它。

/*global wc_add_to_cart_variation_params */
;(function ( $, window, document, undefined ) {
    /**
     * VariationForm class which handles variation forms and attributes.
     */
    var VariationForm = function( $form ) {
        var self = this;

        self.$form                = $form;
        self.$attributeFields     = $form.find( '.variations select' );
        self.$singleVariation     = $form.find( '.single_variation' );
        self.$singleVariationWrap = $form.find( '.single_variation_wrap' );
        self.$resetVariations     = $form.find( '.reset_variations' );
        self.$product             = $form.closest( '.product' );
        self.variationData        = $form.data( 'product_variations' );
        self.useAjax              = false === self.variationData;
        self.xhr                  = false;
        self.loading              = true;

        // Initial state.
        self.$singleVariationWrap.show();
        self.$form.off( '.wc-variation-form' );

        // Methods.
        self.getChosenAttributes    = self.getChosenAttributes.bind( self );
        self.findMatchingVariations = self.findMatchingVariations.bind( self );
        self.isMatch                = self.isMatch.bind( self );
        self.toggleResetLink        = self.toggleResetLink.bind( self );

        // Events.
        $form.on( 'click.wc-variation-form', '.reset_variations', { variationForm: self }, self.onReset );
        $form.on( 'reload_product_variations', { variationForm: self }, self.onReload );
        $form.on( 'hide_variation', { variationForm: self }, self.onHide );
        $form.on( 'show_variation', { variationForm: self }, self.onShow );
        $form.on( 'reset_data', { variationForm: self }, self.onResetDisplayedVariation );
        $form.on( 'reset_image', { variationForm: self }, self.onResetImage );
        $form.on( 'change.wc-variation-form', '.variations select', { variationForm: self }, self.onChange );
        $form.on( 'found_variation.wc-variation-form', { variationForm: self }, self.onFoundVariation );
        $form.on( 'check_variations.wc-variation-form', { variationForm: self }, self.onFindVariation );
        $form.on( 'update_variation_values.wc-variation-form', { variationForm: self }, self.onUpdateAttributes );

        // Init after gallery.
        setTimeout( function() {
            $form.trigger( 'check_variations' );
            $form.trigger( 'wc_variation_form', self );
            self.loading = false;
        }, 100 );
    };

    /**
     * Reset all fields.
     */
    VariationForm.prototype.onReset = function( event ) {
        event.preventDefault();
        event.data.variationForm.$attributeFields.val( '' ).trigger( 'change' );
        event.data.variationForm.$form.trigger( 'reset_data' );
    };

    /**
     * Reload variation data from the DOM.
     */
    VariationForm.prototype.onReload = function( event ) {
        var form           = event.data.variationForm;
        form.variationData = form.$form.data( 'product_variations' );
        form.useAjax       = false === form.variationData;
        form.$form.trigger( 'check_variations' );
    };

    /**
     * When a variation is hidden.
     */
    VariationForm.prototype.onHide = function( event ) {
        event.preventDefault();
        event.data.variationForm.$form
            .find( '.single_add_to_cart_button' )
            .removeClass( 'wc-variation-is-unavailable' )
            .addClass( 'disabled wc-variation-selection-needed' );
        event.data.variationForm.$form
            .find( '.woocommerce-variation-add-to-cart' )
            .removeClass( 'woocommerce-variation-add-to-cart-enabled' )
            .addClass( 'woocommerce-variation-add-to-cart-disabled' );
    };

    /**
     * When a variation is shown.
     */
    VariationForm.prototype.onShow = function( event, variation, purchasable ) {
        event.preventDefault();
        if ( purchasable ) {
            event.data.variationForm.$form
                .find( '.single_add_to_cart_button' )
                .removeClass( 'disabled wc-variation-selection-needed wc-variation-is-unavailable' );
            event.data.variationForm.$form
                .find( '.woocommerce-variation-add-to-cart' )
                .removeClass( 'woocommerce-variation-add-to-cart-disabled' )
                .addClass( 'woocommerce-variation-add-to-cart-enabled' );
        } else {
            event.data.variationForm.$form
                .find( '.single_add_to_cart_button' )
                .removeClass( 'wc-variation-selection-needed' )
                .addClass( 'disabled wc-variation-is-unavailable' );
            event.data.variationForm.$form
                .find( '.woocommerce-variation-add-to-cart' )
                .removeClass( 'woocommerce-variation-add-to-cart-enabled' )
                .addClass( 'woocommerce-variation-add-to-cart-disabled' );
        }

        // If present, the media element library needs initialized on the variation description.
        if ( wp.mediaelement ) {
            event.data.variationForm.$form.find( '.wp-audio-shortcode, .wp-video-shortcode' )
                .not( '.mejs-container' )
                .filter(
                    function () {
                        return ! $( this ).parent().hasClass( 'mejs-mediaelement' );
                    }
                )
                .mediaelementplayer( wp.mediaelement.settings );
        }
    };

    /**
     * When displayed variation data is reset.
     */
    VariationForm.prototype.onResetDisplayedVariation = function( event ) {
        var form = event.data.variationForm;
        form.$product.find( '.product_meta' ).find( '.sku' ).wc_reset_content();
        form.$product
            .find( '.product_weight, .woocommerce-product-attributes-item--weight .woocommerce-product-attributes-item__value' )
            .wc_reset_content();
        form.$product
            .find( '.product_dimensions, .woocommerce-product-attributes-item--dimensions .woocommerce-product-attributes-item__value' )
            .wc_reset_content();
        form.$form.trigger( 'reset_image' );
        form.$singleVariation.slideUp( 200 ).trigger( 'hide_variation' );
    };

    /**
     * When the product image is reset.
     */
    VariationForm.prototype.onResetImage = function( event ) {
        event.data.variationForm.$form.wc_variations_image_update( false );
    };

    /**
     * Looks for matching variations for current selected attributes.
     */
    VariationForm.prototype.onFindVariation = function( event, chosenAttributes ) {
        var form              = event.data.variationForm,
            attributes        = 'undefined' !== typeof chosenAttributes ? chosenAttributes : form.getChosenAttributes(),
            currentAttributes = attributes.data;

        if ( attributes.count && attributes.count === attributes.chosenCount ) {
            if ( form.useAjax ) {
                if ( form.xhr ) {
                    form.xhr.abort();
                }
                form.$form.block( { message: null, overlayCSS: { background: '#fff', opacity: 0.6 } } );
                currentAttributes.product_id  = parseInt( form.$form.data( 'product_id' ), 10 );
                currentAttributes.custom_data = form.$form.data( 'custom_data' );
                form.xhr                      = $.ajax( {
                    url: wc_add_to_cart_variation_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_variation' ),
                    type: 'POST',
                    data: currentAttributes,
                    success: function( variation ) {
                        if ( variation ) {
                            form.$form.trigger( 'found_variation', [ variation ] );
                        } else {
                            form.$form.trigger( 'reset_data' );
                            attributes.chosenCount = 0;

                            if ( ! form.loading ) {
                                form.$form
                                    .find( '.single_variation' )
                                    .after(
                                        '<p class="wc-no-matching-variations woocommerce-info">' +
                                        wc_add_to_cart_variation_params.i18n_no_matching_variations_text +
                                        '</p>'
                                    );
                                form.$form.find( '.wc-no-matching-variations' ).slideDown( 200 );
                            }
                        }
                    },
                    complete: function() {
                        form.$form.unblock();
                    }
                } );
            } else {
                form.$form.trigger( 'update_variation_values' );

                var matching_variations = form.findMatchingVariations( form.variationData, currentAttributes ),
                    variation           = matching_variations.shift();

                if ( variation ) {
                    form.$form.trigger( 'found_variation', [ variation ] );
                } else {
                    form.$form.trigger( 'reset_data' );
                    attributes.chosenCount = 0;

                    if ( ! form.loading ) {
                        form.$form
                            .find( '.single_variation' )
                            .after(
                                '<p class="wc-no-matching-variations woocommerce-info">' +
                                wc_add_to_cart_variation_params.i18n_no_matching_variations_text +
                                '</p>'
                            );
                        form.$form.find( '.wc-no-matching-variations' ).slideDown( 200 );
                    }
                }
            }
        } else {
            form.$form.trigger( 'update_variation_values' );
            form.$form.trigger( 'reset_data' );
        }

        // Show reset link.
        form.toggleResetLink( attributes.chosenCount > 0 );
    };

    /**
     * Triggered when a variation has been found which matches all attributes.
     */
    VariationForm.prototype.onFoundVariation = function( event, variation ) {
        var form           = event.data.variationForm,
            $sku           = form.$product.find( '.product_meta' ).find( '.sku' ),
            $weight        = form.$product.find(
                '.product_weight, .woocommerce-product-attributes-item--weight .woocommerce-product-attributes-item__value'
            ),
            $dimensions    = form.$product.find(
                '.product_dimensions, .woocommerce-product-attributes-item--dimensions .woocommerce-product-attributes-item__value'
            ),
            $qty           = form.$singleVariationWrap.find( '.quantity' ),
            purchasable    = true,
            variation_id   = '',
            template       = false,
            $template_html = '';

        if ( variation.sku ) {
            $sku.wc_set_content( variation.sku );
        } else {
            $sku.wc_reset_content();
        }

        if ( variation.weight ) {
            $weight.wc_set_content( variation.weight_html );
        } else {
            $weight.wc_reset_content();
        }

        if ( variation.dimensions ) {
            // Decode HTML entities.
            $dimensions.wc_set_content( $.parseHTML( variation.dimensions_html )[0].data );
        } else {
            $dimensions.wc_reset_content();
        }

        form.$form.wc_variations_image_update( variation );

        if ( ! variation.variation_is_visible ) {
            template = wp_template( 'unavailable-variation-template' );
        } else {
            template     = wp_template( 'variation-template' );
            variation_id = variation.variation_id;
        }

        $template_html = template( {
            variation: variation
        } );
        $template_html = $template_html.replace( '/*<![CDATA[*/', '' );
        $template_html = $template_html.replace( '/*]]>*/', '' );

        form.$singleVariation.html( $template_html );
        form.$form.find( 'input[name="variation_id"], input.variation_id' ).val( variation.variation_id ).trigger( 'change' );

        // Hide or show qty input
        if ( variation.is_sold_individually === 'yes' ) {
            $qty.find( 'input.qty' ).val( '1' ).attr( 'min', '1' ).attr( 'max', '' ).trigger( 'change' );
            $qty.hide();
        } else {

            var $qty_input = $qty.find( 'input.qty' ),
                qty_val    = parseFloat( $qty_input.val() );

            if ( isNaN( qty_val ) ) {
                qty_val = variation.min_qty;
            } else {
                qty_val = qty_val > parseFloat( variation.max_qty ) ? variation.max_qty : qty_val;
                qty_val = qty_val < parseFloat( variation.min_qty ) ? variation.min_qty : qty_val;
            }

            $qty_input.attr( 'min', variation.min_qty ).attr( 'max', variation.max_qty ).val( qty_val ).trigger( 'change' );
            $qty.show();
        }

        // Enable or disable the add to cart button
        if ( ! variation.is_purchasable || ! variation.is_in_stock || ! variation.variation_is_visible ) {
            purchasable = false;
        }

        // Reveal
        if ( form.$singleVariation.text().trim() ) {
            form.$singleVariation.slideDown( 200 ).trigger( 'show_variation', [ variation, purchasable ] );
        } else {
            form.$singleVariation.show().trigger( 'show_variation', [ variation, purchasable ] );
        }
    };

    /**
     * Triggered when an attribute field changes.
     */
    VariationForm.prototype.onChange = function( event ) {
        var form = event.data.variationForm;

        form.$form.find( 'input[name="variation_id"], input.variation_id' ).val( '' ).trigger( 'change' );
        form.$form.find( '.wc-no-matching-variations' ).remove();

        if ( form.useAjax ) {
            form.$form.trigger( 'check_variations' );
        } else {
            form.$form.trigger( 'woocommerce_variation_select_change' );
            form.$form.trigger( 'check_variations' );
        }

        // Custom event for when variation selection has been changed
        form.$form.trigger( 'woocommerce_variation_has_changed' );
    };

    /**
     * Escape quotes in a string.
     * @param {string} string
     * @return {string}
     */
    VariationForm.prototype.addSlashes = function( string ) {
        string = string.replace( /'/g, '\\\'' );
        string = string.replace( /"/g, '\\\"' );
        return string;
    };

    /**
     * Updates attributes in the DOM to show valid values.
     */
    VariationForm.prototype.onUpdateAttributes = function( event ) {
        var form              = event.data.variationForm,
            attributes        = form.getChosenAttributes(),
            currentAttributes = attributes.data;

        if ( form.useAjax ) {
            return;
        }

        // Loop through selects and disable/enable options based on selections.
        form.$attributeFields.each( function( index, el ) {
            var current_attr_select     = $( el ),
                current_attr_name       = current_attr_select.data( 'attribute_name' ) || current_attr_select.attr( 'name' ),
                show_option_none        = $( el ).data( 'show_option_none' ),
                option_gt_filter        = ':gt(0)',
                attached_options_count  = 0,
                new_attr_select         = $( '<select/>' ),
                selected_attr_val       = current_attr_select.val() || '',
                selected_attr_val_valid = true;

            // Reference options set at first.
            if ( ! current_attr_select.data( 'attribute_html' ) ) {
                var refSelect = current_attr_select.clone();

                refSelect.find( 'option' ).removeAttr( 'attached' ).prop( 'disabled', false ).prop( 'selected', false );

                // Legacy data attribute.
                current_attr_select.data(
                    'attribute_options',
                    refSelect.find( 'option' + option_gt_filter ).get()
                );
                current_attr_select.data( 'attribute_html', refSelect.html() );
            }

            new_attr_select.html( current_attr_select.data( 'attribute_html' ) );

            // The attribute of this select field should not be taken into account when calculating its matching variations:
            // The constraints of this attribute are shaped by the values of the other attributes.
            var checkAttributes = $.extend( true, {}, currentAttributes );

            checkAttributes[ current_attr_name ] = '';

            var variations = form.findMatchingVariations( form.variationData, checkAttributes );

            // Loop through variations.
            for ( var num in variations ) {
                if ( typeof( variations[ num ] ) !== 'undefined' ) {
                    var variationAttributes = variations[ num ].attributes;

                    for ( var attr_name in variationAttributes ) {
                        if ( variationAttributes.hasOwnProperty( attr_name ) ) {
                            var attr_val         = variationAttributes[ attr_name ],
                                variation_active = '';

                            if ( attr_name === current_attr_name ) {
                                if ( variations[ num ].variation_is_active ) {
                                    variation_active = 'enabled';
                                }

                                if ( attr_val ) {
                                    // Decode entities.
                                    attr_val = $( '<div/>' ).html( attr_val ).text();

                                    // Attach to matching options by value. This is done to compare
                                    // TEXT values rather than any HTML entities.
                                    var $option_elements = new_attr_select.find( 'option' );
                                    if ( $option_elements.length ) {
                                        for (var i = 0, len =