countries
This component renders a form select element of all country names and country codes by default, and can also be used to output country codes/names to a Liquid collection.
{% component type: "countries" %}
Parameters and Options
countries
This is the name of the entity that needs to be used for the component retrieving function.
<path/to/layout>
If an empty string, nothing will be rendered.
If paramater is not included, the default virtual layout will be rendered (see below).
<LIST OF COUNTRY CODES>
If an empty string, or if paramater is not included, all countries will be listed by default.
<yourLiquidVariableName>
Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.
Liquid Output
The below output shows the list of country data:
{
"Items": [
{
"DisplayName": "AFGHANISTAN",
"Code": "AF"
},
{
"DisplayName": "ALBANIA",
"Code": "AL"
},
{
"DisplayName": "ALGERIA",
"Code": "DZ"
},
{
"DisplayName": "AMERICAN SAMOA",
"Code": "AS"
},
{
"DisplayName": "ANDORRA",
"Code": "AD"
},
{
"DisplayName": "ANGOLA",
"Code": "AO"
},
{
"DisplayName": "ANTARCTICA",
"Code": "AQ"
},
{
"DisplayName": "ANTIGUA AND BARBUDA",
"Code": "AG"
},
{
"DisplayName": "ARGENTINA",
"Code": "AR"
},
{
"DisplayName": "ARMENIA",
"Code": "AM"
},
{
"DisplayName": "ARUBA",
"Code": "AW"
},
{
"DisplayName": "AUSTRALIA",
"Code": "AU"
},
{
"DisplayName": "AUSTRIA",
"Code": "AT"
},
{
"DisplayName": "AZERBAIJAN",
"Code": "AZ"
},
{
"DisplayName": "BAHAMAS",
"Code": "BS"
},
{
"DisplayName": "BAHRAIN",
"Code": "BH"
},
{
"DisplayName": "BANGLADESH",
"Code": "BD"
},
{
"DisplayName": "BARBADOS",
"Code": "BB"
},
{
"DisplayName": "BELARUS",
"Code": "BY"
},
{
"DisplayName": "BELGIUM",
"Code": "BE"
},
{
"DisplayName": "BELIZE",
"Code": "BZ"
},
{
"DisplayName": "BENIN",
"Code": "BJ"
},
{
"DisplayName": "BERMUDA",
"Code": "BM"
},
{
"DisplayName": "BHUTAN",
"Code": "BT"
},
{
"DisplayName": "BOLIVIA",
"Code": "BO"
},
{
"DisplayName": "BOSNIA AND HERZEGOVINA",
"Code": "BA"
},
{
"DisplayName": "BOTSWANA",
"Code": "BW"
},
{
"DisplayName": "BOUVET ISLAND",
"Code": "BV"
},
{
"DisplayName": "BRAZIL",
"Code": "BR"
},
{
"DisplayName": "BRITISH INDIAN OCEAN TERRITORY",
"Code": "IO"
},
{
"DisplayName": "BRUNEI DARUSSALAM",
"Code": "BN"
},
{
"DisplayName": "BULGARIA",
"Code": "BG"
},
{
"DisplayName": "BURKINA FASO",
"Code": "BF"
},
{
"DisplayName": "BURUNDI",
"Code": "BI"
},
{
"DisplayName": "CAMBODIA",
"Code": "KH"
},
{
"DisplayName": "CAMEROON",
"Code": "CM"
},
{
"DisplayName": "CANADA",
"Code": "CA"
},
{
"DisplayName": "CAPE VERDE",
"Code": "CV"
},
{
"DisplayName": "CAYMAN ISLANDS",
"Code": "KY"
},
{
"DisplayName": "CENTRAL AFRICAN REPUBLIC",
"Code": "CF"
},
{
"DisplayName": "CHAD",
"Code": "TD"
},
{
"DisplayName": "CHILE",
"Code": "CL"
},
{
"DisplayName": "CHINA",
"Code": "CN"
},
{
"DisplayName": "CHRISTMAS ISLAND",
"Code": "CX"
},
{
"DisplayName": "COCOS (KEELING) ISLANDS",
"Code": "CC"
},
{
"DisplayName": "COLOMBIA",
"Code": "CO"
},
{
"DisplayName": "COMOROS",
"Code": "KM"
},
{
"DisplayName": "CONGO",
"Code": "CG"
},
{
"DisplayName": "CONGO, THE DEMOCRATIC REPUBLIC OF THE",
"Code": "CD"
},
{
"DisplayName": "COOK ISLANDS",
"Code": "CK"
},
{
"DisplayName": "COSTA RICA",
"Code": "CR"
},
{
"DisplayName": "CÔTE D'IVOIRE",
"Code": "CI"
},
{
"DisplayName": "CROATIA",
"Code": "HR"
},
{
"DisplayName": "CUBA",
"Code": "CU"
},
{
"DisplayName": "CYPRUS",
"Code": "CY"
},
{
"DisplayName": "CZECH REPUBLIC",
"Code": "CZ"
},
{
"DisplayName": "DENMARK",
"Code": "DK"
},
{
"DisplayName": "DJIBOUTI",
"Code": "DJ"
},
{
"DisplayName": "DOMINICA",
"Code": "DM"
},
{
"DisplayName": "DOMINICAN REPUBLIC",
"Code": "DO"
},
{
"DisplayName": "ECUADOR",
"Code": "EC"
},
{
"DisplayName": "EGYPT",
"Code": "EG"
},
{
"DisplayName": "EL SALVADOR",
"Code": "SV"
},
{
"DisplayName": "EQUATORIAL GUINEA",
"Code": "GQ"
},
{
"DisplayName": "ERITREA",
"Code": "ER"
},
{
"DisplayName": "ESTONIA",
"Code": "EE"
},
{
"DisplayName": "ETHIOPIA",
"Code": "ET"
},
{
"DisplayName": "FALKLAND ISLANDS (MALVINAS)",
"Code": "FK"
},
{
"DisplayName": "FAROE ISLANDS",
"Code": "FO"
},
{
"DisplayName": "FIJI",
"Code": "FJ"
},
{
"DisplayName": "FINLAND",
"Code": "FI"
},
{
"DisplayName": "FRANCE",
"Code": "FR"
},
{
"DisplayName": "FRENCH GUIANA",
"Code": "GF"
},
{
"DisplayName": "FRENCH POLYNESIA",
"Code": "PF"
},
{
"DisplayName": "FRENCH SOUTHERN TERRITORIES",
"Code": "TF"
},
{
"DisplayName": "GABON",
"Code": "GA"
},
{
"DisplayName": "GAMBIA",
"Code": "GM"
},
{
"DisplayName": "GEORGIA",
"Code": "GE"
},
{
"DisplayName": "GERMANY",
"Code": "DE"
},
{
"DisplayName": "GHANA",
"Code": "GH"
},
{
"DisplayName": "GIBRALTAR",
"Code": "GI"
},
{
"DisplayName": "GREECE",
"Code": "GR"
},
{
"DisplayName": "GREENLAND",
"Code": "GL"
},
{
"DisplayName": "GRENADA",
"Code": "GD"
},
{
"DisplayName": "GUADELOUPE",
"Code": "GP"
},
{
"DisplayName": "GUAM",
"Code": "GU"
},
{
"DisplayName": "GUATEMALA",
"Code": "GT"
},
{
"DisplayName": "GUINEA",
"Code": "GN"
},
{
"DisplayName": "GUINEA-BISSAU",
"Code": "GW"
},
{
"DisplayName": "GUYANA",
"Code": "GY"
},
{
"DisplayName": "HAITI",
"Code": "HT"
},
{
"DisplayName": "HEARD ISLAND AND MCDONALD ISLANDS",
"Code": "HM"
},
{
"DisplayName": "HONDURAS",
"Code": "HN"
},
{
"DisplayName": "HONG KONG",
"Code": "HK"
},
{
"DisplayName": "HUNGARY",
"Code": "HU"
},
{
"DisplayName": "ICELAND",
"Code": "IS"
},
{
"DisplayName": "INDIA",
"Code": "IN"
},
{
"DisplayName": "INDONESIA",
"Code": "ID"
},
{
"DisplayName": "IRAN, ISLAMIC REPUBLIC OF",
"Code": "IR"
},
{
"DisplayName": "IRAQ",
"Code": "IQ"
},
{
"DisplayName": "IRELAND",
"Code": "IE"
},
{
"DisplayName": "ISRAEL",
"Code": "IL"
},
{
"DisplayName": "ITALY",
"Code": "IT"
},
{
"DisplayName": "JAMAICA",
"Code": "JM"
},
{
"DisplayName": "JAPAN",
"Code": "JP"
},
{
"DisplayName": "JORDAN",
"Code": "JO"
},
{
"DisplayName": "KAZAKHSTAN",
"Code": "KZ"
},
{
"DisplayName": "KENYA",
"Code": "KE"
},
{
"DisplayName": "KIRIBATI",
"Code": "KI"
},
{
"DisplayName": "KOREA, DEMOCRATIC PEOPLE'S REPUBLIC OF",
"Code": "KP"
},
{
"DisplayName": "KOREA, REPUBLIC OF",
"Code": "KR"
},
{
"DisplayName": "KUWAIT",
"Code": "KW"
},
{
"DisplayName": "KYRGYZSTAN",
"Code": "KG"
},
{
"DisplayName": "LAO PEOPLE'S DEMOCRATIC REPUBLIC (LAOS)",
"Code": "LA"
},
{
"DisplayName": "LATVIA",
"Code": "LV"
},
{
"DisplayName": "LEBANON",
"Code": "LB"
},
{
"DisplayName": "LESOTHO",
"Code": "LS"
},
{
"DisplayName": "LIBERIA",
"Code": "LR"
},
{
"DisplayName": "LIBYAN ARAB JAMAHIRIYA",
"Code": "LY"
},
{
"DisplayName": "LIECHTENSTEIN",
"Code": "LI"
},
{
"DisplayName": "LITHUANIA",
"Code": "LT"
},
{
"DisplayName": "LUXEMBOURG",
"Code": "LU"
},
{
"DisplayName": "MACAO",
"Code": "MO"
},
{
"DisplayName": "MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF",
"Code": "MK"
},
{
"DisplayName": "MADAGASCAR",
"Code": "MG"
},
{
"DisplayName": "MALAWI",
"Code": "MW"
},
{
"DisplayName": "MALAYSIA",
"Code": "MY"
},
{
"DisplayName": "MALDIVES",
"Code": "MV"
},
{
"DisplayName": "MALI",
"Code": "ML"
},
{
"DisplayName": "MALTA",
"Code": "MT"
},
{
"DisplayName": "MARSHALL ISLANDS",
"Code": "MH"
},
{
"DisplayName": "MARTINIQUE",
"Code": "MQ"
},
{
"DisplayName": "MAURITANIA",
"Code": "MR"
},
{
"DisplayName": "MAURITIUS",
"Code": "MU"
},
{
"DisplayName": "MAYOTTE",
"Code": "YT"
},
{
"DisplayName": "MEXICO",
"Code": "MX"
},
{
"DisplayName": "MICRONESIA, FEDERATED STATES OF",
"Code": "FM"
},
{
"DisplayName": "MOLDOVA, REPUBLIC OF",
"Code": "MD"
},
{
"DisplayName": "MONACO",
"Code": "MC"
},
{
"DisplayName": "MONGOLIA",
"Code": "MN"
},
{
"DisplayName": "MONTENEGRO",
"Code": "ME"
},
{
"DisplayName": "MONTSERRAT",
"Code": "MS"
},
{
"DisplayName": "MOROCCO",
"Code": "MA"
},
{
"DisplayName": "MOZAMBIQUE",
"Code": "MZ"
},
{
"DisplayName": "MYANMAR",
"Code": "MM"
},
{
"DisplayName": "NAMIBIA",
"Code": "NA"
},
{
"DisplayName": "NAURU",
"Code": "NR"
},
{
"DisplayName": "NEPAL",
"Code": "NP"
},
{
"DisplayName": "NETHERLANDS",
"Code": "NL"
},
{
"DisplayName": "NETHERLANDS ANTILLES",
"Code": "AN"
},
{
"DisplayName": "NEW CALEDONIA",
"Code": "NC"
},
{
"DisplayName": "NEW ZEALAND",
"Code": "NZ"
},
{
"DisplayName": "NICARAGUA",
"Code": "NI"
},
{
"DisplayName": "NIGER",
"Code": "NE"
},
{
"DisplayName": "NIGERIA",
"Code": "NG"
},
{
"DisplayName": "NIUE",
"Code": "NU"
},
{
"DisplayName": "NORFOLK ISLAND",
"Code": "NF"
},
{
"DisplayName": "NORTHERN MARIANA ISLANDS",
"Code": "MP"
},
{
"DisplayName": "NORWAY",
"Code": "NO"
},
{
"DisplayName": "OMAN",
"Code": "OM"
},
{
"DisplayName": "PAKISTAN",
"Code": "PK"
},
{
"DisplayName": "PALAU",
"Code": "PW"
},
{
"DisplayName": "PALESTINIAN TERRITORY, OCCUPIED",
"Code": "PS"
},
{
"DisplayName": "PANAMA",
"Code": "PA"
},
{
"DisplayName": "PAPUA NEW GUINEA",
"Code": "PG"
},
{
"DisplayName": "PARAGUAY",
"Code": "PY"
},
{
"DisplayName": "PERU",
"Code": "PE"
},
{
"DisplayName": "PHILIPPINES",
"Code": "PH"
},
{
"DisplayName": "PITCAIRN",
"Code": "PN"
},
{
"DisplayName": "POLAND",
"Code": "PL"
},
{
"DisplayName": "PORTUGAL",
"Code": "PT"
},
{
"DisplayName": "PUERTO RICO",
"Code": "PR"
},
{
"DisplayName": "QATAR",
"Code": "QA"
},
{
"DisplayName": "RÉUNION",
"Code": "RE"
},
{
"DisplayName": "ROMANIA",
"Code": "RO"
},
{
"DisplayName": "RUSSIAN FEDERATION",
"Code": "RU"
},
{
"DisplayName": "RWANDA",
"Code": "RW"
},
{
"DisplayName": "SAINT HELENA",
"Code": "SH"
},
{
"DisplayName": "SAINT KITTS AND NEVIS",
"Code": "KN"
},
{
"DisplayName": "SAINT LUCIA",
"Code": "LC"
},
{
"DisplayName": "SAINT PIERRE AND MIQUELON",
"Code": "PM"
},
{
"DisplayName": "SAINT VINCENT AND THE GRENADINES",
"Code": "VC"
},
{
"DisplayName": "SAMOA",
"Code": "WS"
},
{
"DisplayName": "SAN MARINO",
"Code": "SM"
},
{
"DisplayName": "SAO TOME AND PRINCIPE",
"Code": "ST"
},
{
"DisplayName": "SAUDI ARABIA",
"Code": "SA"
},
{
"DisplayName": "SENEGAL",
"Code": "SN"
},
{
"DisplayName": "SERBIA",
"Code": "RS"
},
{
"DisplayName": "SEYCHELLES",
"Code": "SC"
},
{
"DisplayName": "SIERRA LEONE",
"Code": "SL"
},
{
"DisplayName": "SINGAPORE",
"Code": "SG"
},
{
"DisplayName": "SLOVAKIA",
"Code": "SK"
},
{
"DisplayName": "SLOVENIA",
"Code": "SI"
},
{
"DisplayName": "SOLOMON ISLANDS",
"Code": "SB"
},
{
"DisplayName": "SOMALIA",
"Code": "SO"
},
{
"DisplayName": "SOUTH AFRICA",
"Code": "ZA"
},
{
"DisplayName": "SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS",
"Code": "GS"
},
{
"DisplayName": "SPAIN",
"Code": "ES"
},
{
"DisplayName": "SRI LANKA",
"Code": "LK"
},
{
"DisplayName": "SUDAN",
"Code": "SD"
},
{
"DisplayName": "SURINAME",
"Code": "SR"
},
{
"DisplayName": "SVALBARD AND JAN MAYEN",
"Code": "SJ"
},
{
"DisplayName": "SWAZILAND",
"Code": "SZ"
},
{
"DisplayName": "SWEDEN",
"Code": "SE"
},
{
"DisplayName": "SWITZERLAND",
"Code": "CH"
},
{
"DisplayName": "SYRIAN ARAB REPUBLIC",
"Code": "SY"
},
{
"DisplayName": "TAIWAN",
"Code": "TW"
},
{
"DisplayName": "TAJIKISTAN",
"Code": "TJ"
},
{
"DisplayName": "TANZANIA, UNITED REPUBLIC OF",
"Code": "TZ"
},
{
"DisplayName": "THAILAND",
"Code": "TH"
},
{
"DisplayName": "TIMOR-LESTE",
"Code": "TL"
},
{
"DisplayName": "TOGO",
"Code": "TG"
},
{
"DisplayName": "TOKELAU",
"Code": "TK"
},
{
"DisplayName": "TONGA",
"Code": "TO"
},
{
"DisplayName": "TRINIDAD AND TOBAGO",
"Code": "TT"
},
{
"DisplayName": "TUNISIA",
"Code": "TN"
},
{
"DisplayName": "TURKEY",
"Code": "TR"
},
{
"DisplayName": "TURKMENISTAN",
"Code": "TM"
},
{
"DisplayName": "TURKS AND CAICOS ISLANDS",
"Code": "TC"
},
{
"DisplayName": "TUVALU",
"Code": "TV"
},
{
"DisplayName": "UGANDA",
"Code": "UG"
},
{
"DisplayName": "UKRAINE",
"Code": "UA"
},
{
"DisplayName": "UNITED ARAB EMIRATES",
"Code": "AE"
},
{
"DisplayName": "UNITED KINGDOM",
"Code": "GB"
},
{
"DisplayName": "UNITED STATES",
"Code": "US"
},
{
"DisplayName": "UNITED STATES MINOR OUTLYING ISLANDS",
"Code": "UM"
},
{
"DisplayName": "URUGUAY",
"Code": "UY"
},
{
"DisplayName": "UZBEKISTAN",
"Code": "UZ"
},
{
"DisplayName": "VANUATU",
"Code": "VU"
},
{
"DisplayName": "VENEZUELA",
"Code": "VE"
},
{
"DisplayName": "VIET NAM",
"Code": "VN"
},
{
"DisplayName": "VIRGIN ISLANDS, BRITISH",
"Code": "VG"
},
{
"DisplayName": "VIRGIN ISLANDS, U.S.",
"Code": "VI"
},
{
"DisplayName": "WALLIS AND FUTUNA",
"Code": "WF"
},
{
"DisplayName": "WESTERN SAHARA",
"Code": "EH"
},
{
"DisplayName": "YEMEN",
"Code": "YE"
},
{
"DisplayName": "ZAMBIA",
"Code": "ZM"
},
{
"DisplayName": "ZIMBABWE",
"Code": "ZW"
}
],
"Params": {
"type": "countries",
"layout": "",
"collectionvariable": "countryCollection"
}
}
Virtual Layout
If not using any custom layout or collection, the default virtual layout will output as a form select element:
{% assign destinationCountryCode = shoppingCartData.destinationCountry.code %}
{% if this.items.size > 0 %}
<div class="cms_fake_select">
<select data-cms_cart_countries="">
<option value="">Please select</option>
{% for item in this.items %}
<option value="{{item.code}}" {% if destinationCountryCode == item.code %} selected="true" {% endif %}>{{item.displayName}}</option>
{% endfor %}
</select>
</div>
{% endif %}
{% endif %}
Rendering the form element:
Accessing the Data
JSON Output
You can output the full JSON for your component data by referencing the root Liquid object {{this}}
in your module’s layouts, or directly on your page, if using the collectionVariable
parameter in your component tag.
For example:
{% component type: ... collectionVariable: "myData" %}
You can then render the JSON like so:
{{myData}}
For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.
Rendering Property Values
This data is also accessible directly on the Page or Template via a Liquid Collection by adding collectionVariable
to the Component.
An example using collectionVariable
with value "countryCollection":
{% component type: "countries", collectionVariable: "countryCollection" %}
Accessing a specific item within the collection. In this case the third item (zero based index), which in our example would render the value ALGERIA
{{countryCollection.items[2]['DisplayName']}}