inklabs / kommerce-core

PHP shopping cart core platform
https://kommerce-laravel-demo.jamieisaacs.com/
Apache License 2.0
64 stars 14 forks source link

Add typeahead style helper for uuid input #95

Open pdt256 opened 7 years ago

pdt256 commented 7 years ago

When there is an input field for a productId, there should be a typeahead helper to make finding and selecting a product easier. This can also apply to any other entity in the system when entering a uuid.


Example:

image

pdt256 commented 7 years ago

The above example uses typeahead and bloodhound:

<script type="text/javascript">
$(function() {
    var products = new Bloodhound({
        datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: "/admin/product/api/%QUERY?product_ts=1484335230",
        limit: 10
    })

    products.initialize();

    $('.typeahead').typeahead({
        minLength: 2,
        highlight: true,
    }, {
        displayKey: 'value',
        source: products.ttAdapter(),
        templates: {
            suggestion: Handlebars.compile([
                '<div class="row">',
                    '<div class="col-sm-2">',
                        '{{#if defaultImageUrl}}',
                            '<a href="{{adminUrl}}">',
                                '<img src="{{defaultImageUrl}}" style="height: 40px" />',
                            '</a>',
                        '{{/if}}',
                    '</div>',
                    '<div class="col-sm-10">',
                        '<a href="{{adminUrl}}">',
                            '<p>{{name}} - <small class="text-muted">{{sku}}</small></p>',
                        '</a>',
                        '<p>{{description}}</p>',
                    '</div>',
                '</div>'
            ].join(' '))
        }
    });
});
</script>
pdt256 commented 7 years ago

It would be great if we could leverage existing twig templates for this.

pdt256 commented 7 years ago

This is an opportunity to extend the base template (cardinal or bootstrap) to add the typeahead feature in multiple framework implementations.

pdt256 commented 7 years ago

This is an option: https://mrabbani.github.io/examples/vue_typeahead/