Content fragments

Any page can be defined as a content fragment that can be injected into different parts of your site via twig hooks.

As for pages, fragments can be:
  • enabled or disabled globally
  • enabled or disabled for a specific channel
  • subject to publication scheduling
Trying to access a page defined as a fragment in your storefront, will result in a 404 - Not found status code.

🧱 Defining content fragments

To define fragments, create the config/packages/fiftydeg_sylius_degditor_base.yaml file in your project and configure them like in following examples.

Static content fragments

1fifty_deg_sylius_degditor_base:
2
3    fragments:
4        'sylius_shop.product.show.content#shared_fragment': # Fragment unique key
5            name: 'Product shared content' # Fragment name, shown while editing the page
6            description: 'Content shared by all products in your catalog' # Fragment description, shown while editing the page
7
In the example above, we're defining a static fragment that can be used anywhere in your storefront.
The editor, on the admin side, will be able to search and select this fragment when creating / editing a page.

Dynamic content fragments:

1fifty_deg_sylius_degditor_base:
2
3    fragments:
4        '@.sylius_shop.product.show.content#product_fragment':
5            name: 'Product content'
6            description: 'Content shown in a specific product page'
7            entity_repository: 'sylius.repository.product'
8            entity_property: 'code'
9
In the example above, we're defining dynamic fragments that must be used in specific pages of your storefront (in this case in a Product detail page).
To define dynamic fragments, you need to:
  • use the @ symbol somewhere in the yaml key
  • define a repository from where to fetch entities
  • define the entity property that will be used to dynamically replace the @ symbol
Let's assume the catalog contains two products with the following code attribute product_1 and product_2, the example above generates the following content fragments keys:
  • product_1.sylius_shop.product.show.content#product_fragment
  • product_2.sylius_shop.product.show.content#product_fragment
By this way, the editor will be able to define a page as a content fragment for a specific product detail page.

🖼️ Rendering content fragments:

Once you've defined content fragments, you can use the provided degditor:common:content_fragment twig component to render them in your twig templates.
In the example below, we assume you already know how Sylius twig hooks works.
  1. Define where to render the fragment through twig hooks and which template to use
1sylius_twig_hooks:
2    hooks:
3        # ...
4
5        'sylius_shop.product.show.content':
6            shared_fragment:
7                template: '@YourBundle/fragments/product/show/content/sharedFragment.html.twig'
8                priority: 40
9
10            product_fragment:
11                template: '@YourBundle/fragments/product/show/content/productFragment.html.twig'
12                priority: 50
13
  1. In the twig template invoke the degditor:common:content_fragment twig component
1{# '@YourBundle/fragments/product/show/content/sharedFragment.html.twig' template #}
2{{ component('degditor:common:content_fragment', {
3    fragment: 'sylius_shop.product.show.content#shared_fragment',
4    template: '@FiftyDegSyliusDegditorBasePlugin/shop/shared/fragment.html.twig'
5}) }}
6
1{# '@YourBundle/fragments/product/show/content/productFragment.html.twig' template #}
2{% set product = hookable_metadata.context.product %}
3
4{{ component('degditor:common:content_fragment', {
5    fragment: product.code ~ '.sylius_shop.product.show.content#product_fragment',
6    fallbackFragments: [product.mainTaxon.code ~ '.sylius_shop.product.show.content#fallback_fragment'],
7    template: '@FiftyDegSyliusDegditorBasePlugin/shop/shared/fragment.html.twig'
8}) }}
9

🛟 Fallback fragments

As you can see in the example above, you can define fallback content fragments in case the main fragment has not been found.
This can be achieved through the fallbackFragments array: the first available content fragment found in the array will replace the main fragment.

🗝️ Property access

When configuring entity_property you can access properties from related entities such as product.mainTaxon.code since, behind the scenes, we're using Symfony Property Access.
1fifty_deg_sylius_degditor_base:
2
3    fragments:
4        '@.sylius_shop.product.show.content#fallback_fragment':
5          name: 'Product fallback content'
6          description: 'Fallback content based on product main taxon'
7          entity_repository: 'sylius.repository.product'
8          entity_property: 'mainTaxon.code'
9
Three, two, one...

Ready for DegDitor?

Try the plugin

Experience the best features at no cost

Get a better understanding of DegDitor and how it works

Test it risk-free and see the results

Try it

Get a demo

Get a personalized demo tailored to your unique needs

Preview our pricing plans

Evaluate DegDitor against your requirements

Get a demo

We are here for you

After months of intense development, it’s time to put DegDitor to work. For feedback, questions or information please contact us!

Contact us