【Shopify】今週の振り返り2

今週の振り返り

①Javascriptのclick()ができない…

結論

これでできました！

const eventDown = new MouseEvent('pointerdown');
button.dispatchEvent(eventDown);

const eventUp = new MouseEvent('pointerup');
button.dispatchEvent(eventUp);

内容

Shopifyのテーマ構築・改修をしていると、よくあるパターンとして、公開アプリの一部をテーマ側のコードから制御する…みたいな作業です。

これが結構大変で…
テキストを1行追加するにもJavascriptで書かないといけないし…
要素を取得するのにMutationObserverで監視をしてみたり…
と、いまだに正解がわからないまま、毎回探り探りやっています。

今回は、商品の数量変更時にアプリ側では、「追加」「削除」ボタンで1つず増減していく形だったのを、セレクトボックス表示に変更する作業でした。

既存の数量変更ボタンはCSSで非表示にして、セレクトボックスで選択されたvalueに合わせて、既存のボタンをクリックする動きを作ろうとしました。

作戦通り進んでいたはずが、最後のbutton.click();が動かない…

そんな中、出会ったのが下記のコードでした。

const eventDown = new MouseEvent('pointerdown');
button.dispatchEvent(eventDown);

const eventUp = new MouseEvent('pointerup');
button.dispatchEvent(eventUp);

このMouseEventのpointerdown、pointerupを使用することで、マウスの動きを細かくトリガーとして設定できるため解決できる場合があるようです。

（pointerdownをした後、pointerupがあることに気づかず、永遠にクリック状態になって困惑する事件も起きましたので笑、基本的にはpointerdownとpointerupはセットで使うことをお忘れなく！）

後2つほど書きたかったけど…
もうすぐ明日になってしまうので今日は1つだけ…

継続って本当に難しい…

---

短くなりすぎたので、Shopify構築とは関係ないですが、最近もう一つ頑張っていることが「外に出ること」です。

もともとインドアな趣味が多く、お家大好きだし、わんこも大好きだし、作業は家の方が環境整えているから効率がいい、お家楽しい…と思っていました。

わざわざ外に出て作業する意味＿φ(￣ー￣ )
と思っていたのですが、私なりの回答としては、
外に出る＝動く
ということです。

普段アップルウォッチをつけているのですが、平日はなんと歩数1000歩台の時もあり、人間としてこの運動量の少なさは大丈夫なのかと危機を感じるようになりました笑

そう思うなら外に出ればいいじゃんという気持ちはあるのですが、外に出て何をすればいいのかわからず🤔

新しい趣味を見つけるのは大変ですが、普段家でやっているけど、外でもできることって考えると、PC作業や勉強（調べ物）や読書だと思い、外に出て作業や読書をしてみようと思っています。

勤務中は会議や作業中にMeet、Zoomを繋いでいることも多いので、まずはお休みの日に外で作業してみようかと。

コーヒは大好きなので、作業できそうなカフェ探しと運動と作業、一石三鳥だしお得だな〜ぐらいのゆるい気持ちでやっていこうと思います。

---

Shopifyに特化したWEB制作会社で勤務しています。
Shopifyについての学びを発信中です。
記載されている内容をストアで使用する際は自己責任にてお願いいたします。