Skip to content

Commit

Permalink
OP-157 - Update README.md and add use cases docs
Browse files Browse the repository at this point in the history
Update README.md and add use cases docs
  • Loading branch information
PiotrSzymanski2000 authored May 19, 2023
1 parent 81a713d commit 61e53fb
Show file tree
Hide file tree
Showing 24 changed files with 295 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ Like what we do? Want to join us? Check out our job listings on our [career page
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 with images, text or HTML to your storefront, as well as pages and FAQs section.
<img align="left" src="https://bitbag.io/wp-content/uploads/2021/01/Sylius-CMS-Plugin-Building-Block-1-1024x1024.png">

- [Use Case](doc/use_case.md)
- [Installation](doc/installation.md)
- [Upgrading](UPGRADE.md)
- [Blocks](doc/blocks.md)
Expand Down
Binary file added doc/blocks_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/blocks_cms_result.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/blocks_create_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/content_management.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/faq_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/faq_cms_result.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/faq_create_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/media_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/media_cms_result.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/media_create_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/pages_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/pages_cms_result_1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/pages_cms_result_2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/pages_create_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/section_cms_result.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/sections_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/sections_create_cms.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 87 additions & 0 deletions doc/use_case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
# What is and how to use Sylius CMS Plugin

BitBag Sylius CMS Plugin is a plugin developed for Sylius,
a popular open-source e-commerce system based on Symfony.
The plugin enhances Sylius with advanced content management capabilities, allowing the creation,
editing, and publication of dynamic CMS (Content Management System) pages within an e-commerce store.

As e-commerce continues to evolve, businesses are seeking flexible and user-friendly tools to manage content on their websites.
Sylius CMS Plugin addresses this need by providing administrators with the ability to create and edit various types of CMS pages,
such as the homepage, informational pages, blogs, static pages, and more.
This empowers businesses to easily adapt their store's content to meet current needs and marketing strategies.

## 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, FAQs, and Sections.

## Brief overview of what each tile offers

In admin panel, the whole CMS functionality is located under "Content Management" left menu section:

![Screenshot showing content management config in admin](content_management.png)

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
* FAQ - the simple mechanism for Frequently Asked Questions function

---

### Sections:
The Sections tile allows administrators to create and manage sections within CMS pages.

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.

![Screenshot showing content management config in admin](sections_cms.png)

More information about Sections you can get [here](use_case_sections.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.

![Screenshot showing content management config in admin](blocks_cms.png)

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.

![Screenshot showing content management config in admin](media_cms.png)

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.

![Screenshot showing content management config in admin](pages_cms.png)

More information about Pages you can get [here](use_case_pages.md).

### FAQ
The FAQ tile is specifically designed to manage frequently asked questions.

Administrators can create question-and-answer pairs, categorize them, and make them available to customers on relevant pages. This helps provide clear information and addresses common queries for a seamless customer experience.

![Screenshot showing content management config in admin](faq_cms.png)

More information about the FAQ you can get [here](use_case_faq.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) and [FAQ](use_case_faq.md).

These tiles offer functionalities for managing reusable content blocks, media assets, CMS pages, frequently asked questions,
and page sections. 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.
44 changes: 44 additions & 0 deletions doc/use_case_blocks.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# Blocks

With the BitBag SyliusCmsPlugin, administrators can arrange content blocks within sections, including the product page.

This allows for customized content presentation, showcasing product features, promotions, and relevant information.

The plugin provides flexibility in organizing and managing blocks,
empowering administrators to create an engaging browsing experience tailored to each page's context.

By leveraging this feature, administrators can effectively communicate product details, enhance cross-selling opportunities,
and provide valuable information to customers. Overall,
the plugin enables targeted and contextual content delivery across various pages.

**Note.** If you haven't implemented the blocks properly in your code yet, please visit the [Blocks](blocks.md) tech doc.

## The process of creating a Block:

By following the steps below, administrators can easily add blocks and customize their associations with products, sections, and taxonomies. This allows for targeted block placement and display on relevant pages, enhancing the overall content management capabilities and user experience.

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.
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.

### Optional configuration

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.

The mentioned form:

![Screenshot showing content management config in admin](blocks_create_cms.png)

## Result possible to achieve on the front of the store:

The image below presents you a sample result of Block with a content rendered on the product page:

![Screenshot showing content management config in admin](blocks_cms_result.png)
30 changes: 30 additions & 0 deletions doc/use_case_faq.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Frequently Asked Questions

FAQ is a common part of each eCommerce website. You can add them in your admin panel by configuring question, answer, and position. All results will be paginated in the storefront.

The BitBag SyliusCmsPlugin allows administrators to add and display questions and answers within the FAQ section on various pages, including the product page.

This feature enables the easy management and presentation of frequently asked questions, providing valuable information to customers within a dedicated FAQ section.

**Note.** If you haven't implemented the FAQ properly in your code yet, please visit [FAQ](faqs.md) tech doc.

## The process of creating an FAQ

1. Please access the administrator panel of the Sylius e-commerce system.
2. Navigate to the CMS section or the specific area designated for managing FAQs.
3. Locate the option to add a new FAQ entry or question.
4. Enter the question in the provided field.
5. Add the corresponding answer to the question in the designated space.
6. Save the newly created FAQ entry.
7. Repeat the process for additional questions and answers as needed.
8. After refreshing the store page, the newly implemented changes should now be visible.

The mentioned form:

![Screenshot showing content management config in admin](faq_create_cms.png)

## Result on the front of the store:

The image below displays a rendered FAQ on your Sylius Store:

![Screenshot showing content management config in admin](faq_cms_result.png)
45 changes: 45 additions & 0 deletions doc/use_case_media.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# Media

In this plugin, media represents digital assets, for instance, an image, a video, or a simple PDF file.

The BitBag SyliusCmsPlugin enables administrators to add and display various types of media, such as images, videos, and files, in desired locations throughout the website.

This functionality allows for the seamless integration of media elements using HTML tags, providing a visually engaging experience for users.

Currently, it supports the following media types:

- Image (img HTML tag)
- Video (video HTML tag)
- File (a HTML tag)

**Note.** If you haven't implemented the Media properly in your code yet, please visit [Media](media.md) tech doc.

## 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.

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.
3. Select the option to create a new media item.
4. Fill in the required fields in the media creation form, such as the code and uploaded file.
5. Save the media item after filling in the necessary details and selecting any desired associations.
6. Repeat the process to add additional media items, as needed.
7. After refreshing the store page, the newly implemented changes should now be visible.

### Optional configuration

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.

The mentioned form:

![Screenshot showing content management config in admin](media_create_cms.png)

## 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):

![Screenshot showing content management config in admin](media_cms_result.png)

49 changes: 49 additions & 0 deletions doc/use_case_pages.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# Pages

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.

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.

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.

**Note.** If you haven't implemented the Pages properly in your code yet, please visit [Pages](pages.md) tech doc.

## 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.

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.
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

In the form, you will find fields, which will help you with your e-commerce related content:

- 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.

The mentioned form:

![Screenshot showing content management config in admin](pages_create_cms.png)

## 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:

![Screenshot showing content management config in admin](pages_cms_result_1.png)

Additionally, every page has its own slug, so you can access its all contents by visiting it by a full URL:

![Screenshot showing content management config in admin](pages_cms_result_2.png)

39 changes: 39 additions & 0 deletions doc/use_case_sections.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# 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:

![Screenshot showing content management config in admin](sections_create_cms.png)

## 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:

![Screenshot showing content management config in admin](section_cms_result.png)


0 comments on commit 61e53fb

Please sign in to comment.