STORESでショップを構築している時にこう思うことってありませんか?
- 「今見ている商品ページの商品名や情報を直したい」
- 「管理画面から特定の商品ページをすぐに確認したい」
ところが標準の機能ではこれができません。面倒ですね。
なので作っちゃいました、ブックマークレット。
ブックマークレットは表示しているページで自分で用意したプログラムを動かすための仕組みです。
ブックマークレットがわからない方は以下のページをご覧ください。
商品ページと編集ページを行き来するブックマークレットの動作原理
STORESの商品のURLと管理画面(ダッシュボード)の商品登録(商品編集)のURLは非常に似ています。
例えば以下の商品があったとします。
管理画面(ダッシュボード)の商品登録のURLは
https://dashboard.stores.jp/items/5fe3f4be4f4430095a9b6060
となります。
URLを見比べてみると、ドメインの部分だけが違うだけですね。
つまりURLのドメインの部分を入れ替えてあげれば、商品ページと商品登録ページを行き来できるようになるというわけです。
商品ページと商品登録ページを行き来できるブックマークレット
ブックマークバーなどに適当なページをブックマークします。
そのブックマークのURLを以下の「javascript:…」の内容に変更します。
javascript:(function(){var a=document.URL;a.match(/●STORESでのショップのアドレス●/)?location.href=a.replace(/●STORESでのショップのアドレス●/,"dashboard.stores.jp"):location.href=a.replace(/dashboard\.stores\.jp/,"●STORESでのショップのアドレス●")})();
「●STORESでのショップのアドレス●」部分は、STORESで構築しているショップのアドレス(http://を除いた部分)を入れます。
例えば「https://example.stores.jp」というアドレスでショップを構築しているのであれば「example.stores.jp」を入れます。
厳密には「.」は「\.」なのでしょうけど、そこまで厳密にしなくても良いかなと…ショップの管理者しか使わないですし…。あと https://example.stores.jp/ ってサンプルとして用意されているんだな…(笑)。
javascript:(function(){var a=document.URL;a.match(/example.stores.jp/)?location.href=a.replace(/example.stores.jp/,"dashboard.stores.jp"):location.href=a.replace(/dashboard\.stores\.jp/,"example.stores.jp")})();
ブックマークレットの使い方
使い方は簡単です。
見ている商品ページを変更したい場合
- 編集したい商品ページを開きます
- ブックマークレットをクリックします
- 自動的に商品ページの登録画面が開きます
管理画面から特定の商品ページを確認したい場合
- 管理画面(ダッシュボード)で「アイテム」の一覧から、確認したいアイテムを開きます
- ブックマークレットをクリックします
- ショップとして公開されている商品ページ(お客様が見ている商品ページ)が自動で開きます
このブックマークレットを使ってSTORESのオンラインショップ構築をより効率的に行いましょう!
それでは。
関連情報・参考資料
- 【参考】Bookmarkletを作ろう(準備編)(Qiita)
- 【ブックマークレット変換】Closure Compiler Service(Google)