Custom Data

To add custom data like Product Tags, Labels, Metafields, Reviews, Wishlist, Quick View, etc, to the product cards.

1. Product Card functionality can be extended by using Callback Functions.

2. All Frenzy Callback functions are added to snippets- frenzy-callback-function.liquid file

3. In Shopify Code Editor create a file under snippets- frenzy-callback-function.liquid.

4. Create a function window.FrenzyProductGridChangeCallBack.

5. This function takes 2 arguments- html, data.

6. 'html'-> contains the product card, 'data'-> contains the JSON object for product data.

7. 'data' object contains all the keys for Product Tags, Labels, Metafields, etc.

8. The keys in the 'data' object is controlled from the Dashboard. (Search & Collections -> Filter Settings -> Extra Properties -> Response Fields. Below is an example image. This is done to limit the data in the API response and maintain the platform speed.

9. 
10. The list of keys/internal names can be selected from Search & Collections -> Filter Settings -> Filter Options -> Internal Name.

Below is an example of FrenzyProductGridChangeCallBack function. This example shows how you can use a custom fields in the 'data' object to create a custom anchor tag using 2 custom keys - frenzyBrandLink and st_tag_brand.

<script>

window.FrenzyProductGridChangeCallBack = async function(html, data){

var st_tag_brand = html.querySelector(".card-vendor");
st_tag_brand.innerHTML = '<a class="mobile-url" href="'+ data.frenzyBrandLink+'" title="'+data.st_tag_brand[0]+'">Brand: <b>'+data.st_tag_brand[0]+'</b></a>';

}

</script>