Enable other Liquid objects

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Introduction

There are some tags that need to be specifically inserted into layouts to become available as objects in a Liquid collection.

Let's take the Large product layout that is used to render a a product. By default the tag does not contain the {tag_favorites} or {tag_tellafriend}. If you insert {{this | json}} on the layout to explore what Liquid items are available you will not see the favorites or the tellafriend JSON objects exposed.

Example

To make this clearer let's look at a hands-on example. Reset the Large product layout to default and add {{this | json}} at the end to see what are the default Liquid items. You will get an output similar to this:

{
  "moduleName": "tag_productlist_3",
  "description": "This is a sample product. You can edit this product by logging in to your Admin Console and going to 'ECommerce > Products'\r\n",
  "catalogId": "25479",
  "id": "9057638",
  "name": "Sample Product 8",
  "url": "/classic-boutique/sample-product-8",
  "title": "",
  "smallImage": "/images/products/prod9.gif",
  "smallImageUrl": "/images/products/prod9.gif",
  "largeImage": "/images/products/placeholder-product-image-large.png",
  "largeImageUrl": "/images/products/placeholder-product-image-large.png",
  "releaseDate": "2011-06-02",
  "expiryDate": "9999-01-01",
  "productCode": "FPHUG6816Z",
  "inStock": "N/A",
  "onOrder": "0",
  "reorder": "",
  "minUnits": "1",
  "maxUnits": "",
  "unitType": "",
  "tags": "",
  "custom1": "",
  "custom2": "",
  "custom3": "",
  "custom4": "",
  "isOnSale": "0",
  "countryCode": "US",
  "currencyFormat": "$",
  "countryCurrencyFormat": "USD",
  "retailPrice": "25.00",
  "salePrice": "25.00",
  "savePrice": "0.00",
  "discountPrice": "25.00",
  "totalDiscountPrice": "25.00",
  "tax": "0.00",
  "taxRate": "0",
  "totalPrice": "25.00",
  "totalRetailPrice": "25.00",
  "taxCode": "Not Applicable",
  "poplets": [
    {
      "path": "/images/products/detail_img1_small.gif",
      "url": "/images/products/detail_img1_small.gif"
    },
    {
      "path": "/images/products/detail_img2_small.gif",
      "url": "/images/products/detail_img2_small.gif"
    }
  ],
  "metaTitle": "",
  "metaDescription": "",
  "urlWithHost": "http://tag-test01.businesscatalyst.com/classic-boutique/sample-product-8",
  "oid_9": {
    "moduleName": "oid",
    "oid": "9057638"
  },
  "otype_10": {
    "moduleName": "otype",
    "otype": "27"
  },
  "globals": {GLOBAL_DATA-HERE},
  "captchav2_11": {
    "moduleName": "captchav2",
    "moduleDescriptor": {
      "templatePath": "",
      "parameters": "",
      "apiEndpoint": "/api/v3/captchav2",
      "objectType": "-1",
      "objectId": "-1",
      "adminUrl": ""
    }
  }
}

That is all the information that is available by default on the Large product layout. What if we want to access the {tag_favorites} button? Say we need to construct a button that will enable the user to add this product to a wishlist.

Adding a tag

Let's add the {tag_favorites} tag to the layout like this:

After we have added the tag, the front-end will look like this:

Notice the "Add to Favorites" URL is rendered below the poplets. If you take a look at the Liquid items availble now you will also notice a new item has appeared:

"tag_addtofavorites_4_9": 
{
   "moduleName":"tag_addtofavorites_4",
   "moduleDescriptor":{
      "templatePath":"",  "parameters":"/images/products/detail_img1_small.gif,/images/products/detail_img1_small.gif",
      "apiEndpoint":"/api/v3/tag_addtofavorites_4",
      "objectType":"-1",
      "objectId":"-1",
      "adminUrl":""
   },
   "isFavorite":false,
   "addUrl":"/FavoriteProcess.aspx?OID=9057638&OTYPE=27",
   "addText":"/images/products/detail_img1_small.gif",
   "removeUrl":"/FavoriteProcess.aspx?A=Remove&OID=9057638&OTYPE=27",
   "removeText":"/images/products/detail_img1_small.gif",
   "full":"/images/products/detail_img1_small.gif"
}

Now you have all the information to build your own href, button or other js implementation to add this item to the wishlist.

Suppress default output

The only remaining thing we need to take care of is to hide the default output of the tag. At this point you have the default "Add to Favorites" link and the Liquid representation.

To hide the default output of the tag you have two options:

{tag_addtofavorites,, collection="favorites" template=""}
{{ favorites | json }}
{% capture favorites -%}
	{tag_addtofavorites,/images/add.png,/images/remove.png }
{% endcapture -%}

Like so:

Tags that can be captured under a collection

Warning: for the collection to work properly, all the positional parameters of the tags need to be included. for example:
{tag_addtofavorites,, collection="addToFavs" template=""}
or
{tag_addtofavorites,Add to Favorites,Remove Favorite collection="addToFavs" template=""}
or
{tag_productlist,,,,Price,, collection="prodList"}

The table of tags below can be captured under a collection parameter to be then outputed by using Liquid. The template="" parameter has been used in the examples to suppress the default output:

Section Layout Tag with example
Blog Overall layout {tag_postlist,1 collection="postList" template=""}
{tag_blogrecentpost, collection="recentPosts" template=""}
{tag_blogtaglist, collection="tagList" template=""}
{tag_blogtagcloud, collection="tagCloud" template=""}
{tag_blogpostarchive, collection="postArchive" template=""}
{tag_blogcategorylist, collection="catList" template=""}
Post details layout {tag_pendingcomments, collection="pendingComments"}
{tag_commentlist, collection="commentsList"}
{tag_commentspaged,, collection="pagedComments" template=""}
{tag_trackbacklist, collection="trackbackList" template=""}
E-Commerce Individual product (large) layout {tag_relatedproducts,, collection="relatedProds" template=""}
Online shop overall layout {tag_cataloguebreadcrumbs, collection="catBreadcrumbs" template=""}
{tag_cataloguelist,2,,,,, collection="catList" template=""}
{tag_browsepanel,false,false,false, collection="browsePanel" template=""}
{tag_productlist,,,,Price,, collection="prodList" template=""}
Various {tag_addtofavorites,, collection="addToFavs" template=""}
{tag_tellafriend, collection="tellFriend" template=""}

Conclusion

To sum things up, if you notice the tag you want to use is not included in the JSON output for a particular layout all you need to do is:

  1. add that particular tag to the layout
  2. add the collection and template parameter or wrap the tag in a CAPTURE tag
  3. use the Liquid output to create your custom button, link or javascript implementation

Warning: if you need to access a liquid tag that has a space in its name, for example tag_large image_value use any of the syntax below depending on the context:

  • {{this.items[0].["large image_value"]}} - if you are in a layout context
  • {{cars1.items[0].["large image_value"]}} - if you are rendering a collection. In this case replace this with the actual collection name

Liquid does not allow for the name of its output tags to contain spaces. In this case the tag that contains a space needs to be wrapped in square brackets and quotes and preceded by this. or the collection name.