add support for shopping expieriences

- register plugin in base template and not in the buy-widget-form
- do not overwrite buy-button to improve compatibility with other plugins

Author: csteuer

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "codebarista/buybuttonstatesynchronizer",
-    "version": "3.0.1",
+    "version": "3.1.0",
     "description": "Allows multiple plugins to control the buy button state.",
     "type": "shopware-platform-plugin",
     "license": "MIT",
@@ -11,9 +11,9 @@
       }
     ],
     "require": {
-      "shopware/core": "~6.5",
-      "shopware/administration": "~6.5",
-      "shopware/storefront": "~6.5"
+      "shopware/core": "6.5.*",
+      "shopware/administration": "6.5.*",
+      "shopware/storefront": "6.5.*"
     },
     "autoload": {
         "psr-4": {

src/Resources/app/storefront/dist/storefront/js/barista-buy-button-state-synchronizer.js

@@ -2,7 +2,7 @@ import Plugin from "src/plugin-system/plugin.class";
 
 export default class BuyButtonStateSynchronizer extends Plugin {
   static options = {
-    showDialogInsteadOfDisableButton: null,
+    showDialogInsteadOfDisableButton: false,
   };
 
   /**
@@ -47,7 +47,7 @@ export default class BuyButtonStateSynchronizer extends Plugin {
    *                                           is left.
    */
   static disableBuyButton(id, actionLabel = null, actionCallback = null) {
-    const buyButton = document.getElementsByClassName("btn-buy").item(0);
+    const buyButton = document.querySelector(".btn-buy");
     if (buyButton == null) {
       console.warn("Cannot disable buy button: No element with class btn-buy");
       return;
@@ -75,7 +75,7 @@ export default class BuyButtonStateSynchronizer extends Plugin {
    * @param {string} id The ID of the vote that is withdrawn.
    */
   static enableBuyButton(id) {
-    const buyButton = document.getElementsByClassName("btn-buy").item(0);
+    const buyButton = document.querySelector(".btn-buy");
     if (buyButton == null) {
       console.warn("Cannot enable buy button: No element with class btn-buy");
       return;
@@ -88,6 +88,15 @@ export default class BuyButtonStateSynchronizer extends Plugin {
   }
 
   init() {
+    const buyForm = document.getElementById("productDetailPageBuyProductForm");
+    if (buyForm == null) {
+      return; // We are not on the product details page
+    }
+    this.buyButton = document.querySelector(".btn-buy");
+    if (this.buyButton == null) {
+      console.warn("Cannot initialize: No element with class btn-buy");
+      return;
+    }
     if (!window.buyButtonStateSynchronizerActions) {
       window.buyButtonStateSynchronizerActions = {};
     }
@@ -107,12 +116,14 @@ export default class BuyButtonStateSynchronizer extends Plugin {
     setTimeout(this.buyButtonNodeChanged.bind(this));
 
     if (this.options.showDialogInsteadOfDisableButton) {
-      this.el.addEventListener("click", this.onBuyButtonClicked.bind(this));
-      this.el.disabled = false;
+      this.buyButton.addEventListener(
+        "click",
+        this.onBuyButtonClicked.bind(this)
+      );
+      this.buyButton.disabled = false;
     }
 
     // Prevent form submit by pressing enter if buy button is disabled
-    const buyForm = document.getElementById("productDetailPageBuyProductForm");
     buyForm.addEventListener("keydown", (event) => {
       if (event.code == "Enter" || event.code == "NumpadEnter") {
         return this.onBuyButtonClicked(event);
@@ -126,23 +137,22 @@ export default class BuyButtonStateSynchronizer extends Plugin {
       // stop observing attribute changes...
       this.stopObservingBuyButtonAttributeChanges();
       // ...otherwise this line would cause an infinite loop...
-      this.el.disabled = this.isDisabled;
+      this.buyButton.disabled = this.isDisabled;
       // ...start observing again
       this.startObservingBuyButtonAttributeChanges();
     }
   }
 
   startObservingBuyButtonAttributeChanges() {
-    // this.el is the element on which this plugin was initialized -> the buy button
-    this.buyButtonObserver.observe(this.el, { attributes: true });
+    this.buyButtonObserver.observe(this.buyButton, { attributes: true });
   }
 
   stopObservingBuyButtonAttributeChanges() {
     this.buyButtonObserver.disconnect();
   }
 
   isBuyButtonDisabled() {
-    for (let attribute of this.el.attributes) {
+    for (let attribute of this.buyButton.attributes) {
       if (attribute.name.endsWith("-buy-button-disabled")) {
         return true;
       }

src/Resources/app/storefront/src/buybuttonstatesynchronizer/buybuttonstatesynchronizer.plugin.js

@@ -0,0 +1,31 @@
+{% sw_extends '@Storefront/storefront/base.html.twig' %}
+
+{% set buyButtonStateSynchronizerOptions = {
+    showDialogInsteadOfDisableButton: config('BaristaBuyButtonStateSynchronizer').config.showDialogInsteadOfDisableButton
+} %}
+
+{% block base_body_inner %}
+    {{ parent() }}
+    <template data-buy-button-state-synchronizer data-buy-button-state-synchronizer-options='{{ buyButtonStateSynchronizerOptions|json_encode }}'>></template>
+    {% block buy_button_state_synchronizer_dialog %}
+        {% if config('BaristaBuyButtonStateSynchronizer').config.showDialogInsteadOfDisableButton %}
+            <dialog id="buy-button-state-synchronizer-modal" data-cancel-btn-label="{{ 'buybuttonstate.cancel' | trans }}">
+                <div class="modal-content">
+                    <div class="modal-body">
+                        <p>{{ 'buybuttonstate.product-not-ready' | trans }}</p>
+                    </div>
+                    <div id="buy-button-state-synchronizer-modal-actions" class="modal-footer">
+                        <div id="buy-button-state-synchronizer-modal-cancel-btn">
+                            <button
+                                type="button"
+                                class="btn btn-secondary"
+                                data-dismiss="modal">
+                                {{ 'buybuttonstate.cancel' | trans }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </dialog>
+        {% endif %}
+    {% endblock %}
+{% endblock %}