WooCommerce 预览邮件模板

最后更新于 2022 年 1 月 24 日

预览WooCommerce模板可以使用插件，比如Preview E-mails for WooCommerce插件，但在测试WooCommerce Print Invoices/Packing Lists插件的邮件模板时遇到了问题，preview插件不支持自定义邮件，没办法只好写代码来解决。

WooCommerce 预览邮件模板 – 代码版

代码放在主题的functions.php中。

add_action( 'init', 'sola_woocommerce_email_test' );

function sola_woocommerce_email_test(){

  $is_email_preview = $_GET['list_email'] ?? false;

  // Available for administrator
  if( current_user_can('manage_options') && $is_email_preview ){
    
    $email_class = $_GET['email_class'] ?? false;
    $order_id    = absint($_GET['order_id']) ?? false;

    // List all available emails and recent orders
    if( $is_email_preview ){
      sola_list_available_email_classes( $email_class );
      sola_list_available_orders( $order_id );
      sola_print_scripts();
    }

    if( $email_class && $order_id ){
      sola_preview_email( $email_class, $order_id );
    }
    exit;
  }
}


function sola_list_available_email_classes( $current_value ){
  $emails = wc()->mailer()->emails;
  $classes = array_keys( $emails );
  ob_start();
  ?>
  <select name="email_list" class="email_list">
    <option value="">Select a email to preview</option>
  <?php
    foreach( $classes as $class ){
      echo "<option value='$class' " .selected($class, $current_value, false) . ">$class</option>";
    }
  ?>
  </select>
  <?php
  echo ob_get_clean();
}


function sola_list_available_orders( $current_value ){
 $orders = wc_get_orders( array(
      'limit' => 30,
      'orderby' => 'date',
      'order' => 'DESC',
      'return' => 'ids',
  ) );
  ob_start();
  ?>
  <select name="order_list" class="order_list">
    <option value="">Select an order</option>
  <?php
    foreach( $orders as $order_id ){
      echo "<option value='$order_id' " .selected($order_id, $current_value, false) . ">$order_id</option>";
    }
  ?>
  </select>
  <?php
  echo ob_get_clean();
}


function sola_preview_email( $email_class, $order_id ){

  $emails = wc()->mailer()->emails;
  $email = $emails[ $email_class ];
  $order = wc_get_order($order_id);
  add_filter( 'woocommerce_email_recipient_'.$email->id , 'wetp_email_recipient_filter_function', 10, 2);
  function wetp_email_recipient_filter_function($recipient, $object) {
    return '';
  }  

  if( $email_class == 'WC_Email_Customer_Note'){
    $email->trigger( array('order_id' => $order_id) );
  } else {
    $email->trigger( $order_id );
  }
  

  echo apply_filters( 'woocommerce_mail_content', $email->style_inline( $email->get_content() ) );

  exit; 
}


function sola_print_scripts(){
  ob_start();
  ?>
  <script>
    (function(){
      const queryURl = '<?php echo site_url(); ?>' + '?list_email=1&email_class={email_class}&order_id={order_id}';

      document.body.addEventListener('change', e => {
        const { target } = e;
        if (target.matches('select')) {
          previewOrder(); // If target is an li, run callback
        }
      });

      function previewOrder(){
        const emailClass = document.querySelector('.email_list').value;
        const orderID = document.querySelector('.order_list').value;

        if( emailClass && orderID ){
          window.location.href = queryURl.replace('{email_class}', emailClass).replace('{order_id}',orderID);
        }
      }
    })();
  </script>
  <?php
  echo ob_get_clean();
}

使用时需要访问特定地址，例如：

http://localhost/wordpress/?list_email=1

选择email和order后就能看到邮件的效果，如图所示：

关于自定义邮件的写法

在编辑自定义邮件格式时，为了获得好的兼容性，最好使用table布局，将样式内联，并避免使用比较新的属性。例如flex-box里的flex-wrap:wrap会被gmail自动移除，导致样式错乱。