khuseini/pimcore-radbrick

此包已被弃用且不再维护。未建议替代包。

在Pimcore中创建AreaBricks的RAD方法

安装: 211

依赖: 0

建议者: 0

安全: 0

星标: 2

关注者: 2

分支: 0

开放问题: 3

类型:pimcore-bundle

1.x-dev 2020-06-13 18:12 UTC

README

Build Status Scrutinizer Code Quality Coverage Status License Code Intelligence Status Infection MSI

PimcoreRadBrickBundle

在Pimcore中创建AreaBricks的RAD方法

目的

配置Pimcore AreaBricks视图和编辑模板中的数据和可编辑内容。

安装

composer require khusseini/pimcore-radbrick

用法

只需启用Bundle,在您的config.yml中测试此配置,然后开始创建模板。

pimcore_rad_brick:
  areabricks:
    my_wysiwyg:
      label: WYSIWYG // Label to use in admin UI
      icon:  ~ // Path to icon in admin UI
      open: ~ // Set the open html
      close: ~ // Set the close html
      use_edit: false // Use edit.html.twig
      class: ~ // Use an existing symfony service
      editables:
        wysiwyg_content:
          type: wysiwyg
          options: [] // you can pass here any options accepted by the editable

现在在views/Areas/my_wysiwyg/view.html.twig中创建模板,就像平常一样。

{# add autogenerated meta description #}
{% do pimcore_head_meta().setDescription(wysiwyg_content.getData(), 160) %}
<div class="content">
  {% pimcoreglossary %}
    {{ wysiwyg_content|raw }}
  {% endpimcoreglossary %}
</div>

创建多个实例

为了创建具有相同配置的多个可编辑实例,只需添加instances属性即可。

config.yml

pimcore_rad_brick:
  areabricks:
    my_wysiwyg:
      label: WYSIWYG
      editables:
        wysiwyg_content:
          instances: 3
          type: wysiwyg
          options: [] // you can pass here any options accepted by the editable

使用可编辑的基本名称创建实例变量,并使用instance_ids中提供的ID或简单地使用数组索引后缀。

{% for wysiwyg_instance in wysiwyg_content %}
  {{ wysiwyg_instance|raw }}
{% endfor %}

使实例可配置

在大多数情况下,将可编辑实例的数量硬编码没有太多意义。为了使实例数量可通过管理员进行配置,我们将利用表达式语言组件的力量。

pimcore_rad_brick:
  areabricks:
    my_wysiwyg:
      label: WYSIWYG
      use_edit: true // Note that we use an edit template to configure the instances
      editables:
        num_editors:
          type: select
          options:
            store: [1,2,5]
        wysiwyg_content:
          instances: view.get("num_editors").getData()
          type: wysiwyg

注意:表达式上下文包含以下对象

  • request:当前的Request对象
  • view:当前的ViewModel
  • datasourcesDatasourceRegistry

实际示例

一个更实际的例子是将其集成到bootstrap网格中。可以轻松创建两个AreaBricks来支持bootstrap网格。

pimcore_rad_brick:
  areabricks:
    container:
      label: Container
      use_edit: true
      editables:
        container_css_class:
          type: input
        container_area_block:
          type: areablock
          options:
            allowed:
            - columns
            params:
              forceEditInView: true
    columns:
      label: Columns
      use_edit: true
      editables:
        num_columns:
          type: select
          options:
            store: [1, 2, 3, 4, 5, 6]
            defaultValue: 1
        column_area_block:
          instances: view.get("num_columns").getData()
          type: areablock
          options:
            params:
              forceEditInView: true

container/view.html.twig:

<div class="container">
  {{ container_area_block|raw }}
</div>

columns/edit.html.twig:

# of Columns: {{ num_columns|raw }}

columns/view.html.twig:

{% set col_width = 12 / num_columns.getData() %}
<div class="row">
  {% for column in column_area_block) %}
  <div class="col-{{ col_width }}">
      {{ column|raw }}
  </div>
  {% else %}
  <div class="col-{{ col_width }}">
      {{ column_area_block|raw }}
  </div>
  {% endfor %}
</div>

使用组

您可能已经注意到了上述示例中的奇怪else情况。这是由于instances的工作方式。如果只配置了一个实例,则变量在视图中作为可编辑的呈现,而不是数组。

为了保持实例在数组或组中,可以使用groupsgroup配置来为可编辑内容提供模板。

config.yml:

areabricks:
  promo_box:
    label: Promo Box
    use_edit: true
    groups:
      boxes:
        instances: 'view["num_boxes"].getValue() ? : 2'
    editables:
      num_boxes:
        type: select
        options:
          store: [2, 3, 5]
      link:
        type: link
        group: boxes
      image:
        type: image
        group: boxes

promo_box/edit.html.twig:

# of Boxes: {{ num_boxes|raw }}

view.html.twig:

<div>
{% for box in boxes %}
  {{ box.link|raw }}
  {{ box.image|raw }}
{% endfor %}
</div>

使用映射

有时您的AreaBrick中的可编辑内容依赖于某些配置值。可以使用map配置节点来映射可编辑内容之间的数据。

例如,一个图片AreaBrick可以配置为使用特定的缩略图

edit.html.twig

Thumbnail: {{ image_thumbnail|raw }}

view.html.twig

<div class="image-container">
{{ image_content|raw }}
</div>

config.yml

pimcore_rad_brick:
  areabricks:
    image:
      label: Image
      editables:
        image_thumbnail:
          type: input
        image_content:
          type: image
          map:
          - source: '[image_thumbnail].data'
            target: '[options][thumbnail]'

sourcetarget属性使用Symfony属性访问组件来获取和插入数据。

上述映射示例将从 image_thumbnail 可编辑属性(位于 ViewModel 中,因此使用数组表示法)中获取 data 属性的值,并将其直接插入到 [pimcore_rad_brick][areabricks][image][editables][image_content][options][thumbnail] 配置树中。

使用数据源

数据源简化了创建从其他服务获取数据的组件。例如,在 CoreShop 中,可能希望显示包含特定类别产品的滑块。

config.yml

pimcore_rad_brick:
  ## Define data sources to be used by areabricks
  datasources:
    products_by_category:
      service_id: 'app.repository.product'
      method: 'findByCategory'
      args:
      - '[category]' ## Specify which data to pass. The input array is passed by areabricks.
  areabricks:
    category_slider:
      label: Category Slider
      editables:
        select_category:
          type: relation
          options:
            types: ['object']
            subtypes:
              object: ['object']
            classes: ['CoreShopCategory']

      datasources: ## Datasource configuration for this areabrick
        products:
          id: products_by_category
          args:
            category: 'view["category"].getElement()' ## Define category argument (available in input array to the datasource above)

数据源输入参数的属性路径包含以下信息

  • request:访问当前请求对象
  • view:访问 ViewModel 中的元素

edit.html.twig

Category: {{ select_category|raw }}

view.html.twig

<div class="slider">
  {% for product in products %}
  <div class="item">{% include 'product-tile.tml.twig' with {product: product} only %}</div>
</div>

连接可编辑和数据源

在使用数据源时,还可以将可编辑连接到数据源中的项。例如,产品摘要可能有需要手动添加的标语,但所有其他字段都由产品填写。以下配置可以解决这个问题

pimcore_rad_brick:
  datasources:
    products_by_category:
      service_id: 'app.repository.product'
      method: 'findByCategory'
      args:
      - '[category]' ## Specify which data to pass. The input array is passed by areabricks.
  areabricks:
    category_slider:
      label: Category Slider
      use_edit: true
      editables:
        select_category:
          type: relation
          options:
            types: ['object']
            subtypes:
              object: ['object']
            classes: ['CoreShopCategory']
        product_title:
          type: input
          datasource:
            name: products
            id: item.getId() # Specify ID source (will be casted to string)

      datasources:
        products:
          id: products_by_category
          args:
            category: view["select_category"].getElement()

贡献

如果您发现缺少某些内容,并且没有相应的 issue 或者想帮助修复错误或文档,请随时提交 PR。阅读代码并尝试使用 vendor/bin/phpunit 运行测试。编码标准是 @PSR2,并将使用 php-cs-fixer 格式化代码。未来将使用 Scrutinizer 来强制执行编码标准。

捐赠

Buy Me A Coffee