109 lines
3.7 KiB
Plaintext
109 lines
3.7 KiB
Plaintext
{%- assign disclosure_surface = surface | default: 'product_page' -%}
|
|
{%- assign disclosures = product.metafields.shopify.disclosure.value -%}
|
|
{%- assign summary_html = '' -%}
|
|
{%- assign details_html = '' -%}
|
|
{%- assign rendered_disclosures_count = 0 -%}
|
|
|
|
{%- if disclosures != blank -%}
|
|
{%- for disclosure in disclosures -%}
|
|
{%- assign surfaces = disclosure.display_preferences.value.surfaces -%}
|
|
|
|
{%- if surfaces contains disclosure_surface -%}
|
|
{%- assign title = disclosure.title.value -%}
|
|
{%- assign img = disclosure.symbol.value -%}
|
|
{%- assign content = disclosure.content -%}
|
|
|
|
{%- capture summary_item -%}
|
|
{%- if rendered_disclosures_count > 0 -%}
|
|
<span class="disclosures-separator">•</span>
|
|
{%- endif -%}
|
|
<span class="disclosures-summary-item">
|
|
{%- if img != blank -%}
|
|
<img
|
|
src="{{ img | image_url: width: 40 }}"
|
|
srcset="{{ img | image_url: width: 20 }} 1x, {{ img | image_url: width: 40 }} 2x, {{ img | image_url: width: 60 }} 3x"
|
|
alt=""
|
|
class="disclosures__icon"
|
|
width="40"
|
|
height="31"
|
|
loading="lazy"
|
|
>
|
|
{%- endif -%}
|
|
<span class="disclosures-summary-item__title">{{ title }}</span>
|
|
<span class="disclosures-summary-item__open-title">{{ title }}</span>
|
|
</span>
|
|
{%- endcapture -%}
|
|
|
|
{%- capture details_item -%}
|
|
<div class="disclosures-item">
|
|
{%- if rendered_disclosures_count > 0 -%}
|
|
{%- if title != blank or img != blank -%}
|
|
<div class="disclosures-item__header">
|
|
{%- if img != blank -%}
|
|
<img
|
|
src="{{ img | image_url: width: 40 }}"
|
|
srcset="{{ img | image_url: width: 20 }} 1x, {{ img | image_url: width: 40 }} 2x, {{ img | image_url: width: 60 }} 3x"
|
|
alt=""
|
|
class="disclosures__icon"
|
|
width="40"
|
|
height="31"
|
|
loading="lazy"
|
|
>
|
|
{%- endif -%}
|
|
{%- if title != blank -%}
|
|
<span>{{ title }}</span>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
|
|
<div class="disclosures-item__content">
|
|
{{ content | metafield_tag }}
|
|
</div>
|
|
</div>
|
|
{%- endcapture -%}
|
|
|
|
{%- capture summary_html -%}{{ summary_html }}{{ summary_item }}{%- endcapture -%}
|
|
{%- capture details_html -%}{{ details_html }}{{ details_item }}{%- endcapture -%}
|
|
{%- assign rendered_disclosures_count = rendered_disclosures_count | plus: 1 -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
|
|
{%- if rendered_disclosures_count > 0 -%}
|
|
{{ 'component-disclosures.css' | asset_url | stylesheet_tag }}
|
|
|
|
<div
|
|
class="disclosures spacing-style"
|
|
{% if block != blank %}
|
|
{{ block.shopify_attributes }}
|
|
{% endif %}
|
|
>
|
|
{%- if heading != blank -%}
|
|
<h3 class="disclosures__heading {{ heading_size }}">
|
|
{{ heading | escape }}
|
|
</h3>
|
|
{%- endif -%}
|
|
|
|
<details
|
|
class="disclosures__details"
|
|
{% if open_by_default %}
|
|
open
|
|
{% endif %}
|
|
>
|
|
<summary class="disclosures__summary">
|
|
<div class="disclosures__summary-content">
|
|
{{ summary_html }}
|
|
</div>
|
|
{{- 'icon-caret.svg' | inline_asset_content -}}
|
|
</summary>
|
|
|
|
<disclosures-content class="disclosures__content">
|
|
{{ details_html }}
|
|
</disclosures-content>
|
|
</details>
|
|
</div>
|
|
|
|
<script src="{{ 'disclosures.js' | asset_url }}" defer="defer"></script>
|
|
{%- endif -%}
|