Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.
/ picreel Public archive

# Acumen Brands Modal Utilities Library for Picreel

Notifications You must be signed in to change notification settings

acumenbrands/picreel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Acumen Brands Utilities Library for Picreel

Whosoever embeds this library in a Picreel template, if he be worthy, shall possess the power to send emails to SailThru and track them using Lighthouse.

An Important Note on Semantic Versioning

This library attempts to follow the SemVer specification. Before deploying, be sure to update the library version in package.json. This library will deploy to a semantically versioned path in the specified S3 bucket, so breaking changes will not affect previously deployed versions.

Environment Setup

  1. Install Node.js
  2. Run npm install, which will install all necessary support libraries for testing building, and exporting
  3. Copy config/aws-config.json.example to config/aws-config.json and fill in with appropriate values.
    If you don't have actual values for the config params, the example values may be left or changed simply to "", and the grunt aws task simply won't complete.

Export APLS for Browsers

  1. Follow the Environment Setup steps above
  2. Run grunt to build the libraries. If all tests pass, normal and minified libraries will be in the /build directory.

Run Acceptance Tests Only

  1. Follow the Environment Setup steps above
  2. Run grunt test

Deploy to Production

  1. Follow the Environment Setup steps above
  2. Update the semantic version in package.json
  3. Run grunt deploy:production. If all tests pass, normal and minified libraries will be uploaded to the S3 bucket specified in config/aws-config.json along a semantically versioned path, and a matching CloudFront invalidation will be created.

Implementation Example

Picreel doesn't do <form>s, but it does do <input>s. Let's say you had

  1. an email input <input type="email" name="email">
  2. a submit input <input type="button" id="submit-button">
  3. and a desire to submit the form to a custom Sailthru list, "STYLE"

In the editor you would place the following:

<script src="//my-cloudfront-dist-id.cloudfront.net/libs/picreel/0.4.0/picreel.min.js"></script>
<script>
  if(window.jQuery){

    jQuery(document).ready(function($) {
      var params = {
        submitSelector: "#submit-button",
        emailSelector:  "input[name='email']",
        action:         "https://www.mydomain.com/my_form_handler/",
        list:           "STYLE"
      };
      window.APLS = new APLSubscriber(params);
    });

  };
</script>

Implementation with vars

Sailthru [Vars](https://getstarted.sailthru.com/new-for-developers-overview/email-and-user-profiles/user/#POST Mode - Optional Parameters - vars 2) may added to templates and will be submitted as event vars and profile varswhen a user subscribes. All vars submitted will be made to equal the value 1.

Simply add an array of vars to the template editor, as in the following example:

<script src="//my-cloudfront-dist-id.cloudfront.net/libs/picreel/0.4.0/picreel.min.js"></script>
<script>
  if(window.jQuery){

    jQuery(document).ready(function($) {
      var params = {
        action:         "https://www.mydomain.com/my_form_handler/",
        list:           "SUBSCRIBERS",
        vars:           ["giveaway", "example"]
      };
      window.APLS = new APLSubscriber(params);
    });

  };
</script>

Implementation with a custom event name

Sailthru will accept any event name, but you will have to configure which event names have triggers in Sailthru.

For a custom event name, add it as a string:

<script src="//my-cloudfront-dist-id.cloudfront.net/libs/picreel/0.4.0/picreel.min.js"></script>
<script>
  if(window.jQuery){

    jQuery(document).ready(function($) {
      var params = {
        action:         "https://www.mydomain.com/my_form_handler/",
        list:           "SUBSCRIBERS",
        event:          "my_event_name"
      };
      window.APLS = new APLSubscriber(params);
    });

  };
</script>

NOTE 1: Pireel's editor does not load jQuery, but we're dependent on jQuery. Therefore, be sure to wrap new APLSubscriber declaration in if(window.jQuery)

NOTE 2: Most new APLS attributes may be specified when creating a new object. See lib/factories/subscriber.js for what may be created as arguments