Liquid、JavaScriptなどに関する質問
現在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.
解決済! ベストソリューションを見る。
成功
ご確認ありがとうございます。
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 %}
はじめまして。
株式会社ファイブビットの福水と申します。
販売開始日時の設定をメタフィールドで設定しても、ブラウザのキャッシュの問題で、指定した時間になっても表示が切り替わらないいため、メタフィールドではなく、ShopifyFlowを使った方法が弊社の推奨になります。
参考URL:https://twitter.com/ShusukeUeno/status/1542804242036977664
具体的には、下記の流れになります。
--------------------------------------------------------------------------------------------------------------
1. 「販売開始_〇月〇日〇時」というタグを持っている場合は、商品ページのカートに追加するボタンが非活性になるような機能をテーマに実装する(Liquid含むフロントエンド開発の知識が必要)
--------------------------------------------------------------------------------------------------------------
2. 販売時刻を指定したい商品Aに「販売開始_〇月〇日〇時」というタグをつける(この時点でボタンは非活性になる)
--------------------------------------------------------------------------------------------------------------
3. ShopifyFlowの予定時刻トリガーを使って「〇月〇日〇時になったらタグを持っている商品AからタグAを削除する」というワークフローを設定する
--------------------------------------------------------------------------------------------------------------
4.〇月〇日〇時になったら、Shopify Flowによって「販売開始_〇月〇日〇時」というタグが商品Aから削除され、ボタンが活性化される(購入できるようになる)
--------------------------------------------------------------------------------------------------------------
以上です。
非常に残念なのですが、現状では、上述している通り、Shopifyの日付メタフィールドは、キャッシュの問題であまり使えない機能になっています。
近々、弊社が運営しているメディアで上記の機能の実装方法などを詳しく紹介した記事を公開する予定なので、公開出来次第、こちらのトピックにも追記させていただきます。
※Shopifyの中の方向けですが、もし上記の行為がShopifyの規約に抵触する場合は、お手数をおかけして大変恐縮ですが、ご教示ください
以上となります。
ご確認の程、何卒よろしくお願いいたします。
上記、記事公開したので、共有させていただきます!
https://bit-commerce.co.jp/blogs/shopify/sale-date-widhout-app
福水さま
丁寧なご回答をいただき、誠にありがとうございます。
メタフィールドはキャッシュの問題で使用できないのですね。。
flowを使用しての設定方法もわかりやすくご教示いただきありがとうございます。
記事も拝見いたしました。
Prestigeでもコードをそのまま貼り付けて上手くいかないかな、と
希望的観測でやってみましたが、やはり大崩れしてしまいました。
ただ、登録時間までボタンが変わり、登録時間後は購入ボタンになっていたので
これが実装できればとても魅力的です。
Prestige用のコードをもしご教示いただけるのであれば
お願いできますでしょうか?
難しければ記事のコードを参考にliquidを勉強してみようと思います。
お手数をおかけし恐れ入りますが何卒よろしくお願いいたします。
成功
ご確認ありがとうございます。
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 %}
こちらの方法も、必ず事前にメモ帳などにコードのバックアップをとっておいてください🙇
無事動作いたしました。
感謝しても仕切れません。ありがとうございました。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 7, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 30, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024