Skip to content

Продукт. ui-product

Данный компонент является основным при работе с продуктом. Все остальные продуктовые компоненты (галерея, селектор модификаций и прочее) взаимодействуют с ним. Так же он являет источником добавления товра в корзину из верстки.

Пример использования

<!-- Компоненты внутри -->
<ui-product
    product-id="{{ product.id }}"
>
    <ui-product-variants></ui-product-variants>
    <ui-price><ui-price>
    <ui-product-buy>Купить</ui-product-by>
</ui-product>

<!-- Компоненты снаружи -->
<ui-product
    product-id="{{ product.id }}"
    instance-name="main"
>
</ui-product>

<ui-product-variants
    instance-name="main"
></ui-product-variants>
<ui-price
    instance-name="main"
><ui-price>
<ui-product-buy
    instance-name="main"
>Купить</ui-product-by>

Параметры

Данный компонент поддерживает следущие параметры

  • product-id - id продукта, обязательный.
  • instance-type - тип экземпляра компонента. Переключает часть логики работы компонента и отправку событий в шины. Досутпные значения Product, CartItem, ProductCard. Значение по-умолчанию Product (надо ли про это рассказывать??)
  • instance-name - имя экземпляра. Используется для связи продуктовых компонентов с экземпляром ui-product. Важно - рекомендуется применять только в случае, когда продуктовые компоненты не находятся внутри ui-product (например, страница товара).
  • variant-id - id варианта, который будет зафиксирован в данном экземпляре. Используется в CartItem (надо ли про это рассказывать??)

Классы компонента

В ходе работы компонента Используется класс product.

Особенности и что важно помнить

Основной особенностью для врестки является возможность указания пропса instance-name. Это позволяет делать давольно сложную верстку простым путем, без оборачивания в этот компонент всей страницы товара (как это было при использовании common.v2). При этом явно связывать разрозненные продуктовые воедино. В теории, можно сделать адЪ в виде селектора модификаций, живущего в модалке.