Wordpress简单的datalayer插件。未定义datalayer时出错

Question

我的主要目标是构建一个非常简单的数据层插件并将简单数据推送到一个名为'dataLayer'的窗口对象中，当我去输入window.dataLayer时，我应该看到的是

我对PHP很新，并且遇到了一些绊脚石。

我找到了一个数据层实现的代码引用（https://github.com/framedigital/woocommerce-order-datalayer/blob/master/DataLayer.php），这似乎是一个很好的方法，所以我开始分解并删除除了基本要素之外我不需要的所有内容。 / p>

我的代码到目前为止......

<?php
/**
 *
 * Plugin Name: Ultimate DataLayer
 * Plugin URI: https://google.com.au
 * Version: 0.0.1
 * Author: James LeBoeuf
 * Author URI: https://google.com.au
 * Description: Pushes stuff to datalayer
 * Requires at least: 4.0
 * Tested up to: 4.8
 *
 *
 * @package Ultimate Datalayer
 * @category Datalayer
 * @author James LeBoeuf
*/

class DataLayer {
  protected static $_instance = null;

  public $dataLayer = [];

  public function __construct() {
    console_log('inside __construct function');
    add_action('wp_head', [ $this, 'init' ], 5);
  }

  public function init() {
    console_log('inside init function');
    $this->setupDataLayer();
    $this->addToWPHead();
  }

  public static function instance() {
    console_log('inside instance function');
    if (is_null(self::$_instance)) {
      self::$_instance = new self();
    }

    return self::$_instance;
  }

  public function output() {
    console_log('inside output function');
    $dataLayer = apply_filters('ultimate_datalayer', $this->dataLayer);
    console_log('inside output function $dataLayer', $dataLayer);
    if (!empty($dataLayer)) {
      $encodedDataLayer = json_encode($dataLayer);

      console_log($encodedDataLayer);

      $scriptTag = '<script data-cfasync="false" type="text/javascript">dataLayer.push( %s );</script>';

      console_log($scriptTag);

      echo sprintf($scriptTag, $encodedDataLayer);
    }
  }

  private function setupDataLayer() {
    console_log('inside setupDataLayer function');
    $this->dataLayer['test'] = 'test';
  }

  private function addToWPHead() {
    console_log('inside addToWPHead function');
    add_action('wp_head', [ $this, 'output' ], 30);
  }

}


function dataLayer() {
  console_log('inside dataLayer function');
  return DataLayer::instance();
}


function console_log( $data ) {
  echo '<script>';
  echo 'console.log('. json_encode( $data ) .')';
  echo '</script>';
}


add_action('init', 'dataLayer');

?>

似乎正在发生的事情是，似乎没有定义dataLayer并且在chrome检查器控制台屏幕上抛出控制台错误。请找附件截图。

Answer 1

通过在public function output()

的脚本中添加一个catch来解决

if (!window.dataLayer) window.dataLayer = [];

完整示例......

public function output() {
  console_log('inside output function');
  $dataLayer = apply_filters('ultimate_datalayer', $this->dataLayer);
  console_log('inside output function $dataLayer', $dataLayer);
  if (!empty($dataLayer)) {
    $encodedDataLayer = json_encode($dataLayer);

    console_log($encodedDataLayer);

    $scriptTag = '<script data-cfasync="false" type="text/javascript"> if (!window.dataLayer) window.dataLayer = []; dataLayer.push( %s );</script>';

    console_log($scriptTag);

    echo sprintf($scriptTag, $encodedDataLayer);
  }
}