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

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

公開日:2021年09月26日

更新日:2022年07月02日

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

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

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

  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の仕様変更等により、記事の内容どおりに設定ができない場合があります。

株式会社5-bit

2020年1月に、カナダのShopify本社より「Shopifyエキスパート」として認定をいただきました。現在までに累計で50以上のShopifyストアの構築、1000以上の機能開発経験。他社で難しい要件の実装や構築も承ります。

お問い合わせはこちら

Our Contents私たちの情報発信

ShopifyにAmazon Payを導入するメリットや設定方法を解説

Shopifyのテーマ開発環境を構築する

Shopifyのストアフロントフィルタにメタフィールドが追加されたので使ってみた

Shopifyの新着商品一覧に期間限定(公開から〇〇日以内)で商品を掲載する方法

Shopifyの注文情報をGASでCSV出力する方法

Shopifyの全商品一覧(collections/all)に表示される商品を制御する方法

Shopifyテーマ開発にFigmaを使ったらかなり捗った話

Shopifyのクーポンを特定のユーザーにのみ適用させる方法

ブログ一覧