【メタフィールド】アプリなしで販売の開始日時を指定したい（Prestige）- I want to set the start date and time of sales

日本語 ディスカッション 技術的なQ＆A
1

現在Prestigeを使用しています。

販売開始日時を設定したいです。

・販売開始日時まで購入ボタンが「coming soon」になり、押せない状態になる。

代わりに「●月●日●時再入荷」のテキスト表示が出る。

・販売開始前でも商品写真や商品説明は見られる状態が良いため、

ページビルドアプリ等で丸ごとcoming soon にするのではなく、各商品ごとにしたい。

メタフィールドを利用した設定方法のQ&Aを数件拝見し、

Prestigeにも使えないか質問させていただいております。下記★は他の質問者さまのURLとなります。

アプリは数個見つけておりますが、他の機能にお金をかけたいため

アプリを利用せずコードで解決したいと思っております。

よろしくお願いいたします。

I am currently using Prestige.

I would like to set the sales start date and time.

・The “buy now” button is set to “coming soon” and cannot be clicked until the sales start date and time.

Instead, a text message “Restocked on ●●●●” will be displayed.

・The product photos and descriptions should be viewable even before the start of sales,

We would like to make each product available for viewing even before the product goes on sale, instead of making the entire product coming soon in a page-building application.

We have read several Q&As on how to set up meta fields,

I have seen several Q&As on how to set up using meta fields and am wondering if this could be used for Prestige. Below are the ★ URLs of the other questioners.

We have found a few apps, but we want to spend money on other features.

We would like to solve this problem with a code instead of using an app.

Thank you in advance.

★https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%83%A1%E3%82%BF%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89-%E7%99%BA%E5%A3%B2%E6%97%A5%E6%99%82%E8%A8%AD%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/m-p/2161650

★https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%83%A1%E3%82%BF%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%82%92%E6%B4%BB%E7%94%A8-%E7%99%BA%E5%A3%B2%E6%97%A5%E6%99%82%E8%A8%AD%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/m-p/1922049）

2

はじめまして。

株式会社ファイブビットの福水と申します。

販売開始日時の設定をメタフィールドで設定しても、ブラウザのキャッシュの問題で、指定した時間になっても表示が切り替わらないいため、メタフィールドではなく、ShopifyFlowを使った方法が弊社の推奨になります。

参考URL：https://twitter.com/ShusukeUeno/status/1542804242036977664

具体的には、下記の流れになります。

  1. 「販売開始_〇月〇日〇時」というタグを持っている場合は、商品ページのカートに追加するボタンが非活性になるような機能をテーマに実装する(Liquid含むフロントエンド開発の知識が必要)
  1. 販売時刻を指定したい商品Aに「販売開始_〇月〇日〇時」というタグをつける(この時点でボタンは非活性になる)
  1. ShopifyFlowの予定時刻トリガーを使って「〇月〇日〇時になったらタグを持っている商品AからタグAを削除する」というワークフローを設定する

4.〇月〇日〇時になったら、Shopify Flowによって「販売開始_〇月〇日〇時」というタグが商品Aから削除され、ボタンが活性化される(購入できるようになる)

以上です。

非常に残念なのですが、現状では、上述している通り、Shopifyの日付メタフィールドは、キャッシュの問題であまり使えない機能になっています。

近々、弊社が運営しているメディアで上記の機能の実装方法などを詳しく紹介した記事を公開する予定なので、公開出来次第、こちらのトピックにも追記させていただきます。

※Shopifyの中の方向けですが、もし上記の行為がShopifyの規約に抵触する場合は、お手数をおかけして大変恐縮ですが、ご教示ください

以上となります。

ご確認の程、何卒よろしくお願いいたします。

3

上記、記事公開したので、共有させていただきます！

https://bit-commerce.co.jp/blogs/shopify/sale-date-widhout-app

4

福水さま

丁寧なご回答をいただき、誠にありがとうございます。

メタフィールドはキャッシュの問題で使用できないのですね。。

flowを使用しての設定方法もわかりやすくご教示いただきありがとうございます。

記事も拝見いたしました。

Prestigeでもコードをそのまま貼り付けて上手くいかないかな、と

希望的観測でやってみましたが、やはり大崩れしてしまいました。

スクリーンショット 2023-11-06 14.20.40.png
スクリーンショット 2023-11-06 14.20.40.png1754×988 143 KB

ただ、登録時間までボタンが変わり、登録時間後は購入ボタンになっていたので

これが実装できればとても魅力的です。

Prestige用のコードをもしご教示いただけるのであれば

お願いできますでしょうか？

難しければ記事のコードを参考にliquidを勉強してみようと思います。

お手数をおかけし恐れ入りますが何卒よろしくお願いいたします。

5

ご確認ありがとうございます。

prestigeテーマですと、対応ファイルが違っていまして、スニペットフォルダ内の「buy-buttons.liquid」の中身をまるっと下記のコードと入れ替えてみてください。

{%- comment -%}
----------------------------------------------------------------------------------------------------------------------
BUY BUTTONS
----------------------------------------------------------------------------------------------------------------------

This component is used to show the buy buttons

********************************************
Supported variables
********************************************

* product: the product from which to show the buttons (if empty, a placeholder is displayed)
* show_payment_button: if we show or not the dynamic checkout button
* show_gift_card_recipient: for gift card products, an optional message/email to be sent to the recipient
* atc_button_background: the background of the ATC button
* atc_button_text_color: the color of the ATC button
* payment_button_background: the background of the dynamic payment button
* payment_button_background: the color of the dynamic payment button
* form_id: if specified, define the form ID linked to this input
{%- endcomment -%}
{% if product.tags contains '販売開始日時指定' %}
  {% for tag in product.tags %}
    {% if tag contains '販売開始日時指定テキスト_' %}
      {{ tag | remove:'販売開始日時指定テキスト_' }}

      
    {% endif %}
  {% endfor %}
{% else %}
  {%- if product != blank -%}
  {%- assign variant_picker_block = section.blocks | where: 'type', 'variant_picker' | first -%}

  {%- assign recipient_feature_active = false -%}

  {%- if product.gift_card? and show_gift_card_recipient -%}
    {%- assign recipient_feature_active = true -%}
    {%- assign show_payment_button = false -%}
  {%- endif -%}

  {%- form 'product', product, is: 'product-form', id: form_id -%}
    

    {% liquid
      assign button_disabled = false

      if product.selected_or_first_available_variant.available == false
        assign button_disabled = true
        assign button_content = 'product.general.sold_out_button' | t
      else
        if product.template_suffix contains 'pre-order'
          assign button_content = 'product.general.pre_order_button' | t
        else
          assign button_content = 'product.general.add_to_cart_button' | t
        endif
      endif
    %}

    

      {%- if recipient_feature_active -%}
        
      {%- endif -%}

      
    

  {%- endform -%}
{%- else -%}
  
{%- endif -%}
{% endif %}
6

こちらの方法も、必ず事前にメモ帳などにコードのバックアップをとっておいてください?

7

無事動作いたしました。

感謝しても仕切れません。ありがとうございました。

1 Like