Code Editor Advanced Docs

Certain themes allow you access to the VHX Theme Engine Editor; where you may alter the full HTML, Javascript and CSS for your site. This code is also given access to a number of variables about your site and Products that you may access utilizing Mustache Variables. 

NOTE: This is an advanced article. If you are not familiar with markup and code substitution, you should find someone on your team that is comfortable doing so or reach out to VHX Support with requests.

IN THIS ARTICLE:

What Is Mustache?
Global Variables
Custom Variables


What Is Mustache?

Mustache is a "logic-less" templating system whose main principle is to seperate logic from presentation. “Logic-less” simply means that it does not rely on procedural statements (if, else, for, etc.), as Mustache templates are defined entirely with tags as show below.

The VHX Theme Engine utilizes mustache to augment standard HTML, CSS and Javascript markup. Mustache expands tags with data that has been passed to the template as an object or hash (such as a JSON object). Here's a simple example of integrating a mustache tag with HTML:

<hgroup>
  <h1>{{site.title}}</h1>
  <h2>{{site.description}}</h2>
</hgroup>

The Theme Engine gives access to a number of Global Variables that are defined by your Site Settings, Available products, Published Updates and the state of the User. Implementing these values is as simple as substituting the value you wish to see with the mustache variable.

GLOBAL VARIABLES

Where available, the following variables are included within each Code Editor view to access without any additional code. Simply inserting one of these variables below will result in its value as determined from it's appropriate section of the VHX Admin.

Site Variables

Site data includes the site's description, title, Twitter name, Facebook address and Google Analytics account ID. These can be edited under Settings in your site's admin.

{{site.title}}
{{site.description}} 
{{site.twitter_name}}
{{site.facebook_url}}
{{site.ga_account_id}}

Product DATA

Product data includes all active packages you've added to your site via the Packages section in the admin. Packages include various properties, which are available by iterating over the packages array.

{{#packages}}
  {{sku}}
  {{name}}
  {{description}}
  {{display_price}}
  {{display_price_and_text}}
  {{purchase_display_price}}
  {{rental_display_price}}
  {{trailer_url}}
  {{trailer_still}}
  {{is_geoblocked}}
  {{is_preorder}}
  {{is_default}}
  {{is_purchasable}}
  {{is_rentable}}
  {{has_release_date}}
  {{release_date_formatted}}
  {{purchase_url}}
  {{rental_url}}
{{/packages}}

Please note: all of the above variables will also work with a  {{feature}} block, with data being returned for your Featured package. A loop is not required to display this information.

User Data

User state tags allow developers to show certain content depending on the user state - whether they are logged in or not, if they are in a geo-blocked region, or whether they have a payment for that particular site.

{{#logged_in}}User logged in{{/logged_in}}
{{^logged_in}}User logged out{{/logged_in}}
{{#paid}}User has paid{{/paid}}
{{^paid}}User has not paid{{/paid}}
{{#geoblocked}}User is geoblocked from featured package{{/geoblocked}}
{{^geoblocked}}User is not geoblocked from featured package{{/geoblocked}}

Updates Data

If you have used our Updates tool to post updates to your fans that information will be accessible in your theme as well. Updates that are restricted to a particular set of users will only be shown to those users. Keep this in mind if your updates are never set to be viewed publicly.

{{#updates}}
  {{title}}
  {{slug}}
  {{header_img_url}}
  {{body}}
  {{author}}
  {{author_avatar_url}}
  {{perma_link}}
  {{comment_count}}
  {{post_preview}}
  {{pretty_published_at}}
{{/updates}}

Custom Variables

Within the "Data" tab of the Code Editor you have access to define an infinite number of additional variables within the scope of four different types:

{
   "option": {
    "show_navigation": false
  },
  "color": {
    "body_bg": "#ecebeb",
    "nav_bg": "#FF0000"
  },
  "image": {
    "feature_bg": "path/to/file/uploaded/from/files.png",
    "slideshow": [
  	"path/to/file/uploaded/from/files.png",
	"path/to/file/uploaded/from/files.png"
    ]
  },
  "text": {
   "button_label": "Subscribe",
    "synopsis": "A short synopsis of the title you are promoting!"
  }
}

These variables are not restricted to what you see above. You may use any name : value pairing you choose, as long as the option fields are boolean values only.

Accessing these variables within the markup is the same as the Global Variables:

{{#option.show_navigation}}
	<nav style="background-color: {{color.nav_bg}}">
		<h1>{{text.synopsis}}</h1>
	</nav>
{{/option.show_navigation}}

Still need help? Contact VHX Seller Support Contact VHX Seller Support