What is the correct way to use the 'blocks' key in app schema?

emcfarlane
Visitor
2 0 4

What is the full app blocks schema?

https://shopify.dev/apps/online-store/theme-app-extensions/extensions-framework#schema shows its similar to https://shopify.dev/themes/architecture/sections/section-schema#app-block-schema but adding the key "blocks" I get the error uploading the app: unknown key 'block

...
    "blocks": [
      {
        "name": "Slide",
        "type": "slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          }
        ]
      }
    ]
{% endschema %}
Replies 12 (12)

LitExtension
Shopify Partner
4860 1002 1135

Refer https://github.com/Shopify/dawn/blob/main/sections/apps.liquid
You just need to use "type": "@app", it will work fine.
Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

jagthedrummer
Shopify Partner
6 1 4

I'm also curious about this. My app needs to have some repeated blocks. It would be convenient to allow people to manage them in the theme customization area. But the `blocks` attribute doesn't seem to be supported in the `schema` section for an app extension. It would be nice to have a full schema reference so we know what all is available and/or not allowed. The current documentation makes it sound like everything supported by the section schema is also supported in app extensions, but that doesn't seem to be the case.

Jamflynt
Shopify Partner
35 0 17

@emcfarlane @jagthedrummer Did you ever find anything? I am struggling with the same thing. 

@LitExtension That is not what they were asking for. When you use the same schema in an Theme App Extension block you get the the following error: 

Validation errors                                                           │
│    • bundle: [blocks/styles-selector-container.liquid] Invalid tag           │
│      'schema': unknown key 'blocks',                                         │
│      [blocks/styles-selector-container.liquid] Invalid tag 'schema':         │
│      unknown key 'presets'   


Using @app doesn't help in this case, only when building a section to take app blocks, not within the app block itself. 

Nazar4
Shopify Partner
7 0 1

Did you find a solution? I have the same problem((

Jamflynt
Shopify Partner
35 0 17

@Nazar4 No built in solution for this one that I have found. Here is the full list of Schema that the app blocks can take. Note I could not find a good list of Settings for the app blocks in the documentation. 

In my case, figured out a workaround. I needed repeating blocks for specific products to then manipulate. I put said products in a collection which I then looped through by creating a block collection setting and referencing it (see Settings in the documentation linked above) to dynamically create the blocks based on the number of products in the collection. For the settings of each dynamically created block, I captured an index at the beginning of the loop and then referenced that in the products list returned by the collection setting, like so: 

 

<image-carousel
          id="image-carousel-{{ i }}"
          data-images="{{ block.settings.collection_setting.products[index].images | json | escape }}"
        ></image-carousel>

 

I passed things to the JS file as needed via HTML data attributes. 

I know everyone's use case is different, but hopefully this may help you! 

Nazar4
Shopify Partner
7 0 1

There is no key "blocks" in your shema?? But you use  block in your HTML

data-images="{{ block.settings. ..... }}"

How its possible?? Can you show the structure of your liquid file, please??

Jamflynt
Shopify Partner
35 0 17

`block` is just a Liquid object you can use inside of a Section or App block. Its what you reference to access the settings in each: https://shopify.dev/docs/api/liquid/objects#block

You might want to familiarize yourself with Shopify Liquid objects as well. This is also a handy Liquid cheatsheet from Shopify: https://www.shopify.com/partners/shopify-cheat-sheet 

Nazar4
Shopify Partner
7 0 1

I mean that when I use "blocks" and "presets" in my schema I recive a  Validation errors. Errors are the same as on your screen:

 

   Invalid tag  'schema': unknown key 'blocks',

   Invalid tag 'schema':  unknown key 'presets'

 

Here is my schema
{% schema %}
{  
   "name""About",
   "target""section",
   "settings": [
      ....
   ],
   "blocks": [
      {
         "name""Counter",
         "type""counter",
         "settings": [
            ....
         ]
      }
   ],
   "presets": [
      {
         "name""About",
         "blocks": [
            {
               "type""counter"
            },
            {
               "type""counter"
            }
         ]
      }
   ]
}
{% endschema %}

 

 
Nazar4
Shopify Partner
7 0 1

Using @app doesn't help me. I have no idea what to do, and cant find a solution of this problem.

Jamflynt
Shopify Partner
35 0 17

Theme extension App blocks cannot take the `blocks` or `presets` schema. I believe that is in Sections only; app blocks cannot take everything sections can and are different things entirely. App blocks can only take the schema as noted in the documentation that I shared above.

You will not be able to create blocks and/or repeating blocks the way you showed in your shared schema within an theme extension app block.

Nazar4
Shopify Partner
7 0 1

You mean I cannot use forloop to render the same bocks in extention??

 
Jamflynt
Shopify Partner
35 0 17

Using invalid Schema? No. You'll have to iterate through something else, like a Collection.

Theme app extension blocks aren't intended to act like Sections from what I can gather. They are much more limited, and really meant for simple blocks (like star ratings) that the user can drag and drop into the Theme. In fact there are quite a few limitations placed on them. For more complex App blocks you have to get creative.