Experience Fragment enhancement to allow remote offer from Adobe Target

content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/_cq_dialog/.content.xml

@@ -64,6 +64,13 @@
                                                 fieldDescription="HTML ID attribute to apply to the component."
                                                 fieldLabel="ID"
                                                 name="./id"/>
+                                            <useFragmentAsRemoteOffer
+                                                jcr:primaryType="nt:unstructured"
+                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
+                                                fieldDescription="When checked, the experience fragment can be used as a remote offer and the experience can be replaced with a different content from Adobe Target using the id provided above."
+                                                name="./enableRemoteOffer"
+                                                text="Enable Remote Offer with Adobe Target"
+                                                value="{Boolean}true"/>
                                         </items>
                                     </column>
                                 </items>

content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/clientlibs/site/.content.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="cq:ClientLibraryFolder"
+    allowProxy="{Boolean}true"
+    categories="[core.wcm.components.experiencefragment.v1]"
+    jsProcessor="[default:none,min:gcc]"/>

content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/clientlibs/site/js.txt

@@ -0,0 +1,18 @@
+###############################################################################
+# 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.
+###############################################################################
+
+#base=js
+experiencefragment.js

content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/clientlibs/site/js/.content.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>

content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/clientlibs/site/js/experiencefragment.js

@@ -0,0 +1,43 @@
+/*******************************************************************************
+ * 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";
+
+    $(".cmp-experiencefragment").each(function () {
+        var ADOBE_TARGET = adobe.target;
+        var $remoteOfferEnabled = $(this).data("enable-remote-offer");
+        var $remoteOfferId = $(this).data("remote-offer-id");
+
+        if ($remoteOfferEnabled !== undefined && $remoteOfferEnabled && $remoteOfferId
+            && typeof ADOBE_TARGET !== "undefined" && ADOBE_TARGET) {
+            ADOBE_TARGET.getOffer({
+                mbox: $remoteOfferId,
+                success: function (offer) {
+                    ADOBE_TARGET.applyOffer({
+                        mbox: $remoteOfferId,
+                        selector: "#" + $remoteOfferId,
+                        offer: offer
+                    });
+                },
+                error: function (error) {
+                    var el = document.getElementById($remoteOfferId);
+                    el.style.visibility = "visible";
+                }
+            });
+        }
+    });
+
+})();

content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/experiencefragment.html

@@ -20,6 +20,8 @@
      data-sly-set.selector="content.${request.requestPathInfo.selectorString}"
      data-sly-resource="${@path=fragment.localizedFragmentVariationPath, selectors=selector, wcmmode='disabled'}"
      id="${component.id}"
-     class="cmp-experiencefragment cmp-experiencefragment--${fragment.name}">
+     class="cmp-experiencefragment cmp-experiencefragment--${fragment.name} ${properties.enableRemoteOffer ? ' mboxDefault' : ''}"
+     data-sly-attribute.data-enable-remote-offer="${properties.id && properties.enableRemoteOffer}"
+     data-sly-attribute.data-remote-offer-id="${properties.id}">
 </div>
-<sly data-sly-call="${template.placeholder @ isEmpty=!fragment.configured, classAppend='cmp-dd-experiencefragment'}"></sly>
+<sly data-sly-call="${template.placeholder @ isEmpty=!fragment.configured, classAppend='cmp-dd-experiencefragment'}"></sly>