Skip to content

Instantly share code, notes, and snippets.

@freakdesign

freakdesign/edit-button-min.js

Forked from carolineschnapp/new_gist_file.liquid
Last active August 26, 2016 14:42
Show Gist options
  • Save freakdesign/45ee95f4b722a219bc6b to your computer and use it in GitHub Desktop.
Save freakdesign/45ee95f4b722a219bc6b to your computer and use it in GitHub Desktop.
Download ZIP
Add edit button to Shopify page
Raw
edit-button-min.js
(function(){if(document.getElementById("admin_bar_iframe")){var d=function(a){"undefined"===typeof a&&(a="Sorry, that can not be run here...");console.warn(a);return!1},e=function(a,c){var b=new XMLHttpRequest;b.open("GET",a,!1);b.onreadystatechange=function(){if(4==b.readyState&&200==b.status&&"function"===typeof c){var a;a:{try{JSON.parse(b.responseText)}catch(e){a=!1;break a}a=!0}if(!a)return d("That does not look like json...");a=JSON.parse(b.responseText);c(a,Object.keys(a)[0])}};b.send()},c=
document.createElement("button");c.id="admin_bar_iframe";c.style="position: fixed;top: 70px;right: 1em;background-color: rgb(16, 206, 223);padding: .75em 1em;color: #FFF;cursor: pointer;border:none;z-index:99999";c.innerHTML="Edit This";c.addEventListener("click",function(a){a.target.blur();if("/"===location.pathname)return d();if("blogs"===location.pathname.split("/")[1])return"undefined"!==typeof __st&&__st.s?(location.href=[location.protocol,"//",location.host,"/admin/articles/",__st.s.split("-")[1]].join(""),
!1):d();e([location.protocol,"//",location.host,location.pathname,".json"].join(""),function(a,b){location.href=[location.protocol,"//",location.host,"/admin/",b+"s/",a[b].id].join("")});return!1});document.getElementsByTagName("body")[0].appendChild(c)}})();
Raw
edit-button.liquid
<script>
(function(){
if(!document.getElementById('admin_bar_iframe')){ return }
var lang = {
'no':'Sorry, that can not be run here...',
'not_json':'That does not look like json...'
};
var isJson = function(a) {
try { JSON.parse(a) } catch (e) { return false }
return true;
};
var nope = function(a){
if(typeof a === 'undefined'){ var a = lang.no }
console.warn(a)
return false
}
var getJsonPath = function(){
return [location.protocol, '//', location.host,location.pathname,'.json'].join('')
};
var getJson = function(u,c){
var req = new XMLHttpRequest();
req.open('GET', u, false);
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
if(typeof c === 'function'){
if(!isJson(req.responseText)){ return nope(lang.not_json) }
var json = JSON.parse(req.responseText);
c(json,Object.keys(json)[0]);
}
}
};
req.send();
};
var button = document.createElement('button');
button.id = 'admin_bar_iframe';
button.style = 'position: fixed;top: 70px;right: 1em;background-color: rgb(16, 206, 223);padding: .75em 1em;color: #FFF;cursor: pointer;border:none;z-index:99999';
button.innerHTML = 'Edit This';
button.addEventListener('click',function(e){
e.target.blur();
if(location.pathname === '/'){ return nope() }
if(location.pathname.split('/')[1] === 'blogs'){
/* fallback to the tracking script data, should it exist */
if(typeof __st !== 'undefined' && __st.s){
location.href = [location.protocol, '//', location.host,'/admin/articles/',__st.s.split('-')[1]].join('');
return false;
}
return nope()
}
getJson(getJsonPath(),function(a,b){
location.href = [location.protocol, '//', location.host,'/admin/',b+'s/',a[b].id].join('');
})
return false;
});
document.getElementsByTagName('body')[0].appendChild(button);
})()
</script>
@rickydazla
Copy link

Fuckin A!

@suture
Copy link

suture commented Jul 1, 2016

This has stopped working now on new Blog Article pages that don't have the old ID numbers. It continues to work fine on old article pages that still have the IDs.

@suture
Copy link

suture commented Jul 1, 2016

If you change it to

var blogID = {{ article.id }};

it works for article pages, but creates a console error on product pages.

@freakdesign
Copy link
Author

freakdesign commented Jul 16, 2016 •
edited
Loading

@suture I made a change to the code that should help here along with removing as many dependencies as possible (and making it more of a js drop in without liquid edits needed). I've also added this to a repo so others can contribute.

@suture
Copy link

suture commented Aug 24, 2016

Is there a way to hide the button from the general public? At the moment it seems to be visible to everyone.

@suture
Copy link

suture commented Aug 26, 2016

Many thanks

I tested the above code, but the edit button is no longer appearing, even when logged in as an admin user.
I ended up doing it this way https://gist.github.com/suture/17e7568e10bd743de2e8999426c0a416

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment