פיתוח Sections ו-Blocks מותאמים אישית ל-Shopify

אתם פותחים את עורך התמה, משנים טקסט בקטע (Section), ובאתר—כלום לא קורה. או שהבלוקים זזים, או שההגדרות לא חלות. נשמע מוכר? כמפתחים עם 8 שנות ניסיון ב-Shopify, אנחנו מכירים כל מכשול. נראה לכם כיצד להגדיר נכון Sections ו-Blocks כך שצוות התוכן שלכם יוכל לעבוד בלעדיכם, ועורך התמה לא ישבור את הפריסה.

Online Store 2.0 הביא כלי עוצמתי—קטעים עם בלוקים. אבל צריך להשתמש בהם בחוכמה. סכמה (Schema) שגויה הופכת גמישות לסיוט: בלוקים חופפים, הגדרות לא נשמרות, פרסטים לא מופיעים. להלן הפרקטיקה שמבטלת את הבעיות האלה.

כיצד להימנע מהתנגשויות בלוקים

לכל בלוק בתוך קטע חייב להיות type ייחודי. אם לשני בלוקים יש אותו type, הם מתנהגים כאחד—ההגדרות דורסות זו את זו. השתמשו בערכי type שונים או הגבילו את הכמות דרך max_blocks. כמו כן, תמיד הוסיפו את המאפיין {{ block.shopify_attributes }}—הוא מאפשר לעורך התמה לזהות נכון כל בלוק.

מדוע קטעים סטטיים מסוכנים

קטעים סטטיים מקודדים קשיח ב-layout/theme.liquid. לא ניתן להזיז או למחוק אותם מהעורך—רק דרך קוד. זה מגדיל את זמן העריכה פי 3 בהשוואה לקטעים דינמיים. לכל הפרויקטים החדשים, אנו ממליצים על קטעים דינמיים: הם מנוהלים דרך תבנית ה-JSON של הדף, מה שנותן למנהל התוכן שליטה מלאה ללא גישה לקוד.

כיצד קטעים עובדים

קטע הוא קובץ ב-/sections/ המכיל תבנית Liquid וסכמת JSON בקובץ אחד. הסכמה מתארת את הגדרות הקטע ואת סוגי הבלוקים שהוא מקבל. השדה המרכזי הוא presets: בלעדיו, הקטע לא יופיע ברשימת "הוסף קטע". מידע נוסף על Liquid ניתן למצוא בויקיפדיה.

קטע מינימלי:

{%- comment -%} sections/text-banner.liquid {%- endcomment -%}
<div class="text-banner text-banner--{{ section.settings.alignment }}">
  <div class="container">
    {% if section.settings.heading != blank %}
      <h2>{{ section.settings.heading }}</h2>
    {% endif %}
    {% if section.settings.text != blank %}
      <div class="text-banner__body">{{ section.settings.text }}</div>
    {% endif %}
  </div>
</div>
{% schema %}
  {
    "name": "Текстовый баннер",
    "tag": "section",
    "class": "section-text-banner",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Заголовок",
        "default": "Заголовок секции"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Текст"
      },
      {
        "type": "select",
        "id": "alignment",
        "label": "Выравнивание",
        "options": [
          {
            "value": "left",
            "label": "По левому краю"
          },
          {
            "value": "center",
            "label": "По центру"
          },
          {
            "value": "right",
            "label": "По правому краю"
          }
        ],
        "default": "center"
      }
    ],
    "presets": [
      {
        "name": "Текстовый баннер"
      }
    ]
  }
{% endschema %}

קטעים סטטיים לעומת דינמיים: השוואה

קטעים דינמיים מנצחים פי 3 במהירות ביצוע עריכות. זה חשוב במיוחד לחנויות שבהן התוכן משתנה מדי שבוע.

סוגי הגדרות

בלוקים בתוך קטע

בלוקים הם אלמנטים דינמיים הניתנים לחזרה בתוך קטע. דוגמה—קטע "רשת תכונות":

{%- comment -%} sections/features-grid.liquid {%- endcomment -%}
<div class="features-grid features-grid--cols-{{ section.settings.columns }}">
  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when 'feature_card' -%}
        <div class="feature-card" {{ block.shopify_attributes }}>
          {%- if block.settings.icon != blank -%}
            <img src="{{ block.settings.icon | image_url: width: 80 }}" alt="{{ block.settings.icon.alt | escape }}" width="80" height="80" loading="lazy" >
          {%- endif -%}
          <h3>{{ block.settings.title }}</h3>
          <p>{{ block.settings.description }}</p>
        </div>
      {%- endcase -%}
  {%- endfor -%}
</div>
{% schema %}
{
  "name": "Сетка преимуществ",
  "tag": "section",
  "settings": [
    {
      "type": "range",
      "id": "columns",
      "min": 2,
      "max": 4,
      "step": 1,
      "label": "Количество колонок",
      "default": 3
    }
  ],
  "blocks": [
    {
      "type": "feature_card",
      "name": "Карточка преимущества",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Иконка"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Заголовок",
          "default": "Преимущество"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Описание"
        }
      ]
    }
  ],
  "max_blocks": 12,
  "presets": [
    {
      "name": "Сетка преимуществ",
      "blocks": [
        {
          "type": "feature_card"
        },
        {
          "type": "feature_card"
        },
        {
          "type": "feature_card"
        }
      ]
    }
  ]
}
{% endschema %}

המאפיין header הוא חובה—הוא מוסיף מאפייני נתונים לעריכה מובנית בעורך התמה.

תהליך יצירת קטע שלב-אחר-שלב

1. צרו קובץ {%- comment -%} sections/features-grid.liquid {%- endcomment -%} <div class="features-grid features-grid--cols-{{ section.settings.columns }}"> {%- for block in section.blocks -%} {%- case block.type -%} {%- when 'feature_card' -%} <div class="feature-card" {{ block.shopify_attributes }}> {%- if block.settings.icon != blank -%} <img src="{{ block.settings.icon | image_url: width: 80 }}" alt="{{ block.settings.icon.alt | escape }}" width="80" height="80" loading="lazy" > {%- endif -%} <h3>{{ block.settings.title }}</h3> <p>{{ block.settings.description }}</p> </div> {%- endcase -%} {%- endfor -%} </div> {% schema %} { "name": "Сетка преимуществ", "tag": "section", "settings": [ { "type": "range", "id": "columns", "min": 2, "max": 4, "step": 1, "label": "Количество колонок", "default": 3 } ], "blocks": [ { "type": "feature_card", "name": "Карточка преимущества", "settings": [ { "type": "image_picker", "id": "icon", "label": "Иконка" }, { "type": "text", "id": "title", "label": "Заголовок", "default": "Преимущество" }, { "type": "textarea", "id": "description", "label": "Описание" } ] } ], "max_blocks": 12, "presets": [ { "name": "Сетка преимуществ", "blocks": [ { "type": "feature_card" }, { "type": "feature_card" }, { "type": "feature_card" } ] } ] } {% endschema %} ב-{{ block.shopify_attributes }}.
2. כתבו את סימון ה-Liquid באמצעות .liquid ו-/sections/.
3. הוסיפו section.settings עם block.settings, {% schema %}, name, ואופציונלית tag.
4. כללו לפחות settings אחד כדי שהקטע יופיע בעורך.
5. חברו את הקטע בתבנית ה-JSON של הדף (לדוגמה, blocks).
6. בדקו בעורך התמה: הוסיפו את הקטע, הגדירו בלוקים, שמרו.

מגבלות למניעת שבירה

preset בהגדרות קטע או בלוק מונע הוספת אלמנטים מיותרים:

// Запрет на дублирование hero-секции
{ "type": "hero-banner", "limit": 1 }
// Не более 6 блоков в слайдере
"max_blocks": 6

מה העבודה שלנו כוללת

• ביקורת על התמה הנוכחית שלכם לקטעים מקודדים קשיח ולא גמישים.
• עיצוב ארכיטקטורת קטעים המותאמת לדרישות החנות שלכם.
• פיתוח של 5–8 קטעים מותאמים אישית עם בלוקים לפי מוקאפים.
• הגדרת סכמות צבעים וגופנים גלובליות.
• שילוב קטעים בתבניות JSON של דפים.
• תיעוד הרכיבים שנוצרו והדרכה לצוות התוכן שלכם.
• אחריות שכל הבלוקים עובדים בעורך התמה (שבועיים של תמיכה לאחר המסירה).

לוח זמנים והערכת עלות

פיתוח של 5–8 קטעים מותאמים אישית עם בלוקים לפרויקט ספציפי: 3–5 ימים. רפקטורינג לתמה קיימת עם העברת תוכן מקודד קשיח לקטעים ניתנים לעריכה: 1–2 שבועות. אם כבר יש לכם תמה אבל הבלוקים מתנהגים בצורה בלתי צפויה, כתבו לנו—נעריך את הפרויקט ביום אחד ונציע תוכנית רפקטורינג. העברנו מעל 50 חנויות ל-Online Store 2.0—יש לנו את הניסיון ואת אחריות האיכות. קבלו ייעוץ למשימות שלכם.