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.
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 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?
I am trying to generate a form which can have multiple recursive fields. I have used https://codepen.io/crickford/pen/ZmJqwd this demo (I am not using any custom component). Whenever i am using "$ref" it ignores it. I am using vue-json-schema-form. Here is the link of github https://github.com/crickford/vue-json-schema-form.
Even if i use "$ref":"#" it's not working.
My Json-schema is valid. Even if i replace the following schema in codepen i don't get expected result, where as it is giving me proper output by editing schema property of the source in this link http://www.alpacajs.org/docs/api/recursive-references.html
I don't know where am I mistaking !! At least in codepen attached schema code should work.
Kindly guide me or share working demo fiddle with me. Thanks in advance.
Here is my schema:
{
"type": "object",
"title": "",
"properties": {
"Namespace": {
"type": "string",
"title": "Namespace ",
"attrs": {
"placeholder": "Namespace",
"title": "Please enter Namespace"
}
},
"Name": {
"type": "string",
"title": "Display Name : ",
"attrs": {
"placeholder": "Display Name",
"title": "Please enter Display name"
}
},
"SubSteps": {
"type": "array",
"title": "SubSteps",
"items": {
"type": "object",
"title": "Sub step",
"$ref": "#/definitions/SubSteps"
}
}
},
"definitions": {
"SubSteps": {
"type": "object",
"title": "SubStep item",
"properties": {
"Namespace": {
"type": "string",
"title": "Namespace ",
"attrs": {
"placeholder": "Namespace",
"title": "Please enter Namespace"
}
},
"Name": {
"type": "string",
"title": "Display Name : ",
"attrs": {
"placeholder": "Display Name",
"title": "Please enter Display name"
}
},
"SubSteps": {
"type": "array",
"title": "SubSteps",
"items": {
"type": "object",
"title": "Sub step",
"$ref": "#/definitions/SubSteps"
}
}
}
}
},
"required": [
"Name"
]
}
It doesn't look like the library in question supports the use of $ref. Therefore you would have to submit an issue and / or pull request to add the functionality you want.
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.
I a using Microsoft Bot Framework and am trying to do a HTTP Post with an image sent to the bot as an attachment. I see a ContentURL in the Attachment object but cannot figure out how to POST the image to my API with RestSharp?
Any Ideas?
There are a couple possibilities here.
First is to send an image as an attachment. Please see this documentation you JSON would look like this:
{
"type": "message",
"from": {
"id": "12345678",
"name": "sender's name"
},
"conversation": {
"id": "abcd1234",
"name": "conversation's name"
},
"recipient": {
"id": "1234abcd",
"name": "recipient's name"
},
"text": "Here's a picture of the duck I was telling you about.",
"attachments": [
{
"contentType": "image/png",
"contentUrl": "http://aka.ms/Fo983c",
"name": "duck-on-a-rock.jpg"
}
],
"replyToId": "5d5cdc723
}
the other possibility is that you could send an image in a card (which has 2 possibilities itself). For this you can see this documentation for rich cards. in this here is an example of the JSON for that
{
"type": "message",
"from": {
"id": "12345678",
"name": "sender's name"
},
"conversation": {
"id": "abcd1234",
"name": "conversation's name"
},
"recipient": {
"id": "1234abcd",
"name": "recipient's name"
},
"attachments": [
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"title": "title goes here",
"subtitle": "subtitle goes here",
"text": "descriptive text goes here",
"images": [
{
"url": "http://aka.ms/Fo983c",
"alt": "picture of a duck",
"tap": {
"type": "playAudio",
"value": "url to an audio track of a duck call goes here"
}
}
],
"buttons": [
{
"type": "playAudio",
"title": "Duck Call",
"value": "url to an audio track of a duck call goes here"
},
{
"type": "openUrl",
"title": "Watch Video",
"image": "http://aka.ms/Fo983c",
"value": "url goes here of the duck in flight"
}
]
}
}
],
"replyToId": "5d5cdc723"
}
the second option for cards would be adaptive cards. by using the visualizer you can actually manipulate the JSON and see how it would be rendered in different channels.