I have a section sections/two-col-cta.liquid with a schema defined as per below:
{% schema %}
{
"name": "Two Column CTA",
"class": "section",
"settings": [
{
"type": "select",
"id": "color_select",
"options": [
{
"value": "option_1",
"label": "option_1"
},
{
"value": "option_2",
"label": "option_2"
},
{
"value": "option_3",
"label": "option_3"
},
{
"value": "option_4",
"label": "option_4"
},
{
"value": "option_5",
"label": "option_5"
}
],
"default": "image_first",
"label": "t:sections.two-col-content-img.settings.layout.label",
"info": "t:sections.two-col-content-img.settings.layout.info"
}
]
}
{% endschema %}
This same color_select setting is used/duplicated across multiple different sections (sections/.liquid files). Is there a way I can define this setting globally and just pull it into my sections instead of re defining it every time I want to a color select?
Related
I am creating the shopify public app and did some jquery code in the app in front end. I need to include multiple external jQuery in the front end via app with the help of theme extensions. I have included front_shop.js in schema code which is given below, but i have to include 2 more external js also Please let me know how i can do this
{% schema %}
{
"name": "Lyfsize",
"target": "section",
"stylesheet": "front_shop.css",
"javascript": "front_shop.js",
"templates": ["product", "index"],
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Click here"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color for anchor tag",
"default": "#000000"
},
{
"type": "color",
"id": "form_text_color",
"label": "Text Color for Form Label",
"default": "#000000"
},
{
"type": "color",
"id": "form_button_text_color",
"label": "Text Color for Submit Button",
"default": "#ffffff"
},
{
"type": "color",
"id": "form_button_background_color",
"label": "Submit Button background color",
"default": "#000000"
},
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show Form",
"default": false
}
]
}
{% endschema %}
If your frontend is plain HTML, add
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
to the html file before JQuery is used.
I've been enjoying learning Liquid using YouTube videos by Shopify developers and staff, but I've run into a rather bizarre hitch. It is my understanding that Block types are arbitrary text strings that I determine. The YouTube video I'm following using the type "select" to create multiple blocks with a callout in the presets section. However, the debugger rejects this term as an "invalid ID."
My schema is below:
{% schema %}
{
"name": "Footer Section",
"max_blocks": 3,
"settings": [
{
"id": "footer-section-title",
"type": "text",
"label": "Footer Title",
"default": "Footer"
}
],
"blocks": [
{
"type": "select",
"name": "select",
"settings:": [
{
"id": "footer-linktext",
"type": "text",
"label": "Link Text",
"default": "Click Here"
},
{
"id": "footer-linkurl",
"type": "url",
"label": "Link URL",
"default": "Click Here"
}
]
}
],
"presets": [
{
"name": "Footer Blocks",
"category": "Footer",
"blocks": [
{
"type": "select"
},
{
"type": "select"
}
]
}
]
}
{% endschema %}
This is nearly identical to the one that appears to work in the video in 2017. Have things changed? I've tried other terms, but all are rejected.
Thank you in advance!
Your "settings:": [ have additional : in the string. That's what is throwing errors.
Change it to only "settings" and you shouldn't have problems.
I am trying out Angular6 JSON form for my application and stuck in the issue of having array schema
The basic layout looks like
{
"schema": {
"type": "array",
"properties": {
"type": { "type": "string" },
"number": { "type": "string" },
}
},
"layout": [
{
"type": "array",
"items": [ {
"type": "div",
"displayFlex": true,
"flex-direction": "row",
"items": [
{ "key": "type", "flex": "1 1 50px",
"notitle": true, "placeholder": "Type"
},
{ "key": "number", "flex": "4 4 200px",
"notitle": true, "placeholder": "Phone Number"
}
]
} ]
}
],
"data": [
{ "type": "cell", "number": "702-123-4567" },
{ "type": "work", "number": "702-987-6543" }
]
}
But I am not getting the expected outcome, that is Form is prefilled with the data
[
{ "type": "cell", "number": "702-123-4567" },
{ "type": "work", "number": "702-987-6543" }
]
Refer: https://hamidihamza.com/Angular6-json-schema-form/
Based on your code there are some parts you may need to revisit.
The schema type should be either an object or boolean based on the documentation http://json-schema.org/latest/json-schema-core.html
Within the schema section, it seems that you want the type and number to be your properties of a JSON instance. Having this you can only pass one instance of data to the framework to fill in your properties because the framework cannot decide on which value to use for your property of type string.
In case of looking for having an array of type and number, you can have a property like "phone number" with the type array. below is an example from angular6-json-schema flex layout example which I think you had as your reference.
"schema": {
...
"phone_numbers": {
"type": "array",
"items": {
"type": "object",
"properties": {
"type": { "type": "string", "enum": [ "cell", "home", "work" ] },
"number": { "type": "string" }
},
"required": [ "type", "number" ]
}
And pass your data having something as follows:
"data": {
...
"phone_numbers": [
{ "type": "cell", "number": "702-123-4567" },
{ "type": "work", "number": "702-987-6543" }
],
}
According to Shopify theme tutorial https://help.shopify.com/themes/development/theme-editor/settings-schema
files, we can define theme setting through set {% schema %} part like the following example:
{% schema %}
{
"name": "Line",
"class": "index-section",
"settings": [
{
"type": "radio",
"id": "small_line",
"label": "Correct Gap",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "gap1",
"label": "Different Gap"
}
],
"default": "none"
}
],
"presets": [
{
"name": "Line",
"category": "Design",
"settings": {
}
}
]
}
{% endschema %}
My question if there is a way we can set this settings to be dynamic in the schema part like define "small_line" options as a variable in the above example, something similar to the following
{% schema %}
{
"name": "Line",
"class": "index-section",
"settings": [
{
"type": "radio",
"id": "small_line",
"label": "Correct Gap",
"options": MY_OPTIONS_VAR,
"default": "none"
}
],
"presets": [
{
"name": "Line",
"category": "Design",
"settings": {
}
}
]
}
{% endschema %}
No you can't add any liquid code in your schema object.
Everything there needs to be entered as static information.
I'm wondering if nested block on shopify schema is possible. I search on it but I can't find an answer. Please help me out if anyone knows how to do it.
Here's my schema
"blocks": [
{
"type": "block_main",
"name": "Block Main",
"settings": [
{
"type": "text",
"id": "block-name",
"label": "Quote"
},
{
"type": "url",
"id": "block-link",
"label": "URL"
}
],
"blocks": [
{
"type": "sub_block",
"name": "Sub Block",
"settings": [
{
"type": "text",
"id": "sub-block-name",
"label": "Quote"
},
{
"type": "url",
"id": "sub-block-link",
"label": "URL"
}
]
}
]
}
]
No it's not possible. ( sadly )
You will have to use a different logic in order to create nested blocks.
For example you can use a link_list field and use the text and URL from the links to populate the information you are looking.
Do this way (This is for example)
{
"name": "FAQs",
"settings": [
{
"id": "dev-faq-title",
"type": "text",
"label": "FAQ Title",
"default": "Frequently Asked Questions"
}
],
"blocks":[
{
"type": "block-1",
"name": "Block 1",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "text",
"id": "accordion-title",
"label": "Accordion Title"
}
]
},
{
"type": "block-2",
"name": "Block 2",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
}
]
},
{
"type": "block-3",
"name": "Block 3",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
}
]
}
],
"presets": [
{
"category": "Text",
"name": "Top Bar"
}
]
}
I think this is nothing but just a way to represent data communication.
To do this I always create a associative array then convert it into JSON. Look this sample PHP code
//Make associative array
$data = array("blocks" => array("type" => "block_main", "name": "Block Main","settings" => array("0" => array("type" => "text", "id": "block-name", "label": "Quote"), [1] => array(type": "url", "id": "block-link", "label": "URL")), "blocks": "type": "sub_block", "name": "Sub Block", "settings": array("0" => array("type": "text", "id": "sub-block-name", "label": "Quote"), "1" => array(type": "url", id": "sub-block-link", "label": "URL"))))
//encode array to json
$json = json_decode($data)
And the same would be happening on server side, When we send Post request. It would also render the nested JSON request to associative array then react on the data.