@eastsideco/escshopify
Version:
WIP JS library for Shopify, containing a variety of useful functionality.
225 lines (193 loc) • 13.3 kB
HTML
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl" href="../">
<title data-ice="title">Manual | @eastsideco/escshopify</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
<script src="script/manual.js"></script>
</head>
<body class="layout-container manual-root" data-ice="rootContainer">
<header>
<a href="./">Home</a>
<a href="./manual/index.html" data-ice="manualHeaderLink">Manual</a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
<a href="https://bitbucket.org/sigapps/escshopify.git">Repository</a></header>
<nav class="navigation" data-ice="nav"><div class="manual-toc-root">
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/overview.html"><a href="manual/overview.html" data-ice="link">Overview</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/entities.html"><a href="manual/entities.html" data-ice="link">Entities</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/cart.html"><a href="manual/cart.html" data-ice="link">Entities/Cart</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/cart.html"><a href="manual/cart.html#example" data-ice="link">Example</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/cart.html"><a href="manual/cart.html#getting-started" data-ice="link">Getting Started</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/cart.html"><a href="manual/cart.html#initializing-the-cart-state" data-ice="link">Initializing the cart state</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/cart.html"><a href="manual/cart.html#reading-the-cart" data-ice="link">Reading the cart</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/cart.html"><a href="manual/cart.html#setting-cart-items-and-attributes" data-ice="link">Setting cart items and attributes</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/cart.html"><a href="manual/cart.html#important-warning-about-async" data-ice="link">Important warning about async</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/cart.html"><a href="manual/cart.html#events" data-ice="link">Events</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/cart.html"><a href="manual/cart.html#update" data-ice="link">update</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/cart.html"><a href="manual/cart.html#add" data-ice="link">add</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/cart.html"><a href="manual/cart.html#item-updated" data-ice="link">item-updated</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/cart.html"><a href="manual/cart.html#remove" data-ice="link">remove</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/cart.html"><a href="manual/cart.html#clear" data-ice="link">clear</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/shop.html"><a href="manual/shop.html" data-ice="link">Entities/Shop</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/shop.html"><a href="manual/shop.html#examples" data-ice="link">Examples</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/shop.html"><a href="manual/shop.html#getting-started" data-ice="link">Getting Started</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/shop.html"><a href="manual/shop.html#initializing-the-shop-state" data-ice="link">Initializing the shop state</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/shop.html"><a href="manual/shop.html#events" data-ice="link">Events</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/shop.html"><a href="manual/shop.html#init" data-ice="link">init</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/plugins.html"><a href="manual/plugins.html" data-ice="link">Plugins</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/easycurrency.html"><a href="manual/easycurrency.html" data-ice="link">Plugins/EasyCurrency</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/easycurrency.html"><a href="manual/easycurrency.html#getting-started" data-ice="link">Getting started</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/easycurrency.html"><a href="manual/easycurrency.html#simple-example" data-ice="link">Simple example</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/easycurrency.html"><a href="manual/easycurrency.html#config-options" data-ice="link">Config options</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/easycurrency.html"><a href="manual/easycurrency.html#events" data-ice="link">Events</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/easycurrency.html"><a href="manual/easycurrency.html#extending-easycurrency" data-ice="link">Extending EasyCurrency</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/easycurrency.html"><a href="manual/easycurrency.html#formatters" data-ice="link">Formatters</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/easycurrency.html"><a href="manual/easycurrency.html#currency-resolvers" data-ice="link">Currency Resolvers</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/geoservice.html"><a href="manual/geoservice.html" data-ice="link">Plugins/Geoservice</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/geoservice.html"><a href="manual/geoservice.html#getting-started" data-ice="link">Getting started</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/geoservice.html"><a href="manual/geoservice.html#get-visitor-geolocation-info" data-ice="link">Get visitor geolocation info</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/geoservice.html"><a href="manual/geoservice.html#get-currency-exchange-rates" data-ice="link">Get currency exchange rates</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/utils.html"><a href="manual/utils.html" data-ice="link">Utilities</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/log.html"><a href="manual/log.html" data-ice="link">Utilities/Log</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/log.html"><a href="manual/log.html#using-salvo" data-ice="link">Using SALVO</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/log.html"><a href="manual/log.html#log-levels-and-tags" data-ice="link">Log levels and tags</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/log.html"><a href="manual/log.html#getting-started" data-ice="link">Getting started</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/log.html"><a href="manual/log.html#create-a-logging-module" data-ice="link">Create a logging module</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/log.html"><a href="manual/log.html#setting-a-log-level" data-ice="link">Setting a log level</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/log.html"><a href="manual/log.html#writing-new-loggers" data-ice="link">Writing new loggers</a></li>
</ul>
</div>
</div>
</nav>
<div class="content" data-ice="content"><div class="github-markdown" data-ice="content"><h1 id="utilities-log">Utilities/Log</h1><p>The Log util module provides a very basic logging framework for level and module-based logging. The log utility support custom loggers (i.e. to send logs via AJAX or to the DOM), and level-based muting (i.e. ignoring debug-level messages).</p>
<h2 id="using-salvo">Using SALVO</h2><p>If you're using SALVO, a logger has already been configured for you - simple use salvo.log:</p>
<p><strong>ES6</strong>:</p>
<pre><code class="lang-js"><code class="source-code prettyprint">import salvo from 'salvo';
salvo.log.send(salvo.log.WARN, 'Example', 'This is an example message.');</code>
</code></pre>
<h2 id="log-levels-and-tags">Log levels and tags</h2><p>The log interface accepts three arguments: log level, tag, and message.</p>
<p>The log level is a description of the purpose and importance of the log message: DEBUG, INFO, WARN, ERROR, or FATAL. These constants are defined on the log instance, i.e. <code>log.DEBUG</code>, <code>log.WARN</code>, etc.</p>
<p>The log tag is a description of where the log message comes from. Typically, it should be the name of a component or class. Log tags help find track down log messages, or filter messages in the debugger. A common pattern is to have a TAG constant in your classes like so:</p>
<p><strong>ES6</strong>:</p>
<pre><code class="lang-js"><code class="source-code prettyprint">import log from 'log';
const TAG = 'ExampleComponent';
class ExampleComponent {
constructor() {
log.send(log.DEBUG, TAG, 'Created a new thing!');
}
}</code>
</code></pre>
<h2 id="getting-started">Getting started</h2><h3 id="create-a-logging-module">Create a logging module</h3><p>Create a module in your application which bootstraps logging like so:</p>
<p><strong>ES6</strong>:</p>
<pre><code class="lang-js"><code class="source-code prettyprint">// log.js
import {Log} from '@eastsideco/esc-shopify';
import ConsoleLogger from '@eastsideco/esc-shopify/src/utils/loggers/ConsoleLogger.js';
const log = new Log;
const defaultLogger = new ConsoleLogger();
log.addLogger(logger);
export default log;</code>
</code></pre>
<p>You can then use the log like so:</p>
<pre><code class="lang-js"><code class="source-code prettyprint">import log from 'log';
log.send(log.WARN, 'Example', 'This is an example message');
log.sendObject(log.DEBUG, 'Example', 'This is an example object', {
test: 123
});</code>
</code></pre>
<h3 id="setting-a-log-level">Setting a log level</h3><p>You can mute logging below a given level by calling <code>Log#setLogLevel</code>:</p>
<pre><code class="lang-js"><code class="source-code prettyprint">if (!config.debug) {
log.setLogLevel(log.WARN);
}</code>
</code></pre>
<h2 id="writing-new-loggers">Writing new loggers</h2><p>A single log instance can write to multiple loggers. By default, the library provides a ConsoleLogger, which simply passes the log arguments on to window.console, but you can extend this if you need to display logs elsewhere for some reason.</p>
<p><strong>ES6</strong>:</p>
<pre><code class="lang-js"><code class="source-code prettyprint">// DOMLogger.js
import Logger from '@eastsideco/escshopify/src/utils/loggers/Logger.js';
export default class DOMLogger extends Logger {
constructor(element) {
this._element = element;
}
send(level, tag, text) {
var child = document.createElement('p');
child.classList.add('level-'+level);
child.innerText = tag + ': ' + text;
this._element.appendChild(child);
}
sendObject(level, tag, text, object) {
this.send(level, tag, text + ' -- ' + JSON.stringify(object);
}
}
// log.js
import {Log} from '@eastsideco/shopify';
import ConsoleLogger from '@eastsideco/shopify/src/utils/loggers/ConsoleLogger.js';
import DOMLogger from './DomLogger';
const log = new Log;
const defaultLogger = new ConsoleLogger;
const customLogger = new DOMLogger;
log.addLogger(defaultLogger);
log.addLogger(customLogger);
export default log;</code>
</code></pre>
</div>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.0.4)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>