This page describes the config and API for the Pattern Design Plugin - see the Demo for a live environment.
There are two ways you can integrate the plugin, which are described in the following two sections.
Copy the plugin snippet from a plugin configuration in your account.
An alternative to the plugin configuration via the API is to Load the plugin script directly from our CDN and manually instantiate the web component - this way you have full control over the configuration and the loading.
<patterndesign-plugin id="patterndesign-plugin" />
<script>
function configurePlugin() {
const pluginElement = document.getElementById('patterndesign-plugin');
const config = { "accessToken": "146-91433194989103-6839238851-d9c7f290d210b74ea01ad00d9b01de1b4c8ab2ae6a4c52531e231c2ab210ca05" };
const plugin = pluginElement.initialize(config);
}
</script>
<script src="https://d1biw2rz2h5h5w.cloudfront.net/javascript/plugin/0.1.21/plugin.js" type="module" onload="configurePlugin()"></script>
See PluginElement.initialize for the interfaces of the plugin and the config objects.
Use the plugin API object Plugin for interacting with the plugin. It is returned when either calling PluginElement.initialize or PluginElement.getPlugin (for retrieving it after initialization).
The plugin is developed using Semantic Versioning. As long as you don't bump the major version, there should be no incompatible or breaking changes. Still, if you upgrade to a newer verion, test whether everthing still works for you.
The plugin offers 3 options for adapting its styling via CSS.
adding the corresponding styles in the configurator
adding styles to the page embedding the plugin (this only works when the plugin is not using a shadow DOM, which by default it doesn't)
when manually integrating the plugin by providing a HTML template. The web-component has a template-id attribute - point this to a template in your html with the specified id (this works also with shadow DOM enabled)
The plugin has a default height of 90vh - this is a good default as it covers most of the screen height, but still allows for space to be able to scroll away from the plugin on mobile devices.
The plugin height is fixed (to the 90vh) in order to contain the (potentially very long) display of available designs to its scrollable container.
If you want to change the height (e.g. to 100% of its container), make sure that the container has a defined height itself, otherwise the plugin's content (the list of designs) will just take up the vertical space needed for displaying all designs within the list (which can be thousands for large categories such as the Floral category).
Generated using TypeDoc