Demonstrate Services Page.
View this pattern on the live demo site
Services index page wrapping the service-cards section.
{% comment %}
Outputs a services landing page
{% endcomment -%}
{%- include "/_header.liquid" -%}
{%- include "/sections/_generic_banner.liquid" -%}
{%- include "/sections/_breadcrumbs.liquid" -%}
{%- include "/sections/_service_cards.liquid" section_class:'py-5 text-bg-light' -%}
{%- include "/sections/_simple_cta.liquid" -%}
{%- include "/_footer.liquid" -%}Card grid of services from the datastore.
{% comment %}
Displays a Section for services listing (cards).
Inputs:
section_class
section_id
services_limit - optional max number of services when falling back to the Services datastore
show_all_services_link - when true, show a "View All Services" link under the cards
Custom Fields:
services_title
services_subtitle
services
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- var services = entity.services -%}
{%- unless services.is_valid and services.size > 0 -%}
{%- datastore_items services = datastore:'Services' limit:services_limit sort_by:'random' cache_random:true -%}
{%- endunless -%}
<section{% if section_class %} class="{{ section_class }}"{% elsif entity.section_class %} class="{{ entity.section_class }}"{% endif %}{% if section_id %} id="{{ section_id }}"{% elsif entity.section_id %} id="{{ entity.section_id }}"{% endif %}>
<div class="container py-5">
{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
{%- include '/common/_title_with_subtitle.liquid' title:entity.services_title subtitle:entity.services_subtitle title_classname:'h2 text-center' subtitle_classname:'fs-5 mt-3 text-center mx-auto px-3 mb-0' postincrement_headinglevel:true -%}
{%- include "/partials/_service_cards.liquid" -%}
{%- if services.is_valid and show_all_services_link -%}
<div class="text-center mt-4">
<a href="/shop" class="btn btn-outline-primary fw-semibold text-uppercase">View All Services</a>
</div>
{%- endif -%}
</div>
</section>
{%- set section_rendered = true -%}
Custom fields owned by the service cards section.
[
{
"Type": "group",
"Label": "Services Section",
"Fields": [
{
"Type": "text",
"FieldID": "services_title",
"Label": "Services Title",
"DefaultValue": "Our Services"
},
{
"Type": "text",
"FieldID": "services_subtitle",
"Label": "Services Subtitle",
"DefaultValue": "We offer a wide range of services to meet your needs."
},
{
"Type": "fieldset",
"FieldID": "services",
"Label": "Service List",
"IsRequired": true,
"Fields": [
{
"Type": "select",
"FieldID": "content_type",
"Label": "Content Type",
"IsRequired": true,
"RequiredMessage": "This field is required",
"Options": "content|Custom Content;article|Article/Page;datastore_item|Datastore Item",
"Delimiter": ";",
"ValueDelimiter": "|"
},
{
"Type": "entity",
"FieldID": "article",
"Label": "Article/Page",
"Condition": {
"FieldID": "content_type",
"Type": "eq",
"Value": "article"
},
"IsRequired": true
},
{
"Type": "datastoreitem",
"FieldID": "datastore_item",
"Label": "Datastore Item",
"Condition": {
"FieldID": "content_type",
"Type": "eq",
"Value": "datastore_item"
},
"IsRequired": true
},
{
"Type": "group",
"Label": "Service Info",
"Condition": {
"FieldID": "content_type",
"Type": "eq",
"Value": "content"
},
"Fields": [
{
"Type": "text",
"FieldID": "title",
"Label": "Title",
"IsRequired": true
},
{
"Type": "text",
"FieldID": "subtitle",
"Label": "Subtitle"
},
{
"Type": "url",
"FieldID": "link",
"Label": "Link"
},
{
"Type": "image",
"FieldID": "image",
"Label": "Image"
},
{
"Type": "html",
"FieldID": "summary",
"Label": "Summary"
}
]
}
],
"AllowMultiple": true
}
]
}
]
Responsive card grid of the selected (or datastore) services.
{% comment %}
Renders a grid of service cards
Inputs:
services (collection) - fieldset rows and/or service/article entities
{% endcomment -%}
{%- if services.is_valid -%}
<div class="row g-4 justify-content-center pt-2">
{%- for servicerow in services -%}
<div class="col-12 col-md-6 col-xl-3">
{%- var service = servicerow -%}
{%- case servicerow.content_type.value -%}
{%- when 'article' -%}
{%- set service = servicerow.article -%}
{%- when 'datastore_item' -%}
{%- set service = servicerow.datastore_item -%}
{%- endcase -%}
{%- include '/partials/_service_card.liquid' -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}One service card: image, title, and summary.
{% comment %}
Displays a single service card based on the specified content type
Note: If the service has a description, summary, or summary_html property then it will be used without further modification. Otherwise, the content or content_html field will be stripped and truncated.
Inputs:
service (datastore_item/article/fieldset item)
img_preset_service_card - The image preset to use for the service thumbnail
Service is expected to have the following fields:
title (required)
subtitle (optional)
image (optional)
description or summary or summary_html or content or content_html (optional)
full_url or link (optional)
{% endcomment -%}
{%- if service is_valid and service is_object -%}
{%- var serviceUrl = service.full_url | default:service.link -%}
{%- var serviceContent = service.description | default: service.summary | default: service.summary_html -%}
{%- unless serviceContent.is_valid -%}
{%- set serviceContent = service.content | default:service.content_html | strip_html | html_decode | truncate_to_word: 240, false, '...' -%}
{%- endunless -%}
<div class="card h-100 border-0 shadow-sm overflow-hidden text-bg-light">
{%- if service.image is_valid -%}
<div class="ratio ratio-16x9 bg-dark">
{%- img service.image link:false preset:img_preset_service_card class:'w-100 h-100' style:'object-fit: cover;' -%}
</div>
{%- endif -%}
<div class="card-body p-4 d-flex flex-column position-relative">
{%- if service.subtitle is_valid -%}
<p class="small text-uppercase text-primary fw-semibold mb-2" style="letter-spacing: 0.06em;">{{ service.subtitle }}</p>
{%- endif -%}
<p class="h4 card-title mb-3">
{%- if serviceUrl is_valid -%}
<a href="{{ serviceUrl }}" class="stretched-link text-reset text-decoration-none">{{ service.title }}</a>
{%- else -%}
{{ service.title }}
{%- endif -%}
</p>
{%- if serviceContent is_valid -%}
<p class="card-text flex-grow-1 mb-3">{{ serviceContent }}</p>
{%- endif -%}
{%- if serviceUrl is_valid -%}
<p class="mb-0 small fw-semibold text-primary text-uppercase" style="letter-spacing: 0.04em;">Learn more <i class="bi bi-arrow-right" aria-hidden="true"></i></p>
{%- endif -%}
</div>
</div>
{%- endif -%}