Template Editor
We strongly recommend you do not make changes to these templates unless you are familiar/proficient with AngularJS 1.8. Making changes to the active templates can potentially break your site. Please make sure to have a backup of each template on hand before saving any changes/modifications.
Template Editor
Map Template Keys
  • Select an existing template by clicking the Select Template dropdown.
  • Create a new template by adding a template name in the New Template field and clicking the Add button.
When creating a new template, be sure to create a name similar to SEO-friendly slugs.
Each template comes with corresponding content and JavaScript.

Content (tab)

The Content tab contains the HTML that will be rendered when the template shortcode is used on your website. For example, if your template content for my-template is:
<p>Hi, I'm a template.</p>
Then that content should appear when you insert this Shortcode block on your WordPress page:
[vf-template name='my-template']
Every time you include a shortcode with the name of a template, that content will appear in its place.

JavaScript (tab)

  • Unlike the template content, the JavaScript is only loaded once, regardless of whether the template is used repeatedly or at all.
  • The VendorFuel plugin compiles and minimizes the JavaScript from the templates into one file that is loaded on the site: vendorfuel-controllers.min.js.
By default, the VendorFuel plugin is set up so that changes to the templates will appear live without any version history saved. Adjusting the settings on this page can inadvertently overwrite your existing templates. We advise you always backup your work before making any changes on this tab.

Split Template System

  • Developers can switch between the Live branch of templates and a Dev branch of templates that only they will see on the front end. By default, the Live branch is selected, meaning any changes to the templates will appear live to all.
  • To synchronize the Live and Dev branches, you can Pull Live to Dev or Push Dev to Live. Either of these will overwrite any changes in the branch you're pulling/pushing to.

Pull latest updates

  • Clicking the Update button will pull the latest base templates from the VendorFuel repository and overwrite your existing templates. Do not do click this unless you're wanting to reset your templates.

Template Edit History

You can set a specific number of edits or versions to save each time you click Update Template. By default, this number is set to 0. To revert a template to a previous version, use the Select Template dropdown to select the template, then click the Revert button.
Template key mapping allows you to map a key to a specific page. For example, if you wanted 'catalog' to correspond to the slug /store, you could do that here. Template keys are part of the VendorFuel API and can be found in the JavaScript files appearing like this:
/* Get the page url that's dynamically mapped to the 'catalog' key. */
const url = Utils.getPageUrl('catalog');
/* Redirect the user using the url. */
By default, the following template keys are set upon installation of the VendorFuel plugin:
  • Account
  • Addresses
  • Forgot Password
  • Cart
  • Catalog
  • Favorites
  • Group Account
  • Group Orders
  • Home
  • Login
  • Order By SKU
  • Orders
  • Product Detail
  • Register
  • Reset Password
  • Saved Cart
  • Saved Carts
  • View Order
Copy link