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

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

这是一段代码。我所有的自定义代码都是在关闭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。问题是，页面不会对更改做出反应，就好像下拉框直接与之交互一样。总之，没有任何反应，但下拉框改变视觉价值。我需要它，因此点击图片的方式与点击下拉框中的选项完全相同。

让我知道你是否需要更多的澄清或信息。提前致谢！

来源

2015-01-14 T-Low

你有没有考虑过[Variation Swatches]（http://www.woothemes.com/products/variation-swatches-and-photos/）？ – helgatheviking

幸运的是我安装了Variation Swatches和Photos 1.3.0插件。激活它并添加了照片，但现在价格没有显示。我原本想避免使用这个插件，因为它需要我手动更新每个产品列表。 –

可能取决于您的主题模板。我会假设它“正开箱即用”。我不确定为什么您必须编辑每个产品，但仍然可能比您尝试从头开始重新编写变体色板花费的时间要少。 – helgatheviking

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

来源

2015-01-15 20:42:25

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

回答

相关问题