簡単にECサイトがオープンできる大人気のshopify。
ですが、プログラミング言語が独自であるため、ガッツリしたカスタマイズは実は全然簡単じゃない…。
shopifyの認定パートナーであるレジットも、コードの検証には一苦労しています。
そんな中で、最近実際に実装した「自動comingsoon機能」について、ご紹介したいと思います。
自動coming soon機能
自動coming soon機能とは、指定の時間になると自動でボタンが「coming soon」→「カートに追加する」に切り替わり、購入できるようになる機能のこと。
shopifyにはデフォルトでcoming soon機能がないのですが、open前にも商品詳細など見てもらいたいですよね。
現在shopifyにはパスワード機能というものがあり、ここを編集することでサイトの入り口を「coming soon！」とすることができますが、それ以上先に進めなくなってしまいます。
サイトの閲覧自体ができなくなり商品詳細も見れないので、あまりお勧めできません。
また、アプリによる実装も簡単に可能ですが、有料のものになってしまいます。
今回紹介するものは無料でできるので、ぜひご使用のテンプレートと照らし合わせながら挑戦してみてください。
もちろん、あれこれやる前にバックアップはとっておきましょう！お約束です！
①アプリで時間を指定
まずメタフィールドを簡単に設定できるアプリ、Metafields Guruで販売開始したい時間を設定します。
一部有料ですが無料で十分使えます。
以下の画面で時間を設定していきます。
（管理画面 > アプリ > Metafields Guru > productもしくはcollection > 該当商品）
いじるのは基本赤枠の箇所のみで大丈夫です。
②テンプレートのボタン部分に追記
開始時間のトリガーは設定できたので、あとはボタン箇所にコードを追記していきます。
product-template.liquidなどにあるカートに追加ボタンを探します。（buttonやaddを手がかりにすると良いです）
見つけたらそこにうまくコードを適用させていくのですが、こればっかりはテンプレートによって変わってきます。
調査なしにコピペしてどうにかなるものではないので、そこだけご注意を！
じっくり調査しながら、何回も試してみてください。
コードは以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{% assign start_time = product.metafields.product.start_time | date: "%s" %} {% assign now_time = "now" | date: "%s" %} {% assign time_lag = now_time | minus: start_time %} <button id="AddToCart" class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}" disabled="disabled" name="add" type="submit" aria-label="カートに追加" aria-haspopup="dialog" data-add-to-cart=""> <span data-add-to-cart-text=""> {% if time_lag <= 0 %} coming soon {% else %} カートに追加 {% endif %} </span> </button> |
意味が全くわからないとテンプレートに適用させるのも難しいと思うので、ざっくり解説を。
ざっくり解説
メタを呼び出す
まず先ほどアプリで設定した指定時刻と現在時刻を持ってきます。
ここは完全コピペでオッケーです。
start_timeが指定した時間、now_timeが現在時刻。
lagはいわゆる「ラグ」で、start_timeとnow_timeのラグを利用しているわけです。
|
1 2 3 4 5 |
{% assign start_time = product.metafields.product.start_time | date: "%s" %} {% assign now_time = "now" | date: "%s" %} {% assign time_lag = now_time | minus: start_time %} |
ボタン部分
ここから既存のidなど確認しながら、テンプレートに合わせてく必要があります。
検証しながら慎重に進めていきましょう。
タイムラグが0より小さい場合、つまり指定時刻より現在時刻マイナスな場合（time_lag<=0）にはボタン機能しない（disabled）ようになっています。
|
1 2 3 |
<button id="AddToCart" class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}" disabled="disabled" name="add" type="submit" aria-label="カートに追加" aria-haspopup="dialog" data-add-to-cart=""></button> |
文言の設定
時刻による文言を設定します。
先程と同じく、指定時刻より現在時刻がマイナスな場合（time_lag<=0）には「coming soon」と表示させています。
それ以外（else）は、「カートに追加」。
|
1 2 3 4 5 6 7 8 9 |
<span data-add-to-cart-text=""> {% if time_lag <= 0 %} coming soon {% else %} カートに追加 {% endif %} </span> |
入念なテストが必須！
購入ボタンという最も大事とも言える部分の改造になるので入念なテストが必須です。
アプリの方で指定時刻を直近にしたりして、きちんとリアルタイムでボタンが切り替わるかどうか、何度も確認しましょう。
また、その他にも以下にも要注意。
- coming soon時なのに購入できてしまう抜け道がないか？
- open状態でカートに実際に入れることはできるか？
- 売り切れ時の売れ切れ表示も両立できているか？
まとめ
今回はshopifyのボタンに自動coming soon機能をつける方法を紹介しました。
「指定した時刻に自動的に切り替わる」、この点に注目すれば、他にもたくさん応用できそうですね。
shopifyを使ったご依頼など、ぜひレジットにお気軽にご相談ください！
この記事を書いた人
内藤ちゃんデザイナー
メキメキ成長中の新米デザイナーです。丸くてかわいいデザインが好きです。
ネットショップ運営
ランキング
制作実績
