Motiflow-picker

Current version version 0.0.9

Important This version exposes your token. This will be resolved in the future

Installation

1. You first need to acquire your token.
2. Secondly you need to have or create a start-collection

If you do not have an account yet, you can apply here

Example

<script scr="../dist/motiflow-picker.min.js"></script>
<motiflow-picker start-collection="1092" token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXJ0bmVyQWNjb3VudElkIjo0NDcsInBhcnRuZXJTaG9wSWQiOiI0NDMiLCJpYXQiOjE2MTEyNDA2MjcsImV4cCI6MTYyNjk2NTQyN30.kcut2z3bKn6Byt2YN9dM4DQk6w6e6Fs6OV55PMfQt50"></motiflow-picker>

Events

Every time a pattern has been selected the event patternPickerPatternSelected is fired. You can use this data to update your own information.

Example

window.addEventListener('patternPickerPatternSelected', (event)=> {
    console.log(event.detail);
});

Pop-up modus

When you applied the mode=popup you can trigger to open the define a CSS selector in the trigger-element='.button.openMotiflowTrigger' property or use a global js trigger

Example for js Trigger

//vanillaJS
document.querySelector('button.openMotiflowTrigger').addEventListener('click',function(){
    window.MotiflowPicker.openModal()
});

//jQuery
$('button.openMotiflowTrigger').on('click',function(){
    window.MotiflowPicker.openModal()
});

After a token is selected you might want the data pattern ID to be stored in a hidden field so you can use it later in the ordering flow. To do so you can apply a callback-element property with a CSS selector. For example a hidden input.

Full example

<h1>My awesome Product</h1>
<form method="">
    <div>
        <div>Size</div>
        <label>
            <input name="size" type="radio" value="s" /> Small
        </label>
        <label>
            <input name="size" type="radio" value="m" /> Medium
        </label>
        <label>
            <input name="size" type="radio" value="L" /> Large
        </label>
    </div>

    <div>
        <label>
            <div>Quantity</div>
            <input name="qty" type="number" value="1" />
        </label>
    </div>

    <div>
        <input id="patternID" name="patternID" type="hidden" />
        <button id="patternPicker">
            Select Pattern
        </button>

        <hr />
        
        <button type="submit">
            Add to cart
        </button>
    </div>
</form>

<script scr="../dist/motiflow-picker.min.js"></script>
<motiflow-picker 
    start-collection="1092" 
    token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXJ0bmVyQWNjb3VudElkIjo0NDcsInBhcnRuZXJTaG9wSWQiOiI0NDMiLCJpYXQiOjE2MTEyNDA2MjcsImV4cCI6MTYyNjk2NTQyN30.kcut2z3bKn6Byt2YN9dM4DQk6w6e6Fs6OV55PMfQt50"
    mode="pop-up"
    callback-element="#patternID"
    trigger-element="#patternPicker"
    branding-color="#00a0e4"
    >
    </motiflow-picker>

Settings

You can customize the widget with the following parameters.

Methods

The Picker initializes a MotiflowPicker which is available via JS. For example console.log(window.MotiflowPicker)

CSS Selectors

The picker operates in the shadow dom of the browser. This isolates the picker and therefore should not interfere with the working of your own platform/site/shop. (please report bugs if it does). This however has some drawbacks if you want to apply custom CSS to the picker. Therefore some elements can be target with the ::part() selector. Please note: You can change the color of the buttons and selected border via the property branding-color. Styling via this method is at your own risk

You can target the elements with the following CSS

 motiflow-picker::part(pattern-filters) {
            background-color: red !important
        }

Release notes

v.0.0.1: First initial version for proof of concept

v.0.0.2: Added logic for callback element.

v.0.0.3: Added translations for Dutch. You can use a callback function to retrieve the data after confirming the selection.

v.0.0.4: Made some tweaks in interface to make it smoother, ability to hide filters, add German translations. Allow brand color

v.0.0.5: Some tweaks in external interactions.

v0.0.6: Updated z-index of modal. Button triggers work on more than one. Ability to set a pre-selected pattern.

v0.0.7: Fixed branding color update and updated readme

v0.0.8: Added background color. Allow to set the language via the method.

v0.0.9: Added part selectors for styling