Product search using graphql

product-search-gql.js

<script>
(function($){
  	
$(document).ready(function(){
    var apiUrl = "https://yourshop.myshopify.com/api/graphql";
    var token = "tokenhere";

    customProductSearch(
        apiUrl, 
        token, 
        "input[name='query']"
    );
});

function customProductSearch(apiUrl, token, element){

    $(element).off("keyup").keyup(delay(function(e) {
        
        var searchQuery =  $(this).val();
       
        var data = `query ($numProducts: Int = 50, $cursor: String){
            products(first: $numProducts, query: "title:${searchQuery}*", after: $cursor) {
                pageInfo {
                    hasNextPage
                    hasPreviousPage
                }
                edges {
                cursor
                    node {
                        handle title descriptionHtml id images(first: 1) { 
                            edges { 
                                node { originalSrc altText } 
                            } 
                        }
                    }
                }
                
            }
            
        }`;

        if($.trim(searchQuery).length != 0){

            console.log($("#product-search-list").children('li').length);

            if($("#product-search-list").children('li').length > 0){
                $("#product-search-list").children('li').remove();
            }

            $.ajax({
                type:"POST",
                url: apiUrl,
                headers: {
                    "X-Shopify-Storefront-Access-Token":token,
                    "content-Type":"application/graphql"
                },
                data:data,
                success: function(data){
                    
                    //console.log(data);

                    var entries = Object.entries(data);
                    //console.log("first entries " + entries)
                    //console.log(entries[0][1].products.edges);
                    
                    var edges = entries[0][1].products.edges;

                    edges.forEach(function(item){
                        //console.log(item.node.title);
                        //console.log("inside each "+ edges.length);
                        //console.log("input val "+ $.trim(searchQuery));

                        var image = item.node.images.edges[0].node.originalSrc;

                        var description =  "";

                        if(item.node.descriptionHtml != ""){
                            description = item.node.descriptionHtml;
                        }else {

                            getMetafields(apiUrl, token, item.node.handle);
                            //description = "Hello";
                        }
                        
                        $("#product-search-list").append(
                            `<li class="product-search-item ${item.node.handle}" item-handle="${item.node.handle}">
                                <img style="width:100px;" src="${image}"/>
                                <div class="product-search-desc">
                                    <p><a href="/products/${item.node.handle}">${item.node.title}</a></p>
                                </div>
                            </li>`
                        ).find(`.${item.node.handle}`).not(":first").remove();

                        if(edges.length != 0) {
                            $("#product-not-found").css({'display': 'none'});
                        }
                        
                        var itemTitle = item.node.title;
                        var itemHandle = item.node.handle;

                        console.log("return val "+ itemTitle.toLowerCase());
                        
                        var regex = RegExp(availableTitle);
                        var availableTitle = itemTitle.toLowerCase();
                        var latestSearchQuery = $.trim(searchQuery);
                        
                        if(searchQuery.match(availableTitle)){

                            console.log("exact word");
                            var itemsExistingHandle = $('.product-search-item').attr('item-handle');

                            console.log("last handle to check "+ itemHandle);
                            console.log("handles already there "+ itemsExistingHandle);

                            $('.product-search-item').not($('.'+itemHandle)).remove();
                            console.log("dapart tanggal na pag eksatong salit");
                        }

                        $("#see-all-products").css({'display': 'block'});
                        console.log($("#product-search-list").children('li').attr('item-handle'));

                    });
                    if(edges.length == 0) {
                        $("#product-search-list").children('li').remove();
                        $("#product-not-found").css({'display': 'block'});
                        $("#see-all-products").css({'display': 'none'}); 
                    }else {
                        $("#product-not-found").css({'display': 'none'});
                    }

                },
                error: function(data){
                    console.log('errors');
                    console.log(JSON.stringify(data));
                }
            });
        }else {
            $("#product-search-list").children('li').remove();
            $("#see-all-products").css({'display': 'none'});    
        }

    }, 500));

}

function getMetafields(apiUrl, token, productHandle){ 
    console.log(productHandle);
    var metafields = `query {
        productByHandle(handle: "${productHandle}") {
            metafields(first: 1, namespace: "global") {
                edges {
                    node {
                        key
                        value
                    }
                }
            }
        }
    }`;

    $.ajax({
        type:"POST",
        url: apiUrl,
        headers: {
            "X-Shopify-Storefront-Access-Token":token,
            "content-Type":"application/graphql"
        },
        data:metafields,
        success: function(data){
            var entries = Object.entries(data);
            
            console.log(data);
           
            entries.forEach(function(data){
                console.log(data);
            });
            console.log(entries[0][1].productByHandle.metafields);

        },
        error: function(data){
            console.log('errors');
            console.log(data);
        }
    });

}

function delay(fn, ms) {
    let timer = 0
    return function(...args) {
        clearTimeout(timer)
        timer = setTimeout(fn.bind(this, ...args), ms || 0)
    }
}

})(jQuery)
</script>