Custom Twig Functions for Yves

Last updated:
Edit on GitHub

To improve developer experience, Twig functionality has been extended with the new Twig functions introduced. All the Twig extension implementations are located in the ShopUi module and can be found in ShopUi/src/SprykerShop/Yves/ShopUi/Twig.

FUNCTION NAME DESCRIPTION METHOD SIGNATURE USAGE EXAMPLE
publicPath
  • Provides a safe way to access the public folder where compiled assets are located. Returns a string in the following format:
    {publicAssetsPath}{namespaceName}{themeName}{relativeAssetPath}. For example, /assets/DE/default/css/yves_default.app.css.
    The string is used internally to resolve a component/resource location within a provided module.
  • Provides a safe way to access a remote folder where compiled assets are located, e.g. a CDN (Content Delivery Network) resource. See Custom Location for Static Assets for more details.
 function publicPath($relativePath: string): string
  • $relativePath - relative asset path (required).
{{ publicPath('css/yves_default.app.css') }}
{{ publicPath('js/yves_default.runtime.js') }}
model Resolves a model path and returns a string in the following format:
@ShopUi/models/{modelName}.twig.		 function model($modelName: string): string
  • $modelName - model name (required).
 {% extends model('component') %}
atom Resolves an atom path and returns a string in the following format:
@{componentModule}/components/atoms/{componentName}/{componentName}.twig.		 function atom($componentName: string, $componentModule: string = ‘ShopUi’): string
  • $componentName - component name (required).
  • $componentModule - Spryker module in which the component is located (optional). If not specified, ShopUi is used.
 {% include atom('checkbox') only %}
molecule Resolves a molecule path and returns a string in the following format:
@{componentModule}/components/molecules/{componentName}/{componentName}.twig.		 function molecule($componentName: string, $componentModule: string = ‘ShopUi’): string
  • $componentName - component name (required).
  • $componentModule - Spryker module in which the component is located (optional). If not specified, ShopUi is used.
 {% extends molecule('card') %}
organism Resolves an organism path and returns a string in the following format:
@{componentModule}/components/organisms/{componentName}/{componentName}.twig.		 function organism($componentName: string, $componentModule: string = ‘ShopUi’): string
  • $componentName - component name (required).
  • $componentModule - Spryker module in which the component is located (optional). If not specified, ShopUi is used.
 {% include organism('header') only %}
template Resolves a template path and returns a string in the following format:
@{templateModule}/templates/{templateName}/{templateName}.twig.		 function template($templateName: string, $templateModule: string = ‘ShopUi’): string
  • $templateName - template name (required).
  • $templateModule - Spryker module in which the template is located (optional). If not specified, ShopUi is used.
 {% extends template('widget') %}
{% extends template('page-layout-catalog', 'CatalogPage') %}
view Resolves a view path and returns a string in the following format:
@{viewModule}/views/{viewName}/{viewName}.twig.		 function view($viewName: string, $viewModule: string = ‘ShopUi’): string
  • $viewName - view name (required).
  • $viewModule - Spryker module in which the view is located (optional). If not specified, ShopUi is used.
 {% extends view('voucher-form', 'DiscountWidget') %}
define This function is used for:
  • creating a default object that can be changed from an incoming context;
  • defining tags used to pass properties and contract for a specific component.
For more information, see How the “define” Twig Tag is Working.		 None See Usage Example: define below.
qa Returns a string in the following format: data-qa="qa values here". function qa($qaValues: string[] = []): string {{ qa('submit-button') }}
qa_* Returns a string in the following format: data-qa-name=“{qa values}”. function qa_*($qaName: string, $qaValues: string[] = []): string
  • $qaName - specifies the name to add in the left side of the data structure.
 {{ qa_additional('value') }}

Usage Example: define

{% define data = {
    items: _widget.productGroupItems,
} %}