Skip to content

Instantly share code, notes, and snippets.

<script>
$('.product_submit').on('click', function(e){
e.preventDefault();
$.ajax({
url: '/products',
type: 'POST',
data: $('form').serialize(),
success: function(data){
ShopifyApp.flashNotice("Product Uploaded Successfully");
$('form')[0].reset();
<form>
<div class="row">
<div class="large-4 columns">
<div class="row collapse">
<label>Title</label>
<div class="small-12 columns">
<input type="text" placeholder="Product Name" name="title" />
</div>
<label>Description</label>
<div class="small-12 columns">
function verifyRequest(req, res, next) {
var map = JSON.parse(JSON.stringify(req.query));
delete map['signature'];
delete map['hmac'];
var message = querystring.stringify(map);
var generated_hash = crypto.createHmac('sha256', config.oauth.client_secret).update(message).digest('hex');
if (generated_hash === req.query.hmac) {
next();
} else {
app.get('/modal_content', function(req, res) {
res.render('modal_content', {
title: 'Embedded App Modal'
});
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel='stylesheet' href='/stylesheets/foundation.min.css' />
<link rel='stylesheet' href='/stylesheets/style.css' />
<title><%= title %></title>
</head>
<body>
<div class="row">
<script type="text/javascript">
ShopifyApp.ready(function(){
ShopifyApp.Bar.initialize({
buttons: {
primary: {
label: "Add A Product",
href: '/'
},
secondary: [
{
<div class="row">
<div class="large-6 columns">
<h1><%= title %></h1>
<div class="row collapse">
<div class="small-12 columns">
<a href="/products">See All Products</a>
</div>
<div class="small-12 columns">
<a href="/add_product">Add A Product</a>
</div>
ShopifyApp.Modal.open({
src: 'http://localhost:3000/modal_content',
title: 'A new modal',
width: 'small',
height: 300,
buttons: {
primary: { label: "OK" },
secondary: [
{ label: "Cancel", callback: function (label) { ShopifyApp.Modal.close(); } }
]
<script type="text/javascript">
ShopifyApp.ready(function(){
ShopifyApp.Bar.initialize({
title: '<%= title %>',
icon: '/images/logo.png',
buttons: {
primary: {
label: "Save",
message: 'bar_save'
},
<script type="text/javascript">
ShopifyApp.ready(function(){
ShopifyApp.Bar.initialize({
title: '<%= title %>',
icon: '/images/logo.png'
});
});
</script>