Webサイトでカラーミーショップのどこでもカラーミーのボタンを任意のデザインで追加する方法

https://help.shop-pro.jp/hc/ja/articles/1500004175622-%E3%82%AB%E3%83%BC%E3%83%88JS%E6%A9%9F%E8%83%BD-%E3%81%A9%E3%81%93%E3%81%A7%E3%82%82%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%9F%E3%83%BC-%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B

上記のURLのような感じで、どこでもカラーミーの機能を使うとJavaScriptが発行されると思うが、このJavaScriptを設置するとDOMが出現する。

そこでハードなCSSを書く以外の調整方法をご紹介する。

要は適当にクリックできる要素を準備し、それをデザインする。
どこでもカラーミーのJSで出現するDOMのカラーミーショップへのリンクは form への submit となるため、このイベントをそのクリックできる要素に引っ掛ける感じ。めずらしくjQueryで。

<div style="display: none;" id="target">
  <どこでもカラーミーのコード />
</div>

<button id="clickable">リンク</button>

<script>
  $('.js-link-ec').on('click', function(e) {
    $('#hidden-field form').submit();
    try {
      dataLayer.push({'event': 'ec_link'});
    } catch(e) {
      console.log(e);
    }
    return false;
  });
</script>

昔カラーミーでやったなと思い出してこの記事書いているんだが、ShopifyがREST API用意されてて便利だなと思ったことがきっかけ。
Shopify まだちゃんと触ってないけど、JSだけで完結できそうな感じでよさげ。
こうやってヘッドレスECが増えていくのかも。