Wednesday, August 17, 2022

Asset Selector — Adobe Experience Manager(AEM) | Digital Asset Management

 Asset selector lets you search, filter, and browse the DAM assets. Asset selector is available at https://[aem_server]:[port]/aem/assetpicker.html. You can fetch the metadata of your selected assets using the asset selector. You can launch it with supported request parameters, such as asset type (image, video, text) and selection mode (single or multiple selections). These parameters set the context of the asset selector for a particular search instance and remain intact throughout the selection.

Some of the important request parameters:

mode — single, multipleroot - root folder for the asset selector.e.g /content/dam/testviewmode — searchassettype — Images, documents, multimedia, archivesmimetype - MIME type(e.g png)

Sample URL — http://localhost:4502/aem/assetpicker.html?mode=multiple&root=/content/dam/test&mimetype=*png

The asset selector uses the HTML5 Window.postMessage message to send data for the selected asset to the recipient.

Event Message on Cancel:

{"config":{"action":"close"}}

Event Message on Asset Selection(Single or Multiple assets can be selected based on the mode):

{"data":[{"path":"/content/dam/test/test1.png","url":"http://localhost:4502/content/dam/test/test1.png","type":"image/png","title":"Test1.png","size":"298.3 KB","img":"http://localhost:4502/content/dam/test/test1.png/_jcr_content/renditions/cq5dam.thumbnail.319.319.png?ch_ck=1648660240000"},{"path":"/content/dam/test/test2.png","url":"http://localhost:4502/content/dam/test/test2.png","type":"image/png","title":"test banner pequeño.png","size":"196.6 KB","img":"http://localhost:4502/content/dam/test/test2.png/_jcr_content/renditions/cq5dam.thumbnail.319.319.png?ch_ck=1634925874000"}],"config":{"action":"done"}}

This will helps the external systems to fetch the required asset details from AEM DAM. The external system can launch the AEM asset selector with the needed parameters and receive the asset details by selecting the required assets.

Sample HTML to select the assets through asset selector:

assetSelector.html

<!DOCTYPE html>
<html>
 <body>
  <h1>AEM Asset Selector - Demo</h1><button id="openSelector">Open selector</button>
  <script>
   var assetWindow='';
   const serverURL = 'http://localhost:4502'
   const aemAssetSelectorUrl = serverURL + '/aem/assetpicker.html?mode=multiple&root=/content/dam/test&mimetype=*png'
   const handleMessageEvent = (event) => {if (event.origin !== serverURL) {
     return
    }
    
    console.log(event.data);
    
    const jsondata=JSON.parse(event.data);
    if (jsondata.config.action === 'close') {
      assetWindow.close(); 
    } else {
     console.log('Image URL: '+ jsondata.data[0].url + ' Title: '+ jsondata.data[0].title);
     assetWindow.close();
    }
   }
   const openSelector = () => {
    assetWindow= window.open(aemAssetSelectorUrl, 'selector','_parent');    
   }
   window.addEventListener("message", handleMessageEvent, false)
   const button = document.getElementById('openSelector')
   button.addEventListener('click', openSelector)
  </script>
 </body>
</html>

You should be able to choose the required assets from the asset selector; even you can use the search to identify the required assets for selection.

Refer to the following document to — Search digital assets and images in Adobe Experience Manager | Adobe Experience Manager to understand asset selector functionalities and some of the current limitations.

Posted by at 2 comments:
Labels:

Tuesday, August 16, 2022

Web APIs — Document. createDocumentFragment() | Range.createContextualFragment()

The Document.craeteDocumentFragment() API creates a new empty document fragment (DocumentFragment) object. The document fragment is a lightweight container for creating HTML elements, an alternative to directly inserting elements into the DOM.

Instead of appending the elements directly to the document when they are created, append them to the DocumentFragment instead, and finish by adding that to the DOM. This is extremely helpful because most manipulations of DOM elements cause the browser to reflow and repaint the layout, which you want to reduce to a minimum. This is because the nodes created by the CreateDocumentFragment method are not part of the DOM; they reside in memory.

When you need to add a lot of nodes to Document, Adding them one by one in sequence may result in many calculations, such as adjusting the screen’s position each time(reflow). Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element’s position and geometry)

When we append the document fragment to the DOM, it is basically replaced by its children, i.e., there is no document fragment appended to the document; only its children get appended, but when we append the element to the DOM, the parent is also appended to the document.

<!DOCTYPE html>
<html>
<body><h1>Add items to an empty list: using The createDocumenFragment() Method</h1><ul id="browsers">
</ul><script>const browsers = ['Firefox', 'Chrome', 'Opera','Safari', 'Internet Explorer'];// Create a document fragment:
const dFrag = document.createDocumentFragment();
for (let x in browsers) {
  const li = document.createElement('li');
  li.textContent = browsers[x];
  dFrag.appendChild(li);
}// Add fragment to a list: 
document.getElementById('browsers').appendChild(dFrag);
</script></body>
</html>

The createDocumentFragment() method can also extract parts of a document, change, add, or delete some of the content, and insert it back into the document.

createContextualFragment:

The createContextualFragment method is helpful if you want to create a DocumentFragment object with initial content. If you’re going to build a DocumentFragment object from the contents of a Range object

<!DOCTYPE html>
<html>
<body><h1>createContextualFragment()</h1><div id="parent"></div><script>var html='<div>Test1</div><span>Test2</span>';
 const fragment = document.createRange().createContextualFragment(html);
 document.getElementById('parent').appendChild(fragment);</script></body>
</html>
Posted by at No comments:
Labels:

Monday, August 1, 2022

AEM and Magento Integration Using Commerce Integration Framework(CIF) — Local Setup (Part2)

 In my previous post on this series, we have discussed how to enable local Magento open source commerce platform on local.

Tools Required:

  • AEM 6.5(latest service pack — 6.5.12)
  • Java 11
  • Node JS
  • NPM

CIF addon/Venia sample project setup:

As a first step, download the CIF addon compatible with AEM 6.5 version from the Adobe Software Distribution Website and install it through the package manager on both Author and publisher.

git clone https://github.com/adobe/aem-cif-guides-venia
mvn clean install -PautoInstallSinglePackage,classic

Proxy Server Setup:

As discussed earlier, the CIF react components directly connect(from the browser )with the Magento server to enable the eCommerce functionalities, e.g., Cart Management, Checkout, and accounts management(the product detail and category details are server-side integrated from AEM to Magento), to avoid the CORS issues run a proxy server to proxy the client-side requests to Magento server.

npx local-cors-proxy --proxyUrl http://albin.magento.com/ --port 3002 --proxyPartial /

Configurations:

I am enabling the following configurations through the OSGI console for demo but enable through the code config. The default configurations are placed under aem-cif-guides-venia/classic/ui.config/src/main/content/jcr_root/apps/venia/osgiconfig-classic/config for AEM 6.5(classic) deployment.

CIF GraphQL Client Configuration Factory:

Commerce Config:

Commerce Cloud configuration is enabled under /conf/venia(enabled through code)

http://localhost:4502/content/venia/us/en/products/product-page.html/apollo-running-short.html#MSH02-33-Blackhttp://localhost:4502/content/venia/us/en/products/category-page.html/men/tops-men.html
{"errors":[{"message":"Cannot query field \"applied_gift_cards\" on type \"Cart\".","extensions":{"category":"graphql"},"locations":[{"line":1,"column":536}]}]}

Additional Marketing Contents:

You should be able to associate additional product-specific marketing data to the Product Detail pages through Experience/Content Fragments and Assets.

MSM:

You can use AEM’s MSM capability to support multiple country/language stores in AEM. Refer to the following Adobe Document for details on multi-store setup through MSM — Commerce Multi-Store Setup | Adobe Experience Manager

Specialized Product and Category Pages:

By default, we are using generic Product/Category pages to display the different Category and Product details(displayed through a dynamic selector). If required, you can define the specialized Category/Product pages for specific Categories and Products. Refer to the following document for details on enabling specialized Category/Product Pages — Creating Multiple Category and Product Pages | Adobe Experience Manager

SiteMap:

The CIF framework uses Apache Sling Sitemap to generate https://github.com/apache/sling-org-apache-sling-sitemap#readme. Refer to the following document to get more details on the SiteMap/SEO — https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/overview/seo-and-url-management.html?lang=en

Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)