+Almost every eCommerce app has to present some content. Managing it is often done via third-party libraries like WordPress,
+eZ Platform, or a built-in content management system. As Sylius does not have a CMS in the standard platform,
+we decided to develop our own, which will be as flexible as Sylius. This plugin allows you to add dynamic blocks and pages
+with content elements to your storefront.
- [Use Case](doc/use_case.md)
+ - [Collections](doc/use_case_collections.md)
+ - [Templates](doc/use_case_templates.md)
+ - [Pages](doc/use_case_pages.md)
+ - [Blocks](doc/use_case_blocks.md)
+ - [Media](doc/use_case_media.md)
- [Installation](doc/installation.md)
- [Upgrading](UPGRADE.md)
-- [Blocks](doc/blocks.md)
+- [Collections](doc/collections.md)
+- [Templates](doc/templates.md)
- [Pages](doc/pages.md)
-- [Sections](doc/sections.md)
+- [Blocks](doc/blocks.md)
- [Media](doc/media.md)
-- [FAQs](doc/faqs.md)
- [Fixtures](doc/fixtures.md)
- [WYSIWYG](doc/wysiwyg.md)
- [Importing resources](doc/importing-resources.md)
-- [Using Twig functions in the admin panel](doc/twig-functions-in-admin.md)
- [Sitemap](doc/sitemap.md)
- [Customization](doc/customization.md)
diff --git a/UPGRADE-5.0.md b/UPGRADE-5.0.md
new file mode 100644
index 000000000..51094240f
--- /dev/null
+++ b/UPGRADE-5.0.md
@@ -0,0 +1,105 @@
+# UPGRADE FROM 4.2 TO 5.0
+
+This upgrade is a major one, as it introduces a new feature - [Content Elements](doc/content_elements.md)
+and removes the old way of creating blocks and pages.
+
+* A lot of database modifications has been made. Read the below changelog first and then migrate your structure using
+ `bin/console doctrine:migrations:diff && bin/console doctrine:migrations:migrate` commands.
+* Sections are now Collections, as it was a more suitable name for the feature.
+* Pages and Blocks now have `Content elements` segment, where you can add elements to the page or block.
+* Removed FAQ, as you can now create a FAQ page with the new content elements.
+* Added new `Templates` section where you can create templates for your content elements. Read more about it in [Use case templates](doc/use_case_templates.md)
+and [Templates](doc/templates.md) docs.
+* Removed CKEditor deprecation modal.
+* Reordered forms/elements for functionality consistency.
+* Updated import functionality to work with the new structure.
+* Updated fixtures to work with the new structure
+* Removed `bitbag_cms_render_product_pages` twig extension.
+* Removed support for rendering twig functions in WYSIWYG editor.
+* Added twig extensions:
+ * `bitbag_cms_render_collection`
+ * `bitbag_cms_render_content_elements`
+
+## Briefly about Content Elements
+
+Content elements is a new segment in the block/page form where you can add elements that will be rendered on the store's frontend, like:
+* Textarea
+* Heading
+* Images
+* Products carousel
+* etc.
+
+> Read more about the content elements in the updated [Content elements](doc/content_elements.md) doc.
+
+## Changes in Collections (old Sections)
+
+### Added fields:
+
+* Type
+* Pages/Block/Media (depending on the chosen type)
+
+### Moved fields:
+
+* Name field has been moved from translations to the main settings tab
+
+> Read more about the collections in the updated [Use case collections](doc/use_case_collections.md) and [Collections](doc/collections.md) docs.
+
+## Changes in Pages
+
+### Removed fields:
+
+* Products
+* Breadcrumb
+* Name when linked
+* Description when linked
+* Image
+* Content
+* Title
+
+### Added fields
+
+* Teaser title
+* Teaser content
+* Teaser image
+
+### Moved fields
+
+* Name field has been moved from translations to the main settings tab
+
+> Read more about the pages in the updated [Use case pages](doc/use_case_pages.md) and [Pages](doc/pages.md) docs.
+
+## Changes in Blocks
+
+### Removed fields:
+
+* Products
+* Taxons
+* Whole translations tab
+
+### Added fields
+
+* Name
+* Locales
+* Display for products
+* Display for products in taxons
+* Display for taxons
+
+> Read more about the blocks in the updated [Use case blocks](doc/use_case_blocks.md) and [Blocks](doc/blocks.md) docs.
+
+## Changes in Media
+
+### Removed fields:
+
+* Products
+
+### Added fields
+
+* Media preview with path
+
+### Moved fields
+
+* Name field has been moved from translations to the main settings tab
+
+### Renamed fields
+
+* Content -> Link content
diff --git a/doc/blocks.md b/doc/blocks.md
index 7d062162a..56fd4379e 100644
--- a/doc/blocks.md
+++ b/doc/blocks.md
@@ -1,10 +1,12 @@
# Blocks
-Blocks represent single parts of your Sylius web app, where you can put some content hardcoded in the
-template and change it in the future from admin panel.
+Blocks represent single parts of your Sylius web app, where you can put some content elements via the admin panel.
+Blocks can be placed on the homepage, product page, or any other page of your store.
## General usage
+### Rendering the block
+
In the admin panel, you can create block resources. It could be rendered in your twig templates using `bitbag_cms_render_block([block_code])` helper extension.
For instance, let's assume you created a block with `homepage_intro` code and want to render it on store homepage.
In your `app/Resources/views/SyliusShopBundle/Homepage/index.html.twig` file add the Twig filter like this:
@@ -14,27 +16,41 @@ In your `app/Resources/views/SyliusShopBundle/Homepage/index.html.twig` file add
{% block content %}
-# The template is not a mandatory parameter
+{{ bitbag_cms_render_block('homepage_intro') }}
-{{ render(path('bitbag_sylius_cms_plugin_shop_block_render', {'code' : 'homepage_header_image', 'template' : '@App/Some/Template/_path.html.twig'})) }}
+{% endblock %}
+```
-# However, you can pass it to the `bitbag_cms_render_block` function if you wish :)
+`{{ bitbag_cms_render_block([block_code]) }}` function can also take two additional parameters: `template` and `context`.
-{{ bitbag_cms_render_block('homepage_intro') }}
+`template` allows you to render a block with a custom template. For instance:
-{% endblock %}
+```twig
+{{ bitbag_cms_render_block('homepage_intro', '@App/Some/Template/_path.html.twig') }}
```
-To render a block by the product code, you can use `route`.
+`context` allows you to pass additional variables to the block template. It can be one of three types:
+- `ProductInterface`
+- `TaxonInterface`
+- `array`
+
+For instance:
```twig
-{{ render(path('bitbag_sylius_cms_plugin_shop_block_index_by_product_code', {'productCode' : product.code, 'template' : '@BitBagSyliusCmsPlugin/Shop/Block/index.html.twig'})) }}
+{{ bitbag_cms_render_block('homepage_intro', null, {'some_variable': 'some_value'}) }}
+{{ bitbag_cms_render_block('homepage_intro', null, product) }}
+{{ bitbag_cms_render_block('homepage_intro', null, taxon) }}
```
+When you pass `ProductInterface` or `TaxonInterface` as a context, the block will be rendered only if it is assigned to the given product or taxon
+in the admin panel.
+
## Customization
-If you don't know how to override templates yet,
+### Override block template
+
+If you don't know how to override templates yet,
read [Sylius template customization guide](http://docs.sylius.org/en/latest/customization/template.html).
-You can create a template under `app/Resources/BitBagSyliusCmsPlugin/views/Shop/Block` location.
+Even if you can pass template argument to render block resource, you can change the global templates under `app/templates/bundles/BitBagSyliusCmsPlugin/Shop/Block` location.
Available templates you can override can be found under [this location](../src/Resources/views/Shop/Block).
diff --git a/doc/blocks_cms.png b/doc/blocks_cms.png
index 003236f22..eccefadd5 100644
Binary files a/doc/blocks_cms.png and b/doc/blocks_cms.png differ
diff --git a/doc/blocks_cms_result.png b/doc/blocks_cms_result.png
index ecc5035aa..87c5faca6 100644
Binary files a/doc/blocks_cms_result.png and b/doc/blocks_cms_result.png differ
diff --git a/doc/blocks_create_cms.png b/doc/blocks_create_cms.png
index 4eca96ca7..e54b375a4 100644
Binary files a/doc/blocks_create_cms.png and b/doc/blocks_create_cms.png differ
diff --git a/doc/collections.md b/doc/collections.md
new file mode 100644
index 000000000..bbf01a6af
--- /dev/null
+++ b/doc/collections.md
@@ -0,0 +1,39 @@
+# Collections
+
+Collections are a way to group multiple pages, blocks or media together.
+They are useful for organizing things in a way that makes sense to you. \
+For example, you might want to group all of your blog posts together in a collection called `Blog`.
+Or you might want to group all of your specific blocks together in a collection called `Homepage blocks`.
+
+## General usage
+
+### Rendering the collection
+
+In the admin panel, you can create collection resources.
+It could be rendered in your twig templates using `bitbag_cms_render_collection([collection_code])` helper extension.
+
+`{{ bitbag_cms_render_collection([collection_code]) }}` function can also take two additional parameters: `countToRender` and `template`.
+
+`countToRender` allows you to render a specific number of items from the collection. For instance:
+
+```twig
+{{ bitbag_cms_render_collection('homepage_blocks', 3) }}
+```
+
+`template` allows you to render a collection with a custom template. For instance:
+
+```twig
+{{ bitbag_cms_render_collection('homepage_blocks', null, '@App/Some/Template/_path.html.twig') }}
+```
+
+By default, collection items are sorted by object ID parameter. If you want to change it, you can use decorator strategy.
+You can read more about it [here](https://symfony.com/doc/current/service_container/service_decoration.html).
+
+## Customization
+
+### Override collection template
+
+If you don't know how to override templates yet, read [Sylius template customization guide](http://docs.sylius.org/en/latest/customization/template.html).
+
+Even if you can pass template argument to render collection resource, you can change the global templates under `app/templates/bundles/BitBagSyliusCmsPlugin/Shop/Collection` location.
+Available templates you can override can be found under [this location](../src/Resources/views/Shop/Collection).
diff --git a/doc/collections_cms.png b/doc/collections_cms.png
new file mode 100644
index 000000000..3dddb781f
Binary files /dev/null and b/doc/collections_cms.png differ
diff --git a/doc/collections_cms_result.png b/doc/collections_cms_result.png
new file mode 100644
index 000000000..c96ecfdb2
Binary files /dev/null and b/doc/collections_cms_result.png differ
diff --git a/doc/collections_create_cms.png b/doc/collections_create_cms.png
new file mode 100644
index 000000000..13cc513c5
Binary files /dev/null and b/doc/collections_create_cms.png differ
diff --git a/doc/content_elements.md b/doc/content_elements.md
new file mode 100644
index 000000000..6d31c8842
--- /dev/null
+++ b/doc/content_elements.md
@@ -0,0 +1,120 @@
+# Content elements
+
+Content elements are used to create a page or block content that will be displayed on the store's frontend.
+
+## General usage
+
+Currently, there are 11 predefined content elements available:
+- **[Textarea](content_elements/textarea.md)** - a simple textarea with WYSIWYG editor
+- **[Single media](content_elements/single_media.md)** - a single media from the media library
+- **[Multiple media](content_elements/multiple_media.md)** - multiple media from the media library
+- **[Heading](content_elements/heading.md)** - a simple heading from h1 to h6
+- **[Products carousel](content_elements/products_carousel.md)** - a carousel with products
+- **[Products carousel by Taxon](content_elements/products_carousel_by_taxon.md)** - a carousel with products from a specific taxon
+- **[Products grid](content_elements/products_grid.md)** - a grid with products
+- **[Products grid by Taxon](content_elements/products_grid_by_taxon.md)** - a grid with products from a specific taxon
+- **[Taxons list](content_elements/taxons_list.md)** - a list of taxons
+- **[Pages collection](content_elements/pages_collection.md)** - a collection of pages
+- **[Spacer](content_elements/spacer.md)** - a simple spacer with a defined height in pixels
+
+Instead of rendering block or page, you can render just content elements in your twig templates using `bitbag_cms_render_content_elements([page|block])` helper extension,
+where `page` or `block` is an instance of `BitBag\SyliusCmsPlugin\Entity\PageInterface` or `BitBag\SyliusCmsPlugin\Entity\BlockInterface`.
+
+## Customization
+
+### Templates
+
+Each of the content elements has its own template that you can override.
+
+If you don't know how to override templates yet,
+read [Sylius template customization guide](http://docs.sylius.org/en/latest/customization/template.html).
+
+You can create a template under `app/templates/bundles/BitBagSyliusCmsPlugin/Shop/ContentElement` location.
+Available templates you can override can be found under [this location](../src/Resources/views/Shop/ContentElement).
+
+### Creating a new content element
+
+If you want to create a new content element, you need to follow these steps:
+
+1. Create a new form type under `src/Form/Type/ContentElements` location. Define your fields and remember to define public const `TYPE` with a unique name.
+For example, you can create a new form type called `Text`:
+
+```php
+final class TextContentElementType extends AbstractType
+{
+ public const TYPE = 'text';
+
+ public function buildForm(FormBuilderInterface $builder, array $options): void
+ {
+ $builder
+ ->add(self::TYPE, TextType::class, [
+ 'label' => 'bitbag_sylius_cms_plugin.ui.content_elements.type.' . self::TYPE,
+ ])
+ ;
+ }
+}
+```
+
+2. Define constant parameter in `config/parameters.yaml` or yours any other `yaml` file:
+
+```yaml
+parameters:
+ bitbag_sylius_cms_plugin.content_elements.type.text: !php/const 'YourNamespace\Form\Type\ContentElements\TextContentElementType::TYPE'
+```
+
+3. Define form type in service container under `config/services.yml` with correct tags:
+
+```yaml
+services:
+ bitbag_sylius_cms_plugin.form.type.content_element.text:
+ class: YourNamespace\Form\Type\ContentElements\TextContentElementType
+ tags:
+ - { name: 'bitbag_sylius_cms_plugin.content_elements.type', key: '%bitbag_sylius_cms_plugin.content_elements.type.text%' }
+ - { name: 'form.type' }
+```
+
+4. Create a new renderer class under `src/Renderer/ContentElement` location. Implement `BitBag\SyliusCmsPlugin\Renderer\ContentElement\ContentElementRendererInterface` interface.
+For example, you can create a new renderer called `TextContentElementRenderer`:
+
+```php
+final class TextContentElementRenderer implements ContentElementRendererInterface
+{
+ public function __construct(private Environment $twig)
+ {
+ }
+
+ public function supports(ContentConfigurationInterface $contentConfiguration): bool
+ {
+ return TextContentElementType::TYPE === $contentConfiguration->getType();
+ }
+
+ public function render(ContentConfigurationInterface $contentConfiguration): string
+ {
+ $text = $contentConfiguration->getConfiguration()['text'];
+
+ return $this->twig->render('@BitBagSyliusCmsPlugin/Shop/ContentElement/index.html.twig', [
+ 'content_element' => '@YourNamespace/Shop/ContentElement/_text.html.twig',
+ 'text' => $text,
+ ]);
+ }
+}
+```
+
+5. Register your renderer with tag in service container under `config/services.yml`:
+
+```yaml
+services:
+ bitbag_sylius_cms_plugin.renderer.content_element.text:
+ class: YourNamespace\Renderer\ContentElement\TextContentElementRenderer
+ arguments:
+ - '@twig'
+ tags:
+ - { name: 'bitbag_sylius_cms_plugin.renderer.content_element' }
+```
+
+6. Finally, create a new template under `templates/bundles/BitBagSyliusCmsPlugin/Shop/ContentElement` location.
+For example, you can create a new template called `_text.html.twig`:
+
+```twig
+{{ text }}
+``` diff --git a/doc/content_elements/heading.md b/doc/content_elements/heading.md new file mode 100644 index 000000000..a82a67b03 --- /dev/null +++ b/doc/content_elements/heading.md @@ -0,0 +1,11 @@ +# Heading content element + +Heading content element allows you to add a heading (from H1 to H6) to your block or page. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/heading1.png b/doc/content_elements/heading1.png new file mode 100644 index 000000000..baa1ce118 Binary files /dev/null and b/doc/content_elements/heading1.png differ diff --git a/doc/content_elements/heading2.png b/doc/content_elements/heading2.png new file mode 100644 index 000000000..bf7678611 Binary files /dev/null and b/doc/content_elements/heading2.png differ diff --git a/doc/content_elements/multiple_media.md b/doc/content_elements/multiple_media.md new file mode 100644 index 000000000..92cb2c7df --- /dev/null +++ b/doc/content_elements/multiple_media.md @@ -0,0 +1,12 @@ +# Multiple media content element + +Multiple media content element allows you to add multiple media (images, videos, or files) +from the media library to your block or page. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/multiple_media1.png b/doc/content_elements/multiple_media1.png new file mode 100644 index 000000000..f65db2a59 Binary files /dev/null and b/doc/content_elements/multiple_media1.png differ diff --git a/doc/content_elements/multiple_media2.png b/doc/content_elements/multiple_media2.png new file mode 100644 index 000000000..7630818c6 Binary files /dev/null and b/doc/content_elements/multiple_media2.png differ diff --git a/doc/content_elements/pages_collection.md b/doc/content_elements/pages_collection.md new file mode 100644 index 000000000..8213a6854 --- /dev/null +++ b/doc/content_elements/pages_collection.md @@ -0,0 +1,11 @@ +# Pages collection content element + +Pages collection content element renders a pages from a selected collection. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/pages_collection1.png b/doc/content_elements/pages_collection1.png new file mode 100644 index 000000000..6d1772cbf Binary files /dev/null and b/doc/content_elements/pages_collection1.png differ diff --git a/doc/content_elements/pages_collection2.png b/doc/content_elements/pages_collection2.png new file mode 100644 index 000000000..4f313f905 Binary files /dev/null and b/doc/content_elements/pages_collection2.png differ diff --git a/doc/content_elements/products_carousel.md b/doc/content_elements/products_carousel.md new file mode 100644 index 000000000..dfee37309 --- /dev/null +++ b/doc/content_elements/products_carousel.md @@ -0,0 +1,11 @@ +# Products carousel content element + +Products carousel content element allows you to add a carousel with shop products to your block or page. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/products_carousel1.png b/doc/content_elements/products_carousel1.png new file mode 100644 index 000000000..56438a64d Binary files /dev/null and b/doc/content_elements/products_carousel1.png differ diff --git a/doc/content_elements/products_carousel2.png b/doc/content_elements/products_carousel2.png new file mode 100644 index 000000000..1eefc60c9 Binary files /dev/null and b/doc/content_elements/products_carousel2.png differ diff --git a/doc/content_elements/products_carousel_by_taxon.md b/doc/content_elements/products_carousel_by_taxon.md new file mode 100644 index 000000000..9acb0078e --- /dev/null +++ b/doc/content_elements/products_carousel_by_taxon.md @@ -0,0 +1,12 @@ +# Products carousel by Taxon content element + +Products carousel by Taxon content element allows you to add a carousel +with shop products from specified taxon to your block or page. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/products_carousel_by_taxon1.png b/doc/content_elements/products_carousel_by_taxon1.png new file mode 100644 index 000000000..9683f78b1 Binary files /dev/null and b/doc/content_elements/products_carousel_by_taxon1.png differ diff --git a/doc/content_elements/products_grid.md b/doc/content_elements/products_grid.md new file mode 100644 index 000000000..efe77aae6 --- /dev/null +++ b/doc/content_elements/products_grid.md @@ -0,0 +1,12 @@ +# Products grid content element + +Products grid content element allows you to add a grid with +shop products to your block or page. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/products_grid1.png b/doc/content_elements/products_grid1.png new file mode 100644 index 000000000..48b4e1973 Binary files /dev/null and b/doc/content_elements/products_grid1.png differ diff --git a/doc/content_elements/products_grid2.png b/doc/content_elements/products_grid2.png new file mode 100644 index 000000000..57374aeb3 Binary files /dev/null and b/doc/content_elements/products_grid2.png differ diff --git a/doc/content_elements/products_grid_by_taxon.md b/doc/content_elements/products_grid_by_taxon.md new file mode 100644 index 000000000..9cccd08b8 --- /dev/null +++ b/doc/content_elements/products_grid_by_taxon.md @@ -0,0 +1,12 @@ +# Products grid by Taxon content element + +Products grid by Taxon content element allows you to add a grid +with shop products from specified taxon to your block or page. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/products_grid_by_taxon1.png b/doc/content_elements/products_grid_by_taxon1.png new file mode 100644 index 000000000..2deae902b Binary files /dev/null and b/doc/content_elements/products_grid_by_taxon1.png differ diff --git a/doc/content_elements/single_media.md b/doc/content_elements/single_media.md new file mode 100644 index 000000000..03386d056 --- /dev/null +++ b/doc/content_elements/single_media.md @@ -0,0 +1,12 @@ +# Single media content element + +Single media content element allows you to add a single media (image, video, or file) +from the media library to your block or page. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/single_media1.png b/doc/content_elements/single_media1.png new file mode 100644 index 000000000..35009ed5d Binary files /dev/null and b/doc/content_elements/single_media1.png differ diff --git a/doc/content_elements/single_media2.png b/doc/content_elements/single_media2.png new file mode 100644 index 000000000..d21dfb69c Binary files /dev/null and b/doc/content_elements/single_media2.png differ diff --git a/doc/content_elements/spacer.md b/doc/content_elements/spacer.md new file mode 100644 index 000000000..526ddf0ac --- /dev/null +++ b/doc/content_elements/spacer.md @@ -0,0 +1,12 @@ +# Spacer content element + +Spacer content element allows you to add a space in pixels +between content elements to your block or page. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/spacer1.png b/doc/content_elements/spacer1.png new file mode 100644 index 000000000..4dc49e262 Binary files /dev/null and b/doc/content_elements/spacer1.png differ diff --git a/doc/content_elements/spacer2.png b/doc/content_elements/spacer2.png new file mode 100644 index 000000000..99dfd6c6c Binary files /dev/null and b/doc/content_elements/spacer2.png differ diff --git a/doc/content_elements/taxons_list.md b/doc/content_elements/taxons_list.md new file mode 100644 index 000000000..e74952287 --- /dev/null +++ b/doc/content_elements/taxons_list.md @@ -0,0 +1,12 @@ +# Taxons list content element + +Taxons list content element allows you to add a list of taxons +to your block or page. + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/taxons_list1.png b/doc/content_elements/taxons_list1.png new file mode 100644 index 000000000..cae575202 Binary files /dev/null and b/doc/content_elements/taxons_list1.png differ diff --git a/doc/content_elements/taxons_list2.png b/doc/content_elements/taxons_list2.png new file mode 100644 index 000000000..04e34a0a8 Binary files /dev/null and b/doc/content_elements/taxons_list2.png differ diff --git a/doc/content_elements/textarea.md b/doc/content_elements/textarea.md new file mode 100644 index 000000000..413ac41cf --- /dev/null +++ b/doc/content_elements/textarea.md @@ -0,0 +1,12 @@ +# Textarea content element + +Textarea content element allows you to add a simple text area to your block or page +with WYSIWYG editor (CKEditor). + +## View in admin panel + + + +## View in front page + + diff --git a/doc/content_elements/textarea1.png b/doc/content_elements/textarea1.png new file mode 100644 index 000000000..50f56a4fa Binary files /dev/null and b/doc/content_elements/textarea1.png differ diff --git a/doc/content_elements/textarea2.png b/doc/content_elements/textarea2.png new file mode 100644 index 000000000..aba0bd2e9 Binary files /dev/null and b/doc/content_elements/textarea2.png differ diff --git a/doc/content_management.png b/doc/content_management.png index a3136ee59..910efa9b0 100644 Binary files a/doc/content_management.png and b/doc/content_management.png differ diff --git a/doc/importing-resources.md b/doc/importing-resources.md index 8cce460a4..3e80977e5 100644 --- a/doc/importing-resources.md +++ b/doc/importing-resources.md @@ -21,10 +21,9 @@ are validated against constraints used in the admin panel. What's more, thanks t Currently implemented importers support following column names, which are constants values from below table. **Note:** -- `__locale__` suffix needs to be replaced with a specific locale configured in your admin panel. -- `sections`, `channels` and `products` represent associations that are recognized with comma separated resource codes. -For instance, if you want to associate three sections via the CSV file, you should fill the `sections` column with -`homepage, blog, delivery` value, where each value is a single section code. +- `collections`, `channels`, `locales`, `products`, `products_in_taxons`, `taxons` represent associations that are recognized with comma separated resource codes. +For instance, if you want to associate three collections via the CSV file, you should fill the `collections` column with +`homepage, blog, delivery` value, where each value is a single collection code. | Resource code | Importer columns interface | |---------------|--------------------------------------------------------------------| diff --git a/doc/installation.md b/doc/installation.md index 842b00618..69694055a 100644 --- a/doc/installation.md +++ b/doc/installation.md @@ -114,9 +114,9 @@ Note. In some cases the `--symlink` option [may trow some errors](https://github We recommend you to use Webpack (Encore), for which we have prepared four different instructions on how to add this plugin's assets to your project: - [Import webpack config](./01.1-webpack-config.md)* -- [Add entry to existing config](./01.2-webpack-entry.md)) -- [Import entries in your entry.js files](./01.3-import-entry.md)) -- [Your own custom config](./01.4-custom-solution.md)) +- [Add entry to existing config](./01.2-webpack-entry.md) +- [Import entries in your entry.js files](./01.3-import-entry.md) +- [Your own custom config](./01.4-custom-solution.md) * Default option for plugin development diff --git a/doc/media.md b/doc/media.md index 542508321..afd4696ad 100644 --- a/doc/media.md +++ b/doc/media.md @@ -10,35 +10,30 @@ Currently, it supports following media types: ## General usage -You can render media in four ways: +You can render media in two ways: By rendering a media code template: ```twig {{ bitbag_cms_render_media('media_code') }} ``` - -Rendering a media code directly: +Function above can also take an additional parameter: `template`. ```twig -{{ render(path('bitbag_sylius_cms_plugin_shop_media_render', {'code' : 'file', 'template' : '@App/Some/Template/_path.html.twig'})) }} +{{ bitbag_cms_render_media('media_code', '@App/templates/example.html.twig')}} ``` -If you want to list media by specific section. Useful for displaying set of images. For example, using "gallery" section you can group set of images and display them as gallery, or even slider. +Rendering a media code directly: ```twig -{{ render(path('bitbag_sylius_cms_plugin_shop_media_index_by_section_code', {'sectionCode' : 'gallery', 'template' : '@App/Some/Template/_path.html.twig'})) }} +{{ render(path('bitbag_sylius_cms_plugin_shop_media_render', {'code' : 'file', 'template' : '@App/Some/Template/_path.html.twig'})) }} ``` -Or by providing custom twig template. Useful when you want to render media in a different template: - -```{{ bitbag_cms_render_media('media_code', '@App/templates/example.html.twig')}}``` - -### Media provider +## Media provider You can add your own media provider by adding a service with a tag named `bitbag_sylius_cms_plugin.media_provider`: -```php +```twig app.media_provider.audio: class: BitBag\SyliusCmsPlugin\MediaProvider\GenericProvider arguments: @@ -52,8 +47,8 @@ app.media_provider.audio: ## Customization -If you don't know how to override templates yet, +If you don't know how to override templates yet, read [Sylius template customization guide](http://docs.sylius.org/en/latest/customization/template.html). -You can create a template under `app/Resources/BitBagSyliusCmsPlugin/views/Shop/Media` location. +Even if you can pass template argument to render media resource, you can change the global templates under `app/templates/bundles/BitBagSyliusCmsPlugin/Shop/Media` location. Available templates you can override can be found under [this location](../src/Resources/views/Shop/Media). diff --git a/doc/media_cms.png b/doc/media_cms.png index d5edbe354..e2318bec2 100644 Binary files a/doc/media_cms.png and b/doc/media_cms.png differ diff --git a/doc/media_cms_result.png b/doc/media_cms_result.png index c0767e15b..fe6808d97 100644 Binary files a/doc/media_cms_result.png and b/doc/media_cms_result.png differ diff --git a/doc/media_create_cms.png b/doc/media_create_cms.png index 32aaa25bc..63f049ec4 100644 Binary files a/doc/media_create_cms.png and b/doc/media_create_cms.png differ diff --git a/doc/pages.md b/doc/pages.md index 6ecac44b1..7558f07cd 100644 --- a/doc/pages.md +++ b/doc/pages.md @@ -1,9 +1,19 @@ # Pages -Pages represent a customizable web page, you can adjust to your needs in admin panel. +Pages represent a customizable web page, you can adjust to your needs in admin panel. + +## Page sections + +Page contain 4 main editable sections: +- **General settings** - where you can set page name, code, channels, collections and publish at. It also contains a Preview button, which allows you to preview the page. +- **Content elements** - where you can add content elements to the page, read more about content elements [here](content_elements.md). +- **Teaser** - where you can set image, title and content. Teaser is a small preview of the page. It is used during rendering a collection of pages. +- **SEO** - where you can set slug, meta title, meta keywords and meta description. ## General usage +### Rendering the page + Once you created a page in the admin panel, you can render page in two ways: By rendering a page link template: @@ -18,52 +28,16 @@ Or rendering a page link directly: {{ render(path('bitbag_sylius_cms_plugin_shop_page_show', {'slug' : 'about'})) }} ``` -### Render product pages by section - -Let's assume you associated pages to specific products. You can render them grouped by section in your product view by using - -```twig -{{ bitbag_cms_render_product_pages(product) }} -``` - -Twig function. This is where `nameWhenLinked` and `descriptionWhenLinked` fields are used. If you associate pages to -specific sections, they will be displayed in columns titled with section name. - -### Render link to page from its code - -If you want to create a link to a page from its code, you can do either with `bitbag_cms_render_link_for_code` or `bitbag_cms_get_link_for_code` twig functions. These functions will automatically generate a link with the correct locale. - -You can define attributes to customize the tag. You can also customize the displayed name (by default the function will try to display the name when linked, if it is not defined, it will fallback to the page name). - -If you only need the link, you can use `bitbag_cms_get_link_for_code`. - -You can display a message if the page wasn't found with the `notFoundMessage` option. - -```twig -{{ bitbag_cms_render_link_for_code('code') }} -{{ bitbag_cms_render_link_for_code('code', { attr: { class: 'ui button' }, name: 'Custom name' }) }} -{{ bitbag_cms_render_link_for_code('code', {}, 'custom/template.html.twig') }} -{{ bitbag_cms_get_link_for_code('code') }} -{{ bitbag_cms_render_link_for_code('wrong-code', { notFoundMessage: 'Page not found' }) }} -{{ bitbag_cms_get_link_for_code('wrong-code', { notFoundMessage: 'Page not found' }) }} - -``` - -Will render: +### Visiting the page -```html -Name when linked -Custom name - -/{_locale}/pages/{slug} -Page not found -Page not found -``` +Page URL is generated based on the page slug. Full link looks like this: `domain.com/{locale}/page/{slug}`. ## Customization -If you don't know how to override templates yet, +### Override page template + +If you don't know how to override templates yet, read [Sylius template customization guide](http://docs.sylius.org/en/latest/customization/template.html). -You can create a template under `app/Resources/BitBagSyliusCmsPlugin/views/Shop/Page` location. +You can create a template under `app/templates/bundles/BitBagSyliusCmsPlugin/Shop/Page` location. Available templates you can override can be found under [this location](../src/Resources/views/Shop/Page). diff --git a/doc/pages_cms.png b/doc/pages_cms.png index 711a53e97..f26f2136d 100644 Binary files a/doc/pages_cms.png and b/doc/pages_cms.png differ diff --git a/doc/pages_cms_result_1.png b/doc/pages_cms_result_1.png index 094238046..9c5d2c3de 100644 Binary files a/doc/pages_cms_result_1.png and b/doc/pages_cms_result_1.png differ diff --git a/doc/pages_cms_result_2.png b/doc/pages_cms_result_2.png index 8e329eac8..fe3d34be2 100644 Binary files a/doc/pages_cms_result_2.png and b/doc/pages_cms_result_2.png differ diff --git a/doc/pages_create_cms.png b/doc/pages_create_cms.png index df577ae35..ab25782c2 100644 Binary files a/doc/pages_create_cms.png and b/doc/pages_create_cms.png differ diff --git a/doc/section_cms_result.png b/doc/section_cms_result.png deleted file mode 100644 index e6d365051..000000000 Binary files a/doc/section_cms_result.png and /dev/null differ diff --git a/doc/sections.md b/doc/sections.md deleted file mode 100644 index 755c28c69..000000000 --- a/doc/sections.md +++ /dev/null @@ -1,20 +0,0 @@ -# Sections - -With sections, you can organize your blocks and pages under some specific categories. -For instance, you can create a Blog section and display pages and blocks under it. - -## General usage - -In order to render a page by section code, use: - -```twig - - {{ 'app.ui.blog'|trans }} - -``` - -If you want to list blocks by specific section, use: - -```twig -{{ render(path('bitbag_sylius_cms_plugin_shop_block_index_by_section_code', {'sectionCode' : 'blog', 'template' : '@BitBagSyliusCmsPlugin/Shop/Block/index.html.twig'})) }} -``` diff --git a/doc/sections_cms.png b/doc/sections_cms.png deleted file mode 100644 index b386589ba..000000000 Binary files a/doc/sections_cms.png and /dev/null differ diff --git a/doc/sections_create_cms.png b/doc/sections_create_cms.png deleted file mode 100644 index abcb65a86..000000000 Binary files a/doc/sections_create_cms.png and /dev/null differ diff --git a/doc/template_create_cms.png b/doc/template_create_cms.png new file mode 100644 index 000000000..caf6ecdaa Binary files /dev/null and b/doc/template_create_cms.png differ diff --git a/doc/templates.gif b/doc/templates.gif new file mode 100644 index 000000000..25cf4c454 Binary files /dev/null and b/doc/templates.gif differ diff --git a/doc/templates.md b/doc/templates.md new file mode 100644 index 000000000..5a278442d --- /dev/null +++ b/doc/templates.md @@ -0,0 +1,21 @@ +# Templates + +Templates are a way to define the structure of content elements, which can be used in blocks and pages. + + + +## General usage + +Let's assume you want to create a template for a blog post. +You want to add following content elements: +- **Title** (textarea) +- **Subtitle** (textarea) +- **Image** (single media) +- **Content** (textarea) +- **Author** (textarea) +- **Products carousel** (products carousel by taxon) + +Then, when you create a page, in the content elements section you can choose the template you created. +It will create a form with fields you defined in the template. \ +Your job is just to fill them with content. \ +Of course, you can add additional content elements to the form, after you choose the template. It's super flexible! diff --git a/doc/templates_cms.png b/doc/templates_cms.png new file mode 100644 index 000000000..7e941ced2 Binary files /dev/null and b/doc/templates_cms.png differ diff --git a/doc/twig-functions-in-admin.md b/doc/twig-functions-in-admin.md deleted file mode 100644 index 209aeb957..000000000 --- a/doc/twig-functions-in-admin.md +++ /dev/null @@ -1,27 +0,0 @@ -# Using Twig functions in admin panel - -With CMS 2.0+, you can use some Twig functions in the admin panel content. It's extremely helpful -if you wish to render a block within a page, or what's even more common - a media, for instance an -image or video. - -So far, only following functions are allowed: - -```yaml -parameters: - bitbag_cms.twig.admin_functions: - - bitbag_cms_render_block - - bitbag_cms_render_media -``` - -As this is a parameter, you can easily customize its value in your `config.yml`. - -**Note:** - -*With the parser, you are supposed to use the function with `{{ function_name('foo', 'bar') }}` format. -All characters, including spaces and apostrophes are recognized. Only string parameters are allowed.* - -*If for some reason the function would not be able to execute, an empty string result will be returned.* - -*To render the interpretable content, you need to use a special `{{ bitbag_cms_render_content([resource]) }}` Twig function. -The resource needs to implement [ContentableInterface](../src/Entity/ContentableInterface.php). -For an example, take a look at the Block's [show.html.twig](../src/Resources/views/Shop/Block/show.html.twig)* file. diff --git a/doc/use_case.md b/doc/use_case.md index 34969b332..110bb54d7 100644 --- a/doc/use_case.md +++ b/doc/use_case.md @@ -13,7 +13,7 @@ This empowers businesses to easily adapt their store's content to meet current n ## What Sylius CMS Plugin provides us with When using the BitBag Sylius CMS Plugin, administrators gain access to various tiles within the admin panel, each serving a specific purpose. -These tiles include Blocks, Media, Pages, and Sections. +These tiles include Collections, Templates, Pages, Blocks and Media. ## Brief overview of what each tile offers @@ -23,55 +23,66 @@ In admin panel, the whole CMS functionality is located under "Content Management Our CMS Plugin allows you to manage: -* Sections - the containers for blocks -* Blocks - separate parts for the content -* Media - files, that can be attached to the page -* Pages - whole pages, obtainable by the link +* **Collections** - responsible for grouping the pages/blocks/media +* **Templates** - allows to create a template of content elements for the page or block +* **Pages** - whole pages, obtainable by the link +* **Blocks** - separate parts for the content, composed of the content elements +* **Media** - images, videos, etc. that can be used in other segments of the CMS --- -### Sections: -The Sections tile allows administrators to create and manage sections within CMS pages. +### Collections: -Sections serve as containers for content blocks and provide a structured way to organize content. -By utilizing sections, administrators can easily arrange and customize the layout of CMS pages to achieve the desired visual and informational structure. +The Collections tile allows administrators to create and manage collections within CMS pages. - +Collections serve as containers for blocks, pages, media and provide a structured way to organize content. +By utilizing collections, administrators can group related content elements together, such as blog posts, product listings, or promotional banners. -More information about Sections you can get [here](use_case_sections.md). + + +More information about Collections you can get [here](use_case_collections.md). + +### Templates: + +The Templates tile allows administrators to create and manage templates built from content elements skeletons. + + + +### Pages: + +The Pages tile is where administrators can create, edit, and organize CMS pages. + +It enables the creation of various types of pages, such as the homepage, informational pages, or blog posts. + + + +More information about Pages you can get [here](use_case_pages.md). ### Blocks -The Blocks tile allows administrators to create and manage reusable content blocks. -The Blocks can be utilized across different CMS pages, providing flexibility and consistency in content presentation. Blocks can contain text, images, videos, or any other desired content elements. +The Blocks tile allows administrators to create and manage blocks built from content elements. + +The Blocks can be rendered in twig templates, providing flexibility and consistency in content presentation.  More information about Blocks you can get [here](use_case_blocks.md). ### Media + The Media tile provides a centralized hub for managing media files within the CMS. -Administrators can upload and organize images, videos, and other media assets. The files can then be easily inserted into CMS pages, enriching the content with visual elements. +Administrators can upload and organize images, videos, and other media assets. The files can then be easily used in other parts of the CMS.  More information about Media you can get [here](use_case_media.md). -### Pages: -The Pages tile is where administrators can create, edit, and organize CMS pages. - -It enables the creation of various types of pages, such as the homepage, informational pages, or blog posts. Administrators can add content, images, and other media, customize the layout, and manage page hierarchy. - - - -More information about Pages you can get [here](use_case_pages.md). - ## Summary -In summary, the BitBag Sylius CMS Plugin provides administrators with a range of tiles in the admin panel, including [Sections](use_case_sections.md), [Blocks](use_case_blocks.md), -[Media](use_case_media.md), [Pages](use_case_pages.md). +In summary, the BitBag Sylius CMS Plugin provides administrators with a range of tiles in the admin panel, +including [Collections](use_case_collections.md), [Templates](use_case_templates.md), [Pages](use_case_pages.md), [Blocks](use_case_blocks.md), [Media](use_case_media.md). -These tiles offer functionalities for managing reusable content blocks, media assets, CMS pages and page sections. +These tiles offer functionalities for managing CMS segments. Together, they enable administrators to efficiently create, edit, and organize content within the Sylius e-commerce system, resulting in a more engaging and personalized user experience. diff --git a/doc/use_case_blocks.md b/doc/use_case_blocks.md index 8096e1b5c..22632cda7 100644 --- a/doc/use_case_blocks.md +++ b/doc/use_case_blocks.md @@ -1,6 +1,6 @@ # Blocks -With the BitBag SyliusCmsPlugin, administrators can arrange content blocks within sections, including the product page. +With the BitBag SyliusCmsPlugin, administrators can create and manage blocks built from content elements. This allows for customized content presentation, showcasing product features, promotions, and relevant information. @@ -20,7 +20,7 @@ By following the steps below, administrators can easily add blocks and customize 1. Please access the administrator panel of the Sylius e-commerce system. 2. Navigate to the CMS section or the designated area for managing blocks. 3. Locate the option to create a new block and click on it. -4. Fill in the required fields in the block creation form, such as the code and content of the block. +4. Fill in the required fields in the block creation form, such as the code and name. 5. Save the block after filling in the necessary details and selecting any desired associations. 6. Repeat the process to add additional blocks, as needed. 7. After refreshing the store page, the newly implemented changes should now be visible. @@ -29,9 +29,9 @@ By following the steps below, administrators can easily add blocks and customize In the form, you will find additional fields, which will help you with your e-commerce related content: -- Products - You can select specific products that are associated with the block. This allows the block to be displayed on the product pages of the selected products. -- Sections - You can choose the sections where the block should be placed. This helps in organizing and structuring the block within the relevant sections of the website. -- Taxons - This field allows you to select specific taxonomies or categories associated with the block. By choosing relevant taxons, the block can be displayed on the pages related to those categories. +- Display for products - You can select specific products that are associated with the block. This allows the block to be displayed on the product pages of the selected products. +- Display for products in taxon - This field allows you to select specific taxon associated with the block. By choosing relevant taxon, the block will be displayed on the product pages related to those taxon. Only "Main Taxon" is taken. +- Display for taxons - This field allows you to select specific taxonomies associated with the block. By choosing relevant taxons, the block can be displayed on the pages related to those taxons. The mentioned form: diff --git a/doc/use_case_collections.md b/doc/use_case_collections.md new file mode 100644 index 000000000..3b9f728ba --- /dev/null +++ b/doc/use_case_collections.md @@ -0,0 +1,40 @@ +# Collections + +With collections, you can organize your blocks, pages and media under specific categories. +For instance, you can create a Blog collection and display pages under it. + +Collections in the BitBag SyliusCmsPlugin serve as containers where various elements, such as content blocks, CMS pages, +and media, can be placed. These collections allow administrators to organize and manage the layout and presentation of content on pages. + +The ability to place blocks, pages, and media within collections provides full control over the appearance and structure of CMS pages, +enabling the creation of visually appealing and cohesive content layouts. Collections offer flexibility in designing pages, +allowing for customization and adaptation of displayed content to user preferences and marketing strategies. + +**Note.** If you haven't implemented the collection properly in your code yet, please visit the [Collections](collections.md) tech doc. + +## The process of creating a Collection: + +By following the steps below, administrators can add collections by providing the code, name and type for each collection. +These collections can be then utilized within the CMS pages for organizing and structuring content. + +1. Please access the administrator panel of the Sylius e-commerce system. +2. Navigate to the CMS section or the designated area for managing collections. +3. Select the option to create a new collection. +4. Fill in the required fields in the collection creation form, such as the code, name and type of the collection. +5. Save the collection after providing the necessary details. +6. Repeat the process to add additional collections, as needed. +7. After refreshing the store page, the newly implemented changes should now be visible. + +The mentioned form: + + + +## Result possible to achieve on the front of the store: + +It's possible to attach [Blocks](use_case_blocks.md), [Media](use_case_media.md) and [Pages](use_case_pages.md) to the Collections. This makes you able to [display all](collections.md) the content attached to the single Collection. + +The image below presents you a sample result of Collection rendered on the product page: + + + + diff --git a/doc/use_case_media.md b/doc/use_case_media.md index 3bcacc8ae..9dc64808f 100644 --- a/doc/use_case_media.md +++ b/doc/use_case_media.md @@ -16,7 +16,7 @@ Currently, it supports the following media types: ## The process of creating a Media -By following these steps bellow, administrators can easily add media items and customize their associations with products and sections. This provides control over where the media is displayed, ensuring it appears in the desired locations throughout the website. +By following these steps bellow, administrators can easily add and manage media. 1. Please access the administrator panel of the Sylius e-commerce system. 2. Navigate to the CMS section or the designated area for managing media. @@ -30,8 +30,11 @@ By following these steps bellow, administrators can easily add media items and c In the form, you will find additional fields, which will help you with your e-commerce related content: -- Products - You can select specific products to associate with the media item. This ensures that the media will be displayed on the product pages of the selected products. -- Sections - You can choose the sections where the media should be placed. This allows for precise positioning and organization of the media within the relevant sections of the website. +- Collections - You can choose the collections where the media should be placed. This allows for precise positioning and organization of the media within the relevant collections of the website. +- Translations: + - Alt - The alternative text for the media item. + - Link - The URL in which the media item should redirect to. + - Link content - Description of the media item link. The mentioned form: @@ -39,7 +42,4 @@ The mentioned form: ## Result possible to achieve on the front of the store: -The image below presents you a sample result of [Section](sections.md) rendered on the product page, which contains [Blocks](blocks.md) and Media (image, video and downloadable PDF file): - - - + diff --git a/doc/use_case_pages.md b/doc/use_case_pages.md index c6c8e703e..c8dd627ae 100644 --- a/doc/use_case_pages.md +++ b/doc/use_case_pages.md @@ -2,12 +2,9 @@ Pages represent a customizable web page, you can adjust them to your needs in the admin panel. -With the BitBag SyliusCmsPlugin, administrators can associate related products with CMS pages, displaying them in the designated section. +With the BitBag SyliusCmsPlugin, administrators can create page content using content elements section. -This feature allows for targeted product recommendations and cross-selling opportunities within the content. - -Additionally, administrators can incorporate media elements, such as images and videos, into the pages, -enriching the visual presentation and engaging users. +Additionally, administrators can set teaser image, title and content to be displayed on the pages collection listing. The flexibility of the plugin empowers administrators to create compelling CMS pages that seamlessly integrate product information and multimedia content, enhancing the overall user experience. @@ -16,22 +13,24 @@ information and multimedia content, enhancing the overall user experience. ## The process of creating a Page -By following the steps below, administrators can add pages and associate them with products, allowing the pages to display relevant product information. This integration enhances the browsing experience by providing seamless access to product details directly from the associated pages. +By following the steps below, administrators can add pages. 1. Please access the administrator panel of the Sylius e-commerce system. 2. Navigate to the CMS section or the designated area for managing pages. 3. Select the option to create a new page. -4. Fill in the required fields in the page creation form, such as the name, content, and slug. -5. Save the page after filling in the necessary details and selecting any desired associations. +4. Fill in the required fields in the page creation form, such as the name, code and slug. +5. Save the page after filling in the necessary details. 6. Repeat the process to add additional pages, as needed. 7. After refreshing the store page, the newly implemented changes should now be visible. -### Optional configuration +### Additional configuration -In the form, you will find fields, which will help you with your e-commerce related content: +In the form, you can also set SEO settings for the page: +- Meta title +- Meta keywords +- Meta description -- Products - You can associate specific products with the page. This means that the page will display and provide information related to the selected products. -- Sections - You can choose the sections where the page should be placed, ensuring proper organization and positioning of the page within the website's structure. +Additionally, you can set the page teaser image, title and content to be displayed on the pages collection listing. The mentioned form: @@ -39,11 +38,11 @@ The mentioned form: ## Result possible to achieve on the front of the store: -The image below displays a [Section](sections.md), to which we have attached two pages: +The image below displays a simple Blog page with listing of posts:  -Additionally, every page has its own slug, so you can access its all contents by visiting it by a full URL: +The image below displays a simple Blog post:  diff --git a/doc/use_case_sections.md b/doc/use_case_sections.md deleted file mode 100644 index 0f5405eba..000000000 --- a/doc/use_case_sections.md +++ /dev/null @@ -1,39 +0,0 @@ -# Sections - -With sections, you can organize your blocks and pages under specific categories. -For instance, you can create a Blog section and display pages and blocks under it. - -Sections in the BitBag SyliusCmsPlugin serve as containers where various elements, such as content blocks, CMS pages, -and media, can be placed. These sections allow administrators to organize and manage the layout and presentation of content on pages. - -The ability to place blocks, pages, and media within sections provides full control over the appearance and structure of CMS pages, -enabling the creation of visually appealing and cohesive content layouts. Sections offer flexibility in designing pages, -allowing for customization and adaptation of displayed content to user preferences and marketing strategies. - -**Note.** If you haven't implemented the section properly in your code yet, please visit the [Sections](sections.md) tech doc. - -## The process of creating a Section: - -By following the steps below, administrators can add sections by providing the code and name for each section. These sections can be then utilized within the CMS pages for organizing and structuring content. - -1. Please access the administrator panel of the Sylius e-commerce system. -2. Navigate to the CMS section or the designated area for managing sections. -3. Select the option to create a new section. -4. Fill in the required fields in the section creation form, such as the code and name of the section. -5. Save the section after providing the necessary details. -6. Repeat the process to add additional sections, as needed. -7. After refreshing the store page, the newly implemented changes should now be visible. - -The mentioned form: - - - -## Result possible to achieve on the front of the store: - -It's possible to attach [Blocks](use_case_blocks.md), [Media](use_case_media.md) and [Pages](use_case_pages.md) to the Sections. This makes you able to [display all](sections.md) the content attached to the single Section. - -The image below presents you a sample result of Section rendered on the product page, to which we attached Pages to get the simple Blog result: - - - - diff --git a/doc/use_case_templates.md b/doc/use_case_templates.md new file mode 100644 index 000000000..35a3349af --- /dev/null +++ b/doc/use_case_templates.md @@ -0,0 +1,20 @@ +# Templates + +In this plugin, templates are responsible for defining the structure of content elements, which can be used in blocks and pages. + +## The process of creating a Template + +By following these steps below, administrators can easily add and manage templates. + +1. Please access the administrator panel of the Sylius e-commerce system. +2. Navigate to the CMS section or the designated area for managing templates. +3. Select the option to create a new template item. +4. Fill in the required fields in the template creation form, such as the name and type. +5. Add some content elements. +6. Save the template item after filling in the necessary details. +7. Repeat the process to add additional template items, as needed. +8. Now you can use templates in blocks and pages. + +The mentioned form: + + diff --git a/doc/wysiwyg.md b/doc/wysiwyg.md index a8991eb7b..399a76ca1 100644 --- a/doc/wysiwyg.md +++ b/doc/wysiwyg.md @@ -9,9 +9,6 @@ is being created. You can use a custom [WysiwygType](../src/Form/Type/WysiwygType.php) any place you want the CKEditor to appear in. Take [the BlockTranslationType](../src/Form/Type/Translation/BlockTranslationType.php) as an example. -**Note:** -*In the WYSIWYG fields, you can use Twig function nesting. Read more [here](twig-functions-in-admin.md).* - ## Configuration If you want to customize any behavior of the CKEditor, you have to override one of these files: [CKEditor config](../src/Resources/config/fos_ck_editor/fos_ck_editor.yml) or [CKEditor js config](../src/Resources/views/Form/ckeditor_widget.html.twig) diff --git a/src/Entity/ContentConfiguration.php b/src/Entity/ContentConfiguration.php index 53ac2af3b..700cb1a8f 100644 --- a/src/Entity/ContentConfiguration.php +++ b/src/Entity/ContentConfiguration.php @@ -10,8 +10,6 @@ namespace BitBag\SyliusCmsPlugin\Entity; -use BitBag\SyliusCmsPlugin\Form\Type\ContentElements\TextareaContentElementType; - class ContentConfiguration implements ContentConfigurationInterface { protected ?int $id; @@ -68,13 +66,4 @@ public function setPage(?PageInterface $page): void { $this->page = $page; } - - public function getContent(): ?string - { - if (TextareaContentElementType::TYPE === $this->type) { - return $this->configuration[TextareaContentElementType::TYPE] ?? null; - } - - return null; - } } diff --git a/src/Entity/ContentConfigurationInterface.php b/src/Entity/ContentConfigurationInterface.php index bdbff2041..99e2e1185 100644 --- a/src/Entity/ContentConfigurationInterface.php +++ b/src/Entity/ContentConfigurationInterface.php @@ -12,9 +12,7 @@ use Sylius\Component\Resource\Model\ResourceInterface; -interface ContentConfigurationInterface extends - ResourceInterface, - ContentableInterface +interface ContentConfigurationInterface extends ResourceInterface { public function getType(): ?string; diff --git a/tests/Application/config/packages/bitbag_sylius_cms_plugin.yaml b/tests/Application/config/packages/bitbag_sylius_cms_plugin.yaml index 0af634ef6..70a5df59d 100644 --- a/tests/Application/config/packages/bitbag_sylius_cms_plugin.yaml +++ b/tests/Application/config/packages/bitbag_sylius_cms_plugin.yaml @@ -58,8 +58,6 @@ sylius_fixtures: name: "Homepage products carousel" channels: - "FASHION_WEB" - collections: - - "products" locales: - "en_US" content_elements: @@ -81,8 +79,6 @@ sylius_fixtures: name: "Homepage products carousel by Taxon" channels: - "FASHION_WEB" - collections: - - "products" locales: - "en_US" content_elements: @@ -99,8 +95,6 @@ sylius_fixtures: name: "Homepage products grid" channels: - "FASHION_WEB" - collections: - - "products" content_elements: heading: type: "heading" @@ -120,8 +114,6 @@ sylius_fixtures: name: "Homepage products grid by Taxon" channels: - "FASHION_WEB" - collections: - - "products" content_elements: heading: type: "heading" @@ -219,24 +211,6 @@ sylius_fixtures: en_US: alt: "SyliusCmsPlugin" link: "https://github.com/BitBagCommerce/SyliusCmsPlugin" - homepage_header_image: - type: image - path: "%fixtures_dir%/homepage_header.jpeg" - original_name: "homepage_header.jpeg" - name: | - This is a linked title - channels: - - "FASHION_WEB" - translations: - en_US: - alt: Homepage image media - content: | -- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. -
homepage_video: type: video path: "%fixtures_dir%/homepage_video.mp4" diff --git a/tests/Application/templates/bundles/BitBagSyliusCmsPlugin/Shop/ContentElement/_taxons_list.html.twig b/tests/Application/templates/bundles/BitBagSyliusCmsPlugin/Shop/ContentElement/_taxons_list.html.twig deleted file mode 100644 index c3c037444..000000000 --- a/tests/Application/templates/bundles/BitBagSyliusCmsPlugin/Shop/ContentElement/_taxons_list.html.twig +++ /dev/null @@ -1,13 +0,0 @@ -