FROM CACHE - jp_header
解決済

【メタフィールドを活用】発売日時設定について

setens-online
観光客
10 0 1

こんにちは。shopifyを初めて利用してショップ構築をしております。

使用テーマはDawnです。
商品詳細ページでの「発売日時設定」についてご存じの方がいらっしゃいましたらご教示いただきたく存じます。

例)1/10(火)21:00~1/15(日)23:59
このように発売日時設定を商品詳細ページに設定したい場合、どのように設定すれば良いでしょうか?

「メタフィールド」機能の「日付と時刻」をうまく活用できないか?と思うのですが、
うまく実装できておらず、調べてもわからないことが多く困っております。
(運用費の都合で、できればアプリ導入ではない方法があれば…と思っております。)

ご存じの方がいらっしゃいましたら、ぜひともご教示いただけますと幸いです。
よろしくお願いいたします。

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 413

成功

@setens-online

フルバランスさんと同様に、

質問者様は「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したい、とお考えであるという前提で回答いたします。

 

フルバランスさんが参考として記載されているnoteに掲載のソースを確認したところ、次の2点の懸念がありました。

  1. バリエーションがある商品の場合、バリエーションを切り替えた時に、販売期間外だったとしても、カート投入ボタンが有効になってしまう。
  2. 販売期間設定用のメタフィールドを設定していない商品は、「販売期間外」となってしまう。※こちらはその仕様が望ましいようであれば問題ないですが、メタフィールドに何も設定されていなければ、その商品は通常販売としたいことが多いと思い懸念点としました。

 

そのため、下記に調整版のコードを記載させていただきます。

 

初めに販売開始と販売終了のメタフィールドを作成してください。

今回のサンプルでは、販売開始のネームスペースとキーを「custom.saleStartDate」、販売終了のネームスペースとキーを「custom.saleEndDate」で作成します。

 

その後、コードを埋め込むため、管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。

コード編集画面から、セクション(Sections)の「main-product.liquid」を選択します。main-product.liquidの609行目当たりにあります、初期コードの下記部分を

 

 

<button
  type="submit"
  name="add"
  class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
  {% if product.selected_or_first_available_variant.available == false %}
    disabled
  {% endif %}
>
  <span>
  {%- if product.selected_or_first_available_variant.available -%}
    {{ 'products.product.add_to_cart' | t }}
  {%- else -%}
    {{ 'products.product.sold_out' | t }}
  {%- endif -%}
  </span>
  <div class="loading-overlay__spinner hidden">
    <svg
      aria-hidden="true"
      focusable="false"
      role="presentation"
      class="spinner"
      viewBox="0 0 66 66"
      xmlns="http://www.w3.org/2000/svg"
      >
      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
    </svg>
  </div>
</button>

下記コードに変更いただけましたら、販売開始前は「Coming Soon」販売中は「カートに追加する」、販売終了後は「販売期間外」と表示されます。

 

 

{%- assign saleStartDate =  product.metafields.custom.saleStartDate | date: "%s" -%}
{%- assign saleEndDate =  product.metafields.custom.saleEndDate | date: "%s" -%}
{%- assign saleStartDateValue =  product.metafields.custom.saleStartDate.value -%}
{%- assign saleEndDateValue =  product.metafields.custom.saleEndDate.value -%}
{%- assign nowTime = "now" | date: "%s" -%}
{%- assign startTimeLag = nowTime | minus: saleStartDate -%}
{%- assign endTimeLag = nowTime | minus: saleEndDate -%}
{%- assign stringNameAdd = ''  -%}
{%- assign stringBuy = ''  -%}
{%- if saleStartDateValue == null and saleEndDateValue == null -%}
  {%- assign stringNameAdd = 'name="add"'  -%}
  {%- assign stringBuy = 'buy'  -%}
{%- elsif startTimeLag >= 0 and  saleEndDateValue == null -%}
  {%- assign stringNameAdd = 'name="add"'  -%}
  {%- assign stringBuy = 'buy'  -%}
{%- elsif saleStartDateValue == null and  endTimeLag <= 0 -%}
  {%- assign stringNameAdd = 'name="add"'  -%}
  {%- assign stringBuy = 'buy'  -%}
{%- elsif startTimeLag >= 0 and endTimeLag <= 0 -%}
  {%- assign stringNameAdd = 'name="add"'  -%}
  {%- assign stringBuy = 'buy'  -%}
{%- endif -%}
<button
  type="submit"
  {{ stringNameAdd }}
  class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
  {%- if stringBuy != 'buy' or product.selected_or_first_available_variant.available == false -%}disabled{%- endif -%}
>
  <span>
    {%- if stringBuy == 'buy' -%}
      {%- if product.selected_or_first_available_variant.available -%}
        {{ 'products.product.add_to_cart' | t }}
      {%- else -%}
        {{ 'products.product.sold_out' | t }}
      {%- endif -%}
    {%- elsif startTimeLag <=  0 -%}
      Coming soon
    {%- elsif endTimeLag >=  0 -%}
      販売期間外
    {%- endif -%} 
  </span>
  <div class="loading-overlay__spinner hidden">
    <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
    </svg>
  </div>
</button>

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

5件の返信5

株式会社フルバランス
Shopify Partner
1473 521 651

Setens-Online様

 

はじめまして、フルバランスの園畑です。
ご質問を確認いたしました。

 

「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したい、という認識であっておりますでしょうか?

 

上記でしたら、アプリを使用せず、メタフィールドの活用で実装可能です。

 

Dawnでの実装例が以下サイトに掲載されていますので、是非ご参考にしてみてください。

https://note.com/k4n/n/n901b69fa3f77

 


ご参考になりましたでしょうか。
 
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
 
分からない点があれば、またいつでもご連絡ください。
 
フルバランス 園畑

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
setens-online
観光客
10 0 1

フルバランス 園畑様

お世話になります。お忙しい中、ご返信くださりありがとうございます。

「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したいという認識で問題ございません。参考記事をご紹介くださりありがとうございました。

また何かありましたらご相談させていただくこともあるかと思います。

その際はよろしくお願いいたします。この度はありがとうございました。

 

Qcoltd
Shopify Partner
1051 429 413

成功

@setens-online

フルバランスさんと同様に、

質問者様は「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したい、とお考えであるという前提で回答いたします。

 

フルバランスさんが参考として記載されているnoteに掲載のソースを確認したところ、次の2点の懸念がありました。

  1. バリエーションがある商品の場合、バリエーションを切り替えた時に、販売期間外だったとしても、カート投入ボタンが有効になってしまう。
  2. 販売期間設定用のメタフィールドを設定していない商品は、「販売期間外」となってしまう。※こちらはその仕様が望ましいようであれば問題ないですが、メタフィールドに何も設定されていなければ、その商品は通常販売としたいことが多いと思い懸念点としました。

 

そのため、下記に調整版のコードを記載させていただきます。

 

初めに販売開始と販売終了のメタフィールドを作成してください。

今回のサンプルでは、販売開始のネームスペースとキーを「custom.saleStartDate」、販売終了のネームスペースとキーを「custom.saleEndDate」で作成します。

 

その後、コードを埋め込むため、管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。

コード編集画面から、セクション(Sections)の「main-product.liquid」を選択します。main-product.liquidの609行目当たりにあります、初期コードの下記部分を

 

 

<button
  type="submit"
  name="add"
  class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
  {% if product.selected_or_first_available_variant.available == false %}
    disabled
  {% endif %}
>
  <span>
  {%- if product.selected_or_first_available_variant.available -%}
    {{ 'products.product.add_to_cart' | t }}
  {%- else -%}
    {{ 'products.product.sold_out' | t }}
  {%- endif -%}
  </span>
  <div class="loading-overlay__spinner hidden">
    <svg
      aria-hidden="true"
      focusable="false"
      role="presentation"
      class="spinner"
      viewBox="0 0 66 66"
      xmlns="http://www.w3.org/2000/svg"
      >
      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
    </svg>
  </div>
</button>

下記コードに変更いただけましたら、販売開始前は「Coming Soon」販売中は「カートに追加する」、販売終了後は「販売期間外」と表示されます。

 

 

{%- assign saleStartDate =  product.metafields.custom.saleStartDate | date: "%s" -%}
{%- assign saleEndDate =  product.metafields.custom.saleEndDate | date: "%s" -%}
{%- assign saleStartDateValue =  product.metafields.custom.saleStartDate.value -%}
{%- assign saleEndDateValue =  product.metafields.custom.saleEndDate.value -%}
{%- assign nowTime = "now" | date: "%s" -%}
{%- assign startTimeLag = nowTime | minus: saleStartDate -%}
{%- assign endTimeLag = nowTime | minus: saleEndDate -%}
{%- assign stringNameAdd = ''  -%}
{%- assign stringBuy = ''  -%}
{%- if saleStartDateValue == null and saleEndDateValue == null -%}
  {%- assign stringNameAdd = 'name="add"'  -%}
  {%- assign stringBuy = 'buy'  -%}
{%- elsif startTimeLag >= 0 and  saleEndDateValue == null -%}
  {%- assign stringNameAdd = 'name="add"'  -%}
  {%- assign stringBuy = 'buy'  -%}
{%- elsif saleStartDateValue == null and  endTimeLag <= 0 -%}
  {%- assign stringNameAdd = 'name="add"'  -%}
  {%- assign stringBuy = 'buy'  -%}
{%- elsif startTimeLag >= 0 and endTimeLag <= 0 -%}
  {%- assign stringNameAdd = 'name="add"'  -%}
  {%- assign stringBuy = 'buy'  -%}
{%- endif -%}
<button
  type="submit"
  {{ stringNameAdd }}
  class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
  {%- if stringBuy != 'buy' or product.selected_or_first_available_variant.available == false -%}disabled{%- endif -%}
>
  <span>
    {%- if stringBuy == 'buy' -%}
      {%- if product.selected_or_first_available_variant.available -%}
        {{ 'products.product.add_to_cart' | t }}
      {%- else -%}
        {{ 'products.product.sold_out' | t }}
      {%- endif -%}
    {%- elsif startTimeLag <=  0 -%}
      Coming soon
    {%- elsif endTimeLag >=  0 -%}
      販売期間外
    {%- endif -%} 
  </span>
  <div class="loading-overlay__spinner hidden">
    <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
    </svg>
  </div>
</button>

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
setens-online
観光客
10 0 1

キュー小坂様

お世話になります。お忙しい中ご返信くださりありがとうございます。

懸念点まで考慮していただき、詳細をご丁寧に教えていただき誠にありがとうございます。

ご案内いただいた内容で無事に実装できました!テスト商品でも日時設定をして確認済で問題なさそうです。ファイル名やコードまで、ご丁寧なご案内、感謝いたします。

また何かありましたらご相談させていただくこともあるかと思います。

その際はよろしくお願いいたします。

この度は大変ありがとうございました。ベストアンサーにさせていただきました^ ^

mkmkolinksmkmk
訪問者
3 0 0

キュー小坂様

お世話になっております。

こちらの内容でコードの書き換えを致しました。

ただバージョンアップされており、こちらのコードの部分がスぺニットのbuy-buttons.liquidにあることまで分かりました。

そのコードを提示頂いたコードに切り替え、テストをしてみたのですが、サイズやカラー展開がある際、選択をしたら在庫があるにも関わらずSold out表記になり、また更新をかけたらまた在庫が上がる、選択したらSold outになる感じになってしまいます。

こちらの解決方法はございますか?

お忙しい所すみませんが、ご教授頂けますと幸いです。

宜しくお願い致します。