將產品變體添加到產品頁面

Question

我正在研究http://fitboxmeals.com/order/，我想在我的woocommerce主題的function.php中使用此代碼段，以便我的產品變體顯示在膳食產品頁面上。

if (! function_exists(‘woocommerce_template_loop_add_to_cart’)) { function woocommerce_template_loop_add_to_cart() { global $product; if ($product->product_type == "variable") { woocommerce_variable_add_to_cart(); } else { woocommerce_get_template(
 
'loop/add-to-cart.php'); } } }

代碼工作，但現在當我將產品添加到購物車，我想再次對相同的產品或不同的一個復位的變化，使用戶可以選擇那些變化在產品添加到購物車後。

if (! defined('ABSPATH')) exit; // Exit if accessed directly global $woocommerce, $product, $post; ?> 
 

 
<?php do_action('woocommerce_before_add_to_cart_form'); ?> 
 

 
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr(json_encode($available_variations)) ?>"> 
 
    <?php if (! empty($available_variations)) : ?> 
 
    <table class="variations" cellspacing="0"> 
 
    <tbody> 
 
     <?php $loop=0 ; foreach ($attributes as $name=>$options) : $loop++; ?> 
 
     <tr> 
 
     <td class="label"> 
 
      <label for="<?php echo sanitize_title($name); ?>"> 
 
      <?php echo wc_attribute_label($name); ?> 
 
      </label> 
 
     </td> 
 
     <td class="value"> 
 
      <select id="<?php echo esc_attr(sanitize_title($name)); ?>" name="attribute_<?php echo sanitize_title($name); ?>"> 
 
      <option value=""> 
 
       <?php echo __('Choose an option', ETHEME_DOMAIN) ?>&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=w c_attribute_orderby($name); switch ($orderby) { case 'name' : $args=a 
 
      rray('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); foreach ($terms as $term) { if (! in_array($term->slug, $options)) continue; echo ' 
 
      <option value="' . esc_attr($term->slug) . '" 
 
      ' . selected(sanitize_title($selected_value), sanitize_title($term->slug), false) . '>' . apply_filters('woocommerce_variation_option_name', $term->name) . '</option>'; } } else { foreach ($options as $option) { echo ' 
 
      <option 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>'; } } } ?> 
 
      </select> 
 
      <?php if (sizeof($attributes)==$ loop) echo '<a class="reset_variations" href="#reset">' . __('Clear selection', ETHEME_DOMAIN) . '</a>'; ?> 
 
     </td> 
 
     </tr> 
 
     <?php endforeach;?> 
 
    </tbody> 
 
    </table> 
 

 
    <?php do_action('woocommerce_before_add_to_cart_button'); ?> 
 

 
    <div class="single_variation_wrap" style="display:none;"> 
 
    <?php do_action('woocommerce_before_single_variation'); ?> 
 

 
    <div class="single_variation"></div> 
 

 
    <div class="variations_button"> 
 
     <?php woocommerce_quantity_input(); ?> 
 
     <button type="submit" class="single_add_to_cart_button button big active alt"><span><?php echo $product->single_add_to_cart_text(); ?></span> 
 
     </button> 
 
    </div> 
 

 
    <input type="hidden" name="add-to-cart" value="<?php echo $product->id; ?>" /> 
 
    <input type="hidden" name="product_id" value="<?php echo esc_attr($post->ID); ?>" /> 
 
    <input type="hidden" name="variation_id" value="" /> 
 

 
    <?php do_action('woocommerce_after_single_variation'); ?> 
 
    </div> 
 

 
    <?php do_action('woocommerce_after_add_to_cart_button'); ?> 
 

 
    <?php else : ?> 
 

 
    <p class="stock out-of-stock"> 
 
    <?php _e('This product is currently out of stock and unavailable.', ETHEME_DOMAIN); ?> 
 
    </p> 
 

 
    <?php endif; ?> 
 

 
</form> 
 

 
<?php do_action('woocommerce_after_add_to_cart_form'); ?>

我希望這可以幫助，任何建議將不勝感激。

Answer 1

事件左撇子真的應該在JavaScript/jQuery的附加，而不是HTML屬性，但因爲你的setTimeout爲你工作那麼應該是這樣的：

<form onsubmit=" 
    $.ajax({ 
     url: location.href, 
     type: 'post', 
     headers: { 
      'enctype': 'multipart/form-data' 
     }, 
     data: $(this).serialize() 
    }).then(function() { 
     //tidy the page 
     $('select.whatever').each(function() { 
      this.selectedIndex = 0; 
     }).eq(0).trigger('change'); 
    }); 
    return false;" class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr(json_encode($available_variations)) ?>" > 

我從來沒有嘗試定義相當如此廣泛事件處理程序，但是，AFAIK，它可以工作（調試時）。

您將需要更改應用於產品變體選擇菜單的類別名稱。目前它們似乎具有相同的ID，因此您應該可以簡單地將id=更改爲class=中的<select>標籤。

Answer 2

這個插件的作品完美的產品頁面上的變化表： http://www.eggplantstudios.ca/woocommerce-product-variation-add-cart-grid/