Shopify Aralık Ayarı: '101 Adıma Kadar' Hatasını Düzelt

"Range settings must have at most 101 steps" hatası, min, max ve step kombinasyonunuzun 101'den fazla olası kaydırıcı pozisyonu ürettiği anlamına gelir. step değerini artırarak, max değerini azaltarak veya geniş bir sayısal aralığa gerçekten ihtiyaç duyduğunuzda number giriş türüne geçerek düzeltebilirsiniz. Kök neden her zaman matematik hatasıdır, bir bug değil.

Ana çıkarımlar

• Shopify aralık ayarlarını maksimum 101 adımla sınırlandırır (schema ayrıştırma sırasında uygulanır).
• Adım sayısı (max - min) / step olarak hesaplanır; sonuç 100 veya daha az olmalıdır.
• Hata Shopify tema editöründe görünür ve bölümün render edilmesini engeller.
• step: 1 değerini daha yüksek bir tam sayıya değiştirmek genellikle en hızlı çözümdür.
• Sınırlandırılmamış bir tam sayı girişine ihtiyaç duyduğunuzda, range yerine number kullanın.

101 adım kuralı nedir?

Shopify range giriş türü, tema editöründe bir kaydırıcı render eder. Platform katı bir sınır uygular: kaydırıcı maksimum 101 pozisyon (0'dan 100'e kadarki adımlar, kapsayıcı) içerebilir. Shopify adım sayısını dahili olarak şu şekilde hesaplar:

steps = (max - min) / step

Bu hesaplama 100'den büyük bir değer üretirse, Shopify şemayı reddeder ve şu hatayı atar:

Error: Invalid schema: setting with id="[your_id]" step invalid.
Range settings must have at most 101 steps.

Bu doğrulama, tema editörü bölümü her yükledişinde çalışır, dolayısıyla şema düzeltilene kadar bölüm tamamen işlevsiz hale gelir.

Not: Shopify'ın giriş ayarları belgelerine göre, dört aralık özniteliğinin tümü (min, max, step, default) sayısal değerler olmalı, dizeler değil. Herhangi biri için bir dize iletmek de hata atar.

Üç en yaygın tetikleyici

Bu kalıpları, müşteriler veya junior geliştiriciler bu duvarla karşılaştığında en sık görüyorum:

1. step: 1 ile geniş aralık, min: 0, max: 500, step: 1 ayarlamak 500 adım oluşturur. Bu en sık karşılaşılan durumdur.
2. Var olan max değerini adımı ayarlamadan bumplama, Bir geliştirici logo genişliği kaydırıcısında max değerini 100'den 300'e değiştirir, adımın 1'de kaldığını unutur.
3. HTML spec örneğinden aralık kopyalama, Standart HTML herhangi bir adım sayısına izin verir; Shopify vermez.

Gerçek topluluk örnekleri, min: 0, max: 500, step: 1 olarak ayarlanmış free_shipping_threshold kaydırıcısı ve 300px'den 550px'e itilen logo_max_width kaydırıcısını adımı yeniden hesaplamadan içerir.

Aralığınızın geçerli olup olmadığını hesaplama

Tek bir kod satırı yazmadan önce bu kontrol yapın:

(max - min) / step <= 100   →  geçerli
(max - min) / step > 100    →  101 adım hatasını atacak

Hızlı örnekler

Sınır tam olarak 100 hesaplanan adımdır (başlangıç noktası dahil 101 kaydırıcı pozisyonu verir). 100'ün üzerindeki herhangi bir değer reddedilir.

Düzeltmenin üç yolu

1. Adım değerini artırın

Bu çoğu durumda doğru çözümdür. 0'dan 200px'e 2'şer adımlarla giden bir padding kaydırıcısı tüccarlar için 101 pozisyon verir ve sınırın içinde kalır.

{
  "type": "range",
  "id": "section_padding",
  "label": "Bölüm dolgusu",
  "min": 0,
  "max": 200,
  "step": 2,
  "unit": "px",
  "default": 40
}

Ne zaman kullanın: Hemen hemen her zaman. Çoğu tasarım değeri (padding, yazı tipi boyutları, opaklık yüzdeleri) geniş bir aralıkta tek birim kesinliğe ihtiyaç duymaz.

2. Max değerini daraltın

Tek adım kesinliği önemliyse (örneğin 1'den 5'e yıldız değerlendirmesi veya 0'dan 100'e yüzde), step: 1 ile 100 adım içinde kalmak için basitçe max değerini azaltın.

{
  "type": "range",
  "id": "free_shipping_threshold",
  "label": "Ücretsiz kargo eşiği",
  "min": 0,
  "max": 100,
  "step": 1,
  "unit": "$",
  "default": 50
}

Bu topluluk tarafından doğrulanmış çözüm, Shopify forumlarında yayılan free_shipping_threshold durumu için kabul gören çözümdür.

3. number türüne geçin

Bir tüccar herhangi bir tam sayı girmesi gerektiğinde (milisaniye cinsinden animasyon gecikmesi, 100'ün üzerinde ürün sayısı, 0-9999 olabilecek eşik), range türü tamamen yanlış araçtır. Bunun yerine number kullanın.

{
  "type": "number",
  "id": "free_shipping_threshold",
  "label": "Ücretsiz kargo eşiği ($)",
  "default": 50
}

number türü herhangi bir tam sayı kabul eder, kaydırıcı kapağı yoktur ve Liquid'te section.settings.free_shipping_threshold aracılığıyla aynı şekilde erişilir. Takas, bir kaydırıcı yerine metin giriş olmasıdır, bu nedenle tüccarlar aralığın dışında değerler girebilir. Korkuluklar önemliyse, bölüm kodunuza bir Liquid kontrolü ekleyin.

Doğru çözümü seçme: karar tablosu

Birçok öğretim atlaması geçen bir şey: aralık yalnızca tam sayıları destekler

Shopify'ın aralık girişi ondalık adım değerlerini desteklemez. Opaklık için 0.1 adımına ihtiyacınız varsa, çözüm değeri tam sayı olarak (0 ile 100) depolamak ve Liquid çıktınızda 100'e bölmektir:

{% assign opacity = section.settings.overlay_opacity | divided_by: 100.0 %}
<div style="opacity: {{ opacity }}">

Bu kalıp göründüğü kadar temiz: tüccar 0-100 kaydırıcısı görür, CSS'niz 0.0-1.0 float alır. Hiçbir hack gerekmez.

Yayınlamadan önce çözümü doğrulama

Shopify'ın resmi linting CLI'si olan Theme Check, bu hatayı yerel geliştirme sırasında yakalar. Herhangi bir şema değişikliğini pushlamadan önce bunu çalıştırın:

shopify theme check

Shopify admin kod editöründe doğrudan çalışıyorsanız (yerel CLI kurulumu olmadan), bölüm dosyasını kaydedin ve tema editörü önizlemesini yeniden yükleyin. Şema hala geçersizse, hata özelleştiricide üst kısımda kırmızı banner olarak görünür.

Theme Check'in şema doğrulaması ve argument hatalarını nasıl işlediğine daha derinlemesine bakmak için Shopify Theme Check: Tek Dosya Yolu Argümanı Neden Çalışmıyor bölümüne bakın.

Herhangi bir aralık ayarı eklemeden önceki pratik kontrol listesi

Her yeni range bloğu yazdığınızda bu listeyi kullanın:

• (max - min) / step hesaplayın ve sonucun 100 veya altında olduğunu doğrulayın.
• Dört özniteliğin tümünün (min, max, step, default) dizeler değil, tam sayılar olduğunu doğrulayın.
• default değerinin min ile max arasında olduğunu doğrulayın.
• Sorun: bu değer gerçekten bir kaydırıcıdan fayda sağlıyor mu? Hayırsa, number, select veya text kullanın.
• Üretime pushlamadan önce tema editöründe test edin.

Her şema giriş türü ve her birinin ne zaman kullanılacağına ilişkin tam bir döküm için, Shopify tema geliştirme kılavuzuna bakın.

Özet

"Range parameters must have at most 101 steps" hatası saf matematiktir. (max - min) / step formülü 100 veya daha az üretmelidir. Adımınızı genişletin, max değerinizi sınırlandırın veya number türüne geçin. Bu düzeltmelerin hiçbiri Shopify plan yükseltmesi, tema yeniden yüklemesi veya destek biletine ihtiyaç duymaz. Kısıtlamayı bir kez anlayın ve bir daha asla ona çarpmayacaksınız.