75 lines
3.5 KiB
Handlebars
75 lines
3.5 KiB
Handlebars
<div class="membership-section global-padding">
|
|
<div class="global-subtitle">
|
|
<small class="global-subtitle-title">{{{t "See {start-bold}pricing plans{end-bold}" start-bold="<span>" end-bold="</span>"}}}</small>
|
|
</div>
|
|
<div class="membership-wrap global-radius{{#if feature_image}} global-bg-image" style="background-image: url({{{img_url feature_image size="l" format="webp"}}}){{/if}}">
|
|
{{#if @site.paid_members_enabled}}
|
|
<div class="membership-switch" data-active-price="{{@site.portal_default_plan}}" data-active-price-plans="{{@site.portal_plans}}"{{#get "tiers" limit="all" filter="visibility:public+type:paid" as |public_paid_tiers|}} data-active-public-paid-tiers="{{#if public_paid_tiers}}true{{else}}false{{/if}}"{{/get}}>
|
|
<button data-price="monthly">{{t "Monthly"}}</button>
|
|
<button data-price="yearly">{{t "Yearly"}}</button>
|
|
</div>
|
|
{{/if}}
|
|
<div class="membership-cards">
|
|
{{^if @member}}
|
|
{{#if membership_page}}
|
|
{{#get "tiers" include="benefits" filter="visibility:public+type:free"}}
|
|
{{#foreach tiers}}
|
|
<div class="membership-card">
|
|
<div class="membership-card-content">
|
|
<div class="membership-card-label">{{name}}</div>
|
|
<h2 class="membership-card-price">{{t "$"}}0</h2>
|
|
{{#if description}}<p>{{description}}</p>{{/if}}
|
|
{{#if benefits}}
|
|
<div class="membership-card-list">
|
|
<ul>
|
|
{{#foreach benefits as |benefit|}}
|
|
<li>{{benefit}}</li>
|
|
{{/foreach}}
|
|
</ul>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
<a href="{{@site.url}}/signup/" class="membership-button global-button">{{t "Sign up for free"}}</a>
|
|
</div>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
{{/if}}
|
|
{{/if}}
|
|
{{#if @site.paid_members_enabled}}
|
|
{{#get "tiers" include="monthly_price,yearly_price,benefits" filter="visibility:public+type:paid" limit="all"}}
|
|
{{#foreach tiers}}
|
|
<div class="membership-card">
|
|
<div class="membership-card-content">
|
|
<div class="membership-card-label">{{name}}</div>
|
|
<h2 class="membership-card-price" data-monthly>{{#if monthly_price}}{{price currency=currency}}{{price monthly_price}}{{else}}$0{{/if}}<span>/{{t "month"}}</span></h2>
|
|
<h2 class="membership-card-price" data-yearly>{{#if yearly_price}}{{price currency=currency}}{{price yearly_price}}{{else}}$0{{/if}}<span>/{{t "year"}}</span></h2>
|
|
{{#if description}}<p>{{description}}</p>{{/if}}
|
|
{{#if benefits}}
|
|
<div class="membership-card-list">
|
|
<ul>
|
|
{{#foreach benefits as |benefit|}}
|
|
<li>{{benefit}}</li>
|
|
{{/foreach}}
|
|
</ul>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
<a href="javascript:" data-portal="signup/{{id}}/monthly" class="membership-button global-button" data-monthly>{{#if trial_days}}{{t "Start {trial}-day free trial" trial=trial_days}}{{else}}{{t "Sign up now"}}{{/if}}</a>
|
|
<a href="javascript:" data-portal="signup/{{id}}/yearly" class="membership-button global-button" data-yearly>{{#if trial_days}}{{t "Start {trial}-day free trial" trial=trial_days}}{{else}}{{t "Sign up now"}}{{/if}}</a>
|
|
</div>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{^if @member}}
|
|
{{#if membership_page}}
|
|
<small class="global-question">{{t "Already have an account?"}} <a href="{{@site.url}}/signin/">{{t "Sign in"}}</a></small>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
{{#contentFor "script_js"}}
|
|
<script>
|
|
!function(){const c=document.querySelector(".membership-switch"),t=document.querySelectorAll(".membership-switch button");c&&t.forEach(e=>{e.addEventListener("click",t=>{c.setAttribute("data-active-price",e.getAttribute("data-price"))})})}();
|
|
</script>
|
|
{{/contentFor}} |