From 6e9eb90832519958181a69e28d3e8bbd20d16eb3 Mon Sep 17 00:00:00 2001 From: Veronica Date: Tue, 23 Oct 2018 13:29:33 +0200 Subject: [PATCH 01/19] xlp2z1Fz: Add a JS lib autoComplete example. --- codeexamples/autocomplete.js | 68 ++++++++++++++++++++++++++++++++++++ codeexamples/index.html | 20 +++++++++++ 2 files changed, 88 insertions(+) create mode 100644 codeexamples/autocomplete.js create mode 100644 codeexamples/index.html diff --git a/codeexamples/autocomplete.js b/codeexamples/autocomplete.js new file mode 100644 index 0000000..e00d461 --- /dev/null +++ b/codeexamples/autocomplete.js @@ -0,0 +1,68 @@ + +function autoCompleteExample(client, query) { + console.log("autocomplete-full:"); + + // CODE SAMPLE autocomplete-full BEGIN + // Below is an example of a request - response cycle of an autocomplete request + var options = {}; + options.skip = 0; + options.take = 9; + var response = client.autoComplete(query, options); + response = response.then((r) => { + var queries = r.data["queries"].items.map(i => i.query); + //print out all suggested autocomplete queries + console.log("queries: " + queries.join()); + } + ); + // CODE SAMPLE END + return response.then((r)=>console.log("autocomplete-full (end)")) +}; + +function scopedAutoCompleteExample(client, query) { + console.log("autocomplete-scoped:"); + + // CODE SAMPLE autocomplete-scoped BEGIN + // Below is an example of a request - response cycle of an autocomplete request + // where scopes are used to provide the user with more context + var options = {}; + options.skip = 0; + options.take = 9; + var response = client.autoComplete(query, options); + response = response.then((r) => { + var scopedQuery = r.data["scopedQuery"]; + //prints out the scoped suggestions + if(scopedQuery) + { + console.log("scoped query: " + scopedQuery.query); + console.log("scopes based on: " + scopedQuery.scopeAttributeName); + console.log("scopes: " + scopedQuery.scopes.join()); + } + } + ); + // CODE SAMPLE END + return response.then((r)=>console.log("autocomplete-scoped (end)")) +}; + + // private void ScopedAutoCompleteExample(string query) + // { + // Debug.WriteLine("autocomplete-scoped: " + Environment.NewLine); + + // CODE SAMPLE autocomplete-scoped BEGIN + // Below is an example of a request - response cycle of an autocomplete request + // where scopes are used to provide the user with more context + // AutoCompleteRequest request = new AutoCompleteRequest(query); + // request.QueriesOptions.Skip = 0; + // request.QueriesOptions.Take = 9; + // AutoCompleteResponse response = _loop54Client.AutoComplete(request); + + // prints out the scoped suggestions + // if(response.ScopedQuery != null) + // { + // Debug.WriteLine("scoped query: " + response.ScopedQuery.Query); + // Debug.WriteLine("scopes based on: " + response.ScopedQuery.ScopeAttributeName); + // Debug.WriteLine("scopes: " + string.Join(", ", response.ScopedQuery.Scopes)); + // } + // CODE SAMPLE END + + // Debug.WriteLine("autocomplete-scoped (end) " + Environment.NewLine); + // } \ No newline at end of file diff --git a/codeexamples/index.html b/codeexamples/index.html new file mode 100644 index 0000000..32e9314 --- /dev/null +++ b/codeexamples/index.html @@ -0,0 +1,20 @@ + + + + + + + Loop54 code examples + + + +
+ + + \ No newline at end of file From 0355ffa8410906b708633be02e7fe627e29dfb0a Mon Sep 17 00:00:00 2001 From: Veronica Date: Tue, 23 Oct 2018 14:28:16 +0200 Subject: [PATCH 02/19] xlp2z1Fz: Add search code example. Add html pages. --- codeexamples/autocomplete.html | 26 +++++++++ codeexamples/autocomplete.js | 26 +-------- codeexamples/index.html | 20 +++---- codeexamples/search.html | 27 ++++++++++ codeexamples/search.js | 99 ++++++++++++++++++++++++++++++++++ 5 files changed, 161 insertions(+), 37 deletions(-) create mode 100644 codeexamples/autocomplete.html create mode 100644 codeexamples/search.html create mode 100644 codeexamples/search.js diff --git a/codeexamples/autocomplete.html b/codeexamples/autocomplete.html new file mode 100644 index 0000000..5c49078 --- /dev/null +++ b/codeexamples/autocomplete.html @@ -0,0 +1,26 @@ + + + + + + Loop54 autocomplete code examples + + + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/codeexamples/autocomplete.js b/codeexamples/autocomplete.js index e00d461..648dd0e 100644 --- a/codeexamples/autocomplete.js +++ b/codeexamples/autocomplete.js @@ -41,28 +41,4 @@ function scopedAutoCompleteExample(client, query) { ); // CODE SAMPLE END return response.then((r)=>console.log("autocomplete-scoped (end)")) -}; - - // private void ScopedAutoCompleteExample(string query) - // { - // Debug.WriteLine("autocomplete-scoped: " + Environment.NewLine); - - // CODE SAMPLE autocomplete-scoped BEGIN - // Below is an example of a request - response cycle of an autocomplete request - // where scopes are used to provide the user with more context - // AutoCompleteRequest request = new AutoCompleteRequest(query); - // request.QueriesOptions.Skip = 0; - // request.QueriesOptions.Take = 9; - // AutoCompleteResponse response = _loop54Client.AutoComplete(request); - - // prints out the scoped suggestions - // if(response.ScopedQuery != null) - // { - // Debug.WriteLine("scoped query: " + response.ScopedQuery.Query); - // Debug.WriteLine("scopes based on: " + response.ScopedQuery.ScopeAttributeName); - // Debug.WriteLine("scopes: " + string.Join(", ", response.ScopedQuery.Scopes)); - // } - // CODE SAMPLE END - - // Debug.WriteLine("autocomplete-scoped (end) " + Environment.NewLine); - // } \ No newline at end of file +}; \ No newline at end of file diff --git a/codeexamples/index.html b/codeexamples/index.html index 32e9314..5b05f68 100644 --- a/codeexamples/index.html +++ b/codeexamples/index.html @@ -1,20 +1,16 @@ - - - Loop54 code examples - -
- +
+
+
+ +
\ No newline at end of file diff --git a/codeexamples/search.html b/codeexamples/search.html new file mode 100644 index 0000000..2007aa4 --- /dev/null +++ b/codeexamples/search.html @@ -0,0 +1,27 @@ + + + + + + Loop54 search code examples + + + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/codeexamples/search.js b/codeexamples/search.js new file mode 100644 index 0000000..dc320b7 --- /dev/null +++ b/codeexamples/search.js @@ -0,0 +1,99 @@ + +function searchExample(client, query) { + console.log("search-full:"); + + // CODE SAMPLE search-full BEGIN + // The search field + // initialize "Search" request and set search query + + //specify number of response items + var options = {}; + options.skip = 0; + options.take = 10; + var relatedResultsOptions = {} + relatedResultsOptions.skip = 0; + relatedResultsOptions.take = 9; + options.relatedResultOptions = relatedResultsOptions; + + //fetch response from engine + var response = client.search(query, options); + response = response.then((r) => { + var searchResponseData = r.data; + // INJECT SAMPLE search-check-results BEGIN + checkResults(searchResponseData); + // INJECT SAMPLE END + + //render direct results + var results = searchResponseData["results"].items; + if (!results || results.count == 0) + console.log("There were no items matching your search."); + + for (let resultItem of results) + { + var productId = resultItem.id; + var productTitle = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Title"}).values[0] : ""; + console.log(productId + " " + productTitle); //render a product on the search results page + } + + //render recommended results + var relatedResults = searchResponseData["relatedResults"].items; + if (relatedResults && relatedResults.count > 0) + console.log("Maybe you also want these?"); + + for (let resultItem of relatedResults) + { + var productId = resultItem.id; + var productTitle = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Title"}).values[0] : ""; + console.log(productId + " " + productTitle); //render a product on the search results page + } + } + ); + // CODE SAMPLE END + return response.then((r)=>console.log("search-full (end)")) +}; + +function searchCheckResultExample(client, query) { + console.log("search-check-result:"); + + // initialize "Search" request and set search query + + //specify number of response items + var options = {}; + options.skip = 0; + options.take = 10; + var relatedResultsOptions = {} + relatedResultsOptions.skip = 0; + relatedResultsOptions.take = 9; + options.relatedResultOptions = relatedResultsOptions; + + //fetch response from engine + var response = client.search(query, options); + response = response.then((r) => { + var searchResponseData = r.data; + checkResults(searchResponseData); + } + ); + return response.then((r)=>console.log("search-check-result (end)")) +}; + +function checkResults(data) +{ + // CODE SAMPLE search-check-results BEGIN + // Check the search results + // if the result does not make sense, show error message + // (note that there may still be results!) + if (!data["makesSense"]) + console.log("We did not understand your query."); + + //render spelling suggestions + if (data["spellingSuggestions"] && data["spellingSuggestions"].count > 0) + { + var queries = data["spellingSuggestions"].items.map(o => o.query); + console.log("Did you mean: " + queries.join() + "?"); + } + // CODE SAMPLE END +}; + + + + \ No newline at end of file From ebc75bb2dcfe4b1618a7a3892b6ad00c34427711 Mon Sep 17 00:00:00 2001 From: Veronica Date: Tue, 23 Oct 2018 20:51:53 +0200 Subject: [PATCH 03/19] xlp2z1Fz: Add two category listings code examples. --- codeexamples/categorylisting.html | 38 +++++ codeexamples/categorylisting.js | 256 ++++++++++++++++++++++++++++++ codeexamples/index.html | 1 + codeexamples/search.js | 27 ++-- 4 files changed, 311 insertions(+), 11 deletions(-) create mode 100644 codeexamples/categorylisting.html create mode 100644 codeexamples/categorylisting.js diff --git a/codeexamples/categorylisting.html b/codeexamples/categorylisting.html new file mode 100644 index 0000000..a18fad7 --- /dev/null +++ b/codeexamples/categorylisting.html @@ -0,0 +1,38 @@ + + + + + + Loop54 search code examples + + + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/codeexamples/categorylisting.js b/codeexamples/categorylisting.js new file mode 100644 index 0000000..f979e82 --- /dev/null +++ b/codeexamples/categorylisting.js @@ -0,0 +1,256 @@ + +function categoryListingExample(client, categoryName) { + console.log("categorylisting-full:"); + console.log("items:"); + // CODE SAMPLE categorylisting-full BEGIN + // Below is an example of a request - response cycle of a category listing request + var options = {}; + options.skip = 0; + options.take = 9; + + var response = client.getEntitiesByAttribute('Category', categoryName, options); + + + + response = response.then((r) => { + // INJECT SAMPLE render-items BEGIN + renderItems(r.data); + // INJECT SAMPLE END + } + ); + // CODE SAMPLE END + return response.then((r)=>console.log("categorylisting-full (end)")) +}; + +function categoryListingFacetsExample(client, categoryName) { + console.log("categorylisting-facets:"); + console.log("items:"); + // CODE SAMPLE categorylisting-facets BEGIN + // Category listing with facets + var options = {}; + var distinctFacetNames = ["Manufacturer", "Category", "Organic"]; + var distinctFacets = distinctFacetNames.map(function(f){return {name:f,attributeName:f,type:'distinct'}}); + var rangeFacetNames = ["Price"]; + var rangeFacets = rangeFacetNames.map(function(f){return {name:f,attributeName:f,type:'range'}}); + options.facets = distinctFacets.concat(rangeFacets);; + + var response = client.getEntitiesByAttribute('Category', categoryName, options); + + + + response = response.then((r) => { + // INJECT SAMPLE render-items BEGIN + renderItems(r.data); + // INJECT SAMPLE END + // INJECT SAMPLE render-distinct-facets BEGIN + renderFacets(r.data); + // INJECT SAMPLE END + } + ); + // CODE SAMPLE END + return response.then((r)=>console.log("categorylisting-facets (end)")) +}; + +function renderItems(data) +{ + // CODE SAMPLE render-items BEGIN + var results = data["results"].items; + + if (!results || results.count == 0) + { + console.log("There were no items in this category."); + } + else + { + for (let resultItem of results) + { + var productId = resultItem.id; + var productTitle = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Title"}).values[0] : ""; + console.log(productId + " " + productTitle); //render a product on the category listing page + } + } + // CODE SAMPLE END +} + +function renderFacets(data) +{ + // CODE SAMPLE render-distinct-facets BEGIN + var distinctFacetsToDisplay = ["Manufacturer", "Category", "Organic"]; + if(data.results && data.results.facets.length > 0) + { + for (let attributeName of distinctFacetsToDisplay) + { + var facets = data.results.facets.filter(function(f) { return f.type == 'distinct' && f.name == attributeName; }); + if (facets && facets.length > 0) + { + var facet = facets[0]; + if(facet) + { + var facetItems = facet.items; + if (facetItems && facetItems.length > 0) + console.log(attributeName + ": "); + for (let facetItem of facetItems) + { + console.log(facetItem.item + ": " + facetItem.count); // Write the facet name and the number of products in the facet + } + } + } + } + } + + // CODE SAMPLE END + + //if there is a price range facet + if(data.results && data.results.facets.length > 0) + { + var facets = data.results.facets.filter(function(f) { return f.type == 'range' && f.name == "Price"; }); + if (facets && facets.length > 0) + { + var facet = facets[0]; + if(facet) + { + console.log("Price: "); + var minPrice = facet.min; + var maxPrice = facet.max; + var minPriceSelected = facet.selectedMin; + var maxPriceSelected = facet.selectedMax; + console.log("min: " + minPrice + " kr, max: " + maxPrice + + " kr, min selected: " + minPriceSelected + " kr," + + " max selected: " + maxPriceSelected + " kr."); + } + } + } +} + + + + + // private void CategoryListingDistinctFacetExample(string categoryName, string specificManufacturer) + // { + // Debug.WriteLine("categorylisting-distinct-facet: " + Environment.NewLine); + // Debug.WriteLine("items: "); + + // // CODE SAMPLE categorylisting-distinct-facet BEGIN + // // Category listing with a distinct facet applied + // // The use-case here is e.g. when the user clicks on a specific manufacturer in the category listing facet list + // var request = new GetEntitiesByAttributeRequest("Category", categoryName); + + // //Add facets to the request + // //And select a specific facet value to filter on + // request.ResultsOptions.AddDistinctFacet("Manufacturer", new List() { specificManufacturer }); + // request.ResultsOptions.AddDistinctFacet("Category"); + // request.ResultsOptions.AddDistinctFacet("Organic"); + // request.ResultsOptions.AddRangeFacet("Price"); + + // var response = _loop54Client.GetEntitiesByAttribute(request); + // // CODE SAMPLE END + + // RenderItemsExtended(response); + // RenderFacets(response); + // Debug.WriteLine("categorylisting-distinct-facet (end) " + Environment.NewLine); + // } + + // private void CategoryListingRangeFacetExample(string categoryName) + // { + // Debug.WriteLine("categorylisting-range-facet: " + Environment.NewLine); + // Debug.WriteLine("items: "); + + // // CODE SAMPLE categorylisting-range-facet BEGIN + // // Category listing with a range facet + // // The use-case here is e.g. when the user selects a specific price range in the category listing facet list + // var request = new GetEntitiesByAttributeRequest("Category", categoryName); + + // //Add facets to the request + // //And select a specific range for a certain facet + // request.ResultsOptions.AddDistinctFacet("Manufacturer"); + // request.ResultsOptions.AddDistinctFacet("Category"); + // request.ResultsOptions.AddDistinctFacet("Organic"); + // request.ResultsOptions.AddRangeFacet("Price", new RangeFacetSelectedParameter() { Min = 10, Max = 60 }); + + // var response = _loop54Client.GetEntitiesByAttribute(request); + // // CODE SAMPLE END + + // RenderItemsExtended(response); + // RenderFacets(response); + + // Debug.WriteLine("categorylisting-range-facet (end) " + Environment.NewLine); + // } + + // private void CategoryListingSortingExample(string categoryName) + // { + // Debug.WriteLine("categorylisting-sorting: " + Environment.NewLine); + // Debug.WriteLine("items: "); + + // // CODE SAMPLE categorylisting-sorting BEGIN + // // Category listing with sorting + // var request = new GetEntitiesByAttributeRequest("Category", categoryName); + + // //Set the sort order of the products in the category + // request.ResultsOptions.SortBy = new List{ + // new EntitySortingParameter("Price") + // { Order = SortOrders.Asc}, // Primary sorting: Sort on attribute Price, ascending order + // new EntitySortingParameter(EntitySortingParameter.Types.Popularity) + // { Order = SortOrders.Desc} // Secondary sorting: Sort on popularity, descending order + // }; + + // var response = _loop54Client.GetEntitiesByAttribute(request); + // // CODE SAMPLE END + + // RenderItemsExtended(response); + + // Debug.WriteLine("categorylisting-sorting (end) " + Environment.NewLine); + // } + + // private void CategoryListingFilterExample(string categoryName) + // { + // Debug.WriteLine("categorylisting-filter: " + Environment.NewLine); + // Debug.WriteLine("items: "); + + // // CODE SAMPLE categorylisting-filter BEGIN + // // Category listing with filters + // var request = new GetEntitiesByAttributeRequest("Category", categoryName); + + // //Filter the products in the category + // //In this case, we only want products that have got + // //the price attribute, and where the organic attribute is set to "True" + // request.ResultsOptions.Filter = new AndFilterParameter( + // new AttributeExistsFilterParameter("Price"), + // //Because the organic attribute is stored as a string in the engine we need to filter with that type. + // //If it would have been stored as a boolean we would have used bool instead. + // new AttributeFilterParameter("Organic", "True") + // ); + + // var response = _loop54Client.GetEntitiesByAttribute(request); + // // CODE SAMPLE END + + // RenderItemsExtended(response); + + // Debug.WriteLine("categorylisting-filter (end) " + Environment.NewLine); + // } + // #endregion + + // #region HelperMethods + + + // private void RenderItemsExtended(GetEntitiesByAttributeResponse response) + // { + // var results = response.Results.Items; + + // if (!results.Any()) + // Debug.WriteLine("There were no items in this category."); + + // foreach (var resultItem in results) + // { + // var productId = resultItem.GetAttributeValueOrDefault("Id"); + // var productTitle = resultItem.GetAttributeValueOrDefault("Title"); + // var price = resultItem.GetAttributeValueOrDefault("Price"); + // var organic = resultItem.GetAttributeValueOrDefault("Organic"); + // Debug.WriteLine(productId + " " + productTitle + " (" + price + " kr, " + organic + "), "); + // //render a product on the category listing page + // } + // } + + + + + \ No newline at end of file diff --git a/codeexamples/index.html b/codeexamples/index.html index 5b05f68..d203280 100644 --- a/codeexamples/index.html +++ b/codeexamples/index.html @@ -9,6 +9,7 @@ diff --git a/codeexamples/search.js b/codeexamples/search.js index dc320b7..22c105f 100644 --- a/codeexamples/search.js +++ b/codeexamples/search.js @@ -26,25 +26,30 @@ function searchExample(client, query) { //render direct results var results = searchResponseData["results"].items; if (!results || results.count == 0) + { console.log("There were no items matching your search."); - - for (let resultItem of results) + } + else { - var productId = resultItem.id; - var productTitle = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Title"}).values[0] : ""; - console.log(productId + " " + productTitle); //render a product on the search results page + for (let resultItem of results) + { + var productId = resultItem.id; + var productTitle = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Title"}).values[0] : ""; + console.log(productId + " " + productTitle); //render a product on the search results page + } } //render recommended results var relatedResults = searchResponseData["relatedResults"].items; if (relatedResults && relatedResults.count > 0) - console.log("Maybe you also want these?"); - - for (let resultItem of relatedResults) { - var productId = resultItem.id; - var productTitle = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Title"}).values[0] : ""; - console.log(productId + " " + productTitle); //render a product on the search results page + console.log("Maybe you also want these?"); + for (let resultItem of relatedResults) + { + var productId = resultItem.id; + var productTitle = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Title"}).values[0] : ""; + console.log(productId + " " + productTitle); //render a product on the search results page + } } } ); From fbd769d8464bfe8803a1388133d097b035de2973 Mon Sep 17 00:00:00 2001 From: Veronica Date: Wed, 24 Oct 2018 11:59:48 +0200 Subject: [PATCH 04/19] xlp2z1Fz: Added more category listings examples. --- codeexamples/categorylisting.html | 9 +- codeexamples/categorylisting.js | 160 +++++++++++++++++------------- 2 files changed, 96 insertions(+), 73 deletions(-) diff --git a/codeexamples/categorylisting.html b/codeexamples/categorylisting.html index a18fad7..b68715e 100644 --- a/codeexamples/categorylisting.html +++ b/codeexamples/categorylisting.html @@ -21,11 +21,12 @@ var categoryName = 'meat'; var specificManufacturer = 'MeatNStuff'; - categoryListingExample(client, categoryName).then(() => categoryListingFacetsExample(client, categoryName)); + categoryListingExample(client, categoryName).then(() => + categoryListingFacetsExample(client, categoryName).then(() => + categoryListingDistinctFacetExample(client, categoryName, specificManufacturer).then(() => + categoryListingRangeFacetExample(client, categoryName) + ))); - - - diff --git a/codeexamples/categorylisting.js b/codeexamples/categorylisting.js index f979e82..9aac956 100644 --- a/codeexamples/categorylisting.js +++ b/codeexamples/categorylisting.js @@ -36,8 +36,6 @@ function categoryListingFacetsExample(client, categoryName) { var response = client.getEntitiesByAttribute('Category', categoryName, options); - - response = response.then((r) => { // INJECT SAMPLE render-items BEGIN renderItems(r.data); @@ -51,6 +49,72 @@ function categoryListingFacetsExample(client, categoryName) { return response.then((r)=>console.log("categorylisting-facets (end)")) }; +function categoryListingDistinctFacetExample(client, categoryName, specificManufacturer) +{ + console.log("categorylisting-distinct-facet:"); + console.log("items: "); + + // CODE SAMPLE categorylisting-distinct-facet BEGIN + // Category listing with a distinct facet applied + // The use-case here is e.g. when the user clicks on a specific manufacturer in the category listing facet list + // Add facets to the request + // And select a specific facet value to filter on + var options = {}; + var distinctFacetNames = ["Manufacturer", "Category", "Organic"]; + + var selectedFacets = {}; + selectedFacets["Manufacturer"] = []; + selectedFacets["Manufacturer"].push(specificManufacturer); + selectedFacets["Category"] = []; + selectedFacets["Organic"] = []; + + var distinctFacets = distinctFacetNames.map(function(f){return {name:f,attributeName:f,type:'distinct',selected:selectedFacets[f]}}); + var rangeFacetNames = ["Price"]; + var rangeFacets = rangeFacetNames.map(function(f){return {name:f,attributeName:f,type:'range'}}); + options.facets = distinctFacets.concat(rangeFacets); + + var response = client.getEntitiesByAttribute('Category', categoryName, options); + + // CODE SAMPLE END + response = response.then((r) => { + renderItemsExtended(r.data); + renderFacets(r.data); + } + ); + + return response.then((r)=>console.log("categorylisting-distinct-facet (end)")) +} + +function categoryListingRangeFacetExample(client, categoryName) +{ + console.log("categorylisting-range-facet:"); + console.log("items: "); + + // CODE SAMPLE categorylisting-range-facet BEGIN + // Category listing with a range facet + // The use-case here is e.g. when the user selects a specific price range in the category listing facet list + // Add facets to the request + // And select a specific range for a certain facet + var options = {}; + var distinctFacetNames = ["Manufacturer", "Category", "Organic"]; + var distinctFacets = distinctFacetNames.map(function(f){return {name:f,attributeName:f,type:'distinct'}}); + var selectedRange = {min: 10, max: 60}; + var rangeFacetNames = ["Price"]; + var rangeFacets = rangeFacetNames.map(function(f){return {name:f,attributeName:f,type:'range',selected:selectedRange}}); + options.facets = distinctFacets.concat(rangeFacets); + + var response = client.getEntitiesByAttribute('Category', categoryName, options); + // CODE SAMPLE END + + response = response.then((r) => { + renderItemsExtended(r.data); + renderFacets(r.data); + } + ); + + return response.then((r)=>console.log("categorylisting-range-facet (end)")) +} + function renderItems(data) { // CODE SAMPLE render-items BEGIN @@ -72,6 +136,28 @@ function renderItems(data) // CODE SAMPLE END } +function renderItemsExtended(data) +{ + var results = data["results"].items; + + if (!results || results.count == 0) + { + console.log("There were no items in this category."); + } + else + { + for (let resultItem of results) + { + var productId = resultItem.id; + var productTitle = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Title"}).values[0] : ""; + var price = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Price"}).values[0] : ""; + var organic = resultItem.attributes ? resultItem.attributes.find(function(a){return a.name=="Organic"}).values[0] : ""; + console.log(productId + " " + productTitle + " (" + price + " kr, " + organic + "), "); //render a product on the category listing page + } + } +} + + function renderFacets(data) { // CODE SAMPLE render-distinct-facets BEGIN @@ -125,56 +211,9 @@ function renderFacets(data) - // private void CategoryListingDistinctFacetExample(string categoryName, string specificManufacturer) - // { - // Debug.WriteLine("categorylisting-distinct-facet: " + Environment.NewLine); - // Debug.WriteLine("items: "); - - // // CODE SAMPLE categorylisting-distinct-facet BEGIN - // // Category listing with a distinct facet applied - // // The use-case here is e.g. when the user clicks on a specific manufacturer in the category listing facet list - // var request = new GetEntitiesByAttributeRequest("Category", categoryName); - - // //Add facets to the request - // //And select a specific facet value to filter on - // request.ResultsOptions.AddDistinctFacet("Manufacturer", new List() { specificManufacturer }); - // request.ResultsOptions.AddDistinctFacet("Category"); - // request.ResultsOptions.AddDistinctFacet("Organic"); - // request.ResultsOptions.AddRangeFacet("Price"); - - // var response = _loop54Client.GetEntitiesByAttribute(request); - // // CODE SAMPLE END - - // RenderItemsExtended(response); - // RenderFacets(response); - // Debug.WriteLine("categorylisting-distinct-facet (end) " + Environment.NewLine); - // } - - // private void CategoryListingRangeFacetExample(string categoryName) - // { - // Debug.WriteLine("categorylisting-range-facet: " + Environment.NewLine); - // Debug.WriteLine("items: "); - - // // CODE SAMPLE categorylisting-range-facet BEGIN - // // Category listing with a range facet - // // The use-case here is e.g. when the user selects a specific price range in the category listing facet list - // var request = new GetEntitiesByAttributeRequest("Category", categoryName); - - // //Add facets to the request - // //And select a specific range for a certain facet - // request.ResultsOptions.AddDistinctFacet("Manufacturer"); - // request.ResultsOptions.AddDistinctFacet("Category"); - // request.ResultsOptions.AddDistinctFacet("Organic"); - // request.ResultsOptions.AddRangeFacet("Price", new RangeFacetSelectedParameter() { Min = 10, Max = 60 }); - - // var response = _loop54Client.GetEntitiesByAttribute(request); - // // CODE SAMPLE END - - // RenderItemsExtended(response); - // RenderFacets(response); + - // Debug.WriteLine("categorylisting-range-facet (end) " + Environment.NewLine); - // } + // private void CategoryListingSortingExample(string categoryName) // { @@ -232,24 +271,7 @@ function renderFacets(data) // #region HelperMethods - // private void RenderItemsExtended(GetEntitiesByAttributeResponse response) - // { - // var results = response.Results.Items; - - // if (!results.Any()) - // Debug.WriteLine("There were no items in this category."); - - // foreach (var resultItem in results) - // { - // var productId = resultItem.GetAttributeValueOrDefault("Id"); - // var productTitle = resultItem.GetAttributeValueOrDefault("Title"); - // var price = resultItem.GetAttributeValueOrDefault("Price"); - // var organic = resultItem.GetAttributeValueOrDefault("Organic"); - // Debug.WriteLine(productId + " " + productTitle + " (" + price + " kr, " + organic + "), "); - // //render a product on the category listing page - // } - // } - + From 88850d4d910d371f415c6d3c35d41d5f16253731 Mon Sep 17 00:00:00 2001 From: Veronica Date: Wed, 24 Oct 2018 13:36:07 +0200 Subject: [PATCH 05/19] xlp2z1Fz: Add more category listings code examples. --- codeexamples/categorylisting.html | 14 +--- codeexamples/categorylisting.js | 133 +++++++++++++++--------------- 2 files changed, 70 insertions(+), 77 deletions(-) diff --git a/codeexamples/categorylisting.html b/codeexamples/categorylisting.html index b68715e..59ac89a 100644 --- a/codeexamples/categorylisting.html +++ b/codeexamples/categorylisting.html @@ -24,16 +24,10 @@ categoryListingExample(client, categoryName).then(() => categoryListingFacetsExample(client, categoryName).then(() => categoryListingDistinctFacetExample(client, categoryName, specificManufacturer).then(() => - categoryListingRangeFacetExample(client, categoryName) - ))); - - - - - - - - + categoryListingRangeFacetExample(client, categoryName).then(() => + categoryListingSortingExample(client, categoryName).then(() => + categoryListingFilterExample(client, categoryName) + ))))); \ No newline at end of file diff --git a/codeexamples/categorylisting.js b/codeexamples/categorylisting.js index 9aac956..3af7968 100644 --- a/codeexamples/categorylisting.js +++ b/codeexamples/categorylisting.js @@ -115,6 +115,56 @@ function categoryListingRangeFacetExample(client, categoryName) return response.then((r)=>console.log("categorylisting-range-facet (end)")) } +function categoryListingSortingExample(client, categoryName) +{ + console.log("categorylisting-sorting:"); + console.log("items: "); + + // CODE SAMPLE categorylisting-sorting BEGIN + // Category listing with sorting + // Set the sort order of the products in the category + var options = {}; + var sortBy = []; + sortBy.push({type:"attribute", attributeName:"Price", order:"asc"});// Primary sorting: Sort on attribute Price, ascending order + sortBy.push({type:"popularity", order:"desc"});// Secondary sorting: Sort on popularity, descending order + options.sortBy = sortBy; + + var response = client.getEntitiesByAttribute('Category', categoryName, options); + // CODE SAMPLE END + + response = response.then((r) => { + renderItemsExtended(r.data); + } + ); + + return response.then((r)=>console.log("categorylisting-sorting (end)")) +} + +function categoryListingFilterExample(client, categoryName) +{ + console.log("categorylisting-filter:"); + console.log("items: "); + + // CODE SAMPLE categorylisting-filter BEGIN + // Category listing with filters + // Filter the products in the category + // In this case, we only want products that have got + // the price attribute, and where the organic attribute is set to "True" + var options = {}; + var filter = JSON.parse('{"and":[{"attributeName":"Price"}, {"type":"attribute", "attributeName":"Organic", "value":"true"}]}'); + options.filter = filter; + + var response = client.getEntitiesByAttribute('Category', categoryName, options); + // CODE SAMPLE END + + response = response.then((r) => { + renderItemsExtended(r.data); + } + ); + + return response.then((r)=>console.log("categorylisting-filter (end)")) +} + function renderItems(data) { // CODE SAMPLE render-items BEGIN @@ -157,7 +207,6 @@ function renderItemsExtended(data) } } - function renderFacets(data) { // CODE SAMPLE render-distinct-facets BEGIN @@ -190,24 +239,25 @@ function renderFacets(data) if(data.results && data.results.facets.length > 0) { var facets = data.results.facets.filter(function(f) { return f.type == 'range' && f.name == "Price"; }); - if (facets && facets.length > 0) + if (facets && facets.length > 0) + { + var facet = facets[0]; + if(facet) { - var facet = facets[0]; - if(facet) - { - console.log("Price: "); - var minPrice = facet.min; - var maxPrice = facet.max; - var minPriceSelected = facet.selectedMin; - var maxPriceSelected = facet.selectedMax; - console.log("min: " + minPrice + " kr, max: " + maxPrice + - " kr, min selected: " + minPriceSelected + " kr," + - " max selected: " + maxPriceSelected + " kr."); - } + console.log("Price: "); + var minPrice = facet.min; + var maxPrice = facet.max; + var minPriceSelected = facet.selectedMin; + var maxPriceSelected = facet.selectedMax; + console.log("min: " + minPrice + " kr, max: " + maxPrice + + " kr, min selected: " + minPriceSelected + " kr," + + " max selected: " + maxPriceSelected + " kr."); } + } } } + @@ -215,60 +265,9 @@ function renderFacets(data) - // private void CategoryListingSortingExample(string categoryName) - // { - // Debug.WriteLine("categorylisting-sorting: " + Environment.NewLine); - // Debug.WriteLine("items: "); - - // // CODE SAMPLE categorylisting-sorting BEGIN - // // Category listing with sorting - // var request = new GetEntitiesByAttributeRequest("Category", categoryName); - - // //Set the sort order of the products in the category - // request.ResultsOptions.SortBy = new List{ - // new EntitySortingParameter("Price") - // { Order = SortOrders.Asc}, // Primary sorting: Sort on attribute Price, ascending order - // new EntitySortingParameter(EntitySortingParameter.Types.Popularity) - // { Order = SortOrders.Desc} // Secondary sorting: Sort on popularity, descending order - // }; - - // var response = _loop54Client.GetEntitiesByAttribute(request); - // // CODE SAMPLE END - - // RenderItemsExtended(response); - - // Debug.WriteLine("categorylisting-sorting (end) " + Environment.NewLine); - // } - - // private void CategoryListingFilterExample(string categoryName) - // { - // Debug.WriteLine("categorylisting-filter: " + Environment.NewLine); - // Debug.WriteLine("items: "); - - // // CODE SAMPLE categorylisting-filter BEGIN - // // Category listing with filters - // var request = new GetEntitiesByAttributeRequest("Category", categoryName); - - // //Filter the products in the category - // //In this case, we only want products that have got - // //the price attribute, and where the organic attribute is set to "True" - // request.ResultsOptions.Filter = new AndFilterParameter( - // new AttributeExistsFilterParameter("Price"), - // //Because the organic attribute is stored as a string in the engine we need to filter with that type. - // //If it would have been stored as a boolean we would have used bool instead. - // new AttributeFilterParameter("Organic", "True") - // ); - - // var response = _loop54Client.GetEntitiesByAttribute(request); - // // CODE SAMPLE END - - // RenderItemsExtended(response); - - // Debug.WriteLine("categorylisting-filter (end) " + Environment.NewLine); - // } - // #endregion + - // #region HelperMethods + From aecf6aa61249994b09f0f9fc8902018732a31d19 Mon Sep 17 00:00:00 2001 From: Veronica Date: Wed, 24 Oct 2018 14:53:09 +0200 Subject: [PATCH 06/19] xlp2z1Fz: Minor fixed in the category listing code examples. Add faceting code examples. --- codeexamples/categorylisting.html | 2 +- codeexamples/categorylisting.js | 8 +- codeexamples/faceting.html | 32 +++++ codeexamples/faceting.js | 228 ++++++++++++++++++++++++++++++ codeexamples/index.html | 1 + 5 files changed, 267 insertions(+), 4 deletions(-) create mode 100644 codeexamples/faceting.html create mode 100644 codeexamples/faceting.js diff --git a/codeexamples/categorylisting.html b/codeexamples/categorylisting.html index 59ac89a..6e46d09 100644 --- a/codeexamples/categorylisting.html +++ b/codeexamples/categorylisting.html @@ -3,7 +3,7 @@ - Loop54 search code examples + Loop54 category listing code examples