Shopify에서 메타 필드를 설정하여 디스플레이를 전환하는 방법[liquid]

이 보도가 해야 할 일.
!
완성형은 이거예요.
날짜 메타 필드 설정
날짜 표시된 텍스트 수정

원 필드에 설정된 상품은 "00일 이후에 구매할 수 있습니다"

금속장 설정 없는 상품은 당연히 통상적인 느낌입니다.
단계는 다음과 같다.
1. 메타 필드 설정
2.main-prodact.liquid 파일로 코드 쓰기
방법은 이것뿐이지만 여건이 맞지 않아 초보자인 제가 고민이 많았던 것 같아요.
그래서 잊기 전에 출력했어요.
앞으로 Shopify를 혼자 맞춤 제작하고 싶은 분들에게 참고가 된다면 정말 기쁠 것 같습니다.

메타 필드 설정

온라인 주제의 설정에서 메타 필드를 선택합니다.


다섯 개의 원 필드가 있기 때문에 설정하고자 하는 항목에 따라 정의하십시오.
이번에는 상품을 겨냥한 것이기 때문에 상품의 원 필드를 정의했다.

정의를 추가하기 위해서 원 피드를 설정합니다.

이번에는 이렇게 날짜와 관련된 원 필드를 설정했다.

!
이름 공간과 열쇠는test입니다.데이처럼 땡땡.규칙이야.
추가 메타 필드의 코드가 다음 내용으로 설정되면 OK입니다.

섹션 파일의main-product입니다.사용자 정의 liquid

$ shopify theme serve

개발 환경 시작
두 번째 URL을 눌러 개발자 모드를 확인하면서 작업을 진행한다.
죄송합니다. 개발 환경의 작동 방법은 아래에도 설명되어 있습니다.
https://zenn.dev/goriken/articles/c3e2fbf7eb7670

메타 필드가 설정된 상품과 비교

main-product.liquid 파일의

{%- when 'buy_buttons' -%}

.
이 리퀴드 코드 아래에는 카트 등을 넣는 버튼을 만드는 코드가 있다.
메서드
오늘의 시간을 변수로 바꾸다

{% assign today = 'now'| date: '%d' %}

이렇게 해서 오늘의 시간을 변수로 만들었다.
겸사겸사 말씀드리겠습니다.

%d: 일

%s:초

%Y: 년
되다

{% assign purchase_able_to_day = product.metafield.test.day | date: '%d' %}

purchase가 원 필드에 설정한 정보able_to_변수 "day"에 저장할 수 있습니다.

if문을 사용하여 텍스트 표시 변경하기

비교 변수 간에 if 문을 사용하여 디스플레이를 전환합니다.

메타 필드에 설정된 상품일 때

{% if product.metafields.test.day != null %}
{% if purchase_able_to_day > today %}
  〇〇日から購入できます
  
{% else %}
<div class="product-form__bottons">
 <button
  type="submit"
  name="add"
  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 product.selected_or_first_available_varilable == false %}disabled{% endif %}
>

<span>
add to cart
</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>
  {%- if block.settings.show_dynamic_checkout -%}
     {{ form | payment_button }}
  {%- endif -%}
 </div>
{% endif %}
{% else %}

메타 필드에 설정된 품목이 아닌 경우

 {% else %}
<div class="product-form__buttons">
  <button
   type="submit"
   name="add"
   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 product.selected_or_first_available_variant.available == false %}disabled{% endif %}
   >
 <span>
   add to cart
 </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>
{%- if block.settings.show_dynamic_checkout -%}
   {{ form | payment_button }}
 {%- endif -%}
</div>                 
{% endif %}
		  

추후 트레이스 변경 표시

메타 필드에 설정된 날짜와 오늘의 날짜를 비교한 후 00일 이후에 구매할 수 있는 것을 liquid로 표시합니다.

{{ purchase_able_to_day | minus:today }}日後から購入できます

따라서 오늘 메타 필드에 설정된 날짜를 비교하여 텍스트를 자동으로 표시합니다.
맞춤형 제작의 범위가 넓어지고 수준도 조금 높아졌다(이런 느낌)
좀 더 출력하고 싶습니다.