Containers in the plentyShop LTS template
Approximately 70 containers are available on the different pages and views of the plentyShop LTS template plugin allowing you to replace existing content or display additional content. The content provided by other plugins can be integrated in the following areas of the online store:
-
Header and footer of the page
-
Homepage
-
Other content pages
-
Category view
-
Single item view
-
Shopping cart and shopping cart preview
-
Checkout
-
Order confirmation page
Containers in the plentyShop LTS template
Approx. 70 containers are available on the different pages and views of the plentyShop LTS template plugin allowing you to replace existing content or display additional content. The content provided by other plugins can be integrated in the following areas of the online store:
-
Header and footer of the page
-
Homepage
-
Other content pages
-
Category view
-
Single item view
-
Shopping cart and shopping cart preview
-
Checkout
-
Order confirmation page
Containers on the homepage
The plentyShop LTS homepage provides multiple containers which can be used to replace the content of the default homepage or add more content to the homepage. Find an overview of the homepage containers below:

Using containers in the template
Following the tutorial above, we have learned about the plugin providing the data for our template. Now, you will learn how to use containers in template plugins.
Container entry point
The entry point of a container is defined in the plugin.json
file of a plugin.
"containers" :
[
{
"key" : "Homepage.Certified",
"name" : "Homepage: Certified container",
"description" : "Add an icon to the certified by container on the homepage",
"multiple" : false
}
]
Explanation
The
|
Container macro
The content to be displayed in a container is processed by the show()
function in a macro. This macro is stored in the LayoutContainer.twig
file. With the help of this macro, you can also access objects in layout containers, e.g. the item
object in the SingleItemView.twig
template.
{% macro show( containerName, object ) %}
{% if object == null %}
{% for content in container(containerName) %}
{{ content.result|raw }}
{% endfor %}
{% else %}
{% for content in container(containerName, object) %}
{{ content.result|raw }}
{% endfor %}
{% endif %}
{% endmacro %}
Container in the template
Our Certified by container is integrated into the template of plentyShop LTS using the following code.
{% import "Ceres::PageDesign.Macros.LayoutContainer" as LayoutContainer %}
...
{% set certifiedContent = LayoutContainer.show("Ceres::Homepage.Certified") %}
{% if certifiedContent|trim is not empty %}
<div class="services-certificate m-b-1">
<strong class="services-title">{{ trans("Ceres::Template.generalCertifiedBy") }}</strong>
{{ certifiedContent }}
</div>
{% endif %}
Explanation
A Twig function sets the variable The title of the container is displayed using the The |
Objects in containers
By using the LayoutContainer.twig
macro, we can access objects in layout containers. We specify the object as a parameter in the container and can make use of all the information of the current object.
{{ LayoutContainer.show("Ceres::SingleItem.BeforePrice", item.documents[0].data) }}
{% if ('item.recommendedPrice' in itemData or 'all' in itemData) %}
<div class="crossprice" v-resource-if:currentVariation="documents[0].data.calculatedPrices.rrp.price > 0">
<del class="text-muted small" v-resource-bind:currentVariation="documents.0.data.calculatedPrices.rrp.price" :filters="['currency']">
{#{{ item.data.salesPrices[1].price | formatMonetary(item.variationRetailPrice.currency) }} TODO get correct currency#}
{{ item.documents[0].data.calculatedPrices.rrp.price | formatMonetary(item.documents[0].data.calculatedPrices.rrp.currency) }}
</del>
</div>
{% endif %}
Explanation
Here, we specify the |
In addition to the Item
object, other objects can be used in different layout containers. The Order
object, for example, can be used in several containers on the order confirmation page.
{{ LayoutContainer.show("Ceres::OrderConfirmation.AdditionalPaymentInformation", services.customer.getLatestOrder().order) }}
Explanation
Here, we specify the |
Additional tabs in the single item view
In order to add your own information in an additional tab in the single item view, you can use two containers. The first container SingleItem.AddDetailTabs
is used for displaying one or multiple additional tabs in the view of an item in the plentyShop LTS online store. The second container SingleItem.AddDetailTabsContent
displays your content within the first container. For each container, an individual data provider is required.
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#my-custom-tab" role="tab">Custom Tab</a>
</li>
Explanation
Our tab is a |
<div class="tab-pane" id="my-custom-tab" role="tabpanel">
<div class="m-y-2">
Enter Custom Tab content here...
</div>
</div>
Explanation
In a second |
Containers on the homepage
The plentyShop LTS homepage provides multiple containers which can be used to replace the content of the default homepage or add more content to the homepage. Find an overview of the homepage containers below:

Using containers in the template
Following the tutorial above, we have learned about the plugin providing the data for our template. Now, you will learn how to use containers in template plugins.
Container entry point
The entry point of a container is defined in the plugin.json
file of a plugin.
"containers" :
[
{
"key" : "Homepage.Certified",
"name" : "Homepage: Certified container",
"description" : "Add an icon to the certified by container on the homepage",
"multiple" : false
}
]
Explanation
The
|
Container macro
The content to be displayed in a container is processed by the show()
function in a macro. This macro is stored in the LayoutContainer.twig
file. With the help of this macro, you can also access objects in layout containers, e.g. the item
object in the SingleItemView.twig
template.
{% macro show( containerName, object ) %}
{% if object == null %}
{% for content in container(containerName) %}
{{ content.result|raw }}
{% endfor %}
{% else %}
{% for content in container(containerName, object) %}
{{ content.result|raw }}
{% endfor %}
{% endif %}
{% endmacro %}
Container in the template
Our Certified by container is integrated into the template of plentyShop LTS using the following code.
{% import "Ceres::PageDesign.Macros.LayoutContainer" as LayoutContainer %}
...
{% set certifiedContent = LayoutContainer.show("Ceres::Homepage.Certified") %}
{% if certifiedContent|trim is not empty %}
<div class="services-certificate m-b-1">
<strong class="services-title">{{ trans("Ceres::Template.generalCertifiedBy") }}</strong>
{{ certifiedContent }}
</div>
{% endif %}
Explanation
A Twig function sets the variable The title of the container is displayed using the The |
Objects in containers
By using the LayoutContainer.twig
macro, we can access objects in layout containers. We specify the object as a parameter in the container and can make use of all the information of the current object.
{{ LayoutContainer.show("Ceres::SingleItem.BeforePrice", item.documents[0].data) }}
{% if ('item.recommendedPrice' in itemData or 'all' in itemData) %}
<div class="crossprice" v-resource-if:currentVariation="documents[0].data.calculatedPrices.rrp.price > 0">
<del class="text-muted small" v-resource-bind:currentVariation="documents.0.data.calculatedPrices.rrp.price" :filters="['currency']">
{#{{ item.data.salesPrices[1].price | formatMonetary(item.variationRetailPrice.currency) }} TODO get correct currency#}
{{ item.documents[0].data.calculatedPrices.rrp.price | formatMonetary(item.documents[0].data.calculatedPrices.rrp.currency) }}
</del>
</div>
{% endif %}
Explanation
Here, we specify the In addition to the |
{{ LayoutContainer.show("Ceres::OrderConfirmation.AdditionalPaymentInformation", services.customer.getLatestOrder().order) }}
Here, we specify the order
object as the second parameter of our layout container. This allows us to use the information about the latest order saved in the object for further processing.
Additional tabs in the single item view
In order to add your own information in an additional tab in the single item view, you can use two containers. The first container SingleItem.AddDetailTabs
is used for displaying one or multiple additional tabs in the view of an item in the plentyShop LTS online store. The second container SingleItem.AddDetailTabsContent
displays your content within the first container. For each container, an individual data provider is required.
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#my-custom-tab" role="tab">Custom Tab</a>
</li>
Our tab is a li
element with the class nav-item
. If more tabs are required, further list items can be added here. In the href
attribute, we provide a link to our tab content.
<div class="tab-pane" id="my-custom-tab" role="tabpanel">
<div class="m-y-2">
Enter Custom Tab content here...
</div>
</div>
In a second Twig
file, we enter the content for our tab. Our container has the same ID, that is referenced in the previous code example, e.g. id="my-custom-tab"
.