Get Element by ID in ZOO

Sometimes when using ZOO, we need to call an element (usually if we're creating a custom element) and the only way to do this is by getting it's ID. An element's ID is automatically generated when you assign it to a position.

The pathway to finding an element's ID is simple. Navigate to /media/zoo/applications/[yourapplication]/templates/[template]/renderer/item/positions.config

Open this file and find the renderer you're looking for - it will be displayed like this "[application].[template].full".

"[application].[template].full":  {
		"title":  {
			"0":  {
				"showlabel": "0",
				"altlabel": "",
				"link_to_item": "0",
				"element": "_itemname"
			}
		},
		"media":  {
			"0":  {
				"showlabel": "0",
				"altlabel": "",
				"width": "500",
				"height": "500",
				"link_to_item": "0",
				"element": "246e955a-5a57-4ad0-ad8c-c15fc7bfccb6"
			},
			"1":  {
				"showlabel": "0",
				"altlabel": "",
				"mode": "lightbox",
				"lightbox_group": "1",
				"lightbox_caption": "1",
				"slideshow_animated": "top",
				"slideshow_width": "auto",
				"slideshow_height": "auto",
				"slideshow_autoplay": "1",
				"slideshow_interval": "5000",
				"slideshow_duration": "500",
				"effect": "",
				"spotlight_effect": "default",
				"spotlight_caption": "0",
				"corners": "square",
				"margin": "1",
				"order": "asc",
				"width": "100",
				"height": "0",
				"count": "0",
				"element": "8f1b39e8-be85-41bd-993f-7284dabdd061"
			}
		},
		"description":  {
			"0":  {
				"showlabel": "0",
				"altlabel": "",
				"separated_by": "tag=[<div>%s<\/div>]",
				"display": "all",
				"element": "83ba7366-d126-40f0-923e-3e7a94f0e773"
			}
		},
		"specification":  {
			"0":  {
				"showlabel": "1",
				"altlabel": "",
				"separated_by": "separator=[ ]",
				"element": "56befa0b-6dbf-4819-87b4-d94fc27ff965"
			},
			"1":  {
				"showlabel": "1",
				"altlabel": "",
				"separated_by": "separator=[, ]",
				"element": "d61cb730-00c1-48ad-bef9-0dceb5cfc018"
			},
			"2":  {
				"showlabel": "0",
				"altlabel": "",
				"width": "",
				"height": "",
				"link_to_item": "1",
				"element": "b412c3ff-30e7-43a6-9aae-18b4fbdb77d0"
			}
		},
		"bottom":  {
			"0":  {
				"showlabel": "1",
				"altlabel": "Share this product",
				"ggsize": "medium",
				"ggannotation": "none",
				"ggwidth": "",
				"fbheight": "20",
				"fbwidth": "100",
				"fbshow_faces": "false",
				"fblayout": "button_count",
				"fbaction": "like",
				"fbcolorscheme": "light",
				"fbref": "",
				"twvia": "",
				"twtext": "",
				"twrelated": "",
				"twcount": "none",
				"element": "d4e76744-47c4-4e90-980a-12c846789f5e"
			}
		},
		"related":  {
			"0":  {
				"showlabel": "1",
				"altlabel": "",
				"order":  {
					"0": "_itemcreated",
					"1": "",
					"2": ""
				},
				"layout": "related",
				"link_to_item": "0",
				"separated_by": "tag=[<div>%s<\/div>]",
				"element": "64c188a6-cf2f-4895-8879-8b67a58b6780"
			}
		}
	},

If there is more than 1 element in a position, it will be listed in the order that it has been assigned. Imagine we are looing for the ID of the element in the description position.

"description":  {
	"0":  {
		"showlabel": "0",
		"altlabel": "",
		"separated_by": "tag=[<div>%s<\/div>]",
		"display": "all",
		"element": "83ba7366-d126-40f0-923e-3e7a94f0e773"
	}
},

This is what we're looking for: "element": "83ba7366-d126-40f0-923e-3e7a94f0e773". Whenever we want to pull information from this specific element, we reference this ID 83ba7366-d126-40f0-923e-3e7a94f0e773. All elements have an ID you can find in the position file in it's relative template folder.

To render it:

Echo $item->getElement('_itemcategory')->render())

Or

$theElement = $item->getElement('_itemcategory');
Echo $theElement->render();