Skip to main content

Bookmarklets for Yahoo Store

I was introduced to "bookmarklets" by my friend, Rob Snell, many years ago at one of the Yahoo Store conferences and they are indispensable tools in my daily work on Yahoo stores.

What are "bookmarklets"?

As the name suggests, bookmarklets are kind of like bookmarks in your browser, except instead of leading to a web page, they execute a small piece of JavaScript code on the current page. This is made possible by the browser's support of the "javascript:" prefix. When you point your browser to a URL, the browser figures out what to do with it: bring up a web page if the address starts with http:// or https://, connect to an ftp site if the address starts with ftp://, or in the case of javascript:, interpret and execute the JavaScript code following the colon.

Typically, bookmarklets are saved either in your Favorites folder or if you use them on a daily basis like I do, in your browser's bookmarks toolbar. In essence, bookmarklets are sort of like browser extensions or browser add-ons, except they don't bloat your browser and take up memory. While extensions load with your browser when the browser starts, bookmarklets only run when you need them and disappear from memory when they are done.

How to create a bookmarklet

Normally, you create bookmarks by clicking the "Add to Favorites" or similar options in your bookmarks menu. This adds the current page to your favorites. However, you can also create a bookmark "manually", by right-clicking your bookmarks toolbar and selecting "Add page..." in Chrome, or "New Bookmark" in Firefox (Microsoft Edge is a bit quirkier in this department, more on that later.)


When you create a new bookmark, the browser will ask you for the name and a location. For name, you just enter whatever you want to call the bookmark. Just as an example, let's enter "Hello". The location field is where the magic happens: there you enter the word javascript: followed by the small piece of javascript code you want the bookmark to execute. Just as a test, enter the following:


javascript:alert("Hello there!")


(After the bookmark is created, you may have to actually drag it to the actual bookmarks toolbar.) Once done, you will see your new bookmarklet on your bookmarks toolbar. If you click it, the browser will bring up a prompt like this:


Ok, not too useful, but you get the idea! Now on to the real useful bookmarks I was talking about. I want to show you five bookmarklets that will make your life editing your Yahoo store easier - guaranteed!

Please note: the following bookmarklets all require you to be logged into your Yahoo store account. If you are not logged in, all these bookmarklets will simply take you to the Yahoo store login page.

Also, one disclaimer: these bookmarklets work by looking at the HTML code of the current page and trying to identify links to the cart page to figure out the store's Yahoo account ID. This works in the vast majority of cases, however, no two custom stores are the same, and yours might have a different way of linking to the shopping cart page. Unfortunately, in such cases, these bookmarklets will not work on your store. At least three out of the five won't. Edit this page and Go to this ID will still work.

1. Go to the Store Manager

When you are viewing any page of your store, clicking this bookmarklet will take you into the Store manager. I call it Y! Mgr just so it doesn't take up much space on the bookmarks bar. Here is the code:

javascript:var%20re%20=%20new%20RegExp('/cgi-bin/wg-order[?]([a-z0-9-]+)');var%20m%20=%20document.body.innerHTML.match(re);%20if%20(m)%20{document.location.href='http://edit.store.yahoo.com/RT/MGR.'%20+%20m[1];}

2. Go to this page in the Editor

This bookmarklet will take you to the same page you are looking at but in the store editor. So you can be browsing your live site, and if you quickly want to go to the editor for the page you are on, simply click this bookmarklet.

Note: for this bookmarklet to work, you have to have been in the editor at least once during your browsing session. Otherwise clicking this bookmarklet will take you into the Store Manager only. Here is the code:

javascript:var%20n%20=%20new%20RegExp(%22/([a-z0-9-]+.html)%22);%20var%20pg%20=%20location.href.match(n);%20if%20(pg)%20{%20target%20=%20'/'+pg[1]%20}else{target=''};%20var%20re%20=%20new%20RegExp('/cgi-bin/wg-order[?]([a-z0-9-]+)');var%20m%20=%20document.body.innerHTML.match(re);%20if%20(m)%20{document.location.href='http://'+m[1]+'.edit.store.yahoosmallbusiness.net/RT/NEWEDIT.'%20+%20m[1]%20+%20target;}

3. Go to this ID

When you are in the store editor, you may want to quickly jump to a page whose ID you know. There are of course a number of ways to do that, for example clicking "Controls" and then Search or Edit by ID, or using the "Find" button. However, with this bookmarklet all you have to do is click while you are on any page of your store. It will prompt you for the ID, and once you enter it, you will be taken to that page.

javascript:(function()%7Bvar%20target%20%3D%20prompt(%22Target%20ID%3A%22)%3Bif%20(target%20!%3D%20null)%20%7Blocation.href%20%3D%20document.URL.substr(0%2Cdocument.URL.lastIndexOf('%2F'))%20%2B%20%22%2F%22%20%2B%20target%20%2B%20%22.html%22%3B%7D%7D)()

4. Edit this ID

Same as "Go to this ID" but it also takes you directly to the Edit form of the target page. So this is a shortcut for going to a page with a given ID and then hitting the "Edit" button once on the page.

javascript:(function()%7Bvar%20target%20%3D%20prompt(%22Target%20ID%3A%22)%3Bif%20(target%20!%3D%20null)%20%7Blocation.href%20%3D%20document.URL.substr(0%2Cdocument.URL.lastIndexOf('%2F'))%20%2B%20%22%2F%22%20%2B%20target%20%2B%20%22.html?dired=1%22%3B%7D%7D)()

5. Show Publish Status

If your store is in the middle of publishing and you don't have the publish status screen in front of you, this bookmarklet will take you to that page from any page of your live store.

javascript:var%20re%20=%20new%20RegExp('/cgi-bin/wg-order[?]([a-z0-9-]+)');var%20m%20=%20document.body.innerHTML.match(re);%20if%20(m)%20{document.location.href='http://edit.store.yahoo.com/RT/MGR.'%20+%20m[1]%20+%20'/NEWEDIT_STATUS';}


Enjoy!

Comments

Popular posts from this blog

What is product-url anyway?

I keep having to field questions about the product-url field, and since it came up yesterday, I figured I'd try to clear up all the confusion about it.

So the name product-url suggests that whatever you type in there will become the URL of that product. Unfortunately, this is not the case, or rather, not in the intuitive way. The URL you enter there will be used as the URL for that product in Yahoo Shopping, on the built-in search results page, and on the shopping cart page, however, the URL you type in there DOES NOT actually change the physical URL of the page.
What is the URL of a page in a Yahoo Store? In any Yahoo Store built in the store editor, the URL of a page is the store's domain name and the page ID + .html. For example, in my store at www.ytimes.info, I have a page whose id is rtml101, thehrefore, the URL of that page is http://www.ytimes.info/rtml101.html.
Why would you want to change the URL? For SEO reasons, it is believed to be better to have a URL that includ…

Referencing Files from Yahoo! Web Hosting Securely

Now that hopefully most of you you have your stores secured (if not and need help, we offer a Secure Storefront Preparation Service here), you may have been faced with the question of how to reference files (images, CSS, JavaScript, src) if those files are stored on your Yahoo! store's web hosting account. Obviously using the old HTTP: method won't work, so something like this

< img src="http://site.ytimes.com/image.jpg" />

will not work. Nor can you simply change the http: part to https: , because as of this writing, only the store editor portion of a Yahoo! Store can be made secure, the web hosting portion cannot.

First a side note: if this sounds totally Greek to you because you have never heard of the web hosting part of your Yahoo! Store, you may have a legacy Yahoo! store account and not a Merchant Solution one. With a legacy store account you will only have the store editor part and no hosting account, in which case none of this applies to you.

The good n…

Really Quick Trick to Improve Page Load Speed of a Yahoo Store a Little Bit

With Google getting more and more aggressive about wanting web sites to be quick to load (particularly on mobile), we often find ourselves trying to find even the smallest of tweaks to nudge up that page speed score even if by a tiny bit. Here is a quick trick you can do completely on your own, without having to ask a developer, that will probably bump up your Google PageSpeed score by a couple of points.

First a short disclaimer: this trick is only applicable if you have enabled the Yahoo! Badge in your Store Manager, under Live Insights & App Gallery.

Before you start, you may want to check your site's Google PageSpeed (the home page is a good place to start) both as a benchmark, and also to get a glimpse at how fast (or slow) Google believes your site (or home page) is. Here is the link:

https://developers.google.com/speed/pagespeed/insights/
Ok, so if you did enable the Yahoo! Badge, your site includes a small Yahoo Live Store badge, much like this:


When you hover over the …