Question

我想要完成的是让图像缩略图替换woocommerce变体产品页面中的下拉框。我试图让它工作的方式是当用户点击变体产品图像时，（将被隐藏）下拉框将更改为正确的值，就像用户与下拉框本身交互一样。我正在使用的文件是variable.php。

以下是代码片段。我的所有自定义代码都在关闭选择标记之前的选项标记循环开始。

$loop = 0; foreach ( $attributes as $name => $options ) : $loop++; $countimg = 0;?>
    <select id="<?php echo esc_attr( sanitize_title( $name ) ); ?>" name="attribute_<?php echo sanitize_title( $name ); ?>" >
            <option value=""><?php echo __( 'Choose an option', 'woocommerce' ) ?>&hellip;</option>                         
            <?php
            if ( is_array( $options ) ) {

                if ( isset( $_REQUEST[ 'attribute_' . sanitize_title( $name ) ] ) ) {
                    $selected_value = $_REQUEST[ 'attribute_' . sanitize_title( $name ) ];
                } elseif ( isset( $selected_attributes[ sanitize_title( $name ) ] ) ) {
                    $selected_value = $selected_attributes[ sanitize_title( $name ) ];
                } else {
                    $selected_value = '';
                }

                                // Get terms if this is a taxonomy - ordered
                if ( taxonomy_exists( $name ) ) {

                    $orderby = wc_attribute_orderby( $name );

                    switch ( $orderby ) {
                        case 'name' :
                        $args = array( 'orderby' => 'name', 'hide_empty' => false, 'menu_order' => false );
                        break;
                        case 'id' :
                        $args = array( 'orderby' => 'id', 'order' => 'ASC', 'menu_order' => false, 'hide_empty' => false );
                        break;
                        case 'menu_order' :
                        $args = array( 'menu_order' => 'ASC', 'hide_empty' => false );
                        break;
                    }

                    $terms = get_terms( $name, $args );
                    $count = 1;

                    foreach ( $terms as $term ) {
                        if ( ! in_array( $term->slug, $options ) )
                            continue;                               
                        echo '<option id="' . $count . '" value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . '>' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</option>';                          
                        $count++;}
                    } else {                            
                        foreach ( $options as $option ) {
                            echo '<option id="' . $count . '" value="' . esc_attr( sanitize_title( $option ) ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $option ), false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</option>';                            
                            $count++;}

                        }
                    }
                    ?>
        </select> 

                <div>
                    <?php foreach ( $available_variations as $available_variation ) {
                        $countimg++;
                        $image_links = $available_variation['image_link'];
                    echo '<img id="' . $countimg . '" src="' . $image_links . '" onclick="selectVariationOption(this.id)" style="height:65px; margin-bottom:5px;">';
                    }?>
                </div>

                <script>
                function selectVariationOption(clicked_id) {                
                document.getElementById("<?php echo esc_attr( sanitize_title( $name ) ); ?>").selectedIndex = clicked_id;
                }
                </script>

                <?php
                if ( sizeof($attributes) == $loop )
                    echo '<a class="reset_variations" href="#reset">' . __( 'Clear selection', 'woocommerce' ) . '</a>';
                ?>
            <?php endforeach;?>
        </div>
    </div>

我在这里做的是为选项标签添加了一个数字ID，并随着每个附加选项的增加而增加。然后，我展示了可用的图像变化，并添加了一个循环匹配相应选项ID的数字ID。最后，我使用了一个简单的javascript，当单击图像时，下拉框会更改为正确的selectedIndex。问题是，页面不会对更改做出反应，就像下拉框直接与之交互一样。简而言之，没有任何事情发生，但下拉框改变了视觉价值。我想要它，以便点击图像与点击下拉框中的选项完全相同。

如果您需要更多说明或信息，请与我们联系。提前谢谢！

Answer 1

使用Variation Swatches和Photos插件工作。只需进入并编辑插件的variable.php即可显示原始variable.php文件中缺少的所有信息。现在我只需要花几个小时来编辑每个产品。

如何使用图像更改下拉列表选择？

1 个答案: