Metafields

Metafields are a powerful tool for Zid store owners who want to add extra functionality and customize the look and feel of their online store. They allow you to store specialized information that isn't normally available in the Zid admin panel. This information can be used for internal tracking purposes or displayed on your storefront in various ways.

Benefits of Using Metafields

• Increased Product Information: Provide richer product details to your customers, like burn time for candles, expiration dates for groceries, or calorie information for food items.
• Enhanced Customer Experience: Add features like extra images, videos, or size charts to product or category pages, making it easier for customers to find the information they need.
• Improved Store Management: Use meta fields for internal tracking purposes, such as recording batch numbers or supplier details.

Common Use Cases for Metafields

• Candle Seller: Display burn time for candles on product pages.
• Grocery Store: Show expiration dates for canned goods.
• Food Store: Display calorie information on product pages.
• Fashion Store: Add extra images and videos on product or category pages.
• Shoe Store: Display a size chart on product pages.

Metafields Can Be Used In:

• Products
• Categories
• Pages

Supported Data Types:

• Text (ar/en)
• Rich Text (HTML) (ar/en)
• Number
• Date
• Time
• Image
• File (pdf, txt, mp4, mp3, css, ppt, pptx, doc, docx, xls, xlsx, csv, json)
• Table
• JSON

Adding Metafields to Your Store:

1. Define Metafields:

• Go to the "Metafields Definition" section in your Zid admin panel.

• Select the model you want to add the metafield to (e.g., Product, Category, Page).

• Click "Add New Metafield" ("إضافة حقول مخصصة").
  

• Provide a name (ar/en), slug (a unique identifier for code), and data type.

• Check the "Storefront" checkbox if you want the information to be displayed on your website.
  

2. Fill Metafields:

• On the product or category page editing screen, look for the "Custom Fields" section ("الحقول المخصصة").
• Enter the relevant value for the metafield you created.
  
• Save the page.

3. View Your Metafields in Action:

• Save your changes and view the product, category, or page in your storefront.
• The system will display the new metafield with the information you entered.
  

Displaying Metafields in Themes

As a theme developer, you can display Metafields in your theme using two methods:

1-Using Theme Templates:

Product Page (product.twig):

<section>
  {{ template_for_product_metafields }}
</section>

Category Page (category.twig):

<section>
  {% include 'template_for_category_metafields' %}
</section>

Blog Page (blog.twig):

<section>
{% include 'template_for_blogs_metafields' %}
</section>

2-Using the Metafields Object:

The Metafields object will be attached to each product, category, and blog object, allowing you to access and display metafields directly within your templates.

{
  "status": "success",
  "data": {
    "product": {
      "id": "e72fe62e-cc07-45b6-8b3d-95e9856a0ed5",
      .
      .
      .
      "metafields": [
        {
          "id": "df3136ef-27eb-4568-825b-e67ec4442030",
          "name": {
            "en": "Kcalories",
            "ar": "السعرات الحرارية"
          },
          "slug": "kcalories-1",
          "data_type": "text",
          "display_order": 1,
          "value": {
            "ar": "400 كالوري",
            "en": "400 Kal"
          }
        }
      ]
      .
      .
      .
    },
    "disallowedTags": [
      "<?php",
      "<script",
      "<?"
    ]
  }
}

Valuable Resources:

• Theme Starter Sample on GitHub
• Getting Started with Zid Themes