{"id":16202301,"url":"https://github.com/davidwarrington/liquid-schema-plugin","last_synced_at":"2025-03-16T10:32:54.344Z","repository":{"id":39660047,"uuid":"225733458","full_name":"davidwarrington/liquid-schema-plugin","owner":"davidwarrington","description":"Build reusable section schemas using Javascript","archived":false,"fork":false,"pushed_at":"2023-01-06T02:19:35.000Z","size":648,"stargazers_count":44,"open_issues_count":14,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-16T01:41:19.870Z","etag":null,"topics":["schema","shopify","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidwarrington.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-03T22:57:20.000Z","updated_at":"2025-03-05T11:10:49.000Z","dependencies_parsed_at":"2023-02-05T02:45:54.214Z","dependency_job_id":null,"html_url":"https://github.com/davidwarrington/liquid-schema-plugin","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwarrington%2Fliquid-schema-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwarrington%2Fliquid-schema-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwarrington%2Fliquid-schema-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwarrington%2Fliquid-schema-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidwarrington","download_url":"https://codeload.github.com/davidwarrington/liquid-schema-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243858891,"owners_count":20359257,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["schema","shopify","webpack"],"created_at":"2024-10-10T09:46:53.221Z","updated_at":"2025-03-16T10:32:53.851Z","avatar_url":"https://github.com/davidwarrington.png","language":"JavaScript","readme":"# Liquid Schema Plugin\n\nThis plugin allows Shopify section schema to be imported from JavaScript or JSON files into Liquid sections. It is compatible with any Webpack based build system. This allows you to build partials that can be shared across multiple sections and applied in different contexts such as section blocks or settings.\n\n## Installation\nInstall using yarn:\n```shell\nyarn add --dev liquid-schema-plugin\n```\n\nOr npm:\n```shell\nnpm install --save-dev liquid-schema-plugin\n```\n\n### Slate v1\n\nAdd the plugin to `slate.config.js`\n```js\nconst LiquidSchemaPlugin = require('liquid-schema-plugin');\n\nmodule.exports = {\n    // ...\n    'webpack.extend': {\n        plugins: [\n            new LiquidSchemaPlugin({\n                from: {\n                    liquid: './src/sections',\n                    schema: './src/schema'\n                },\n                to: './dist/sections'\n            })\n        ]\n    }\n}\n```\n\n### Webpack\n\nAdd the plugin to `webpack.config.js`\n```js\nconst LiquidSchemaPlugin = require('liquid-schema-plugin');\n\nmodule.exports = {\n    // ...\n    plugins: [\n        // ...\n        new LiquidSchemaPlugin({\n            from: {\n                liquid: './src/sections',\n                schema: './src/schema'\n            },\n            to: './dist/sections'\n        })\n    ]\n}\n```\n\n## Usage\n\nAdd the following to a section file, where `'filepath'` is the location of the schema relative to the `schemaDirectory` defined in the plugin settings:\n```liquid\n// section.liquid\n{% schema 'filepath' %}\n```\nNote: It doesn't require an `endschema` tag.\n\n```js\n// schema.js\nconst banner = require('./components/banner')\n\nmodule.exports = {\n    name: 'Section',\n    blocks: [banner]\n}\n```\n\nAlternatively, the schema file can export a function, in which case it takes the section filename as the first argument and the contents of the schema tags (after running it through JSON.parse) as the second, like so:\n```liquid\n// section.liquid\n{% schema 'filepath' %}\n{\n    \"settings\": [...]\n}\n{% endschema %}\n```\n\n```js\n// schema.js\nconst banner = require('./components/banner')\n\nmodule.exports = (filename, contents) =\u003e ({\n    name: filename,\n    settings: contents.settings,\n    blocks: [banner]\n})\n```\n\n## Further Reading\nIf you'd like to learn more about how you can benefit from using this plugin, you can read about making schemas easier to maintain, creating repeatable groups of schema settings and making your schemas modular in [this blog post](https://ellodave.dev/blog/2020/10/14/building-shopify-section-schemas-with-javascript).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidwarrington%2Fliquid-schema-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidwarrington%2Fliquid-schema-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidwarrington%2Fliquid-schema-plugin/lists"}