如何使用圖像更改下拉選擇？

我想要完成的是讓圖像縮略圖替換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

如何使用圖像更改下拉選擇？

回答

相關問題