@setens-online
フルバランスさんと同様に、
質問者様は「販売開始・終了日時に合わせてカートボタンを有効・無効化する機能」を実装したい、とお考えであるという前提で回答いたします。
フルバランスさんが参考として記載されているnoteに掲載のソースを確認したところ、次の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>
ご参考まで。
(キュー小坂)
