logo

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

【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.

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

どうしてー??笑

目次を表示

※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

【150円×3ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。