Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CIF-1319 - add optional title support for featured category component #228

Merged
merged 4 commits into from
Mar 18, 2020
Merged

CIF-1319 - add optional title support for featured category component #228

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
172466f
CIF-1319 - add optional title support for featured category component
mhaack Mar 18, 2020
36c7dc5
CIF-1319 - update readme
mhaack Mar 18, 2020
0033f53
Merge branch 'master' into issues/CIF-1319
mhaack Mar 18, 2020
c514033
Merge branch 'master' into issues/CIF-1319
cjelger Mar 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .../cif/components/commerce/featuredcategorylist/v1/featuredcategorylist/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,18 @@ Featured Category List component uses graphql query to fetch categories to displ
This component has several dependencies on internal client-side modules.

### Usage prerequisites
Make sure you have dispatcher running with Magento url configured. See `dispatcher/README.md`. You should have the category images configured in your Magento instance.

Make sure you have dispatcher running with Magento url configured. See `dispatcher/README.md`. You should have the category images configured in your Magento instance.

### Use Object
The Featured category list component uses the `com.adobe.cq.commerce.core.components.models.categorylist.FeaturedCategoryList` Sling model as its Use-object.

The Featured category list component uses the `com.adobe.cq.commerce.core.components.models.categorylist.FeaturedCategoryList` Sling model as its Use-object.

### Edit Dialog Properties

The following properties are written to JCR for this component and are expected to be available as `Resource` properties:

`./jcr:title` - Optional title text
`./categoryIds` - Category ids in an Array of string saved by Category Picker.

### CSS API (BEM)
Expand All @@ -58,8 +60,6 @@ BLOCK .cmp-categorylist
ELEMENT cmp-categorylist__image
ELEMENT cmp-categorylist__name
ELEMENT cmp-categorylist__title

BLOCK placeholder__empty
```

## License information
Expand Down
72 changes: 38 additions & 34 deletions .../components/commerce/featuredcategorylist/v1/featuredcategorylist/_cq_dialog/.content.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,50 @@
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Featured Category List"
sling:resourceType="cq/gui/components/authoring/dialog"
extraClientlibs="[core.cif.components.featuredcategorylist.v1.editor]"
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Featured Category List"
sling:resourceType="cq/gui/components/authoring/dialog"
extraClientlibs="[core.cif.components.featuredcategorylist.v1.editor]"
trackingFeature="cif-core-components:featuredcategorylist:v1">
<content
jcr:primaryType="nt:unstructured"
<content jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
<column jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<content
granite:class="cmp-cif-featuredcategorylist__editor"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
<title jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Optional title text. Leave empty to hide the title."
fieldLabel="Title"
name="./jcr:title"
value="Shop by category" />
<content granite:class="cmp-cif-featuredcategorylist__editor"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Featured Categories">
<field
granite:class="cmp-cif-featuredcategorylist__editor-item-multifield-composite-item coral-Well"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
<field granite:class="cmp-cif-featuredcategorylist__editor-item-multifield-composite-item coral-Well"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./items">
<items jcr:primaryType="nt:unstructured">
<category
jcr:primaryType="nt:unstructured"
sling:resourceType="commerce/gui/components/common/cifcategoryfield"
fieldLabel="Category"
multiple="{Boolean}false"
name="./categoryId"
selectionId="id"/>
<asset
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="If set, the category image is replaced by the selected asset."
fieldLabel="Override Asset"
filter="hierarchy"
multiple="{Boolean}false"
name="./asset"
rootPath="/content/dam"/>
<category jcr:primaryType="nt:unstructured"
sling:resourceType="commerce/gui/components/common/cifcategoryfield"
fieldLabel="Category"
multiple="{Boolean}false"
name="./categoryId"
selectionId="id" />
<asset jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="If set, the category image is replaced by the selected asset."
fieldLabel="Override Asset"
filter="hierarchy"
multiple="{Boolean}false"
name="./asset"
rootPath="/content/dam" />
</items>
</field>
</content>
Expand Down
40 changes: 18 additions & 22 deletions ...omponents/commerce/featuredcategorylist/v1/featuredcategorylist/featuredcategorylist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,22 @@
*/-->

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-use.category="com.adobe.cq.commerce.core.components.models.categorylist.FeaturedCategoryList"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html">
<sly data-sly-test.hasCategories="${category.categories.size}">
<div class="cmp-categorylist">
<div class="cmp-categorylist__header">
<h2 class="cmp-categorylist__title">
<span>${'Shop by category' @ i18n}</span>
</h2>
</div>
<div data-sly-list="${category.categories}" class="cmp-categorylist__content">
<a class="cmp-categorylist__anchor" href="${item.path}">
<span class="cmp-categorylist__imagewrapper" style="background-image: url(${item.image @context='uri'});" >
<img data-sly-test=${item.image} class="cmp-categorylist__image" src='${item.image}' alt="${item.name}">
</span>
<span class="cmp-categorylist__name">${item.name}</span>
</a>
</div>
data-sly-use.category="com.adobe.cq.commerce.core.components.models.categorylist.FeaturedCategoryList"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html" />

<div data-sly-test.hasCategories="${category.categories.size}" class="cmp-categorylist">
<div data-sly-test="${properties.jcr:title}" class="cmp-categorylist__header">
<h2 class="cmp-categorylist__title">${properties.jcr:title}</h2>
</div>
<div data-sly-list="${category.categories}" class="cmp-categorylist__content">
<a class="cmp-categorylist__anchor" href="${item.path}">
<span class="cmp-categorylist__imagewrapper" style="background-image: url(${item.image @context='uri'});">
<img data-sly-test=${item.image} class="cmp-categorylist__image" src='${item.image}' alt="${item.name}">
</span>
<span class="cmp-categorylist__name">${item.name}</span>
</a>
</div>
</sly>
<sly data-sly-call="${templates.placeholder @ isEmpty = !category.isConfigured}" />
<sly data-sly-call="${templates.placeholder @ isEmpty = category.isConfigured && !hasCategories, emptyTextAppend = 'Configured, no categories were loaded'}" />
</sly>
</sly>
</div>

<sly data-sly-call="${templates.placeholder @ isEmpty = !category.isConfigured}" />
<sly data-sly-call="${templates.placeholder @ isEmpty = category.isConfigured && !hasCategories, emptyTextAppend = 'Configured, no categories were loaded'}" />