Как на самом деле вводить данные в CmsComponentData в Spartacus Storefront?

Question

Мне нужно подготовить фиктивные данные о витрине магазина Spartacus. Я расширяю BannerComponent и хочу использовать этот компонент в нескольких других пользовательских компонентах. Но я не понимаю, как данные фактически вводятся в компонент свойства publi c: CmsComponentData

Я уже читал об этой части здесь https://sap.github.io/spartacus-docs/customizing-cms-components/

Но этот раздел на самом деле не объясняет, как данные фактически вводятся в "data $". Я искал какой-нибудь классический c "новый CmsComponentData ()" подход, в котором я мог бы просто сослаться на локальный путь к изображению. Вероятно, это не способ go ...

В исходной базе по умолчанию spartacus я не вижу, чтобы «cx-banner» использовался ни в каком HTML файле. Но это именно то, что (я думаю) мне нужно делать в моих пользовательских компонентах (контейнерах, которые содержат как абзацы, так и баннер). Если я буду ссылаться на свой новый внутри шаблона HTML, он не будет содержать никаких данных. Как мне это сделать?

Спасибо за ваше время.

Answer 1

Есть несколько способов передать данные компонентам.

Вы упомянули CmsComponentData. Это поток данных, доступный только в компонентах CMS. Данные в этом объекте - это данные, полученные от O CC. Он доступен для использования во всех компонентах CMS, даже в пользовательских, если они получают данные.

Вы также упомянули, что не видите правильного вхождения cx-banner, поскольку компонент баннера является компонентом CMS. Это означает, что он сопоставляется с серверным компонентом CMS и динамически размещается в DOM с помощью Spartacus. Когда Spartacus получает карту страницы из запроса pages, он будет динамически отображать эти компоненты в соответствии с картой CMS. Вы можете найти дополнительную информацию об этом здесь: https://sap.github.io/spartacus-docs/banner-component/#cms -component-binding .

Теперь, если то, что вы ищете, - это компонент, на который будут ссылаться другие компоненты, компонент CMS - это не путь к go. Как вы упомянули, размещение <cx-banner> в DOM не предоставит ему данных. У вас есть три варианта, которые позволят вам делать то, что вы хотите.

1. Используйте CMS

Вы можете разместить баннер в SmartEdit, где хотите, и дать ему немного данные есть.

Получение данных в компоненте

По сути, в свой компонент вы должны внедрить службу, которая позволяет вам получать нужные данные. Например, add-to-cart.component вводит CurrentProductService и получает оттуда данные о продукте.

Передача данных компоненту через вход

Более подробную информацию можно найти здесь . По сути, если родительский компонент уже содержит данные, необходимые дочернему элементу, он может передать данные дочернему элементу через ввод.

Вы также можете объединить эти решения.