Skip to content

Installation

Jump to bottom
Marius edited this page Dec 1, 2023 · 1 revision

FirstSpirit project

  • Works with the Connect for Commerce reference project
  • Spryker uses en_US instead of the default en_GB of the reference project
  • You need to make sure the abbreviation of the languages in FirstSpirit matches the format that Spryker provides the locale in
    • By default this will be de_DE for German and en_US for English

Install modules to Spryker

Setup Connect for Commerce

  • Setup Spryker Bridge according to its Readme
    • Configure Bridge by creating a .env file
  • Setup CFC Frontend API Backend according to its Readme 
  • Install CFC reference project
    • Configure project via the Server Manager
    • Bridge URL in Connect for Commerce module settings
    • Storefront URL in ContentCreator settings
  • Configure CFC Frontend API Backend by creating a local.yml file
    • CaaS information
    • FS Server information

Spryker configuration

Available configuration

The following properties can be configured in Spryker:

Name Description Type Default
FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_WEB_HOST FS Server URL used to determine preview mode by comparing referer and using as CSP header string  
FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_SCRIPT_URL URL for the static.js file to be included string  
FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_SCRIPT_BASE_URL URL of the FE API backend service for the frontend. Should end with "/api". string  
FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_SCRIPT_LOG_LEVEL Log level for the FE API client. string  
FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_AUTHENTICATION_TOKEN Token to compare with "firstSpiritPreview" query parameter when determining preview mode. string  
FirstSpiritContentConstants::FIRSTSPIRIT_FRONTEND_API_SERVER_URL URL of the FE API backend service for the backend. Should end with "/api". The backend most likely runs in Docker, so the URL has to be reachable from within the container. string  
FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_RENDERED_TEMPLATE_CACHE_DURATION Duration for the rendered template cache in seconds. 0 to disable the cache entirely. int 7 days
FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_API_RESPONSE_CACHE_DURATION Duration for the FE API backend response cache in seconds. 0 to disable the cache entirely. int 5 minutes
FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_DISPLAY_BLOCK_RENDER_ERRORS Whether to render template errors in debug mode. bool false
FirstSpiritContentConstants::FIRSTSPIRIT_SECTION_TEMPLATE_MAPPING The FS section template mapping to Twig component. '*' as a key will act as catch-all if nothing else matched, likely to be used with fs-data-visualizer as fallback. array []
FirstSpiritContentConstants::FIRSTSPIRIT_CONTENT_PAGE_URL_PREFIX The prefix to be used in routes to FS content pages. string content
FirstSpiritContentConstants::FIRSTSPIRIT_CONTENT_PAGE_TEMPLATE_MAPPING The FS page layout mapping to Twig templates. array []
FirstSpiritContentConstants::FIRSTSPIRIT_DOM_EDITOR_TEMPLATE_MAPPING The DOM editor template mapping to Twig templates. array []

Example configuration

<?php

use Crownpeak\Shared\FirstSpiritContent\FirstSpiritContentConstants;
use Spryker\Shared\Kernel\KernelConstants;

// Allow the Twig template of our reference components to be used
$config[KernelConstants::PROJECT_NAMESPACES] = [
  'Pyz',
  'Crownpeak',
];

// Preview
$config[FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_WEB_HOST] = 'https://<....>';
$config[FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_AUTHENTICATION_TOKEN] = '<...>';

// CFC Frontend API
$config[FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_SCRIPT_URL] = 'http://<...>/static.js';
$config[FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_SCRIPT_LOG_LEVEL] = '0';
$config[FirstSpiritContentConstants::FIRSTSPIRIT_FRONTEND_API_SERVER_URL] = 'http://docker.host.internal:3001/api';
$config[FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_SCRIPT_BASE_URL] = 'http://localhost:3001/api';

// General
$config[FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_RENDERED_TEMPLATE_CACHE_DURATION] = 0;
$config[FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_API_RESPONSE_CACHE_DURATION] = 0;
$config[FirstSpiritContentConstants::FIRSTSPIRIT_PREVIEW_DISPLAY_BLOCK_RENDER_ERRORS] = true;

// Content pages
$config[FirstSpiritContentConstants::FIRSTSPIRIT_CONTENT_PAGE_URL_PREFIX] = 'content';
$config[FirstSpiritContentConstants::FIRSTSPIRIT_CONTENT_PAGE_TEMPLATE_MAPPING] = [
  'contentpage' => '@FirstSpiritUi/views/fs-content-page/fs-content-page.twig',
  'landingpage' => '@FirstSpiritUi/views/fs-content-page/fs-content-page.twig',
  FirstSpiritContentConstants::FIRSTSPIRIT_CONTENT_PAGE_TEMPLATE_MAPPING_ERROR => '@FirstSpiritUi/views/fs-error/fs-error.twig'
];


// Component mapping
$config[FirstSpiritContentConstants::FIRSTSPIRIT_SECTION_TEMPLATE_MAPPING] = [
  'text_image' => 'Crownpeak:FirstSpiritReferenceComponents/fs-text-image',
  'banner' => 'Crownpeak:FirstSpiritReferenceComponents/fs-banner',
  'carousel' => 'Crownpeak:FirstSpiritReferenceComponents/fs-carousel',
  'multi_slot_container' => 'Crownpeak:FirstSpiritReferenceComponents/fs-multi-slot-container',
  'interactive_image' => 'Crownpeak:FirstSpiritReferenceComponents/fs-interactive-image',
  'interactive_youtube_video' => 'Crownpeak:FirstSpiritReferenceComponents/fs-interactive-video',
  'teaser_grid' => 'Crownpeak:FirstSpiritReferenceComponents/fs-teaser-grid',
  '*' => 'Crownpeak:FirstSpiritReferenceComponents/fs-data-visualizer',
];

// Format mapping
$config[FirstSpiritContentConstants::FIRSTSPIRIT_DOM_EDITOR_TEMPLATE_MAPPING] = [
  // Links
  'dom_external_link' => 'Crownpeak:FirstSpiritContent/fs-link',
  'dom_content_link' => 'Crownpeak:FirstSpiritContent/fs-link',
  'dom_product_link' => 'Crownpeak:FirstSpiritContent/fs-link',
  'dom_category_link' => 'Crownpeak:FirstSpiritContent/fs-link',
  // Formats
  'bold' => 'Crownpeak:FirstSpiritContent/fs-format',
  'italic' => 'Crownpeak:FirstSpiritContent/fs-format',
  'subline' => 'Crownpeak:FirstSpiritContent/fs-format',
  'format.h2' => 'Crownpeak:FirstSpiritContent/fs-format',
  'format.h3' => 'Crownpeak:FirstSpiritContent/fs-format',
  'format.subline' => 'Crownpeak:FirstSpiritContent/fs-format',
];
Clone this wiki locally