From 6bba224bfc99c29ff9d00e5dba624cf6a087ce08 Mon Sep 17 00:00:00 2001 From: Levente Santha Date: Thu, 5 Aug 2021 19:27:30 +0300 Subject: [PATCH 1/6] CIF-1502 - XF based page header with authoring support * added version 2 for the following components to make them usable in the page editor: accountedtails, addressbook, minicart, resetpassword, searchbar, miniaccount --- README.md | 16 ++++-- .../v1/accountdetails/.content.xml | 2 +- .../v2/accountdetails/.content.xml | 21 +++++++ .../v2/accountdetails/README.md | 28 ++++++++++ .../v2/accountdetails/_cq_dialog/.content.xml | 23 ++++++++ .../v2/accountdetails/accountdetails.html | 21 +++++++ .../addressbook/v1/addressbook/.content.xml | 13 ++--- .../addressbook/v2/addressbook/.content.xml | 6 ++ .../addressbook/v2/addressbook/README.md | 29 ++++++++++ .../v2/addressbook/_cq_dialog/.content.xml | 23 ++++++++ .../v2/addressbook/addressbook.html | 21 +++++++ .../minicart/v2/minicart/.content.xml | 8 +++ .../commerce/minicart/v2/minicart/README.md | 50 +++++++++++++++++ .../v2/minicart/_cq_dialog/.content.xml | 23 ++++++++ .../minicart/v2/minicart/minicart.html | 20 +++++++ .../v1/resetpassword/.content.xml | 2 +- .../v2/resetpassword/.content.xml | 6 ++ .../resetpassword/v2/resetpassword/README.md | 22 ++++++++ .../v2/resetpassword/_cq_dialog/.content.xml | 23 ++++++++ .../v2/resetpassword/resetpassword.html | 21 +++++++ .../searchbar/v2/searchbar/.content.xml | 10 ++++ .../commerce/searchbar/v2/searchbar/README.md | 56 +++++++++++++++++++ .../searchbar/v2/searchbar/searchbar.html | 53 ++++++++++++++++++ .../miniaccount/v2/miniaccount/.content.xml | 8 +++ .../miniaccount/v2/miniaccount/README.md | 22 ++++++++ .../v2/miniaccount/_cq_dialog/.content.xml | 23 ++++++++ .../v2/miniaccount/miniaccount.html | 19 +++++++ 27 files changed, 553 insertions(+), 16 deletions(-) create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/README.md create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/_cq_dialog/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/accountdetails.html create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/README.md create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/_cq_dialog/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/addressbook.html create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/README.md create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/_cq_dialog/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/minicart.html create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/README.md create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/_cq_dialog/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/resetpassword.html create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/searchbar.html create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/README.md create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/_cq_dialog/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/miniaccount.html diff --git a/README.md b/README.md index 51f5a6257a..e4d0cb9754 100644 --- a/README.md +++ b/README.md @@ -22,22 +22,26 @@ See our [wiki](https://github.com/adobe/aem-core-cif-components/wiki) for usage - [Product v2](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/product/v2/product) - Magento EE only with version >= 2.4.2 - [Product List v1](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productlist/v1/productlist) - [Product List v2](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productlist/v2/productlist) - Magento EE only with version >= 2.4.2 +- [Product Collection v1](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcollection/v1/productcollection) +- [Product Collection v2](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcollection/v2/productcollection) - Magento EE only with version >= 2.4.2 - [Product Teaser](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productteaser/v1/productteaser) - [Product Carousel](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel) - [Related Products](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/relatedproducts/v1/relatedproducts) - [Navigation](ui.apps/src/main/content/jcr_root/apps/core/cif/components/structure/navigation/v2/navigation) - [Breadcrumb](ui.apps/src/main/content/jcr_root/apps/core/cif/components/structure/breadcrumb/v1/breadcrumb) -- [Search Results](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchresults/v1/searchresults) -- [Searchbar](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v1/searchbar) -- [Shopping Cart](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v1/minicart) +- [Search Results v1](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchresults/v1/searchresults) +- [Search Results v2](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchresults/v2/searchresults) +- [Searchbar](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar) +- [Shopping Cart](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart) - [Featured Category List](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/featuredcategorylist/v1/featuredcategorylist) - [Commerce Teaser](ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/teaser/v2/teaser) - [Commerce Button](ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/button/v2/button) - [Sign In](react-components/src/components/SignIn) - [Create Account](react-components/src/components/CreateAccount) -- [AccountDetails](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v1/accountdetails) -- [AddressBook](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v1/addressbook) -- [ResetPassword](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v1/resetpassword) +- [Mini Account](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/miniaccount/v2/miniaccount) +- [Account Details](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails) +- [Address Book](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook) +- [Reset Password](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword) - [Category Carousel](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/categorycarousel/v1/categorycarousel) - [Commerce Experience Fragment](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/experiencefragment/v1/experiencefragment) - [Commerce Content Fragment](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/contentfragment/v1/contentfragment) diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v1/accountdetails/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v1/accountdetails/.content.xml index b808c166a5..8d418ef8b7 100644 --- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v1/accountdetails/.content.xml +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v1/accountdetails/.content.xml @@ -17,6 +17,6 @@ + jcr:title="Account Details (v1)"> \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/.content.xml new file mode 100644 index 0000000000..7880b1d1cb --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/.content.xml @@ -0,0 +1,21 @@ + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/README.md b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/README.md new file mode 100644 index 0000000000..2d4b91a759 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/README.md @@ -0,0 +1,28 @@ +# Account Details (v2) + +The Account Details is a React component providing CRUD operations on the account details of a signed in shopper. + +## Features: + +- Display the full name and the e-mail of the shopper +- Display just a generic message if the user is anonymous +- Allow a shopper to change the first name, last name, email address and password + +## Implementation + +This AEM component only renders a `div` element acting as a container for the [AccountDetails](/react-components/src/components/AccountDetails) React component. + +## BEM Description + +``` +BLOCK accountdetails + ELEMENT accountdetails__root + ELEMENT accountdetails__body +``` + +## License information + +- Vendor: Adobe +- Version: v2 +- Compatibility: AEM as a Cloud Service / 6.5 +- Status: production-ready diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/_cq_dialog/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/_cq_dialog/.content.xml new file mode 100644 index 0000000000..8ab678bc0a --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/_cq_dialog/.content.xml @@ -0,0 +1,23 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/accountdetails.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/accountdetails.html new file mode 100644 index 0000000000..b6b8136cd2 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails/accountdetails.html @@ -0,0 +1,21 @@ + + +
+
+
+ \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v1/addressbook/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v1/addressbook/.content.xml index df39644095..a8804f4583 100644 --- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v1/addressbook/.content.xml +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v1/addressbook/.content.xml @@ -1,8 +1,5 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/.content.xml new file mode 100644 index 0000000000..383e3b2c41 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/.content.xml @@ -0,0 +1,6 @@ + + diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/README.md b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/README.md new file mode 100644 index 0000000000..743c435780 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/README.md @@ -0,0 +1,29 @@ +# Address Book (v2) + +The Address Book is a React component providing CRUD operations on the address book of a shopper. + +## Features: + +- List the address book entries +- Add an address book entry +- Change the address on an existing entry +- Remove an address from the address book + +## Implementation + +This AEM component only renders a `div` element acting as a container for the [AddressBook](/react-components/src/components/AddressBook) React component. + +## BEM Description + +``` +BLOCK addressbook + ELEMENT addressbook__root + ELEMENT addressbook__body +``` + +## License information + +- Vendor: Adobe +- Version: v2 +- Compatibility: AEM as a Cloud Service / 6.5 +- Status: production-ready diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/_cq_dialog/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/_cq_dialog/.content.xml new file mode 100644 index 0000000000..e22fcfba99 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/_cq_dialog/.content.xml @@ -0,0 +1,23 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/addressbook.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/addressbook.html new file mode 100644 index 0000000000..03f4214ace --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook/addressbook.html @@ -0,0 +1,21 @@ + + +
+
+
+ diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/.content.xml new file mode 100644 index 0000000000..d417b99429 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/.content.xml @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/README.md b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/README.md new file mode 100644 index 0000000000..4d46430012 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/README.md @@ -0,0 +1,50 @@ +# MiniCart (v2) + +The MiniCart is a client-side component written in React which renders the shopping cart and the checkout form + +## Features + +- CRUD operations for shopping cart items +- Complete checkout process in three steps: + - Shipping address + - Payment method / Billing Address + - Shipping Method + +## Implementation + +This AEM component only renders a container `div` for the [React component](/react-components/src/components/Minicart). + +## Using the MiniCart + +### URL routing + +This component requires the [AEM Dispatcher with GraphQL routing](/dispatcher) set up. By default Magento GraphQL endpoint will be accessed via relative URL `/magento/graphql`. + +### Adding a product to cart + +You can add a new product to the cart by triggering the `aem.cif.add-to-cart` DOM event, like in the following example + +```javascript 1.6 +const customEvent = new CustomEvent('aem.cif.add-to- cart', { + detail: { sku: 'VA03-LL-S', quantity: 2 } +}); +document.dispatchEvent(customEvent); +``` + +The call above adds two products with the sku `VA03-LL-S` to the cart. + +## BEM Description + +``` +BLOCK minicart + ELEMENT minicart__root + ELEMENT minicart__trigger + ELEMENT minicart__body +``` + +## License information + +- Vendor: Adobe +- Version: v2 +- Compatibility: AEM as a Cloud Service / 6.5 +- Status: production-ready diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/_cq_dialog/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/_cq_dialog/.content.xml new file mode 100644 index 0000000000..c404a77b8c --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/_cq_dialog/.content.xml @@ -0,0 +1,23 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/minicart.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/minicart.html new file mode 100644 index 0000000000..dc12bdcc90 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v2/minicart/minicart.html @@ -0,0 +1,20 @@ + + +
+
+
+
+ \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v1/resetpassword/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v1/resetpassword/.content.xml index 5f33d472c1..1d6740485d 100644 --- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v1/resetpassword/.content.xml +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v1/resetpassword/.content.xml @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/.content.xml new file mode 100644 index 0000000000..94bdb86fad --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/.content.xml @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/README.md b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/README.md new file mode 100644 index 0000000000..984c2419f5 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/README.md @@ -0,0 +1,22 @@ +# Reset Password (v2) + +The Reset Password is a client-side component written in React which renders a reset password form. + +## Implementation + +This AEM component only renders a container `div` for the [React component](/react-components/src/components/ResetPassword). + +## BEM Description + +``` +BLOCK resetpassword + ELEMENT resetpassword__root + ELEMENT resetpassword__body +``` + +## License information + +- Vendor: Adobe +- Version: v2 +- Compatibility: AEM as a Cloud Service / 6.5 +- Status: production-ready diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/_cq_dialog/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/_cq_dialog/.content.xml new file mode 100644 index 0000000000..071160d439 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/_cq_dialog/.content.xml @@ -0,0 +1,23 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/resetpassword.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/resetpassword.html new file mode 100644 index 0000000000..9ae6c27a8d --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword/resetpassword.html @@ -0,0 +1,21 @@ + + +
+
+
+ \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/.content.xml new file mode 100644 index 0000000000..cf81c8d8dc --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/.content.xml @@ -0,0 +1,10 @@ + + diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md new file mode 100644 index 0000000000..7b9a82cf16 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md @@ -0,0 +1,56 @@ + + +# Searchbar (v1) + +Searchbar component is a server-side component written in HTL, displaying a search input. After submitting the components redirects to the search results page defined by the `cq:cifSearchResultsPage` property and passing the search term as a query parameter. + +The visibility of the component can be toggled using any DOM element with the `searchTrigger__root` CSS class assigned. + +## Features + +- Input field with visibility toggle +- Forwarding to search result page +- Customizable placeholder via `placeholder` property + +### Use Object + +This component uses the `com.adobe.cq.commerce.core.components.models.searchbar.Searchbar` Sling model as its Use-object. + +## BEM Description + +``` +BLOCK searchbar + ELEMENT searchBar__root + searchBar__searchInner + searchBar__form + textInput__input + field__input + message__root + searchBar__SearchAutocompleteWrapper + fieldIcons__root + fieldIcons__input + fieldIcons__before + fieldIcons__after + icon__root +``` + +## Information + +- **Vendor**: Adobe +- **Version**: v2 +- **Compatibility**: AEM as a Cloud Service / 6.5 +- **Status**: production-ready diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/searchbar.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/searchbar.html new file mode 100644 index 0000000000..88bf1b2edd --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/searchbar.html @@ -0,0 +1,53 @@ + + + +
+ + +
\ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/.content.xml new file mode 100644 index 0000000000..d1247192c3 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/.content.xml @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/README.md b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/README.md new file mode 100644 index 0000000000..c4032c30e7 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/README.md @@ -0,0 +1,22 @@ +# Mini Account (v2) + +The Mini Account is a client-side component written in React which renders the sign-in form and account menu options. + +## Implementation + +This AEM component only renders a container `div` for the [React component](/react-components/src/components/AccountContainer). + +## BEM Description + +``` +BLOCK miniaccount + ELEMENT miniaccount__root + ELEMENT miniaccount__body +``` + +## License information + +- Vendor: Adobe +- Version: v2 +- Compatibility: AEM as a Cloud Service / 6.5 +- Status: production-ready diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/_cq_dialog/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/_cq_dialog/.content.xml new file mode 100644 index 0000000000..8472966fbc --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/_cq_dialog/.content.xml @@ -0,0 +1,23 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/miniaccount.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/miniaccount.html new file mode 100644 index 0000000000..f3415f5cc1 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount/miniaccount.html @@ -0,0 +1,19 @@ + + +
+
+
+ From 6eb70409e600b01f74bf287a60e4f2a141796e54 Mon Sep 17 00:00:00 2001 From: Levente Santha Date: Thu, 5 Aug 2021 19:32:55 +0300 Subject: [PATCH 2/6] CIF-1502 - XF based page header with authoring support * fixed link in README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e4d0cb9754..9b774614b5 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ See our [wiki](https://github.com/adobe/aem-core-cif-components/wiki) for usage - [Commerce Button](ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/button/v2/button) - [Sign In](react-components/src/components/SignIn) - [Create Account](react-components/src/components/CreateAccount) -- [Mini Account](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/miniaccount/v2/miniaccount) +- [Mini Account](ui.apps/src/main/content/jcr_root/apps/core/cif/components/content/miniaccount/v2/miniaccount) - [Account Details](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/accountdetails/v2/accountdetails) - [Address Book](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/addressbook/v2/addressbook) - [Reset Password](ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/resetpassword/v2/resetpassword) From caff206ae768a816751a713aa15e24d3df9edba0 Mon Sep 17 00:00:00 2001 From: Levente Santha Date: Thu, 5 Aug 2021 19:34:17 +0300 Subject: [PATCH 3/6] CIF-1502 - XF based page header with authoring support * typo in README.md --- .../cif/components/commerce/searchbar/v2/searchbar/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md index 7b9a82cf16..35cb57cd02 100644 --- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. --> -# Searchbar (v1) +# Searchbar (v2) Searchbar component is a server-side component written in HTL, displaying a search input. After submitting the components redirects to the search results page defined by the `cq:cifSearchResultsPage` property and passing the search term as a query parameter. From e179dd9d9cf192e15267520f452bba067ab2148f Mon Sep 17 00:00:00 2001 From: Levente Santha Date: Thu, 12 Aug 2021 21:46:53 +0300 Subject: [PATCH 4/6] CIF-2291 - Cleanups in searchbar component * new CSS classes according to BEM methodology * default minimal styling * added v2 for searchber clientlib * fixed search field reset button * added text field for placeholder property in edit dialog * updated readme --- .../searchbar/v2/searchbar/.content.xml | 6 +- .../commerce/searchbar/v2/searchbar/README.md | 28 ++-- .../v2/searchbar/_cq_dialog/.content.xml | 28 ++++ .../v2/searchbar/clientlibs/.content.xml | 7 + .../searchbar/v2/searchbar/clientlibs/css.txt | 3 + .../v2/searchbar/clientlibs/css/searchbar.css | 62 ++++++++ .../searchbar/v2/searchbar/clientlibs/js.txt | 1 + .../v2/searchbar/clientlibs/js/searchbar.js | 143 ++++++++++++++++++ .../searchbar/v2/searchbar/searchbar.html | 24 ++- ui.apps/webpack.config.js | 2 + 10 files changed, 274 insertions(+), 30 deletions(-) create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/_cq_dialog/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/css.txt create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/css/searchbar.css create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/js.txt create mode 100644 ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/js/searchbar.js diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/.content.xml index cf81c8d8dc..23a5783c7c 100644 --- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/.content.xml +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/.content.xml @@ -1,10 +1,8 @@ - + componentGroup=".hidden" /> \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md index 35cb57cd02..c310cac3cc 100644 --- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/README.md @@ -18,7 +18,7 @@ limitations under the License. Searchbar component is a server-side component written in HTL, displaying a search input. After submitting the components redirects to the search results page defined by the `cq:cifSearchResultsPage` property and passing the search term as a query parameter. -The visibility of the component can be toggled using any DOM element with the `searchTrigger__root` CSS class assigned. +The visibility of the component can be toggled using any DOM element with the `searchbar__trigger` CSS class assigned. ## Features @@ -34,18 +34,20 @@ This component uses the `com.adobe.cq.commerce.core.components.models.searchbar. ``` BLOCK searchbar - ELEMENT searchBar__root - searchBar__searchInner - searchBar__form - textInput__input - field__input - message__root - searchBar__SearchAutocompleteWrapper - fieldIcons__root - fieldIcons__input - fieldIcons__before - fieldIcons__after - icon__root + ELEMENT searchbar__root + ELEMENT searchbar__trigger + ELEMENT searchbar__trigger-icon + ELEMENT searchbar__body + ELEMENT searchbar__body--open + ELEMENT searchbar__form-container + ELEMENT searchbar__form + ELEMENT searchbar__fields + ELEMENT searchbar__input-container + ELEMENT searchbar__input + ELEMENT searchbar__input-before + ELEMENT searchbar__input-after + ELEMENT searchbar__reset-button + ELEMENT searchbar__search-icon ``` ## Information diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/_cq_dialog/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/_cq_dialog/.content.xml new file mode 100644 index 0000000000..12d52be5f9 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/_cq_dialog/.content.xml @@ -0,0 +1,28 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/.content.xml b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/.content.xml new file mode 100644 index 0000000000..75296e78d3 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/.content.xml @@ -0,0 +1,7 @@ + + diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/css.txt b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/css.txt new file mode 100644 index 0000000000..50cc04a05b --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/css.txt @@ -0,0 +1,3 @@ +#base=css + +searchbar.css \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/css/searchbar.css b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/css/searchbar.css new file mode 100644 index 0000000000..592bc675cc --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/css/searchbar.css @@ -0,0 +1,62 @@ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + ~ Copyright 2021 Adobe + ~ + ~ Licensed under the Apache License, Version 2.0 (the "License"); + ~ you may not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ +.searchbar__trigger { + display: none; +} + +.searchbar__form { + display: grid; +} + +.searchbar__input-before, +.searchbar__input-after { + display: flex; + align-items: center; + justify-content: center; + width: 2.25rem; +} + +.searchbar__input-before { + grid-area: before; +} + +.searchbar__input-after { + grid-area: after; + justify-self: end; +} + +.searchbar__fields { + display: inline-grid; + grid-template-areas: 'before input after'; +} + +.searchbar__search-icon { + align-items: center; + display: inline-flex; + justify-content: center; + height: 25px; + width: 25px; +} + +.searchbar__input-container { + grid-column: before-start / after-end; + grid-row: input-start / input-end; +} + +.searchbar__input { + padding-left: calc(1.875rem * var(--iconsBefore) - -0.375rem - 1px); + padding-right: calc(1.875rem * var(--iconsAfter) - -2.1rem - 1px); +} diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/js.txt b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/js.txt new file mode 100644 index 0000000000..099be974a2 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/js.txt @@ -0,0 +1 @@ +dist/index.js diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/js/searchbar.js b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/js/searchbar.js new file mode 100644 index 0000000000..45b840cb04 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/clientlibs/js/searchbar.js @@ -0,0 +1,143 @@ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + ~ Copyright 2021 Adobe + ~ + ~ Licensed under the Apache License, Version 2.0 (the "License"); + ~ you may not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ + +(function() { + 'use strict'; + + const CLEAR_BUTTON_HTML = ``; + + const SEARCHBAR_TOGGLE = '.searchbar__trigger'; + + class Searchbar { + constructor(props) { + this._classes = { + open: 'searchbar__body--open' + }; + + this._searchBarRoot = document.querySelector(Searchbar.selectors.searchBarRoot); + if (!this._searchBarRoot) { + return; + } + + this._searchBox = this._searchBarRoot.querySelector(Searchbar.selectors.searchBox); + + let stateObject = {}; + if (props && props.params) { + stateObject.visible = !!props.params.query; + stateObject.query = props.params.query; + } + + this._state = stateObject; + + if (stateObject.visible) { + this._show(); + this._searchBox.value = stateObject.query; + this._showResetButton(); + } + + this._installListeners(); + } + + _getOrCreateResetButton() { + if (!this._resetButtonElement) { + const html = new DOMParser().parseFromString(CLEAR_BUTTON_HTML, 'text/html'); + this._resetButtonElement = html.body.firstChild; + } + return this._resetButtonElement; + } + + _installListeners() { + let that = this; + // listen to onclick on the "search" icon in the header + document.querySelector(SEARCHBAR_TOGGLE).addEventListener('click', event => { + this.toggle(); + }); + } + + toggle() { + if (this._state.visible) { + this._hide(); + } else { + this._show(); + } + + this._state.visible = !this._state.visible; + } + + _showResetButton() { + const afterField = this._searchBarRoot.querySelector(Searchbar.selectors.afterField); + afterField.appendChild(this._getOrCreateResetButton()); + + this._searchBarRoot.querySelector(Searchbar.selectors.resetButton).addEventListener('click', e => { + //clear the search field + this._searchBox.value = ''; + + //remove the reset button + afterField.removeChild(afterField.childNodes[0]); + + //re-register the listener on the searchbox + this._registerSearchBoxListener(); + this._searchBox.focus(); + }); + } + + _registerSearchBoxListener() { + const _handleKeyDown = e => { + const input = e.currentTarget; + this._showResetButton(); + this._searchBox.removeEventListener('keydown', _handleKeyDown); + }; + this._searchBox.addEventListener('keydown', _handleKeyDown); + } + + _show() { + this._searchBarRoot.classList.add(this._classes.open); + this._searchBox.focus(); + this._registerSearchBoxListener(); + } + + _hide() { + this._searchBarRoot.classList.remove(this._classes.open); + } + } + + Searchbar.selectors = { + searchBarRoot: "div[role='search']", + searchBox: "input[role='searchbox']", + afterField: '.searchbar__input-after', + resetButton: '.searchbar__reset-button' + }; + + function onDocumentReady() { + const queryParams = new URLSearchParams(location.search); + if (queryParams.has('search_query')) { + const searchBar = new Searchbar({ params: { query: queryParams.get('search_query') } }); + } else { + const searchBar = new Searchbar({}); + } + } + + if (document.readyState !== 'loading') { + onDocumentReady(); + } else { + document.addEventListener('DOMContentLoaded', onDocumentReady); + } +})(); diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/searchbar.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/searchbar.html index 88bf1b2edd..c409d8b12b 100644 --- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/searchbar.html +++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/searchbar/v2/searchbar/searchbar.html @@ -14,8 +14,8 @@
- -