ESI Demo Page | Site Name

ESI Demo Page

GeoIP Details:

  • continent_code:
  • country_code:
  • country_code3:
  • country_name:
  • dma_code:
  • latitude: 39.96250
  • longitude: -83.00610
  • region: Ohio
  • region_name:
  • city: Columbus
  • postal_code: 43215

GeoIP Cloudflare Details:

  • GEOIP_COLO: CMH
  • GEOIP_COUNTRY: US
  • GEOIP_CITY: Columbus
  • GEOIP_CONTINENT: NA
  • GEOIP_LATITUDE: 39.96250
  • GEOIP_POSTALCODE: 43215
  • GEOIP_METROCODE: 535
  • GEOIP_REGION: Ohio
  • GEOIP_REGIONCODE: OH
  • GEOIP_TIMEZONE: America/New_York

Includes

<esi:include src="/_fragments/example-esi-include" />

The most common ESI tag you're likely to use, Edge will request the given URL and replace the tag with whatever is returned.
The $(varname) syntax can used within the src attribute to use ESI variables

Please add some GET params to URL to see the query related examples.

Contrary to the ESI Spec the alt and onerror attributes are not supported.

Examples

<esi:include src="https://canary-uk.uat.matrix.squiz.cloud/cloudflare-integration-tests/kitchen-sink/fragments/fragment-1" />

<esi:include src="https://canary-uk.uat.matrix.squiz.cloud/cloudflare-integration-tests/kitchen-sink/fragments/fragment-2?$(QUERY_STRING)" />

<esi:include src="https://canary-uk.uat.matrix.squiz.cloud/cloudflare-integration-tests/kitchen-sink/fragments/fragment-2?foo_says_what=$(QUERY_STRING{foo})" />

<esi:include src="https://canary-uk.uat.matrix.squiz.cloud/cloudflare-integration-tests/kitchen-sink/fragments/fragment-2?system_cookie=$(HTTP_COOKIE{SQ_SYSTEM_SESSION})" />

Vars

<esi:vars>$(QUERY_STRING)</esi:vars>

Another fairly common tag, prints a variable from the ESI into the page.
HTTP_COOKIE and QUERY_STRING variables can be accessed with a dictionary syntax using curly brackets (try adding a ?foo=bar style query string to this page)

Examples

<esi:vars>$(QUERY_STRING)</esi:vars>

<esi:vars>$(QUERY_STRING{foo})</esi:vars>

When - Choose - Otherwise

<esi:choose>
<esi:when test="condition">
    do something
</esi:when>
<esi:otherwise>
    so something else
</esi:otherwise>
</esi:when>

Simple conditional logic
Content inside when / otherwise tags can include other esi tags

Examples

Hello
<esi:choose>
    <esi:when test="$(QUERY_STRING{name}) == ''">
        Anonymous
    </esi:when>
    <esi:when test="$(QUERY_STRING{name}) == 'Barry'">
        Bazza
    </esi:when>
    <esi:otherwise>
        <esi:vars>$(QUERY_STRING{name})</esi:vars>
    </esi:otherwise>
</esi:choose>

Hello Anonymous

Remove

<esi:remove> Some content to hide! </esi:remove>

ESI Remove tags and everything they contain are deleted from the processed markup.
Typically used to provide fallback content in case ESI processing fails

Examples

<esi:include src="./?external-uuid=2a53020b-c894-44b0-9536-1322935f8d51"/>
<esi:remove>
    You can't see me!
</esi:remove>

HTML Comments

<--esi <esi:vars>$(QUERY_STRING)</esi:vars> -->

A special form of HTML comment tag, the tags are removed by the ESI processor but unlike the <esi:remove> tag ESI instructions within these comments are still processed.

Combine with <esi:remove> to provide fallback content while commenting out ESI tags if ESI process is disabled

Examples

<--esi <esi:include src="https://canary-uk.uat.matrix.squiz.cloud/cloudflare-integration-tests/kitchen-sink/fragments/fragment-1" /> -->

Comments

<esi:comment text="comment" />

Tags in this form are removed and never show in the final HTML
They can be used similarly to Matrix comments (<!--@@ Comment goes here @@-->)

Check the Admin UI asset/container: ESI Comments #4523 and the Source code of this page