【Shopify】日付型のメタフィールドを計算に用いようとしたらつまづいた話

独自の配送日時指定フォームをオンラインストアに表示させるカスタマイズをした時につまづいた点について共有したいと思います。

普段は、配送日時指定アプリを使用することが多いのですが、今回はマーチャントの要望により独自に実装しました。

カスタマイズの内容は以下となります。

1. 日付型のメタフィールドを使用して、リードタイム・お届け可能期間(選択可能な最大の日付)の入力フィールドを設置。
   
   
2. オンラインストアへ配送日時指定フォームを設置。但し、選択可能な配送希望日時は以下の条件とする。
   
   

• 選択可能な最短の日付は、注文日にリードタイムを足した日付とする
• 選択可能な最長の日付は、40日とお届け可能期間までの日数の小さい方とする

実装したスニペットは以下となります。

See the Pen 【Shopify】配送日時指定 by 5bit-matsuda (@5bit-matsuda) on CodePen.

一見すると、正しく表示されそうに見えるのですが、まったく表示されません。原因はここのようです。

See the Pen by 5bit-matsuda (@5bit-matsuda) on CodePen.

今度は、escapeというフィルターを追加してみます。

See the Pen by 5bit-matsuda (@5bit-matsuda) on CodePen.

選択可能な配送日時の仕様に従って表示されているようです。

どうしてー？？笑

※この記事は2022年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容どおりに設定ができない場合があります。