背景
もうすぐクリスマスなので、ケーキを買いたいなと思いました。
ちょうどこの前誕生日ケーキを買う時に利用したcake.jpというサイトがあり、今回は、このサイトで利用する時に気に入らなかった商品カートのUXを改善してみました。
現状
- 買い物カートの商品リストから、該当商品の詳細ページへの遷移ができない
- カートページのロゴから、HPへ遷移できない
目標1
目標2
使用したツール
- tampermonkey(https://www.tampermonkey.net/)
- chrome developer tools(https://developer.chrome.com/docs/devtools/)
やってみる
既知しているのは、サイトにある商品ページはこんなURLになっています（https://cake.jp/item/0123456/）
よって、商品ページへ遷移できるために、該当商品の商品番号を知る必要があります。
ただ、一見カートでは商品番号を表示されていませんが、実際はどうでしょう。ChromeのDeveloper Toolsを開き、カートにある商品のコードを見てみると、こんな感じのコードが入っています。
<!--省略-->
<input type="hidden" name="item_id" value="実際のitem_idがここに入っています">
<!--省略-->
これがあれば、該当商品のinputのvalueを使って、詳細ページへのリンクを作成できそうだね！イメージ的にはこんな感じになります。
新しいelementを作成して（newElement）
↓
newElementに遷移先のURLを設置
↓
既存elementの前にnewElementを移動して
↓
最後既存elementをnewElementの中に移動すれば完成
コードのイメージ
// Create new a element
var newElement = document.createElement("a")
// Set href
newElement.setAttribute("href", itemUrl);
// Get exist element
var existElement = document.getElementsByTagName('tag name')
// get parent node of existElement
var parentNode = newElement.parentNode
// insertBefore
parentNode.insertBefore(newElement, existElement[0])
// put existElement into new element
newElement.appendChild(existElement[0])
これで終わりかと思ったら、１つ問題があった。
今回使用されている情報源が、一部のカート商品しか持っていないことです。
別の対応策を考える
Developer Toolsからもう少し調べてみると、window.dataLayerに、カートにある商品のitemListが入っていることが分かりました。
これを使って該当商品のURLを作ることが可能になりました！
最終的なコードはここで見れます。
https://greasyfork.org/en/scripts/437141-cake-jp-cart-better/code
終わりに
商品カートの画像が該当商品に遷移できなくてイライラしてて、修正してみました。
必ずしも最善のコードを書いたと思っていないが、まぁいいっか
皆さんも何か使いにくいなと思ったらやってみてね
