Picker

This field allow you get data from Shopify store, Example: Get list products,collections,menu ....

Arguments

Name	Type	Value	Description
type	string	picker	The type of setting
name	string	{field_name}	The unique name will be used in template
label	string	(optional)	The label that appears above of the setting field.
description	string	(optional)	The description that appears above under of the setting field.
tooltip	string	(optional)	The long description that appears on the tooltip when hover on.
value	object	(optional)	The default value will be used for the first time.
on	object	(optional)	Add listener events for setting field
options	object	required	{ "button_text": 'Browse menu', "multiple": false, /* Allow select multi items */ "search": true, /* Customer can search items */ "type": 'menu', /* menu,collection,product,page,blog,article */ "title": 'Menu', "layout": 'list', /* gird,list */ "default": 'main-menu' }

Code example for

section.lh

@schema
{
	"name"		: "Picker",
	"author"	: "LayoutHub Team",
	"website"	: "https://www.LayoutHub.com"
}
@endschema


<div class="sample-demo">
	<p>Hello picker</p>
	  @liquid('menu')
	
</div>

settings.js

[
    {
        name: 'menu',
        label: 'Select menu',
        type: 'picker',
        value: [],
        "options": {
            "button_text": 'Browse menu',
            "multiple": false,
            "search": true,
            "type": 'menu', // menu,collection,product,article,blog,page
            "title": 'Menu',
            "layout": 'list',
            "default": 'main-menu'
        }
    }
]

liquid.json

{
	"menu" :{
		"raw":<<EOF
			
			@if(section.settings.menu && section.settings.menu.length)
				{% assign menu  =  linklists['@print(section.settings.menu[0].value)'] %}
				Menu name: {{ menu.title }}
				{% for link in menu.links %}
				  <a href="{{ link.url }}"
				    {% if link.current %}aria-current="page" class="highlight"{% endif %}
				  >
				   {{ link.title }}
			  </a>
			{% endfor %}
			@endif
		EOF,
		"content":"Default value"
	}
}

Example.zip

Download the sample file below and unzip in the developer direction. If you still have not activated developer mode, click here.

20KB

picker.zip

archive

Code example for

section.lh

@schema
{
"name" : "Picker",
"author" : "LayoutHub Team",
"website" : "https://www.LayoutHub.com"
}
@endschema


<div class="sample-demo">
<p>Hello picker</p> 
@print(section.settings.menu)

</div>

settings.js

[
    {
        name: 'menu',
        label: 'Select menu',
        type: 'picker',
        value: [],
        "options": {
            "button_text": 'Browse menu',
            "multiple": false,
            "search": true,
            "type": 'page', //  'page', 'images', 'fonts', 'categories', 'posts', 'post_type', 'object_taxonomies', 'form_integration', 'woo_categories', 'woo_products'
            "title": 'Menu',
            "layout": 'list',
            "default": 'main-menu'
        }
    }
]