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.
Related
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 need to add url option in my shopify custom section
I am using below code for this but instead entering url I want dynamic selection of url.
{
"type": "text",
"id": "button_url",
"label": "Button url"
},
please replace code mentioned below.
{
"type": "text",
"id": "button_url",
"label": "Button url"
},
to
{
"type": "url",
"id": "button_url",
"label": "Button url"
},
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.
Okey. I have a jsonschema as below. I am trying to get all the items (colors - checkboxes) clicked by default when the radio button "YES" is marked. On the contrary, if the "NO" button is clicked, all the colors will be unchecked.
JsonSchema
{
"title": "Item Type Filtering Form",
"description": "Form for filtering Item Types according to selected Attribute Values.",
"type": "object",
"properties": {
"colorAll": {
"type": "boolean",
"title": "Seat Color All",
"enum": [
false,
true
],
"enumNames": [
"NO",
"YES"
],
"default": true
},
"colorList": {
"type": "array",
"title": "Seat Color",
"items": {
"type": "object",
"enum": [
{
"id": 1,
"label": "RED"
},
{
"id": 2,
"label": "BLUE"
},
{
"id": 3,
"label": "GREEN"
}
],
"enumNames": [
"RED",
"BLUE",
"GREEN"
]
},
"uniqueItems": true
}
}
}
UISchema
{
"colorAll": {
"ui:widget": "radio",
"ui:options": {
"inline": true
}
},
"colorList": {
"ui:widget": "checkboxes",
"ui:options": {
"inline": true
}
}
}
I am practising it on the page https://mozilla-services.github.io/react-jsonschema-form/# but none of my tries is working how I described above...
I thought, that I can make it with "default:" keyword and put all the values into it -> JsonSchema is valided, but it didn't work.
Can somebody help me with it?
Currently It does not seems to be possible
{
"title": "Schema dependencies",
"description": "These samples are best viewed without live validation.",
"type": "object",
"properties": {
"conditional": {
"title": "Conditional",
"$ref": "#/definitions/person"
}
},
"definitions": {
"person": {
"title": "Person",
"type": "object",
"properties": {
"colorAll": {
"type": "string",
"enum": [
"No",
"Yes"
],
"default": "No"
}
},
"required": [
"colorAll"
],
"dependencies": {
"colorAll": {
"oneOf": [
{
"properties": {
"colorAll": {
"enum": [
"Yes"
]
},
"colorList": {
"type": "array",
"title": "Seat Color",
"items": {
"type": "string",
"enum": [
"RED",
"BLUE",
"GREEN",
"Yes Only",
"ABC"
]
},
"default": [
"RED",
"BLUE",
"Yes Only"
],
"uniqueItems": true
}
}
},
{
"properties": {
"colorAll": {
"enum": [
"No"
]
},
"colorList": {
"type": "array",
"title": "Seat Color",
"items": {
"type": "string",
"enum": [
"RED",
"BLUE",
"GREEN"
]
},
"uniqueItems": true
}
}
}
]
}
}
}
}
}
if you run the above in playground, the list of colors changes, but it does not select the default ones. but if you have colorList has standalone component, it selects the default ones.
To change the default selected values, you need to use the "onChange" property of the form (https://react-jsonschema-form.readthedocs.io/en/latest/#form-data-changes) and handle that logic on your own. Thus, you can check if the radio button was toggled to true or false, and if so, set colorList to
[
{
"id": 1,
"label": "RED"
},
{
"id": 2,
"label": "BLUE"
},
{
"id": 3,
"label": "GREEN"
}
]
or [] respectively.
Note the following warning in the doc:
WARNING: If you have situations where your parent component can re-render, make sure you listen to the onChange event and update the data you pass to the formData attribute.
Here's an example codepen I set up that manages the two properties:
https://codepen.io/anon/pen/VOjJmY
Also note that because the actual value is an object, I think you have to reuse the same object (hence the direct use of schema.properties.colorList.items.enum).
I think there is a bug with React JSON Schema Form because the checkboxes' UI state doesn't get updated in the right lifecycle or something. The state is correctly updated, but I can't the un-toggle all/toggle all effect to happen on correct state, but rather the follow toggle... Like on going from "YES" -> "NO" -> "YES" they all switch off, and then going from "YES" -> "NO" they would switch back on...
I am attempting to add new block in Shopify using schema and Shopify liquid. I have added schema which is expected to add/import image one on left side and one for right side.I have created dynamic block just to show both images. When I added my schema , I am able to see the image rich text box to add images but when I add the images, I get them as broken images and when I inspect them in in browser i just get <img src=/>.I am quite close but something missing here.Is there something wrong with <img src={{settings.block.image}} /> ? Thanks.
Custom Block
{% elsif block.type == 'side_by_side' %}
<div class="homepage_content clearfix" >
<div class="container">
<div class="eight columns image_column">
<img src={{settings.block.image}} />
</div>
<div class="eight columns image_column">
<img src={{settings.block.image}} />
</div>
</div>
</div>
Schema
{
"type": "side_by_side",
"name": "side_by_side",
"settings": [
{
"type": "image_picker",
"id": "image-left",
"label": "Image-left"
},
{
"type": "image_picker",
"id": "image-right",
"label": "Image-right"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "left",
"options": [
{
"value": "left",
"label": "Image on left"
},
{
"value": "right",
"label": "Image on right"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Side by Side Engineering "
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Pair text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
},
All images must include img_url in order for them to grab the CDN path to the image itself.
In addition you must target the block image this way block.settings.image not settings.block.image.
So your code should be {{ block.settings.image-left | img_url: '1024x' }} or the size you like it to be.