ShopCloud Web Components

Query Field

A customizable query field component that allows users to build complex queries based on specified fields.

Properties

Events

Demo

Usage Example

<sc-query-field
    fields='[
        {"name":"lagerbestand","type":"number"},
        {"name":"title","type":"string"},
        {"name":"available","type":"bool"}
    ]'
></sc-query-field>

<script>
const queryField = document.querySelector('sc-query-field');

queryField.addEventListener('queryChange', event => {
    console.log('Query changed:', event.detail);
});

queryField.addEventListener('querySubmit', event => {
    console.log('Query submitted:', event.detail);
});
</script>

Textarea

An enhanced textarea component with suggestion capabilities.

Properties

Demo

Usage Example

<sc-textarea 
    suggestion-url="https://raw.githubusercontent.com/jeanphorn/wordlist/refs/heads/master/usernames.txt"
></sc-textarea>

Taxonomy

A component for handling hierarchical taxonomy data.

Properties

Events

Demo

Usage Example

<sc-taxonomy 
    url="https://storage.googleapis.com/shopcloud-taxonomy-public/taxonomy.txt"
    value="test"
></sc-taxonomy>

<script>
const taxonomy = document.querySelector('sc-taxonomy');
taxonomy.addEventListener('valueChange', event => {
    console.log('Taxonomy value changed:', event.detail);
});
</script>

Spreadsheet Uploader

A component for handling hierarchical taxonomy data.

Properties

Events

Demo