Remote Integrations

Parsley can make web requests to remote data for server side rendering.

GroupBy (GBi) eCommerce Search

GroupBy is smart eCommerce search tool that can reference millions of rich product data points in seconds. integrates with GroupBy in these ways: search, product lookup, personalized navigation, and personalized product refinement lookups. The GroupBy integration into the's Server Side Rendering language Parsley can be used to produce statically cached, search engine rich, product pages, category pages, search pages, and home pages.

This integration requires an api from GroupBy, and three settings in Zesty. The settings are:

  • [groupby][client-key] // (optional) unique client key

  • [groupby][url] // api endpoint

  • [groupby][collection] // the default groupby collection

Working in Parsley

In Parsley each loops can be used to iterate over search, product, refinements, or navigation data from GroupBy.

Searching GroupBy (

This method allows you to run a string based search to your GroupBy API

{{each, area, search, limit) as result}}
<img src="{{result.visualVariants:0:productImage}}" alt="{{result.title}} Image">
  • collection: The collection name from GroupBy e.g. products

  • area: The area name from GroupBy e.g. Storefront

  • search: Search query e.g. Red Dress

  • limit: Maximum results to return and each through e.g. 20 (defaults to 10)

Accessing Nested Data

GroupBy results are custom tailored per each customer implementation, because of that, zesty flattens the returned object so Parsley can access it like {{result.visualVariants:0:productImage}}the use of the semicolons is in place of . , so treat it as you were accessing a JSON (javascript object notation) object.

Working with JSON output

You may output a full JSON string from the result to view the object to know paths like {{result.visualVariants:0:productImage}}or as a shortcut to work with dynamic javascript rendering. It is done like this:

<p>View the JSON string</p>
<p>Access the object with javascript</p>
let myobj = {{result._json}}; // this will auto create the javascript object

Accessing a Product from GroupBy (api.gbi.product)

Parsley can be used to server side render product pages by accessing GroupBy. The result is search engine rich and fast loading statically cached pages.

{{each api.gbi.product(collection, area, productId) as product}}
<img src="{{product.visualVariants:0:productImage}}" alt="{{product.title}} Image">
<!-- this gets the first naviigation refinement available -->
<p>Refinements count: {{navitem._refinementCount}}</p>
<p>Refinements String: {{navitem._refinements}}</p>

Accessing a Rich Navigation from GroupBy (api.gbi.navigation)

{{each api.gbi.navigation(collection, area, search) as navitem}}
<p>Refinements count: {{navitem._refinementCount}}</p>
<p>Refinements String: {{navitem._refinements}}</p>

Accessing a Search with Refinements from GroupBy (api.gbi.searchWithRefinements)

A very powerful feature of GroupBy is to make searches, but with relative refinements based on the product being browsed.

{{each api.gbi.navigation(collection, area, search, refinements, limit) as refinedSearchItem}}
<img src="{{refinedSearchItem.visualVariants:0:productImage}}" alt="{{result.title}} Image">

This functionality can be used in conjunction with search or product navigation output to produce results that output similar to how generates. Parsley conveniently generates a string that can be passed to achieve these results.

<!-- Custom Related Items Below the Product -->
{{each api.gbi.navigation(products, Storefront, productID, 5) as relatedNavItem}}
<h2>Total Refinements: {{navitems._refinementCount}}</h2>
<!-- this store a string for later access -->
{{$refinements = {navitem._refinements} }}
{{each api.gbi.searchWithRefinements(products, Storefront, ,{$$refinements},10) as refined }}

How the Refinements String Works

Parsley needs strings passed to it, therefore a custom string output was made to handle what is normally a JSON array of objects posted to a GroupBy endpoint. Here is an example the string needed for Zesty:

categories*1:Value:Jewelry Watches|categories*1:Value:Women|categories*1:Value:Bed Bath|categories*1:Value:Men|categories*1:Value:Fine China|categories*1:Value:Handbags Accessories|categories*1:Value:Plus Sizes|categories*1:Value:Dining Entertaining|categories*1:Value:Bath Rugs Bath Mats|categories*1:Value:Shower Curtains

It's a delimited string. Here is how it works if you need to generate your own string. * represents ., colons : act like CSV, | are the delimiter.