Question

我正在尝试在woocommerce中自定义本地提货运输选项。基本上，如果从woocommerce设置中选择了Local Pickup选项，它将在结帐时显示每个产品。我想以一种只显示所选产品的方式对其进行自定义。

所以我在产品编辑页面上添加了一个新的复选框自定义字段元数据。如果本地提货在产品上可用，则应检查复选框，如果本地提货不可用，则应选中此复选框。

我在functions.php中的代码如下所示：

<?php
// Display Fields
add_action( 'woocommerce_product_options_shipping', 'woo_add_custom_general_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

function woo_add_custom_general_fields() {

  global $woocommerce, $post;

  echo '<div class="options_group">';

  // Checkbox Local Pickup / Collection Available
  woocommerce_wp_checkbox( 
  array( 
      'id'            => '_shipping_collection', 
      'wrapper_class' => 'show_if_simple', 
      'label'         => __('Local Pickup / Collection Available', 'woocommerce' ), 
      'description'   => __( 'This product is available for collection', 'woocommerce' ) 
      )
  );

  echo '</div>';    
}

function woo_add_custom_general_fields_save( $post_id ){
    // Checkbox Local Pickup / Collection Available - Save Data
    $collection_checkbox = isset( $_POST['_shipping_collection'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_shipping_collection', $collection_checkbox );
}
?>

到目前为止，所有功能都很好，复选框正在显示和保存。

正如我之前提到的，每个产品都有本地提货选项。我想以仅在此复选框（_shipping_collection）为checked

的产品上展示的方式对其进行自定义

此处生成结帐时显示的Local Pickup元素： https://github.com/woothemes/woocommerce/blob/master/templates/cart/cart-shipping.php

使用以下代码：

<ul id="shipping_method">
                    <?php foreach ( $available_methods as $method ) : ?>
                        <li>
                            <input type="radio" name="shipping_method[<?php echo $index; ?>]" data-index="<?php echo $index; ?>" id="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>" value="<?php echo esc_attr( $method->id ); ?>" <?php checked( $method->id, $chosen_method ); ?> class="shipping_method" />
                            <label for="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>" id="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>"><?php echo wp_kses_post( wc_cart_totals_shipping_method_label( $method ) ); ?></label>
                        </li>
                    <?php endforeach; ?>
                </ul>

我在标签中添加了ID选择器，因此我可以在隐藏它时通过其ID识别标签。

在前端结帐时，代码将生成以下ID：

#shipping_method_0_local_pickup

因此，如果我现在尝试使用CSS隐藏它：

#shipping_method_0_local_pickup {
display: none;
}

效果很好！，该字段在结帐时隐藏。

所以我现在认为我应该使用Jquery来获取复选框功能，经过一些搜索后我挖掘了一个示例脚本，所以在更改其中的选择器以适合我的选择器后，我最终得到了这个： / p>

$('#_shipping_collection').click(function() {
    if($(this).is(":checked")) {
        $('#shipping_method_0_local_pickup').show();
    } else {
        $('#shipping_method_0_local_pickup').hide();
    }
    })

我认为这个脚本应该放在这个文件中： https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/add-payment-method.js

但不幸的是，这似乎并不奏效。

你有什么建议吗？

Answer 1

是否加载了jQuery？
您是否在页面加载后添加事件处理程序 -
ID是唯一的吗？

像这样 - 更简单的代码，

$(function() { 
  $('#_shipping_collection').on("click",function() {
    $('#shipping_method_0_local_pickup').toggle(this.checked);
  }); 
});

实施例

＆＃13;

$(function() {
  $('#_shipping_collection').on("click", function() {
    $('#shipping_method_0_local_pickup').toggle(this.checked);
  });
});

＆＃13;

#shipping_method_0_local_pickup { display:none }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="_shipping_collection" id="_shipping_collection">
<label for="_shipping_collection" id="_shipping_collection"></label>

<div id="shipping_method_0_local_pickup">
  I should see this text if only if the checkbox is checked
</div>

＆＃13;

Jquery根据复选框状态

1 个答案: