Search code examples
aem

where is the implementation of tag <we-product-variant> in AEM We.Retail source code?


I am a new AEM learner, i discovered the source code of the example We.Retail at here. Here a part of source of product.html

<div class="we-Product cq-dd-product-data-reference"
 data-sly-use.productModel="we.retail.core.model.ProductModel"
 data-sly-use.hapiProduct="${'org.apache.sling.hapi.sightly.HApiUse' @ type='/apps/public/weretail/hapi_types/product'}"
 data-sly-attribute="${hapiProduct.itemtype}">

<div data-sly-test="${wcmmode.edit && !model.hasVariants}" class="cq-placeholder"
     data-emptytext="Product Component"></div>

<we-product-variant
    data-sly-repeat.productItem="${productModel.productItem.variants}"
    is-base="${productItemList.first ? 1 : 0}"
    path="${productItem.path}"
    page-path="${productItem.pagePath}"
    variants="${productItem.variants}"
    sku="${productItem.sku}"
    title="${productItem.title}"
    description="${productItem.description}"
    price="${productItem.price}"
    summary="${productItem.summary}"
    features="${productItem.features}"
    image="${productItem.imageUrl}"
    thumbnail="${productItem.thumbnailUrl}"
    variant-axes="${productItem.variantAxesMapJson}"></we-product-variant>
    ....
</div>

I couldnot find out the implementation of the custom tag < we-product-variant>, so i cannot understand what is this tag used for? So please help to point me out!

// Sorry i am not good at English.


Solution

  • Here is the implementation of Vue component that supports that tag - https://github.com/Adobe-Marketing-Cloud/aem-sample-we-retail/blob/master/ui.apps/src/main/content/jcr_root/apps/weretail/components/structure/product/clientlibs/js/product.js