existing-klaviyo.js

define("shopify-klaviyo", function(require) {

  var $ = require("jquery");
  var _learnq = require("klaviyo");
  var jquery_serialize_object = require("jquery-serialize-object");
  var klaviyo = {};
  var helper = {};

  klaviyo.wholesale = function() {
    $("#form-wholesale").on("submit", function(event) {
      event.preventDefault();
      var data = $(this).serializeObject();
      _learnq.push(['account', 'MYTOKEN']);
      _learnq.push(['identify',
        function() {
          var names = data.name.split(" ");
          var identify = {};
          identify["$email"] = data.email;
          if (names[0]) identify["$first_name"] = names[0];
          if (names[1]) identify["$last_name"] = names[1];
          return identify;
        }()
      ]);
      _learnq.push(['track', 'form | modal-wholesale', {
        "store": data.store,
        "city": data.city
      }]);
      $("#modal-wholesale").modal("hide");
    });
  }

  helper.field_error = function($form, field_name, string) {
    var invalid = (string.match(/^\s+$|^$/gi)) ? true : false;
    var $parent = $form.find('[name="' + field_name + '"]').parent();
    if (invalid) {
      $parent.addClass("has-error");
      return true;
    } else {
      $parent.removeClass("has-error");
      return false;
    }
  }

  helper.identify = function(data) {
    var names = data.name.split(" ");
    var identify = {};
    identify["$email"] = data.email;
    if (names[0]) identify["$first_name"] = names[0];
    if (names[1]) identify["$last_name"] = names[1];
    return identify;
  }

  klaviyo.standard = function(id, coupon_code, amount) {
    $("#form-" + id).on("submit", function(event) {
      event.preventDefault();
      var $this = $(this);
      var data = $this.serializeObject();
      var err = false;
      err = helper.field_error($this, "name", data.name);
      err = helper.field_error($this, "email", data.email);
      if (err) return false;
      _learnq.push(['account', 'MYTOKEN']);
      _learnq.push(['identify', helper.identify(data)]);
      _learnq.push(['track', 'form | modal-' + id, {
        "code": coupon_code
      }]);
      $this.find(".thecode").text(coupon_code);
      $this.find(".thecode").parent().removeClass("hidden");
      $this.find('button[type="submit"]').attr("disabled", "disabled");
    });
  }

  klaviyo.soldout = function() {
    $("#form-sold-out").on("submit", function(event) {
      event.preventDefault();
      _learnq.push(['account', 'MYTOKEN']);
      _learnq.push(['identify', {
        '$name': $(this).find('[name="name"]').val(),
        '$email': $(this).find('[name="email"]').val(),
      }]);
      var elm = $('[action="/cart/add"]').filter(":visible").children('[name="id"]').children("option").filter(":selected")[0];
      _learnq.push(['track', 'form | modal-sold-out', {
        "product-title": $(this).find('[name="product-title"]').val(),
        "product-sku": $(this).find('[name="product-sku"]').val(),
        "product-variant": $(elm).text(),
      }]);
      $("#modal-sold-out").modal("hide");
    });
  }

  klaviyo.preorder = function() {
    $("#form-pre-order").on("submit", function(event) {
      event.preventDefault();
      _learnq.push(['account', 'MYTOKEN']);
      _learnq.push(['identify', {
        '$name': $(this).find('[name="name"]').val(),
        '$email': $(this).find('[name="email"]').val(),
      }]);
      _learnq.push(['track', 'form | modal-pre-order', {
        "product-title": $(this).find('[name="product-title"]').val(),
        "product-variant": $('.pre-order[action="/cart/add"]').filter(":visible").children('[name="id"]').children("option").filter(":selected").text()
      }]);
      $("#modal-pre-order .disable-on-submit").attr("disabled", "disabled");
      $("#modal-pre-order .show-on-submit").removeClass("hidden");
      $("#modal-pre-order .hide-on-submit").hide();
    });
  }

  klaviyo.rsvp = function() {
    $("#form-rsvp").on("submit", function(event) {
      event.preventDefault();

      var err = false;

      var data = {
        "accepts_marketing": $(this).find('[name="accepts_marketing"]').is(':checked'),
        "name": $(this).find('[name="name"]').val(),
        "email": $(this).find('[name="email"]').val()
      };

      if (!data.email) {
        $(this).find('[name="email"]').parent().addClass("has-error");
        err = true;
      } else {
        $(this).find('[name="email"]').parent().removeClass("has-error");
      }

      if (!data.name) {
        $(this).find('[name="name"]').parent().addClass("has-error");
        err = true;
      } else {
        $(this).find('[name="name"]').parent().removeClass("has-error");
      }

      if (err) return false;

      _learnq.push(['account', 'MYTOKEN']);
      _learnq.push(['identify',
        function() {
          var names = data.name.split(" ");
          var identify = {};
          identify["$email"] = data.email;
          if (names[0]) identify["$first_name"] = names[0];
          if (names[1]) identify["$last_name"] = names[1];
          return identify;
        }()
      ]);
      _learnq.push(['track', 'form | event-rsvp', {
        "event-title": $(this).find('[name="product-title"]').val(),
        "event-sku": $(this).find('[name="product-sku"]').val(),
        "event-variant": $('[action="/cart/add"]').filter(":visible").children('[name="id"]').children("option").filter(":selected").text(),
        "new-york-event-list": data.accepts_marketing
      }]);

      $(".show-on-submit").removeClass("hidden");
      $(".hide-on-submit").addClass("hidden");

    });

    $("#modal-rsvp").on('hidden.bs.modal', function() {
      $(".show-on-submit").addClass("hidden");
      $(".hide-on-submit").removeClass("hidden");
    });

  }

  klaviyo.potluck = function() {
    $("#form-potluck").on("submit", function(event) {
      event.preventDefault();
      var $this = $(this);
      var data = $this.serializeObject();
      var err = false;
      err = helper.field_error($this, "name", data.name);
      err = helper.field_error($this, "email", data.email);
      err = helper.field_error($this, "location", data.location);
      err = helper.field_error($this, "date", data.date);
      if (err) return false;
      _learnq.push(['account', 'MYTOKEN']);
      _learnq.push(['identify', helper.identify(data)]);
      _learnq.push(['track', 'form | modal-potluck', {
        "location": data.location,
        "date": data.date
      }]);
      $this.find('button[type="submit"]').attr("disabled", "disabled");
      $("#carousel-potluck").carousel('next');
    });
  }

  klaviyo.events = function() {
    $("#form-events-newsletter").on("submit", function(event) {
      event.preventDefault();
      var $this = $(this);
      var data = $this.serializeObject();
      var err = false;
      err = helper.field_error($this, "name", data.name);
      err = helper.field_error($this, "email", data.email);
      if (err) return false;
      _learnq.push(['account', 'MYTOKEN']);
      _learnq.push(['identify', helper.identify(data)]);
      _learnq.push(['track', 'form | modal-events-newsletter', {
        "url": window.location.href
      }]);
      $this.find('button[type="submit"]').attr("disabled", "disabled");
      $("#modal-events-newsletter").modal("hide");
    });
  }

  klaviyo.buttonChange = function($this){
    var $icon = $('<i class="icon-check-sign"></i>').css("margin-right", "3px")
    var $text = $("<span>").text("Your in")
    $this.find('button')
      .text("")
      .append($icon)
      .append($text)
      .removeClass("btn-holstee")
      .addClass("btn-teal")
      .attr("disabled", "disabled")
  }

  klaviyo.onSubmit = function(track){
    return function(event) {
      event.preventDefault()
      console.log("event fired")
      console.log(track)
      var $this = $(this)
      var data = $this.serializeObject()
      console.log(data)
      _learnq.push(['account', 'MYTOKEN']);
      if(data && data.email){
        _learnq.push(['identify', {
          '$email': data.email
        }]);
        _learnq.push(['track', track])
      }
      $this.find('[type="email"]').attr("disabled", "disabled");
      klaviyo.buttonChange($this)
    }
  }

  klaviyo.runSimpleForm = function() {
    $(".form-events-newsletter").on("submit", klaviyo.onSubmit('form | events-newsletter'))
    $(".form-matter-sidebar").on("submit", klaviyo.onSubmit('form | mindful-matter-sidebar'))
    $(".form-footer-newsletter").on("submit", klaviyo.onSubmit('form | footer'))
  }

  return klaviyo;

});