Headline testing via Experiment API

admin.php

@@ -1,4 +1,7 @@
 <?php
+
+// PHP controller for plugin configuration page. The page itself is rendered in config.php
+
 add_action( 'admin_menu', 'optimizely_admin_menu' );
 
 optimizely_admin_warnings();
@@ -17,73 +20,70 @@ function optimizely_plugin_action_links( $links, $file ) {
 add_filter( 'plugin_action_links', 'optimizely_plugin_action_links', 10, 2 );
 
 function optimizely_conf() {
-  global $optimizely_nonce;
+  global $optimizely_nonce, $DEFAULT_VARIATION_TEMPLATE;
+
 
   if ( isset($_POST['submit']) ) {
     if ( function_exists('current_user_can') && !current_user_can('manage_options') )
       die(__('Cheatin&#8217; uh?'));
 
     check_admin_referer( $optimizely_nonce );
-    $project_code = htmlentities(stripslashes($_POST['project_code']));
+
+    $token = $_POST['token'];
+    $project_id = $_POST['project_id'];
+    $project_name = stripcslashes($_POST['project_name']);
+    $project_code = stripcslashes($_POST['project_code']);
+    $variation_template = stripcslashes($_POST['variation_template']);
+
+    if ( empty($token) ) {
+      delete_option('optimizely_token');
+    } else {
+      update_option('optimizely_token', $token);
+    }
+
+    if ( empty($project_id) ) {
+      delete_option('optimizely_project_id');
+    } else {
+      update_option('optimizely_project_id', $project_id);
+    }
+
+    if ( empty($project_name) ) {
+      delete_option('optimizely_project_name');
+    } else {
+      update_option('optimizely_project_name', $project_name);
+    }
 
     if ( empty($project_code) ) {
-      $ms = 'new_code_empty';
       delete_option('optimizely_project_code');
     } else {
       update_option('optimizely_project_code', $project_code);
-      $ms = 'new_code_saved';
     }
 
+    if ( empty($variation_template) ) {
+      update_option('optimizely_variation_template', $DEFAULT_VARIATION_TEMPLATE);
+    } else {
+      update_option('optimizely_variation_template', $variation_template);
+    }
+
+    echo "<div id='message' class='updated fade'><p><strong>Settings saved.</strong></p></div>";
+
   }
 
-  $messages = array(
-    'new_code_empty' => 'Your project code has been cleared. Please enter a new project code to use Optimizely on this site.',
-    'new_code_saved' => 'Your project code has been saved. Enjoy using Optimizely!',
-    'code_empty' => 'Please enter your project code.'
-  );
-?>
-<?php if ( !empty($_POST['submit'] ) ) : ?>
-<div id="message" class="updated fade">
-  <p>
-    <?php _e('<strong>Configuration saved.</strong><br \>'.$messages[$ms]) ?>
-  </p>
-</div>
-<?php endif; ?>
-<div class="wrap">
-  <h2><?php _e('Optimizely Configuration'); ?></h2>
-  <div class="narrow">
-    <form action="" method="post" id="optimizely-conf">
-      <h3>About Optimizely</h3>
-      <p>Simple, fast, and powerful. <a href="http://www.optimizely.com" target="_blank">Optimizely</a> is a dramatically easier way for you to improve your website through A/B testing. Create an experiment in minutes with our easy-to-use visual interface with absolutely no coding or engineering required. Convert your website visitors into customers and earn more revenue today!</p>
-      <h3>Register now</h3>
-      <p>Create an account at <a href="http://www.optimizely.com" target="_blank">optimizely.com</a> and start A/B testing today! After creating an account you can come back to this configuration page and set up your WordPress website to use Optimizely.</p>
-      <h3>Optimizely project code</h3>
-      <p>You can find your project code on your project's experiments page. Go to <a href="https://www.optimizely.com/experiments">optimizely.com/experiments</a>, make sure you've selected the right project and click on &lt;Project Code&gt;, then click on 'Copy to Clipboard'. You can then paste the code in the box below. Your project code should start with "&lt;script" and end with "&lt;/script&gt;".</p>
-      <label for="project_code" style="font-weight:bold;">Paste your project code</label>
-      <input id="project_code" name="project_code" type="text" size="60" maxlength="80" value="<?php echo get_option('optimizely_project_code'); ?>" style="font-family: 'Courier New', Courier, mono; font-size: 1.5em;" />
-      <?php optimizely_nonce_field($optimizely_nonce) ?>
-      <p class="submit"><input type="submit" name="submit" value="<?php _e('Update configuration &raquo;'); ?>" /></p>
-    </form>
-  </div>
-</div>
-<?php
+  include(dirname( __FILE__ ) . '/config.php');
+
 }
 
 function optimizely_admin_warnings() {
   if ( !get_option('optimizely_project_code') && !isset($_POST['submit']) ) {
     function optimizely_warning() {
       echo "
-      <div id='optimizely-warning' class='updated fade'><p><strong>".__('Optimizely is almost ready.')."</strong> ".sprintf(__('You must <a href="%1$s">enter your Optimizely project code</a> to begin using Optimizely on your site.'), "admin.php?page=optimizely-config")."</p></div>";
+      <div id='optimizely-warning' class='updated fade'><p><strong>".__('Optimizely is almost ready.')."</strong> ".sprintf(__('You must <a href="%1$s">authenticate and choose a project</a> to begin using Optimizely on your site.'), "admin.php?page=optimizely-config")."</p></div>";
     }
     add_action('admin_notices', 'optimizely_warning');
     return;
   } 
 }
 
 function optimizely_admin_menu() {
-  optimizely_load_menu();
-}
-
-function optimizely_load_menu() {
   add_submenu_page('plugins.php', __('Optimizely Configuration'), __('Optimizely Configuration'), 'manage_options', 'optimizely-config', 'optimizely_conf');
 }

config.js

@@ -0,0 +1,47 @@
+// Javascript for plugin settings page
+
+function optimizelyConfigPage() {
+  var $ = jQuery;
+
+  /*
+
+  AUTHENTICATION W/ OPTIMIZELY
+
+  When the user presses the button, we call the GET projects/ endpoint to list out all the projects in their account. For each project, we show its name in the dropdown and store its ID in the value attribute for submission to a form.
+
+  */
+
+  $("button#connect_optimizely").click(function(event) {
+    event.preventDefault();
+    $("#project_id").html("<option>Loading projects...</option>");
+
+    optly = new OptimizelyAPI($("#token").val());
+
+    optly.get('projects', function(response) {
+      $("#project_id").empty();
+
+      $.each(response, function(key, val) {
+        $("#project_id").append("<option value='" + val.id + "'>" + val.project_name + "</option>"); 
+      });
+
+      $("#project_id").change(); // update project code w/ the default value
+    });
+
+  /*
+
+  CHOOSING A PROJECT
+
+  When the user selects a project from the dropdown, we populate the project code box with the Optimizely snippet for that project ID.
+
+  */
+  $('#project_id').change(function() {
+    var id = $('#project_id').val();
+    var name = $('#project_id option:selected').text();
+    var project_code = '<script src="//cdn.optimizely.com/js/' + id + '.js"></script>';
+    $('#project_code').text(project_code);
+    $('#project_name').val(name);
+  });
+
+
+  });
+}

config.php

@@ -0,0 +1,48 @@
+<div class="wrap">
+  <h2><?php _e('Optimizely Configuration'); ?></h2>
+  <div class="narrow">
+    <form action="" method="post" id="optimizely-conf">
+      <?php optimizely_nonce_field($optimizely_nonce) ?>
+      <h3>About Optimizely</h3>
+      <p>Simple, fast, and powerful. <a href="http://www.optimizely.com" target="_blank">Optimizely</a> is a dramatically easier way for you to improve your website through A/B testing. Create an experiment in minutes with absolutely no coding or engineering required. Convert your website visitors into customers and earn more revenue: create an account at <a href="http://www.optimizely.com" target="_blank">optimizely.com</a> and start A/B testing today!</p>
+      <h3>Optimizely API tokens</h3>
+      <p>Once you create an account, you can find your API Token on your account page at <a href="https://www.optimizely.com/account">optimizely.com/account</a>.
+      <p>
+        <label for="token"><strong>API Token</strong></label>
+        <br />
+        <input id="token" name="token" type="text" maxlength="80" value="<?= get_option('optimizely_token'); ?>" class="code" />
+      </p>
+
+      <button id="connect_optimizely" class="button">Connect Optimizely</button>
+
+      <h3>Choose a Project</h3>
+      <input type="hidden" id="project_name" name="project_name" value="<?= get_option('optimizely_project_name') ?>" />
+      <select id="project_id" name="project_id">
+        <?php if (get_option('optimizely_project_id')) { ?>
+          <option value="<?= get_option('optimizely_project_id') ?>" selected><?= get_option('optimizely_project_name') ?></option>
+        <?php } ?>
+        <option value="">Connect Optimizely to choose a project...</option>
+      </select>
+      <p>Optimizely will add the following project code to your page automatically:</p>
+      <textarea class="code" id="project_code" name="project_code" readonly><?= get_option('optimizely_project_code') ?></textarea>
+
+
+      <h3>Variation Code</h3>
+      <p>Optimizely will use this variation code to change headlines on your site. We've provided code that works with the default theme, but you might want to add or change it to work with your themes and plugins.</p>  
+
+      <textarea class="code" rows="5" name="variation_template" id="variation_template"><?= get_option('optimizely_variation_template') ?></textarea>
+
+      <p>You can use the variables $POST_ID, $OLD_TITLE, and $NEW_TITLE in your code.</p>
+
+      <p class="submit"><input type="submit" name="submit" value="<?php _e('Submit &raquo;'); ?>" class="button-primary" /></p>
+
+
+    </form>
+    <script type="text/javascript">
+    optimizelyConfigPage();
+    </script>
+
+
+
+  </div>
+</div>