Premade templates in editor

You can enable this opt-in feature simply by adding premadeTemplates: true inside Topol Options.

Now, when opening an editor without any template, user can choose between starting from scratch of pick predefined template.

When user clicks on "Start from predefined template", modal opens and user can choose from Topol predefined templates.

Additionally, the Premade templates picker offers features to filter templates by categories or keywords. These features are accessible only if you provide valid URL to topolOptions.API for listing categories and/or listing keywords. If you do not provide valid URL, the respective feature will be hidden.

Load custom premade templates

We support loading premade templates directly from custom API endpoints into the editor. This allows you to add fully customized templates to the premade template picker.

Before implementing the endpoints, check how to work with API endpoints.

List templates

This endpoint is called when listing premade templates into the premade templates picker.

Request

• URL: /{API.PREMADE_TEMPLATES}
• Method: GET
• params:
  • per_page (integer) - number of templates per page (default: 25, min: 1)
  • current_page (integer) - page number (default: 1, min: 1)
  • categories (array) - keywords IDs to search for
  • keywords (array) - keywords IDs to search for
  • search (string) - search for templates by name

Expected Response:

{
  "success": true,
  "data": {
    "data": [
      {
        "id": 1,
        "name": "Example template",
        "type": "FREE",
        "img_thumb_url": "example.com/img-thumb-url",
        "category_id": 1,
        "description": "Example description",
        "keywords": [
          {
            "id": 1,
            "keyword": "marketing",
            "slug": "marketing",
            "created_at": "2023-01-01T00:00:00.000000Z",
            "updated_at": "2023-01-01T00:00:00.000000Z",
            "pivot": {
              "premade_template_id": 1,
              "premade_template_keyword_id": 1
            }
          }
        ],
        "created_at": "2023-01-01T00:00:00.000000Z",
        "updated_at": "2023-01-01T00:00:00.000000Z"
      }
    ],
    "total_records": 150,
    "current_page": 1,
    "per_page": 25,
    "next_page": 2,
    "prev_page": null,
    "last_page": 6
  }
}

List template

• URL: /{API.PREMADE_TEMPLATES}/{template-id}
• Method: GET

Response:

{
  "success": true,
  "data": {
    "id": 1,
    "name": "Example template",
    "type": "FREE",
    "html": "<b>example html </b>",
    "json": "{\"example\": \"json\"}",
    "category_id": null,
    "order": 1,
    "description": null,
    "visible": 1,
    "created_at": "2023-01-01T00:00:00.000000Z",
    "updated_at": "2023-01-01T00:00:00.000000Z",
    "image_path": "/img/templates/1.jpg",
    "image_thumb_path": "/img/templates/1_thumb.jpg",
    "category": null,
    "keywords": []
  }
}

List categories

Calling this endpoint will enable a built-in feature for filtering templates by categories and populate it with relevant data.

• URL: /{API.PREMADE_TEMPLATE_CATEGORIES}
• Method: GET

Response:

Successful response will look like this:

{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "Business",
      "value": "business"
    },
    {
      "id": 2,
      "name": "E-commerce",
      "value": "e-commerce"
    }
  ]
}

List keywords

Calling this endpoint will enable a built-in feature for filtering templates by keywords and populate it with relevant data.

• URL: /{API.PREMADE_TEMPLATES_KEYWORDS}
• Method: GET

Response:

Successful response will look like this:

{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "sale/discount",
      "value": "salediscount"
    },
    {
      "id": 2,
      "name": "autumn",
      "value": "autumn"
    }
  ]
}

Remove template

• URL: /{API.PREMADE_TEMPLATES}/{templateId}
• Method: DELETE

Expected response:

{
  "data":
    {
    "success": true
    }
}