Custom Twig Functions for Yves

Last updated:
Edit on GitHub

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

FUNCTION NAME REQUIRED DESCRIPTION METHOD SIGNATURE USAGE EXAMPLE
publicPath ✓
  • Provides a safe way to access the public folder where compiled assets are located. Returns a string like:
    /assets/DE/default/css/yves_default.app.css.
  • Also supports remote asset folders such as CDN resources. See Custom Location for Static Assets.
 function publicPath($relativePath: string): string
  • $relativePath - relative asset path
 {{ publicPath('css/yves_default.app.css') }}
{{ publicPath('js/yves_default.runtime.js') }}
model ✓ Resolves a model path like @ShopUi/models/{modelName}.twig. function model($modelName: string): string
  • $modelName - model name
 {% extends model('component') %}
atom ✓ Resolves an atom path like @{componentModule}/components/atoms/{componentName}/{componentName}.twig. function atom($componentName: string, $componentModule: string = 'ShopUi'): string
  • $componentName - component name
  • $componentModule - Spryker module
 {% include atom('checkbox') only %}
molecule ✓ Resolves a molecule path like @{componentModule}/components/molecules/{componentName}/{componentName}.twig. function molecule($componentName: string, $componentModule: string = 'ShopUi'): string
  • $componentName - component name
  • $componentModule - Spryker module
 {% extends molecule('card') %}
organism ✓ Resolves an organism path like @{componentModule}/components/organisms/{componentName}/{componentName}.twig. function organism($componentName: string, $componentModule: string = 'ShopUi'): string
  • $componentName - component name
  • $componentModule - Spryker module
 {% include organism('header') only %}
template ✓ Resolves a template path like @{templateModule}/templates/{templateName}/{templateName}.twig. function template($templateName: string, $templateModule: string = 'ShopUi'): string
  • $templateName - template name
  • $templateModule - Spryker module
 {% extends template('widget') %}
{% extends template('page-layout-catalog', 'CatalogPage') %}
view ✓ Resolves a view path like @{viewModule}/views/{viewName}/{viewName}.twig. function view($viewName: string, $viewModule: string = 'ShopUi'): string
  • $viewName - view name
  • $viewModule - Spryker module
 {% extends view('voucher-form', 'DiscountWidget') %}
define Used for:
  • creating a default object that can be changed from context
  • defining tags to pass properties for a component
See How the “define” Twig Tag is Working.		 None See Usage Example: define below.
qa Returns a string like data-qa="qa values here". function qa($qaValues: string[] = []): string {{ qa('submit-button') }}
qa_* ✓ Returns a string like data-qa-name="{qa values}". function qa_*($qaName: string, $qaValues: string[] = []): string
  • $qaName - name for the data structure
 {{ qa_additional('value') }}

Usage Example: define

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