Pricing

List of pricing plans for the project. Can be linked to a payment website.

Pricing fragment

Can be linked to 3rd party payment services

Starting plan

starting at

Free

Basic feature

Email support

Start for free

Premium plan

starting at

$9.99/mo

Basic feature

Premium feature

Email support

Chat support

Get started

Enterprise plan

Custom

Basic feature

Premium feature

Email support

Chat support

Additional enterprise stuff

Contact us

Code (index)

``` +++ fragment = "pricing" weight = 100 # background = "light"

title = “Pricing fragment” subtitle = “Can be linked to 3rd party payment services” #title_align = “left” # Default is center, can be left, right or center +++

Pricing fragment supports markdown as it’s subtitle.
Supports feature listing of different plans and links to a payment service.

</details>

<details>
<summary>Code (subitem)</summary>

+++ weight = 10

title = “Starting plan” subtitle = “starting at”

price = “Free”

highlight = true

button_text = “Start for free” button_url = “#”

[[features]] text = “Basic feature” icon = “fas fa-check”

[[features]] text = “Email support” icon = “fas fa-check” +++

</details>

Documentation

This fragment needs a fragment controller file and subitems. You need to create a directory for this fragment and put index.md with fragment = "pricing" and subitems next to that file.

Events

Pricing fragment doesn’t subscribe to any events by default and only publishes events in special circumstances. Please checkout usage with events to learn more. The published event is listened to in the Stripe fragment and will cause the Stripe fragment to change it’s properties.

Variables

index.md doesn’t use any variables. Following variables are for subitems.

price

type: string

highlight

type: boolean
default: false

If set to true, the column will have more z-index, width and stay a bit on top of other columns.

button_text

type: string

Title of the button on the column.

button_url

type: string

URL of the button on the column.

Usage with events

You can make use of the Events api through this variable.

Not setting the button_url variable will publish an event with title, subtitle, price and currency variables.
Setting it to an event url such as: /fragments/stripe/?event=pricing:change&product=Starting plan&price=$9.99/mo&currency=usd will redirect the page and publish a custom event.

features

type: array of objects

This array will be displayed on the pricing column, listing what is aviable in the current plan.

features.text

type: string

features.icon

type: string

Global variables are documented as well and have been omitted from this page.

Further Resources

Syna Theme

Highly customizable open source theme for Hugo based static websites