json filtresiyle Liquid hata ayıklama
Bir Liquid nesnesinin içinde ne olduğunu görün: {{ product | json }} konsolda ya da <pre> içinde, yalnızca tema editöründe; JS’e güvenli veri aktarımı da dahil.
- Söz dizimi
- {{ nesne | json }}
- Sınırlama
- {% if request.design_mode %}
- Hariç tutulan
- Varyant inventory_quantity ve inventory_policy
- Plan
- Her plan
- Son kontrol
Kısaca
Liquid’in bir hata ayıklayıcısı yok ama json filtresi buna çok yaklaşır: {{ product | json }} nesnenin tamamını JSON olarak yazar; bunu tarayıcı konsoluna loglayabilir ya da bir <pre> bloğunda gösterebilirsiniz. Çıktıyı {% if request.design_mode %} içine alın ki yalnızca tema editöründe görünsün. Aynı filtre, Liquid verisini JavaScript’e aktarmanın da güvenli yoludur; tırnakları kendisi ekler ve içerideki tırnakları kaçışlar.
Nasıl kullanılır
- İncelediğiniz şablon ya da section’a, {% if request.design_mode %} içinde <script>console.log({{ product | json }});</script> ekleyin.
- Sayfayı tarayıcı konsolu açıkken tema editöründe açın ve loglanan nesneyi genişletin.
- Değerleri sayfanın kendisinde görmek için {{ cart | json | escape }} çıktısını bir <pre> bloğuna yazın.
- İşiniz bitince hata ayıklama kodunu kaldırın; canlıdaki veri aktarımlarını <script type="application/json"> etiketinde tutun.
Kod
debug.liquid{%- comment -%}
Dumps Liquid objects so you can see exactly what a template receives.
Wrapped in request.design_mode so it only renders inside the theme editor;
remove it when you're done. The json filter adds the quotes itself, so
don't wrap the output in quotes.
{%- endcomment -%}
{%- if request.design_mode -%}
<script>
console.log('product', {{ product | json }});
console.log('variant', {{ product.selected_or_first_available_variant | json }});
console.log('template', {{ template.name | json }}, {{ template.suffix | json }}, 'page_type', {{ request.page_type | json }});
</script>
{%- endif -%}
{%- comment -%} Or read it on the page in a <pre> block {%- endcomment -%}
{%- if request.design_mode -%}
<pre style="white-space: pre-wrap">{{ cart | json | escape }}</pre>
{%- endif -%}
pass-data-to-js.liquid{%- comment -%}
The same filter in production: hand Liquid data to JavaScript through a
JSON script tag instead of building JS strings by hand. json escapes quotes,
so product titles with " or ' can't break the script.
{%- endcomment -%}
<script type="application/json" id="ProductData-{{ product.id }}">
{
"id": {{ product.id | json }},
"title": {{ product.title | json }},
"variants": {{ product.variants | map: 'id' | json }}
}
</script>
<script>
const productData = JSON.parse(document.getElementById('ProductData-{{ product.id }}').textContent);
</script>
Lintel tarafından yazıldı. MIT lisansı: kendi mağazanızda da müşteri işlerinizde de ücretsiz kullanabilirsiniz.
Sınırlar ve özel durumlar
- Çıktıyı tırnak içine almayın: json filtresi tırnakları kendisi ekler, fazladan tırnak nesneyi metne çevirir.
- 5 Aralık 2017’den sonra açılan mağazalarda ürün JSON’u varyantların inventory_quantity ve inventory_policy değerlerini içermez; gerekiyorsa tek tek varyantlardan okuyun.
- design_mode dışındaki hata ayıklama çıktısı herkese açıktır: sayfa kaynağında herkes okuyabilir.
- request.design_mode müşterinin gördüğünü değiştirmemeli; bunun gibi yalnızca editöre özel çıktılar için kullanın, özellikler için değil.
Sık sorulan sorular
- Bir Liquid nesnesinin içinde ne olduğunu nasıl görürüm?
- json filtresiyle yazdırın, {{ product | json }}, ve konsola loglayın ya da bir <pre> bloğunda gösterin.
- {{ product | json }} çıktısında inventory_quantity neden yok?
- Shopify, 5 Aralık 2017’den sonra açılan mağazalarda bunu (ve inventory_policy’yi) ürün JSON’undan çıkarır. variant.inventory_quantity değerini doğrudan okuyun.
- Liquid verisini JavaScript’e güvenle nasıl aktarırım?
- {{ değer | json }} çıktısını bir <script type="application/json"> etiketine koyup JSON.parse ile okuyun ya da fazladan tırnak eklemeden doğrudan script içinde atayın.
Shopify belgeleri
- Gösterilen tarihte bir Shopify mağazasında denendi. Shopify yönetim panelini sık değiştirir; bir adım farklı görünüyorsa fikir genellikle hâlâ geçerlidir.
- Örneklerde yer tutucu ID’ler ve your-store.myshopify.com kullanılır. Kendi değerlerinizle değiştirin.
- Kod parçaları MIT lisanslıdır.
Mağazanız için kurulmasını, test edilmesini ve bakımını isterseniz: Shopify geliştirme.
