maxkostinevich/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <h1>
      This is a static template, there is no bundler or bundling involved!
    </h1>

    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    <script src="widget.js" type="text/javascript"></script>
    <script type="text/javascript">
      // Make a request for a user with a given ID
      axios
        .get("https://fomo-demo.frontier.workers.dev/")
        .then(function(response) {
          // Widget data
          fomowidget.data = response.data.message;
          // Init the widget
          fomowidget.init();
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        });
    </script>
  </body>
</html>

## widget.js
var fomowidget = {
  widgetContainer: "",
  widgetInnerContent: "",
  closeButton: "",
  loop_index: 0,

  init: function() {
    var self = this;

    // Hide widgets on mobile devices
    if (self.settings.hideOnMobile && self.isMobile()) {
      return true;
    }

    self.shuffleArray(self.data);

    self.appendWidget();

    self.eventClose();

    setTimeout(function() {
      self.rotateWidget();
    }, self.settings.intialDelay);
  },

  // Load widget CSS and HTML
  appendWidget: function() {
    var self = this;

    // CSS
    var css = document.createElement("style");
    css.innerHTML = self.settings.widgetCss;
    document.body.appendChild(css);

    // HTML
    document.body.innerHTML += self.settings.widgetHtml;

    // Get DOM elements
    self.widgetContainer = document.getElementById("cp-purchase-notification");
    self.widgetInnerContent = document.getElementById("cp-widget-inner");
    self.closeButton = document.getElementById("cp-widget-close");
  },

  // Show widget
  showWidget: function() {
    var self = this;
    self.widgetContainer.classList.remove("fade-out");
    self.widgetContainer.classList.add("fade-in");
    self.widgetContainer.style.display = "block";
  },

  // Hide widget
  hideWidget: function() {
    var self = this;
    self.widgetContainer.classList.remove("fade-in");
    self.widgetContainer.classList.add("fade-out");
  },

  // Rotate widget content
  rotateWidget: function() {
    var self = this;

    // update widget content
    // @TODO: check if item exists
    var data = self.data[self.loop_index];
    // @TODO: check if item prop exists
    self.widgetInnerContent.innerHTML = `<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDMiIGhlaWdodD0iNDMiIHZpZXdCb3g9IjAgMCA0MyA0MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjEuNSIgY3k9IjIxLjUiIHI9IjIxLjUiIGZpbGw9IiNFQkUxMDAiIGZpbGwtb3BhY2l0eT0iMC4xNSIvPgo8cGF0aCBkPSJNMjEuNTAwMyA4TDI1LjY3MTUgMTYuODg3N0wzNSAxOC4zMTMzTDI4LjI0OTkgMjUuMjMxMUwyOS44NDMzIDM1TDIxLjUwMDMgMzAuMzg4TDEzLjE1NjcgMzVMMTQuNzUwMSAyNS4yMzExTDggMTguMzEzM0wxNy4zMjg1IDE2Ljg4NzdMMjEuNTAwMyA4WiIgZmlsbD0iI0VGQ0U0QSIvPgo8L3N2Zz4K"/> <p><b>${
      data.customer_name
    }</b> from <b>${data.customer_city}</b> just bought <b>${
      data.product_title
    }</b> <small>A few hours ago</small></p>`;

    self.showWidget();

    // increment loop index
    self.loop_index++;
    self.loop_index =
      self.loop_index >= self.data.length ? 0 : self.loop_index++;

    // Hide widget by timeout
    setTimeout(function() {
      self.hideWidget();
      // Schedule next loop
      setTimeout(function() {
        self.rotateWidget();
      }, self.settings.rotateDelay);
    }, self.settings.displayLength);
  },

  // Bind close button
  eventClose: function() {
    var self = this;
    self.closeButton.addEventListener("click", function(e) {
      self.hideWidget();
    });
  },

  // Detect mobile device
  isMobile: function() {
    return (
      navigator.userAgent.match(/Android/i) ||
      navigator.userAgent.match(/BlackBerry/i) ||
      navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
      navigator.userAgent.match(/Opera Mini/i) ||
      navigator.userAgent.match(/IEMobile/i) ||
      navigator.userAgent.match(/webOS/i)
    );
  },

  // Shuffle array
  shuffleArray: function(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
      j = Math.floor(Math.random() * i);
      x = a[i - 1];
      a[i - 1] = a[j];
      a[j] = x;
    }
  }
};

// Widget settings
fomowidget.settings = {
  hideOnMobile: false,
  intialDelay: 1000,
  displayLength: 2000,
  rotateDelay: 4000,
  widgetCss:
    "@import url(//fonts.googleapis.com/css?family=Raleway:300,700);#cp-purchase-notification{background:#fff;border:0;display:none;border-radius:0;bottom:20px;left:20px;top:auto!important;right:auto!important;padding:0 25px 0 0;position:fixed;text-align:left;width:auto;z-index:99999;font-family:Raleway,sans-serif;-webkit-box-shadow:0 0 4px 0 rgba(0,0,0,.4);-moz-box-shadow:0 0 4px 0 rgba(0,0,0,.4);box-shadow:0 0 4px 0 rgba(0,0,0,.4)}#cp-purchase-notification img{padding-left:5px;padding-top:15px;float:left;max-height:85px;max-width:120px;width:auto}#cp-purchase-notification p{color:#000;float:left;font-size:13px;margin:0 0 0 13px;width:auto;padding:10px 10px 0 0;line-height:20px}#cp-purchase-notification p a{color:#000;display:block;font-size:15px;font-weight:700}#cp-purchase-notification p a:hover{color:#000}#cp-purchase-notification p small{display:block;font-size:10px;margin-bottom:8px}#cp-purchase-notification #cp-widget-close{cursor:pointer;position:absolute;top:10px;right:10px;opacity:.2;background:url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhciIgZGF0YS1pY29uPSJ0aW1lcy1jaXJjbGUiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS10aW1lcy1jaXJjbGUgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yNTYgOEMxMTkgOCA4IDExOSA4IDI1NnMxMTEgMjQ4IDI0OCAyNDggMjQ4LTExMSAyNDgtMjQ4UzM5MyA4IDI1NiA4em0wIDQ0OGMtMTEwLjUgMC0yMDAtODkuNS0yMDAtMjAwUzE0NS41IDU2IDI1NiA1NnMyMDAgODkuNSAyMDAgMjAwLTg5LjUgMjAwLTIwMCAyMDB6bTEwMS44LTI2Mi4yTDI5NS42IDI1Nmw2Mi4yIDYyLjJjNC43IDQuNyA0LjcgMTIuMyAwIDE3bC0yMi42IDIyLjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMjk1LjZsLTYyLjIgNjIuMmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwbC0yMi42LTIyLjZjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2Mi4yLTYyLjItNjIuMi02Mi4yYy00LjctNC43LTQuNy0xMi4zIDAtMTdsMjIuNi0yMi42YzQuNy00LjcgMTIuMy00LjcgMTcgMGw2Mi4yIDYyLjIgNjIuMi02Mi4yYzQuNy00LjcgMTIuMy00LjcgMTcgMGwyMi42IDIyLjZjNC43IDQuNyA0LjcgMTIuMyAwIDE3eiI+PC9wYXRoPjwvc3ZnPg==);width:16px;height:16px;background-size:cover;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//s3.eu-west-2.amazonaws.com/fomowidget-static-assets/close.png',sizingMethod='scale')}#cp-purchase-notification #cp-widget-close:hover{opacity:1}@keyframes nFadeIn{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}#cp-purchase-notification.fade-in{opacity:0;animation-name:nFadeIn;animation-duration:1s;animation-fill-mode:both}@keyframes nFadeOut{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0);bottom:0}}#cp-purchase-notification.fade-out{opacity:0;animation-name:nFadeOut;animation-duration:1s;animation-fill-mode:both}@media screen and (max-width:767px){@keyframes nFadeIn{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}#cp-purchase-notification.fade-in{opacity:0;animation-name:nFadeIn;animation-duration:1s;animation-fill-mode:both}@keyframes nFadeOut{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0);bottom:0}}#cp-purchase-notification.fade-out{opacity:0;animation-name:nFadeOut;animation-duration:1s;animation-fill-mode:both}#cp-purchase-notification{top:auto!important;right:auto!important;bottom:0!important;left:0!important;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;max-width:auto!important;margin-left:0;height:auto;padding:0;text-align:left;border-radius:0}#cp-purchase-notification img{max-width:20%;max-height:auto;position:relative;left:0px;top:0;margin-left:0;margin-right:0;border-radius:0}#cp-purchase-notification p{font-size:11px;width:70%;float:left;margin:0 0 0 13px;padding:10px 10px 0 0}#cp-purchase-notification p a{font-size:13px;height:auto;width:auto;margin-left:0;float:none;padding:0;margin-top:0}}",
  widgetHtml:
    '<div class=customized id=cp-purchase-notification><div id="cp-widget-inner"></div><span id=cp-widget-close></span></div>'
};

## worker.js
/*
 * Serverless Social Proof widget for Shopify, hosted on Cloudflare Workers.
 *
 * Learn more at https://maxkostinevich.com/blog/serverless-shopify-social-proof-widget
 *
 * (c) Max Kostinevich / https://maxkostinevich.com
 */

// Script configuration

const config = {
  shopify_app_key: "SHOPIFY_PRIVATE_APP_KEY",
  shopify_app_password: "SHOPIFY_PRIVATE_APP_PASSWORD",
  shopify_domain: "YOUR_SHOPIFY_STORE.myshopify.com" // Including '.myshopify.com'
};

// --------

// Helper function to return JSON response
const JSONResponse = (message, status = 200) => {
  let headers = {
    headers: {
      "content-type": "application/json;charset=UTF-8",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, HEAD, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type"
    },

    status: status
  };

  let response = {
    message: message
  };

  return new Response(JSON.stringify(response), headers);
};

addEventListener("fetch", event => {
  const request = event.request;
  if (request.method === "OPTIONS") {
    event.respondWith(handleOptions(request));
  } else {
    event.respondWith(handle(request));
  }
});

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, HEAD, POST, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type"
};

function handleOptions(request) {
  if (
    request.headers.get("Origin") !== null &&
    request.headers.get("Access-Control-Request-Method") !== null &&
    request.headers.get("Access-Control-Request-Headers") !== null
  ) {
    // Handle CORS pre-flight request.
    return new Response(null, {
      headers: corsHeaders
    });
  } else {
    // Handle standard OPTIONS request.
    return new Response(null, {
      headers: {
        Allow: "GET, HEAD, POST, OPTIONS"
      }
    });
  }
}

async function handle(request) {
  const shopify_url = `https://${
    config.shopify_domain
  }/admin/api/2020-01/orders.json`;
  return fetch(shopify_url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization:
        "Basic " +
        btoa(`${config.shopify_app_key}:${config.shopify_app_password}`)
    }
  })
    .then(response => response.json())
    .then(data => {
      let orders = data.orders;
      let filteredOrderData = [];
      Object.keys(orders).map(order => {
        orders[order].line_items.map(item => {
          // It's important to keep the order's financial information private
          // Expose only selected information about the purchase,
          // like customer first name, city and purchased product name
          filteredOrderData.push({
            customer_name: orders[order].shipping_address.first_name,
            customer_city: orders[order].shipping_address.city,
            product_title: item.title
          });
        });
      });
      return filteredOrderData;
    })
    .then(data => {
      return JSONResponse(data);
    })
    .catch(err => {
      return JSONResponse("Oops! Something went wrong.", 400);
    });
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Static Template</title>
	</head>
	<body>
	<h1>
	This is a static template, there is no bundler or bundling involved!
	</h1>

	<script src="//unpkg.com/axios/dist/axios.min.js"></script>
	<script src="widget.js" type="text/javascript"></script>
	<script type="text/javascript">
	// Make a request for a user with a given ID
	axios
	.get("https://fomo-demo.frontier.workers.dev/")
	.then(function(response) {
	// Widget data
	fomowidget.data = response.data.message;
	// Init the widget
	fomowidget.init();
	})
	.catch(function(error) {
	// handle error
	console.log(error);
	});
	</script>
	</body>
	</html>
	var fomowidget = {
	widgetContainer: "",
	widgetInnerContent: "",
	closeButton: "",
	loop_index: 0,

	init: function() {
	var self = this;

	// Hide widgets on mobile devices
	if (self.settings.hideOnMobile && self.isMobile()) {
	return true;
	}

	self.shuffleArray(self.data);

	self.appendWidget();

	self.eventClose();

	setTimeout(function() {
	self.rotateWidget();
	}, self.settings.intialDelay);
	},

	// Load widget CSS and HTML
	appendWidget: function() {
	var self = this;

	// CSS
	var css = document.createElement("style");
	css.innerHTML = self.settings.widgetCss;
	document.body.appendChild(css);

	// HTML
	document.body.innerHTML += self.settings.widgetHtml;

	// Get DOM elements
	self.widgetContainer = document.getElementById("cp-purchase-notification");
	self.widgetInnerContent = document.getElementById("cp-widget-inner");
	self.closeButton = document.getElementById("cp-widget-close");
	},

	// Show widget
	showWidget: function() {
	var self = this;
	self.widgetContainer.classList.remove("fade-out");
	self.widgetContainer.classList.add("fade-in");
	self.widgetContainer.style.display = "block";
	},

	// Hide widget
	hideWidget: function() {
	var self = this;
	self.widgetContainer.classList.remove("fade-in");
	self.widgetContainer.classList.add("fade-out");
	},

	// Rotate widget content
	rotateWidget: function() {
	var self = this;

	// update widget content
	// @TODO: check if item exists
	var data = self.data[self.loop_index];
	// @TODO: check if item prop exists
	self.widgetInnerContent.innerHTML = `<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDMiIGhlaWdodD0iNDMiIHZpZXdCb3g9IjAgMCA0MyA0MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjEuNSIgY3k9IjIxLjUiIHI9IjIxLjUiIGZpbGw9IiNFQkUxMDAiIGZpbGwtb3BhY2l0eT0iMC4xNSIvPgo8cGF0aCBkPSJNMjEuNTAwMyA4TDI1LjY3MTUgMTYuODg3N0wzNSAxOC4zMTMzTDI4LjI0OTkgMjUuMjMxMUwyOS44NDMzIDM1TDIxLjUwMDMgMzAuMzg4TDEzLjE1NjcgMzVMMTQuNzUwMSAyNS4yMzExTDggMTguMzEzM0wxNy4zMjg1IDE2Ljg4NzdMMjEuNTAwMyA4WiIgZmlsbD0iI0VGQ0U0QSIvPgo8L3N2Zz4K"/> <p><b>${
	data.customer_name
	}</b> from <b>${data.customer_city}</b> just bought <b>${
	data.product_title
	}</b> <small>A few hours ago</small></p>`;

	self.showWidget();

	// increment loop index
	self.loop_index++;
	self.loop_index =
	self.loop_index >= self.data.length ? 0 : self.loop_index++;

	// Hide widget by timeout
	setTimeout(function() {
	self.hideWidget();
	// Schedule next loop
	setTimeout(function() {
	self.rotateWidget();
	}, self.settings.rotateDelay);
	}, self.settings.displayLength);
	},

	// Bind close button
	eventClose: function() {
	var self = this;
	self.closeButton.addEventListener("click", function(e) {
	self.hideWidget();
	});
	},

	// Detect mobile device
	isMobile: function() {
	return (
	navigator.userAgent.match(/Android/i) \|\|
	navigator.userAgent.match(/BlackBerry/i) \|\|
	navigator.userAgent.match(/iPhone\|iPad\|iPod/i) \|\|
	navigator.userAgent.match(/Opera Mini/i) \|\|
	navigator.userAgent.match(/IEMobile/i) \|\|
	navigator.userAgent.match(/webOS/i)
	);
	},

	// Shuffle array
	shuffleArray: function(a) {
	var j, x, i;
	for (i = a.length; i; i--) {
	j = Math.floor(Math.random() * i);
	x = a[i - 1];
	a[i - 1] = a[j];
	a[j] = x;
	}
	}
	};

	// Widget settings
	fomowidget.settings = {
	hideOnMobile: false,
	intialDelay: 1000,
	displayLength: 2000,
	rotateDelay: 4000,
	widgetCss:
	"@import url(//fonts.googleapis.com/css?family=Raleway:300,700);#cp-purchase-notification{background:#fff;border:0;display:none;border-radius:0;bottom:20px;left:20px;top:auto!important;right:auto!important;padding:0 25px 0 0;position:fixed;text-align:left;width:auto;z-index:99999;font-family:Raleway,sans-serif;-webkit-box-shadow:0 0 4px 0 rgba(0,0,0,.4);-moz-box-shadow:0 0 4px 0 rgba(0,0,0,.4);box-shadow:0 0 4px 0 rgba(0,0,0,.4)}#cp-purchase-notification img{padding-left:5px;padding-top:15px;float:left;max-height:85px;max-width:120px;width:auto}#cp-purchase-notification p{color:#000;float:left;font-size:13px;margin:0 0 0 13px;width:auto;padding:10px 10px 0 0;line-height:20px}#cp-purchase-notification p a{color:#000;display:block;font-size:15px;font-weight:700}#cp-purchase-notification p a:hover{color:#000}#cp-purchase-notification p small{display:block;font-size:10px;margin-bottom:8px}#cp-purchase-notification #cp-widget-close{cursor:pointer;position:absolute;top:10px;right:10px;opacity:.2;background:url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhciIgZGF0YS1pY29uPSJ0aW1lcy1jaXJjbGUiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS10aW1lcy1jaXJjbGUgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yNTYgOEMxMTkgOCA4IDExOSA4IDI1NnMxMTEgMjQ4IDI0OCAyNDggMjQ4LTExMSAyNDgtMjQ4UzM5MyA4IDI1NiA4em0wIDQ0OGMtMTEwLjUgMC0yMDAtODkuNS0yMDAtMjAwUzE0NS41IDU2IDI1NiA1NnMyMDAgODkuNSAyMDAgMjAwLTg5LjUgMjAwLTIwMCAyMDB6bTEwMS44LTI2Mi4yTDI5NS42IDI1Nmw2Mi4yIDYyLjJjNC43IDQuNyA0LjcgMTIuMyAwIDE3bC0yMi42IDIyLjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMjk1LjZsLTYyLjIgNjIuMmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwbC0yMi42LTIyLjZjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2Mi4yLTYyLjItNjIuMi02Mi4yYy00LjctNC43LTQuNy0xMi4zIDAtMTdsMjIuNi0yMi42YzQuNy00LjcgMTIuMy00LjcgMTcgMGw2Mi4yIDYyLjIgNjIuMi02Mi4yYzQuNy00LjcgMTIuMy00LjcgMTcgMGwyMi42IDIyLjZjNC43IDQuNyA0LjcgMTIuMyAwIDE3eiI+PC9wYXRoPjwvc3ZnPg==);width:16px;height:16px;background-size:cover;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//s3.eu-west-2.amazonaws.com/fomowidget-static-assets/close.png',sizingMethod='scale')}#cp-purchase-notification #cp-widget-close:hover{opacity:1}@keyframes nFadeIn{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}#cp-purchase-notification.fade-in{opacity:0;animation-name:nFadeIn;animation-duration:1s;animation-fill-mode:both}@keyframes nFadeOut{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0);bottom:0}}#cp-purchase-notification.fade-out{opacity:0;animation-name:nFadeOut;animation-duration:1s;animation-fill-mode:both}@media screen and (max-width:767px){@keyframes nFadeIn{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}#cp-purchase-notification.fade-in{opacity:0;animation-name:nFadeIn;animation-duration:1s;animation-fill-mode:both}@keyframes nFadeOut{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0);bottom:0}}#cp-purchase-notification.fade-out{opacity:0;animation-name:nFadeOut;animation-duration:1s;animation-fill-mode:both}#cp-purchase-notification{top:auto!important;right:auto!important;bottom:0!important;left:0!important;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;max-width:auto!important;margin-left:0;height:auto;padding:0;text-align:left;border-radius:0}#cp-purchase-notification img{max-width:20%;max-height:auto;position:relative;left:0px;top:0;margin-left:0;margin-right:0;border-radius:0}#cp-purchase-notification p{font-size:11px;width:70%;float:left;margin:0 0 0 13px;padding:10px 10px 0 0}#cp-purchase-notification p a{font-size:13px;height:auto;width:auto;margin-left:0;float:none;padding:0;margin-top:0}}",
	widgetHtml:
	'<div class=customized id=cp-purchase-notification><div id="cp-widget-inner"></div><span id=cp-widget-close></span></div>'
	};
	/*
	* Serverless Social Proof widget for Shopify, hosted on Cloudflare Workers.
	*
	* Learn more at https://maxkostinevich.com/blog/serverless-shopify-social-proof-widget
	*
	* (c) Max Kostinevich / https://maxkostinevich.com
	*/

	// Script configuration

	const config = {
	shopify_app_key: "SHOPIFY_PRIVATE_APP_KEY",
	shopify_app_password: "SHOPIFY_PRIVATE_APP_PASSWORD",
	shopify_domain: "YOUR_SHOPIFY_STORE.myshopify.com" // Including '.myshopify.com'
	};

	// --------

	// Helper function to return JSON response
	const JSONResponse = (message, status = 200) => {
	let headers = {
	headers: {
	"content-type": "application/json;charset=UTF-8",
	"Access-Control-Allow-Origin": "*",
	"Access-Control-Allow-Methods": "GET, HEAD, POST, OPTIONS",
	"Access-Control-Allow-Headers": "Content-Type"
	},

	status: status
	};

	let response = {
	message: message
	};

	return new Response(JSON.stringify(response), headers);
	};

	addEventListener("fetch", event => {
	const request = event.request;
	if (request.method === "OPTIONS") {
	event.respondWith(handleOptions(request));
	} else {
	event.respondWith(handle(request));
	}
	});

	const corsHeaders = {
	"Access-Control-Allow-Origin": "*",
	"Access-Control-Allow-Methods": "GET, HEAD, POST, OPTIONS",
	"Access-Control-Allow-Headers": "Content-Type"
	};

	function handleOptions(request) {
	if (
	request.headers.get("Origin") !== null &&
	request.headers.get("Access-Control-Request-Method") !== null &&
	request.headers.get("Access-Control-Request-Headers") !== null
	) {
	// Handle CORS pre-flight request.
	return new Response(null, {
	headers: corsHeaders
	});
	} else {
	// Handle standard OPTIONS request.
	return new Response(null, {
	headers: {
	Allow: "GET, HEAD, POST, OPTIONS"
	}
	});
	}
	}

	async function handle(request) {
	const shopify_url = `https://${
	config.shopify_domain
	}/admin/api/2020-01/orders.json`;
	return fetch(shopify_url, {
	method: "GET",
	headers: {
	"Content-Type": "application/json",
	Authorization:
	"Basic " +
	btoa(`${config.shopify_app_key}:${config.shopify_app_password}`)
	}
	})
	.then(response => response.json())
	.then(data => {
	let orders = data.orders;
	let filteredOrderData = [];
	Object.keys(orders).map(order => {
	orders[order].line_items.map(item => {
	// It's important to keep the order's financial information private
	// Expose only selected information about the purchase,
	// like customer first name, city and purchased product name
	filteredOrderData.push({
	customer_name: orders[order].shipping_address.first_name,
	customer_city: orders[order].shipping_address.city,
	product_title: item.title
	});
	});
	});
	return filteredOrderData;
	})
	.then(data => {
	return JSONResponse(data);
	})
	.catch(err => {
	return JSONResponse("Oops! Something went wrong.", 400);
	});
	}