Kreator treści

Domyślnie moduł ten znajduję się w projekcie CMS. Wykorzystywany jest w module Strony oraz Blog. Służy do tworzenia różnego rodzaju sekcji dla danego modelu. Rodzaje sekcji zostały przedstawione w rozdziale backendu modułu.

Komponent ContentBuilder

Komponent src/modules/contentBuilder/components/form/VContentBuilder służy do zarządzania treściami za pomocą grup, sekcji (o różnych typach) oraz pozycji. Przykład można znaleźć dla modelu sharedSection: src/modules/contentBuilder/pages/sharedSections/SharedSectionCreatePage.

Sekcje współdzielone

Jest to jeden z rodzajów sekcji, które można wcześniej zdefiniować i używać w pozostałych modułach. CRUD dla tego modelu znajduję się w src/modules/contentBuilder/pages/sharedSections.

Custom Fields

W module ContentBuilder istnieje również możliwość zdefiniowania niestandardowych pól dla modeli o różnych typach. Domyślnie w CMS użyte są dla Stron. W komponencie PagePageCustomFields wczytywany jest komponent z konfiguracją pól dla danego typu.

Przykład użycia dla strony głównej

PagePageHomeCustomFieldsField.vue

<script setup>
defineProps({
  name: {
    type: String,
    default: "custom_fields",
  },
});
</script>

<template>
  <div class="row q-col-gutter-md">
    <v-input
      class="col-md-4 col-12"
      :name="`${name}.title.content`"
      :label="$t('labels.title')"
    />

    <v-tiptap-editor
      class="col-12"
      :name="`${name}.description.content`"
      :label="$t('labels.description')"
    />

    <v-image-collection
      :label="$t('labels.main_picture')"
      :name-desktop="`${name}.image.media_files.image_desktop`"
      :name-mobile="`${name}.image.media_files.image_mobile`"
      class="col-sm-10 col-12"
    />
  </div>
</template>

Funkcja getPagePageCustomFieldsInitialValues służy do wczytywania struktury obiektu dla pola custom_fields. Poniżej przykładowa konfiguracja na podstawie powyżej podanych pól.

import { PAGE_TYPE_HOME } from "modules/page/constants/page-types";

export function getPagePageCustomFieldsInitialValues(type, currentValues) {
  switch (type) {
    case PAGE_TYPE_HOME:
      return {
        title: getCustomFieldTextValue(currentValues?.title),
        description: getCustomFieldTextValue(currentValues?.description),
        image: getCustomFieldImageValue(currentValues?.image),
      };

    default:
      return {};
  }
}

TIP

getCustomFieldTextValue służy do wczytania obiektu z konfiguracją pola o typie text. Pozostałe funkcje można sprawdzić w src/modules/page/services/custom-fields.js

Obsługiwane typy

• text
• text-image
• youtube
• header
• file

WARNING

Niestandardowe typy np. relacje z innymi modelami nie są tutaj obsłużone. W danym projekcie API powinno zostać tak przygotowane żeby zwracać potrzebne relacje.