Skip to content

Instantly share code, notes, and snippets.

@robertdevore

robertdevore/wp-dispensary-api-example.html

Last active January 18, 2016 12:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robertdevore/9bdea46e07687e8102e9 to your computer and use it in GitHub Desktop.
Save robertdevore/9bdea46e07687e8102e9 to your computer and use it in GitHub Desktop.
Download ZIP
Quick and dirty API example for the WP Dispensary plugin
Raw
wp-dispensary-api-example.html
<html>
<head>
<title>WP Dispensary Example API Usage</title>
</head>
<body>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<ul id="app"></ul>
<script>
jQuery(document).ready(function($) {
$.get( "wp-json/wp/v2/flowers", function( data ) {
$.each( data, function( i, val ) {
$( "#app" ).append(
'<li>' +
'<div class="flower">' +
'<img src="' + val.featured_image_url + '" alt="" />' +
'<h3>' + val.title.rendered + '</h3>' +
'<p>' + val.content.rendered + '</p>' +
'</div>' +
'<div class="clear"></div>' +
'<div class="info">' +
'<p><strong>Category: ' + val.flowers_category + '</p>' +
'<p><strong>Aromas: ' + val.aromas + '</p>' +
'<p><strong>Flavors: ' + val.flavors + '</p>' +
'<p><strong>Effects: ' + val.effects + '</p>' +
'<p><strong>Symptoms: ' + val.symptoms + '</p>' +
'<p><strong>Conditions: ' + val.conditions + '</p>' +
'</div>' +
'<div class="prices">' +
'<p><strong>1/2 Gram:</strong> $' + val._halfgram + '</p>' +
'<p><strong>Gram:</strong> $' + val._gram + '</p>' +
'<p><strong>Eighth:</strong> $' + val._eighth + '</p>' +
'<p><strong>1/4 Ounce:</strong> $' + val._quarter + '</p>' +
'<p><strong>1/2 Ounce:</strong> $' + val._halfounce + '</p>' +
'<p><strong>Ounce:</strong> $' + val._ounce + '</p>' +
'</div>' +
'<div class="clear"></div>' +
'</li>'
);
});
});
});
</script>
<style type="text/css">
#app {
background: #f1f1f1;
border: 1px solid #DDD;
display: table;
list-style: none;
margin: 0 auto;
max-width: 960px;
padding: 20px;
width: 100%;
}
#app li {
border-bottom: 1px solid #DDD;
float: left;
margin: 0 0 20px 0;
padding: 0 0;
width: 100%;
}
img {
float: left;
margin: 0 20px 0 0;
max-width: 300px;
}
.clear {
clear: both;
float: left;
width: 100%;
}
.flower {
width: 100%;
}
.info,
.prices {
float: left;
margin: 20px 1%;
width: 48%;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment