On this page, you will find an overview of relevant information about theme plugins. Theme plugins let you change the colour and style of your template in an easy and convenient way. In contrast to other plugins, you only have to deploy a theme once to then activate and deactivate it without further configuration.
Theme plugins make use of a template container in the Ceres template and extend the CSS of Ceres. In doing so, the CSS of the theme will override all concerned classes in the Ceres stylesheet. Classes that are not styled in the CSS of the theme but in the Ceres stylesheet are not affected.
Note: In order to ensure that the theme plugin is working properly, you are advised to assign a position number to the plugin, that is higher than that of the plugin Ceres and lower than that of the plugin IO.
For instance, if IO is assigned the position number 999 and Ceres is asigned the position number 997, the theme plugin should receive the position number 998. For further information on position numbers, please refer to the Deploying plugins chapter of the manual.
Create the following files and develop a theme that changes the background colour of the template plugin. If you want to offer the theme in the plentyMarketplace, pay attention to our plugin requirements.
This basic theme plugin for changing the CSS of a template consists of a plugin.json
file, a ServiceProvider, a Container, a CSS file and a TWIG template.
Theme/ ├── resources/ │ ├── css/ │ │ └── main.css // theme stylesheet │ │ │ └── views/ │ └── content/ │ └── Theme.twig // content to be injected into the Ceres template container ├── src/ │ ├── Containers/ │ │ └── ThemeContainer.php │ │ │ └── Providers/ │ └── ThemeServiceProvider.php │ └── plugin.json // plugin information
ThemePlugin/plugin.json
{ "name" :"Theme", "description" :"Basic theme plugin", "namespace" :"Theme", "author" :"Your name", "keywords" : ["theme", "Ceres", "template"], "type" :"theme", "require" : [], "serviceProvider" :"Theme\\Providers\\ThemeServiceProvider", "dataProviders" : [ { "key" :"Theme\\Containers\\ThemeContainer", "name" :"Dark background", "description" :"Change the background colour of the Ceres template" } ] }
serviceProvider
and the dataProviders
.
Theme/src/Providers/ThemeServiceProvider.php
<?php namespace Theme\Providers; use Plenty\Plugin\ServiceProvider; class ThemeServiceProvider extends ServiceProvider { /** * Register the service provider. */ public function register() { } }
Theme/src/Containers/ThemeContainer.php
<?php namespace Theme\Containers; use Plenty\Plugin\Templates\Twig; class ThemeContainer { public function call(Twig $twig):string { return $twig->render('Theme::content.Theme'); } }
Theme::content.Theme
. Note that the path is case-sensitive.
Theme/resources/views/content/Theme.twig
<link rel="stylesheet" href="{{ plugin_path('Theme') }}/css/main.css">
{{ plugin_path('Theme') }}/css/main.css
. You can link one or multiple stylesheets here. Note that only CSS files are allowed. SCSS files must be compiled into one or multiple CSS files first.
Theme/resources/css/main.css
/* Change background colour */ body { background-color: #808080; }
Create the theme as described, then add the plugin to the plentymarkets inbox and deploy it in a plugin set. After deploying the theme plugin once, you can activate and deactivate it without further configuration.
A theme plugin can not only extend the CSS file of the template plugin, but also change the entire markup of individual template components or the overall page design.
This facilitates adding your own markup and style to an existing template plugin. Maintaining the code of your theme plugin is not directly linked to the code of the template plugin, i.e. changes made in your theme plugin are not overwritten when the template plugin is updated.
You can either change parts of the page design or edit the entire page design to meet your needs. The page design of Ceres consists of two main sections, the head and the body. The head contains the meta data of the page as well as the linked stylesheets. The body is divided into multiple sub-sections called wrappers. Wrappers include different components, partials or pages.
The most important wrapper is the main wrapper containing the following partials:
Context classes are php classes that retrieve and provide data for templates. You can include context classes in order to reduce the number of function calls in your .twig files. By using context classes you improve the performance and are able to maintain the template-relevant data concisely and in one central location. The controller passes the relevant parameters to the context via the init function. The context classes are located under src/contexts. The cookbook provides examples about how to modify and extend contexts.
The following context classes are available:
The following tables list the available variables for each of the context classes. In Twig, the output of context class variables is effected by including , whereby "myVariable" is a placeholder for the relevant class variable.
The GlobalContext provides variables that are utilised by all other contexts. Therefore, the other contexts listed here automatically inherit variables from the global context.
Variable | Description |
---|---|
$ceresConfig | Contains the data of the current Ceres configuration. |
$lang | Contains the selected language. |
$metaLang | Contains the selected language for meta information. |
$categories | Contains the category tree. |
$categoryBreadcrumbs | Contains the category breadcrumb navigation. |
$notifications | Contains the notifications that can be displayed in the online store. |
$basket | Contains the shopping cart information. |
$webstoreConfig | Contains the configuration of the online store. |
Variable | Description |
---|---|
$category | Contains the current category. |
$metaRobots | Contains SEO-relevant settings for the category. |
The CategoryItemContext inherits variables from the CategoryContext. It does not provide data itself, but feeds parameters to the ItemListContext in order to load item data from ElasticSearch.
Variable | Description |
---|---|
$currentPage | Contains the current page. |
$pageMax | Contains the maximum number of pages. |
$itemsPerPage | Contains the number of items to be displayed on one page. |
$itemCountPage | Contains the actual number of items on a page. |
$itemCountTotal | Contains the total number of items. |
$itemSorting | Contains the type of item sorting. |
$query | Contains the search query consisting of $itemsPerPage and $itemSorting. |
$itemList | Contains the results of ElasticSearch. |
$facets | Contains the facets. |
$searchOptions | Contains the search options that are avilable in the item search in the online store. $searchOptions itself contains the following variables:
|
Variable | Description |
---|---|
$isSearch | Inquires whether the current template is a search. |
$searchString | Contains the search string. |
Variable | Description |
---|---|
$wishList | Contains the items of the wish list. |
Variable | Description |
---|---|
$data | Contains the current order of the order confirmation page. |
$totals | Contains the gross and net sums. |
$showAdditionalPaymentInformation | Contains additional payment information that is displayed on the order confirmation page. |
Variable | Description |
---|---|
$orderData | Contains the data for returns processing. |
Variable | Description |
---|---|
$contactId | Contains the ID of the user whose password is to be changed. |
$hash | Contains the hash for password verification. |
Variable | Description |
---|---|
$variations | Contains the variations of an item. |
$attributeNameMap | Contains the combination of attributes that constitute the variation. |
$customerShowNetPrices | Determines whether net prices are displayed to the customer. |
The following table depicts which context is applicable to which template.
Template | Context |
---|---|
Homepage | GlobalContext |
CategoryContent | CategoryContext |
CategoryItem | CategoryItemContext |
PageDesign | GlobalContext |
SingleItemWrapper | SingleItemContext |
Basket | GlobalContext |
CheckoutView | GlobalContext |
MyAccount | GlobalContext |
OrderConfirmation | OrderConfirmationContext |
Login | GlobalContext |
Register | GlobalContext |
Guest | GlobalContext |
ResetPassword | PasswordResetContext |
Contact | GlobalContext |
ItemListView | ItemSearchContext |
WishListView | ItemWishListContext |
OrderReturnView | OrderReturnContext |
OrderReturnCofirmation | GlobalContext |
CancellationRights | GlobalContext |
CancellationForm | GlobalContext |
LegalDisclosure | GlobalContext |
PrivacyPolicy | GlobalContext |
TermsAndConditions | GlobalContext |
ItemNotFound | GlobalContext |
PageNotFound | GlobalContext |
The TWIG include statement is used for this purpose. In the example below the ThemeFooter.twig
file is included in the PageDesign.twig
file of Ceres. You can simply create your own footer template and replace the Ceres footer.
The code of the ServiceProvider must be updated to inject your own template paths into the template plugin.
Theme/src/Providers/ThemeServiceProvider.php
<?php namespace Theme\Providers; use IO\Extensions\Functions\Partial; use Plenty\Plugin\Events\Dispatcher; use Plenty\Plugin\ServiceProvider; use Plenty\Plugin\Templates\Twig; class ThemeServiceProvider extends ServiceProvider { /** * Register the service provider. */ public function register() { } /** * Boot a template for the footer that will be displayed in the template plugin instead of the original footer. */ public function boot(Twig $twig, Dispatcher $eventDispatcher) { $eventDispatcher->listen('IO.init.templates', function(Partial $partial) { $partial->set('footer', 'Theme::content.ThemeFooter'); }, 0); return false; } }
Partial
function as well as the Dispatcher
and Twig
classes.boot()
function and specify one or multiple partials, e.g. IO.init.templates
, as well as the TWIG template(s) for the partial(s), e.g. Theme::content.ThemeFooter
. We will add the TWIG template in the next step.head
, header
, footer
and page-design
. You can also add your own partials by using the set('your-partial', 'Plugin::PartialTemplate')
method to extend the original page design. Replace your-partial
with your own partial and Plugin::PartialTemplate
with the template path.return false
statement to interrupt the chain of events.{% include getPartial('your-partial') %}
.
Theme/resources/views/content/ThemeFooter.twig
<div class="footer"> <!-- Insert footer markup here --> </div>
{% include getPartial('footer') %}
statement in the PageDesign.twig
file, we include the content of this template in our PageDesign template.
The extends tag is used to extend a template from another template. In the example below, the ThemeBasket.twig
file extends the PageDesign.twig
file of Ceres. TWIG blocks are used to define the content that will be inserted in the main wrapper of the page design. We only have to edit the ServiceProvider of our theme and create the page template, e.g. the basket.
Theme/src/Providers/ThemeServiceProvider.php
<?php namespace Theme\Providers; use IO\Helper\TemplateContainer; use Plenty\Plugin\Events\Dispatcher; use Plenty\Plugin\ServiceProvider; use Plenty\Plugin\Templates\Twig; class ThemeServiceProvider extends ServiceProvider { /** * Register the service provider. */ public function register() { } /** * Boot a template for the basket that will be displayed in the template plugin instead of the original basket. */ public function boot(Twig $twig, Dispatcher $eventDispatcher) { $eventDispatcher->listen('IO.tpl.basket', function(TemplateContainer $container, $templateData) { $container->setTemplate('Theme::content.ThemeBasket'); return false; }, 0); } }
TemplateContainer
, the Dispatcher
and Twig
classes.boot()
function and specify one or multiple pages, e.g. IO.tpl.basket
as well as the TWIG template(s) for the page(s), e.g. Theme::content.ThemeBasket
. We will add the TWIG template in the next step.return false
statement to interrupt the chain of events.Theme/resources/views/content/ThemeBasket.twig
{% extends getPartial('page-design') %} {% block PageBody %} <!-- Insert markup for the basket here --> {% endblock %}
{% extends getPartial('page-design') %}
statement in the ThemeBasket.twig
file, we extend our page design and inject the content of this template in the {% block PageBody %}
area of the PageDesign template.
Page components, e.g. the BasketList of the Basket template, can also be individualised. For this purpose, the template of the page where the component is used must be updated and a new template for the component must be created.
Theme/resources/views/content/ThemeBasket.twig
{% extends getPartial('page-design') %} {% import "Ceres::PageDesign.Macros.LayoutContainer" as LayoutContainer %} {% block PageBody %} {{ component( "Theme::content.Components.ThemeBasketList" ) }} ... <div class="page-content basket container-max"> <div class="row m-t-1"> <div class="col-xs-12"> <h1 class="h4">{{ trans("Ceres::Template.basket") }}</h1> </div> </div> <hr class="m-b-3"> <div class="row"> <div class="col-xs-12"> <basket-list template="#theme-basket-list"></basket-list> </div> </div> ... {% endblock %}
{{ component( "Theme::content.Components.ThemeBasketList" ) }}
.Theme/resources/views/content/Components/ThemeBasketList.twig
<script type="x/template" id="theme-basket-list"> <!-- Insert BasketList markup here --> </script>
ThemeBasket.twig
file. Here, we use id="theme-basket-list"
.v-
is one indicator of Vue.js syntax. Other indicators are :
representing v-bind
and @
representing v-on
. If you change the Vue.js notation, the linked component might not work properly anymore.
Vue components, e.g. the SingleItem component of the SingleItemView template, can also be individualised. For this purpose, the ServiceProvider of your theme must be updated and a new template for the Vue component must be created.
Theme/src/Providers/ThemeServiceProvider.php
<?php namespace Theme\Providers; use IO\Helper\TemplateContainer; use IO\Helper\ComponentContainer; use Plenty\Plugin\Events\Dispatcher; use Plenty\Plugin\ServiceProvider; use Plenty\Plugin\Templates\Twig; class ThemeServiceProvider extends ServiceProvider { const PRIORITY = 0; /** * Register the service provider. */ public function register() { } /** * Boot a template for the basket that will be displayed in the template plugin instead of the original basket. */ public function boot(Twig $twig, Dispatcher $eventDispatcher) { $eventDispatcher->listen('IO.Component.Import', function (ComponentContainer $container) { if ($container->getOriginComponentTemplate()=='Ceres::Item.Components.SingleItem') { $container->setNewComponentTemplate('Theme::content.SingleItem'); } }, self::PRIORITY); } }
ComponentContainer
, the Dispatcher
and Twig
classes.boot()
function and use the dispatcher for listening to the component import event IO.Component.Import
. We get the component that we want to change by using the getOriginComponentTemplate()
method, e.g. the SingleItem template in Ceres. We then set our own component template by using setNewComponentTemplate
and specifying the path to the component, here Theme::content.SingleItem
.
Theme/resources/views/content/SingleItem.twig
<!-- Insert SingleItem markup here -->
If you are plugin developer who wants to replace specific portions of Ceres with your own theme, we have good news for you. We've made it a lot easier to overwrite specific Twig templates, thereby facilitating the development of themes for the online store. By implementing the method detailed below you can overwrite templates as well as entire macros.
Now, all you need to do to overwrite Twig templates is modify the ServiceProvider of your theme plugin to inherit from the class Plenty\Modules\Webshop\Template\Providers\TemplateServiceProvider. You will have to implement this class via the use and extends directives.
After you have integrated the TemplateServiceProvider into the ServiceProvider of your theme plugin, you can overwrite any Twig template by sending the following call in the boot()
method:
$this->overrideTemplate($original, $newTemplate);
Here, $original
is a placeholder for the template or macro you want to replace; $newTemplate
is a placeholder for the template you want to overwrite the original Twig template with.
A concrete example might look like this:
$this->overrideTemplate("Ceres::Widgets.Common.ImageBoxWidget", "MyTheme::Widgets.CustomImageBoxWidget");
This replaces the Ceres image box widget for the ShopBuilder with a custom image box widget that the theme plugin "MyTheme" provides.
Find the template folder structure of Ceres as well as an overview of pages and page components used in the Ceres template plugin below.
The template folder is structured into 10 sub-folders that include the main pages of Ceres and the respective components.
Ceres/ └── resources/ └── views/ ├── Basket/ │ ├── Basket.twig │ └── Components/ │ ├── AddItemToBasket.twig │ ├── AddItemToBasketOverlay.twig │ ├── BasketList.twig │ ├── BasketListItem_large.twig │ ├── BasketListItem_small.twig │ ├── BasketListItem.twig │ ├── BasketPreview.twig │ ├── BasketTotals.twig │ └── Coupon.twig │ ├── Category/ │ ├── Content/ │ │ └── CategoryContent.twig │ └── Item/ │ ├── CategoryItem.twig │ └── Partials/ │ ├── CategoryListItem.twig │ ├── CategoryViewFilter.twig │ ├── ListControls.twig │ └── Pagination.twig │ ├── Checkout/ │ ├── Checkout.twig │ ├── OrderConfirmation.twig │ ├── Components/ │ │ ├── OrderDetails.twig │ │ ├── PaymentProviderSelect.twig │ │ ├── PlaceOrder.twig │ │ └── ShippingProfileSelect.twig │ └── Macros/ │ └── Address.twig │ ├── Customer/ │ ├── Guest.twig │ ├── Login.twig │ ├── Register.twig │ └── Components/ │ ├── CountrySelect.twig │ ├── Login.twig │ ├── Registration.twig │ ├── UserLoginHandler.twig │ ├── AddressInputGroup/ │ │ ├── AddressInputGroup.twig │ │ └── Locale/ │ │ ├── AddressInputGroupDE.twig │ │ └── AddressInputGroupGB.twig │ └── AddressSelect/ │ ├── AddressSelect.twig │ └── CreateUpdateAddress.twig │ ├── Homepage/ │ └── Homepage.twig │ ├── Item/ │ ├── SingleItem.twig │ ├── Components/ │ │ ├── QuantityInput.twig │ │ ├── VariationImageList.twig │ │ └── VariationSelect.twig │ └── Partials/ │ └── ItemRating.twig │ ├── ItemList/ │ ├── ItemListView.twig │ └── Components/ │ ├── ItemList.twig │ ├── ItemSortingList.twig │ ├── ItemSearch.twig │ ├── ItemsPerPage.twig │ ├── LoadingAnimation.twig │ └── Pagination.twig │ ├── MyAccount/ │ ├── MyAccount.twig │ └── Components/ │ ├── AccountSettings.twig │ ├── BankDataSelect.twig │ └── OrderHistory.twig │ ├── PageDesign/ │ ├── PageDesign.twig │ ├── Components/ │ │ ├── Notifications.twig │ │ ├── ShippingCountrySelect.twig │ │ └── ShopLanguageSelect.twig │ ├── Macros/ │ │ ├── IncludeComponents.twig │ │ └── LayoutContainer.twig │ └── Partials/ │ ├── Footer.twig │ ├── Head.twig │ └── Header/ │ ├── Breadcrumb.twig │ ├── Header.twig │ └── Navigation.twig │ └── StaticPages/ ├── CancellationRights.twig ├── ItemNotFound.twig ├── LegalDisclosure.twig ├── PageNotFound.twig ├── PrivacyPolicy.twig └── TermsAndConditions.twig
Ceres uses individual templates containing the markup of the main pages. Some templates include partials or components. Find a table of all page templates and their respective location in the resources/views folder below:
Template | Description |
---|---|
Basket | The template for the shopping cart of your online store. It can be found in the Basket sub-folder of Ceres. This template includes the following components:
|
CategoryItem | The template for the category view of your online store. It can be found in the Category/Item sub-folder. |
Checkout | The template for the checkout of your online store. It can be found in the Checkout sub-folder. This template includes the following components:
|
Guest | The template for guest orders. It can be found in the Customer sub-folder. This template includes the following components:
|
HomePage | The template for the homepage of your online store. It can be found in the Homepage sub-folder. |
ItemListView | The template for the item list view of your online store. It can be found in the ItemList sub-folder. This template includes the following components:
|
Login | The template for customer login. It can be found in the Customer sub-folder. |
MyAccount | The template for the My Account page of your online store. It can be found in the MyAccount sub-folder. This template includes the following components:
|
OrderConfirmation | The template for the order confirmation page. It can be found in the Checkout sub-folder. This template includes the following components:
|
PageDesign | The general template for your online store. It can be found in the PageDesign sub-folder. This template includes the following partials and components:
|
Register | The template for customer registration. It can be found in the Customer sub-folder. This template includes the following components:
|
SingleItem | The template for the single item view of your online store. It can be found in the SingleItem sub-folder. This template includes the following components:
|
CancellationRights | The cancellation rights of your online store. It can be found in the StaticPages sub-folder. |
ItemNotFound | The Item not found page of your online store. It can be found in the StaticPages sub-folder. |
LegalDisclosure | The legal disclosure of your online store. It can be found in the StaticPages sub-folder. |
PageNotFound | The Page not found page. It can be found in the StaticPages sub-folder. |
PrivacyPolicy | The privacy policy of your online store. It can be found in the StaticPages sub-folder. |
TermsAndConditions | The general terms and conditions of your online store. It can be found in the StaticPages sub-folder. |
The major release of Ceres 4.0 in April 2019 includes several changes to the code that are of particular importance for theme developers, since they necessitate adjustments to the themes.
In order to minimise the size of documents and to accelerate the initialisation of Vue.js, we no longer include large JSON objects directly in the properties of a component. Instead, the JSON object is located in a separate <script> tag. The component's property merely contains a reference to this script tag that includes the JSON object.
This page explains which namespace and components have been altered and which adjustments are necessary for your theme to work properly after the update. Please take a look at the current version comparison on GitHub for a complete overview of the changes.
We have removed all classes of the namespace "IO\Services\ItemLoader" from Ceres. As an alternative, the classes of the namesspace "IO\Services\ItemSearch" should be used from now on.
In the following components, the json_encode filter has been substituted with the json_data filter:
In the SingleItem component, the two properties item-data and variation-list-data have been adjusted to use the json_data filter. The following code details the former as well as the current version. Please pay attention to the missing colon in the current version.
<single-item :item-data="{{ item | json_encode }}" variation-list-data="{{ variations | json_encode }}" <single-item item-data="{{ item | json_data }}" variation-list-data="{{ variations | json_data }}"
In the MobileNavigation component, the property navigation-tree-data has been adjusted to account for the json_data filter. Please pay attention to the missing colon in the current version.
<mobile-navigation :navigation-tree-data="{{ categories | json_encode }}" <mobile-navigation navigation-tree-data="{{ categories | json_data }}"
In the CountrySelect component, the property country-list has been adjusted to use the json_data filter.
<country-select :country-list="{{ services.country.getActiveCountriesList() | filterFields([...]) | json_encode }}" <country-select country-list="{{ services.country.getActiveCountriesList() | filterFields([...]) | json_data("activeCountriesList") }}"
In the ShopCountrySettings component, the property shipping-countries has been adjusted to use the json_data filter.
<shop-country-settings :shipping-countries="{{ services.country.getActiveCountriesList() | filterFields([...]) | json_encode }}" <shop-country-settings shipping-countries="{{ services.country.getActiveCountriesList() | filterFields([...]) | json_data("activeCountriesList") }}"
The CategoryItem component is a special case, since not all instances of the component have been adjusted to use the json_data filter. In Ceres, we only changed the component in the /resources/views/Category/Item/CategoryItem.twig file. Each call of this component has to be modified in the theme.
<category-item :item-data="{{ item.data | json_encode }}" <category-item item-data-ref="{{ item.data | json_data }}"
If your theme includes components that you designed yourself and are not native to Ceres, you can use the json_data filter in these components as well. As described above, large JSON objects are now relocated into an own <script> tag:
<my-component my-property="{{ twigValue | json_data }}"></my-component> <my-component my-property="xyz123"></my-component> ... <script type="application/json" id="xyz123">{"key": "value"}</script>
Vue.component("my-component", { props: [ "myProperty" ] } Vue.component("my-component", { jsonDataFields: [ "myProperty" ] }
For the latest major version Ceres 5.0, we reworked the file structure of many components. In the past, components usually consisted of 2 files: a TWIG file and a Javascript file. In order to improve maintainability and performance, these files have mostly been combined into single Vue.js components, which we call single file components, or SFC for short. These changes necessitate adjustments on part of theme developers. In this chapter you will learn which changes have been made to the components and what you need to watch out for when developing themes.
Note that the update guide for Ceres 5.0 is still in progress and will continually be updated before the release of Ceres 5.0.
The components have been redesigned to combine the Twig and JS files into one. Therefore, the single file components now consist of two sections, the template section, which contains the content that used to be in the Twig file, and the script section, which contains the Javascript part. There are slight changes to how the syntax works for these two sections:
The interpolation has been changed in the template
section. Instead of using the dollar sign and curly brackets (e.g. ${ country.currLangName }
),
you now need to use double curly brackets instead (e.g. {{ country.currLangName}}
).
You can no longer use the instance variable $this
in the component. You can no longer include Twig syntax in the component. If you want to include Twig content, you need to import it as a property.
You can no longer access the window.app object like before.
Instead, we added the variable $ceres
which contains the content of what formerly was the window.app object.
We also added the variable $translate
to access multilingualism keys via the translation service.
In the script section, the syntax remains largely the same. There are, however, two exceptions:
In order to access the window.app object in the script section, use the variable this.$ceres
.
In order to access the translation service in the script section, use this.$translate
We added two helper components that facilitate performance improvements: the intersect component and the lazy load component.
Via these helper components, it is possible to equip individual components with lazy loading/lazy mounting.
Using the lazy loading helper component, the embedded component is only loaded when the lazy loaded component enters the visible area in the online store.
With the help of the intersect component, the embedded component is always loaded, but is only mounted and rendered when the intersect component enters the visible area in the online store.
Both helper components (Intersect.vue and LazyLoad.vue) are located in the Ceres plugin under ressources/js/app/components/common
.
Below you will find two code snippets, the first of which illustrates the use of the lazy-load component and the second of which illustrates how to use the intersect component.
<lazy-load component="component-to-load"> <component-to-load> </component-to-load> </lazy-load>
<intersect> {# content to not load #} <category-item></category-item> {# display while not loaded / when to load #} <template #loading> <div class="category-item-placeholder w-100 invisible"> <a href="{{ Twig.print("item.data | itemURL(buildUrlWithVariationId | json_encode)") }}" class="small"> <i class="fa fa-image"></i> <span>{{ Twig.print("item.data | itemName") }}</span> </a> </div> </template> </intersect>
If you want to overwrite Ceres single file components, there are two ways you could go about. One is to individually overwrite the component whenever it is called upon. This gives you more flexibility when it comes to which instance of a component you want to override. The other method is to overwrite a component globally, so that every instance of the component will be replaced by your content.
Take a look at how individual components can be overridden:
<category-item template-override="#other-comp"></category-item>
template-override
property determines that the current component <category-item>
is overridden by another component, which here is indicated with the placeholde #other-comp.
For overwriting components globally for the entire online store, you need to set the type of the script tag as "x/template", specify which component you want to overwrite in the data-component
property and include your content in the script tags. Take a look at the example below:
<script type="x/template" data-component="basket-preview"> <div> ${ } </div> </script>