Follow these steps to enable gating on your product template:
- Access your store’s admin and navigate to “Themes” under the “Online Store” Sales channels.
- Launch the options menu of the backup theme previously created and select “Edit code”.
- In the code view sidebar, locate and expand the “Snippets” directory.
- At the top of the list of Liquid files, choose “Add a new snippet”.
- Create a new snippet titled “fanpass-gated-product”.
- Paste the code block below into the fanpass-gated-product.liquid snippet just created and save the file.
{% comment %}
Fan Pass Gated Product
{% endcomment %}
{% comment %} Fan Pass Gated Product Labels {% endcomment %}
{%- liquid
assign gated_heading = 'Fan Pass holder exclusive'
assign gated_message = 'To unlock this product connect your Fan Pass'
assign discount_heading = 'Fan Pass holder'
assign discount_message = 'To unlock your discount connect your Fan Pass'
assign link_text = "Don't have a Fan Pass?"
assign link_label = 'Get it here'
-%}
{%- liquid
assign currentVariant = product.selected_or_first_available_variant
assign gates = currentVariant.metafields.cirkayFanPassApp.gates.value
assign firstGate = gates.first
assign price_selector = '[data-cirkay-price]'
-%}
{% if product.metafields.cirkayFanPassApp.fanPassUnlock != blank %}
{%- liquid
assign discount = false
if firstGate.gateType == 'discount'
assign discount = true
assign default_discount_heading_text = discount_heading
assign default_discount_description_text = discount_message
else
assign default_gate_heading_text = gated_heading
assign default_gate_description_text = gated_message
endif
if discount
if firstGate.discount.type == 'amount'
assign value = firstGate.discount.value | remove: '.00'
assign heading = default_discount_heading_text | append: ' ' | append: cart.currency.symbol | append: value | append: ' discount'
else
assign value = firstGate.discount.value | remove: '.00' | append: '% discount'
assign heading = default_discount_heading_text | append: ' ' | append: value
endif
assign description = default_discount_description_text
else
assign heading = default_gate_heading_text
assign description = default_gate_description_text
endif
-%}
<script id="fan-pass-gated">
window.cirkayFanPassGated = {
theme: {
price_selector: "{{price_selector}}"
},
shop: {
id: {{ shop.id }},
domain: "{{ shop.domain }}",
permanentDomain: "{{ shop.permanent_domain }}",
cartCurrency: "{{ cart.currency.symbol }}",
cartIsoCode: "{%- if settings.currency_code_enabled -%}{{ cart.currency.iso_code }}{%- endif -%}"
},
settings: {
loginHide: false
},
gateVariantsData:{
{% for variant in product.variants %}
"{{ variant.id }}": [
{% if variant.metafields.cirkayFanPassApp.gates.value != nil and variant.metafields.cirkayFanPassApp.gates.value.size > 0 %}
{% for gate in variant.metafields.cirkayFanPassApp.gates.value %}
{
{% assign fanPassId = gate.fanPassId %}
{% assign fanPassProductKey = "fanPass-" | append: fanPassId %}
{% if shop.metafields.cirkayFanPassApp[fanPassProductKey] %}
product: {
title: "{{ shop.metafields.cirkayFanPassApp[fanPassProductKey].value.title }}",
url: "{{ shop.metafields.cirkayFanPassApp[fanPassProductKey].value.url }}"
},
{% endif %}
{% if gate.gateType == 'discount' %}
discount: {
value: {{ gate.discount.value }},
type: "{{ gate.discount.type }}"
},
{% endif %}
gateType: "{{ gate.gateType }}",
fanPassId: "{{ gate.fanPassId }}"
}{% if gate != variant.metafields.cirkayFanPassApp.gates.value.last %},{% endif %}
{% endfor %}
{% endif %}
]{% if variant != product.variants.last %},{% endif %}
{% endfor %}
},
variants: {{ product.variants | json }}
}
</script>
<style>
fanpass-unlockproduct {
display: block;
margin: 2rem 0;
}
</style>
<div data-fan-pass-unlock-container>
<fanpass-unlockproduct
heading="{{ heading }}"
description="{{ description }}"
?discount="{{ discount }}"
linkLabel="{{ link_label }}"
linkText="{{ link_text }}"
variantId="{{ currentVariant.id }}"
border
exportParts
/>
<script src="https://dihg6nd5w39nh.cloudfront.net/production/assets/fanPassGated.js"></script>
</div>
{%- endif -%}
{% comment %}
END Fan Pass Gated Product
{% endcomment %}- From the theme code editor, navigate to the “Sections” directory.
- Open the “product-template.liquid” file.
- Find the “{% endform %}“ liquid tag within the file.
- Insert the below code somewhere after the form closing tag and save the file – position the code accordingly to fit your theme’s layout but ensure that the code is not placed within the product form.
{%- comment -%}
Fan Pass Gated Product
{%- endcomment -%}
{% include 'fanpass-gated-product' %}- Return to the “Themes” section and open the theme editor for the backup theme by selecting the “Customize” button.
- Open the theme’s Templates list, go to the “Default product” template under Products and preview a gated product that you have configured within the Fan Pass app to review the operation and display of the “Fan Pass Connect” block on your page.
- Finally, you will need to configure the Fan Pass within the app to complete set up for the relevant products.