FROM CACHE - jp_header

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

解決済
ii2
観光客
8 0 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%...

 

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

1 件の受理された解決策
福水正太
Shopify Expert
63 24 22

成功

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

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 '販売開始日時指定テキスト_' %}
      <div class="preorder-button">{{ tag | remove:'販売開始日時指定テキスト_' }}</div>
      <style>
        .preorder-button {
          text-align: center;
          background: #eaeaea;
          padding: 1em;
          border: 1px solid #bababa;
          font-weight: bold;
        }
        .price-per-item__container {
            display: none;
        }
      </style>
    {% 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 -%}
    <input type="hidden" {% if variant_picker_block != blank %}disabled{% endif %} name="id" value="{{ product.selected_or_first_available_variant.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
    %}

    <div class="v-stack gap-4">
      {%- if recipient_feature_active -%}
        <gift-card-recipient class="gift-card-recipient v-stack gap-3">
          {%- assign checkbox_label = 'gift_card.recipient.checkbox' | t -%}
          {%- render 'checkbox', label: checkbox_label, name: 'properties[__shopify_send_gift_card_to_recipient]' -%}

          <div class="gift-card-recipient__fields js:hidden">
            <div class="fieldset">
              {%- liquid
                assign recipient_email_label = 'gift_card.recipient.email_label' | t
                render 'input', type: 'email', label: recipient_email_label, name: 'properties[Recipient email]', value: form.email, required: true

                assign recipient_name_label = 'gift_card.recipient.name_label' | t
                render 'input', label: recipient_name_label, name: 'properties[Recipient name]', value: form.name

                assign send_on_label = 'gift_card.recipient.send_on_label' | t
                render 'input', type: 'date', label: send_on_label, name: 'properties[Send on]', value: form.send_on, pattern: '\d{4}-\d{2}-\d{2}'
                render 'input', type: 'hidden', name: 'properties[__shopify_offset]'

                assign message_label = 'gift_card.recipient.message_label' | t
                render 'input', label: message_label, name: 'properties[Message]', value: form.message, multiline: 3, maxlength: 200, show_max_characters_count: true
              -%}
            </div>
          </div>
        </gift-card-recipient>
      {%- endif -%}

      <buy-buttons class="buy-buttons {% if show_payment_button %}buy-buttons--has-dynamic{% endif %}" template="{{ product.template_suffix | escape }}" form="{{ form_id }}">
        {%- if show_payment_button and atc_button_background == blank and atc_button_text_color == blank -%}
          {%- assign atc_button_style = 'outline' -%}
        {%- else -%}
          {%- assign atc_button_style = 'solid' -%}
        {%- endif -%}

        {%- render 'button', content: button_content, type: 'submit', disabled: button_disabled, style: atc_button_style, background: atc_button_background, text_color: atc_button_text_color, stretch: true -%}

        {%- if show_payment_button -%}
          {{- form | payment_button -}}

          <style>
            #shopify-section-{{ section.id }} .shopify-payment-button {
              {%- if payment_button_background != blank and payment_button_background != 'rgba(0,0,0,0)' -%}
                --button-background: {{ payment_button_background.rgb }};
              {%- endif -%}

              {%- if payment_button_text_color != blank and payment_button_text_color != 'rgba(0,0,0,0)' -%}
                --button-text-color: {{ payment_button_text_color.rgb }};
              {%- endif -%}

              {%- unless product.selected_or_first_available_variant.available -%}
                display: none;
              {%- endunless -%}
            }
          </style>
        {%- endif -%}
      </buy-buttons>
    </div>
  {%- endform -%}
{%- else -%}
  <buy-buttons class="buy-buttons" template="{{ product.template_suffix | escape }}" form="{{ form_id }}">
    {%- assign button_content = 'product.general.add_to_cart_button' | t -%}
    {%- render 'button', content: button_content, type: 'submit', background: variant_picker_block.settings.atc_button_background, text_color: variant_picker.settings.atc_button_text_color, stretch: true -%}
  </buy-buttons>
{%- endif -%}
{% endif %}
国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/

元の投稿で解決策を見る

6件の返信6
福水正太
Shopify Expert
63 24 22

はじめまして。

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

 

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

 

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

 

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

--------------------------------------------------------------------------------------------------------------

1. 「販売開始_〇月〇日〇時」というタグを持っている場合は、商品ページのカートに追加するボタンが非活性になるような機能をテーマに実装する(Liquid含むフロントエンド開発の知識が必要)

--------------------------------------------------------------------------------------------------------------

2. 販売時刻を指定したい商品Aに「販売開始_〇月〇日〇時」というタグをつける(この時点でボタンは非活性になる)

--------------------------------------------------------------------------------------------------------------

3. ShopifyFlowの予定時刻トリガーを使って「〇月〇日〇時になったらタグを持っている商品AからタグAを削除する」というワークフローを設定する

--------------------------------------------------------------------------------------------------------------

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

--------------------------------------------------------------------------------------------------------------

 

以上です。

 

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

 

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

 

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

 

以上となります。

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
福水正太
Shopify Expert
63 24 22

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

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
ii2
観光客
8 0 1

福水さま

 

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

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

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

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

 

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

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

スクリーンショット 2023-11-06 14.20.40.png

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

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

 

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

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

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

 

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

福水正太
Shopify Expert
63 24 22

成功

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

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 '販売開始日時指定テキスト_' %}
      <div class="preorder-button">{{ tag | remove:'販売開始日時指定テキスト_' }}</div>
      <style>
        .preorder-button {
          text-align: center;
          background: #eaeaea;
          padding: 1em;
          border: 1px solid #bababa;
          font-weight: bold;
        }
        .price-per-item__container {
            display: none;
        }
      </style>
    {% 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 -%}
    <input type="hidden" {% if variant_picker_block != blank %}disabled{% endif %} name="id" value="{{ product.selected_or_first_available_variant.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
    %}

    <div class="v-stack gap-4">
      {%- if recipient_feature_active -%}
        <gift-card-recipient class="gift-card-recipient v-stack gap-3">
          {%- assign checkbox_label = 'gift_card.recipient.checkbox' | t -%}
          {%- render 'checkbox', label: checkbox_label, name: 'properties[__shopify_send_gift_card_to_recipient]' -%}

          <div class="gift-card-recipient__fields js:hidden">
            <div class="fieldset">
              {%- liquid
                assign recipient_email_label = 'gift_card.recipient.email_label' | t
                render 'input', type: 'email', label: recipient_email_label, name: 'properties[Recipient email]', value: form.email, required: true

                assign recipient_name_label = 'gift_card.recipient.name_label' | t
                render 'input', label: recipient_name_label, name: 'properties[Recipient name]', value: form.name

                assign send_on_label = 'gift_card.recipient.send_on_label' | t
                render 'input', type: 'date', label: send_on_label, name: 'properties[Send on]', value: form.send_on, pattern: '\d{4}-\d{2}-\d{2}'
                render 'input', type: 'hidden', name: 'properties[__shopify_offset]'

                assign message_label = 'gift_card.recipient.message_label' | t
                render 'input', label: message_label, name: 'properties[Message]', value: form.message, multiline: 3, maxlength: 200, show_max_characters_count: true
              -%}
            </div>
          </div>
        </gift-card-recipient>
      {%- endif -%}

      <buy-buttons class="buy-buttons {% if show_payment_button %}buy-buttons--has-dynamic{% endif %}" template="{{ product.template_suffix | escape }}" form="{{ form_id }}">
        {%- if show_payment_button and atc_button_background == blank and atc_button_text_color == blank -%}
          {%- assign atc_button_style = 'outline' -%}
        {%- else -%}
          {%- assign atc_button_style = 'solid' -%}
        {%- endif -%}

        {%- render 'button', content: button_content, type: 'submit', disabled: button_disabled, style: atc_button_style, background: atc_button_background, text_color: atc_button_text_color, stretch: true -%}

        {%- if show_payment_button -%}
          {{- form | payment_button -}}

          <style>
            #shopify-section-{{ section.id }} .shopify-payment-button {
              {%- if payment_button_background != blank and payment_button_background != 'rgba(0,0,0,0)' -%}
                --button-background: {{ payment_button_background.rgb }};
              {%- endif -%}

              {%- if payment_button_text_color != blank and payment_button_text_color != 'rgba(0,0,0,0)' -%}
                --button-text-color: {{ payment_button_text_color.rgb }};
              {%- endif -%}

              {%- unless product.selected_or_first_available_variant.available -%}
                display: none;
              {%- endunless -%}
            }
          </style>
        {%- endif -%}
      </buy-buttons>
    </div>
  {%- endform -%}
{%- else -%}
  <buy-buttons class="buy-buttons" template="{{ product.template_suffix | escape }}" form="{{ form_id }}">
    {%- assign button_content = 'product.general.add_to_cart_button' | t -%}
    {%- render 'button', content: button_content, type: 'submit', background: variant_picker_block.settings.atc_button_background, text_color: variant_picker.settings.atc_button_text_color, stretch: true -%}
  </buy-buttons>
{%- endif -%}
{% endif %}
国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
福水正太
Shopify Expert
63 24 22

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
ii2
観光客
8 0 1

無事動作いたしました。

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