如何使用图像更改下拉选择？答案

【问题标题】：How to use images to change dropdown selection?如何使用图像更改下拉选择？
【发布时间】：2015-01-14 22:40:48
【问题描述】：

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

这是代码的 sn-p。我所有的自定义代码都以选项标记循环开始，紧挨着关闭 Select 标记。

$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。问题是，页面不会对更改做出反应，就好像下拉框直接与之交互一样。简而言之，除了下拉框改变视觉值之外，什么也没有发生。我想要它，以便单击图像与单击下拉框中的选项完全相同。

如果您需要更多说明或信息，请告诉我。提前致谢！

【问题讨论】：

你考虑过Variation Swatches吗？
幸运的是，我确实安装了 Variation Swatches and Photos 1.3.0 插件。激活它并添加了照片，但现在没有显示价格。我最初想避免使用这个插件，因为它需要我手动更新每个产品列表。
可能取决于您的主题模板。我会假设它“开箱即用”可以正常工作。我不知道为什么你必须编辑每个产品，但它仍然可能比你从头开始重写变化样本所花费的时间更少。

标签： javascript php html wordpress woocommerce

【解决方案1】：

使用变体色板和照片插件有效。只需进入并编辑插件的 variable.php 以显示我原始 variable.php 文件中缺少的所有信息。现在我只需要花几个小时来编辑每个产品。

【讨论】：