This document describe best practice when create new page / template / widget in DOTCMS. It contain 4 3 part of building a page:
- Template
- Page
- HTML
- JS
- CSS
- Widget
- JS
- CSS
1. Create Template
...
2. Create Page using Template
Step 1:
...
In site browser, select folder that you want to create page. Then click add page in menu.
Leave dropdown box option as default "Page Asset" → Select.
Enter needed information to create page, fields with Red title in required
1. Title: all characters are in normal case (a-z), dont use special characters & capital characters
2. Url: example: demo.html
3. Host or Folder: choose current folder & site
4. Template: select created template (in previous step) or a default template
5. Friendly name: Site Title
In Advanced Properties tab. you can configure below information:
1. Redirect URL: replace all Relative URL in this page with a new one
Note:
- All Absolute URL & URLs in footer will not be affected by this configuration
2. Campaign Webkey: Used for Index - Pre-sale & Order page (most important). To declare webkey which is used to get price from CRM
3. Campaign Name: enter campaign name of entered webkey for better management. DONT LEAVE THIS BLANK if you already entered webkey.
4. GTM: Leave this blank if this page inherit GTM key of the site.
Click Save to initiate page.
- How to Add JS to page
1. Go to src/js folder and create new js folder as below:
2. Go back to page editor and add new widget to last container (last "add content" button).
3. Find and select [SiteComment]AddstaticFileWidget, static files which already used before will appeared on right column. (Important Note: Do not reuse widget with [Common] Prefix.). Click on Create New to create new widget to declare JS File.
4. Enter Needed information
- Widget Title: Only use Alphabet in Normal Case & "_" character.
- File Type: Javascript
- URL: select js path. Ex: /src/js/demo.js
- Type: Should choose Lib & Page
- Site or Folder: Current Site Folder
- Click Save / Publish
- How to Declare CSS for this page
Go to Application/themes/pages and create a less file with this template: [pagetitle]-en.page.less. (page title of the page you want to use this CSS file demo below:
Is case you wanna help separate css file, you can do the same as how to declare JS file for page.
3. Create & Add Widget
- Go to menu Types & Tag → Content Types
...