Improve script on page performance (#736)

* Improve script on page performance * Exclude mollie script, if it already exists in the header * Move mollie script & Fix missing 6.4 block * Final fixes
mollie · Apr 24, 2024 · 457f352 · 457f352
1 parent 4b0471e
commit 457f352
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 39 deletions.
diff --git a/src/Resources/config/services/subscriber.xml b/src/Resources/config/services/subscriber.xml
@@ -42,6 +42,8 @@
 
         <service id="Kiener\MolliePayments\Subscriber\StorefrontBuildSubscriber">
             <argument type="service" id="Kiener\MolliePayments\Service\SettingsService"/>
+            <argument type="service" id="Shopware\Storefront\Theme\StorefrontPluginRegistry"/>
+            <argument>%kernel.shopware_version%</argument>
             <tag name="kernel.event_subscriber"/>
         </service>
 

diff --git a/src/Resources/views/mollie/head.html.twig b/src/Resources/views/mollie/head.html.twig
@@ -0,0 +1,38 @@
+{% block mollie_head_scripts %}
+
+    {# pages where apple pay requires js with their mollie_applepaydirect_restrictions names as values #}
+    {% set onlyShowHere = {
+        'frontend.checkout.confirm.page' : '',
+        'frontend.checkout.cart.page' : 'cart',
+        'frontend.navigation.page' : 'plp',
+        'frontend.account.edit-order.page' : '',
+        'frontend.detail.page' : 'pdp'
+    } %}
+
+    {% set currentRoute = app.request.attributes.get('_route') %}
+    {% set includeJsInHeader = false %}
+
+    {# js always required on this pages #}
+    {% if currentRoute == 'frontend.checkout.cart.page' or currentRoute == 'frontend.checkout.confirm.page'  or currentRoute == 'frontend.account.edit-order.page' %}
+        {% set includeJsInHeader = true %}
+    {% endif %}
+
+    {# requirement check for apple pay direct #}
+    {% if mollie_applepaydirect_enabled == true or mollie_applepay_enabled == true %}
+        {% if currentRoute in onlyShowHere|keys and onlyShowHere[currentRoute] not in mollie_applepaydirect_restrictions %}
+            {% set includeJsInHeader = true %}
+        {% endif %}
+        {% if 'offcanvas' not in mollie_applepaydirect_restrictions %}
+            {% set includeJsInHeader = true %}
+        {% endif %}
+    {% endif %}
+
+    <script>
+        window.mollie_javascript_use_shopware = '{{ mollie_javascript_use_shopware }}'
+    </script>
+
+    {% if mollie_javascript_already_exists == false and mollie_javascript_use_shopware != '1' and includeJsInHeader == true %}
+        <script type="text/javascript" src="{{ asset('bundles/molliepayments/mollie-payments.js', 'asset') }}" defer></script>
+    {% endif %}
+
+{% endblock %}
diff --git a/src/Resources/views/storefront/base.html.twig b/src/Resources/views/storefront/base.html.twig
@@ -1,43 +1,9 @@
 {% sw_extends '@Storefront/storefront/base.html.twig' %}
 
-{% block base_main %}
+{% block base_script_hmr_mode %}
 
+    {{ parent() }}
 
-    {# pages where apple pay requires js with their mollie_applepaydirect_restrictions names as values #}
-    {% set onlyShowHere = {
-        'frontend.checkout.confirm.page' : '',
-        'frontend.checkout.cart.page' : 'cart',
-        'frontend.navigation.page' : 'plp',
-        'frontend.account.edit-order.page' : '',
-        'frontend.detail.page' : 'pdp'
-    } %}
-
-
-    {% set currentRoute = app.request.attributes.get('_route') %}
-    {% set includeJsInHeader = false %}
-
-    {# js always required on this pages #}
-    {% if currentRoute == 'frontend.checkout.cart.page' or currentRoute == 'frontend.checkout.confirm.page'  or currentRoute == 'frontend.account.edit-order.page' %}
-        {% set includeJsInHeader = true %}
-    {% endif %}
-
-    {# requirement check for apple pay direct #}
-    {% if mollie_applepaydirect_enabled == true or mollie_applepay_enabled == true %}
-        {% if currentRoute in onlyShowHere|keys and onlyShowHere[currentRoute] not in mollie_applepaydirect_restrictions %}
-            {% set includeJsInHeader = true %}
-        {% endif %}
-        {% if 'offcanvas' not in mollie_applepaydirect_restrictions %}
-            {% set includeJsInHeader = true %}
-        {% endif %}
-    {% endif %}
-
-    <script>
-        window.mollie_javascript_use_shopware = '{{ mollie_javascript_use_shopware }}'
-    </script>
-
-    {% if mollie_javascript_use_shopware != '1' and includeJsInHeader == true %}
-        <script src="{{ asset('bundles/molliepayments/mollie-payments.js', 'asset') }}"></script>
-    {% endif %}
+    {% sw_include '@Shopware/mollie/head.html.twig' %}
 
-    {{ parent() }}
-{% endblock %}
+{% endblock %}
diff --git a/src/Resources/views/storefront/layout/meta.html.twig b/src/Resources/views/storefront/layout/meta.html.twig
@@ -0,0 +1,9 @@
+{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}
+
+{% block layout_head_javascript_hmr_mode %}
+
+    {{ parent() }}
+
+    {% sw_include '@Shopware/mollie/head.html.twig' %}
+
+{% endblock %}
diff --git a/src/Subscriber/StorefrontBuildSubscriber.php b/src/Subscriber/StorefrontBuildSubscriber.php
@@ -2,8 +2,10 @@
 
 namespace Kiener\MolliePayments\Subscriber;
 
+use Kiener\MolliePayments\Compatibility\VersionCompare;
 use Kiener\MolliePayments\Service\SettingsService;
 use Shopware\Storefront\Event\StorefrontRenderEvent;
+use Shopware\Storefront\Theme\StorefrontPluginRegistryInterface;
 use Symfony\Component\EventDispatcher\EventSubscriberInterface;
 
 class StorefrontBuildSubscriber implements EventSubscriberInterface
@@ -13,13 +15,26 @@ class StorefrontBuildSubscriber implements EventSubscriberInterface
      */
     private $settingsService;
 
+    /**
+     * @var StorefrontPluginRegistryInterface
+     */
+    private $pluginRegistry;
+
+    /**
+     * @var VersionCompare
+     */
+    private $versionCompare;
+
 
     /**
      * @param SettingsService $settingsService
+     * @param string $shopwareVersion
      */
-    public function __construct(SettingsService $settingsService)
+    public function __construct(SettingsService $settingsService, StorefrontPluginRegistryInterface $pluginRegistry, string $shopwareVersion)
     {
         $this->settingsService = $settingsService;
+        $this->pluginRegistry = $pluginRegistry;
+        $this->versionCompare = new VersionCompare($shopwareVersion);
     }
 
     /**
@@ -43,5 +58,12 @@ public function onStorefrontRender(StorefrontRenderEvent $event): void
 
         $useJsValue = (int)$settings->isUseShopwareJavascript();
         $event->setParameter('mollie_javascript_use_shopware', $useJsValue);
+
+        $mollieJavascriptAlreadyExists = false;
+        if($this->versionCompare->gte('6.6')) {
+            $molliePayments = $this->pluginRegistry->getConfigurations()->getByTechnicalName('MolliePayments');
+            $mollieJavascriptAlreadyExists = $molliePayments && ($molliePayments->getScriptFiles()->count() > 0);
+        }
+        $event->setParameter('mollie_javascript_already_exists', $mollieJavascriptAlreadyExists);
     }
 }