[Added] IDE-Support script-tags and rearranging content

views/twig/event/add_payment_info.html.twig

@@ -1,14 +1,14 @@
-{# $oxcmp_basket|get_class_methods|dumpvar #}
-
 {% set gtmBasketPrice = oxcmp_basket.getPrice() %}
 {% set gtmBasketObject = oxcmp_basket %}
 {% set gtmCartArticles = gtmBasketObject.getBasketArticles() %}
 {% set gtmPaymentObject = oView.getPayment() %}
 
 {% block gtm_ga4_add_payment_info_block %}
+    {% set doNotShow %}{% apply spaceless %}
+        <script type="text/javascript">
             {% set gtm_ga4_add_payment_info %}
                 {% apply spaceless %}
-            dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});  /* Clear the previous ecommerce object. */
+                    dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});
                     dataLayer.push({
                     'event': 'add_payment_info',
                     'eventLabel':'Checkout - Payment info',
@@ -19,8 +19,7 @@
                         'currency': "{{ currency.name }}",
                         'value': {{ gtmBasketPrice.getPrice() }},
                         'coupon':         '{% for key, sVoucher in oxcmp_basket.getVouchers() %}{{ sVoucher.sVoucherNr }}{% if not loop.last %}, {% endif %}{% endfor %}',
-                'items':
+                        'items': [
-                [
                             {% for basketindex, basketitem in oxcmp_basket.getContents() %}
                                 {% set gtmItemPriceObject = basketitem.getPrice() %}
                                 {% set gtmBasketItem = basketitem.getArticle() %}
@@ -50,4 +49,6 @@
                 {% endapply %}
             {% endset %}
             {{ script({ add: gtm_ga4_add_payment_info.__toString(), dynamic: __oxid_include_dynamic }) }}
-    {% endblock %}
+        </script>
+    {% endapply %}{% endset %}
+{% endblock %}

views/twig/event/add_to_cart.html.twig

@@ -1,27 +1,27 @@
-
+{% if d3CmpBasket and d3CmpBasket.d3GtmRequestedArticleLoadedByAnid() != "null" %}
-{% if d3CmpBasket and d3CmpBasket.getAddToBasketDecision() and d3CmpBasket.d3GtmRequestedArticleLoadedByAnid() != "null" %}
     {% set oGtmProduct = d3CmpBasket.d3GtmRequestedArticleLoadedByAnid() %}
     {% set oGtmAmountArticlesAdded = d3CmpBasket.getD3GtmAddToCartAmountArticles() %}
-  {# twig.block.parent #}
-  {# variable $oGtmProduct is passed from parent tempalte #}
     {% set d3PriceObject = oGtmProduct.getPrice() %}
     {% set gtmCurrency = oView.getActCurrency() %}
     {% set gtmManufacturer = oGtmProduct.getManufacturer() %}
     {% set gtmCategory = oGtmProduct.getCategory() %}
 
     {% block d3_ga4_add_to_cart_list_block %}
+        {% set doNotShow %}{% apply spaceless %}
+            <script type="text/javascript">
                 {% set d3_ga4_add_to_cart_listtpl %}
                     {% apply spaceless %}
-      dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});  /* Clear the previous ecommerce object. */
+                        document.addEventListener('DOMContentLoaded', function() {
+                            var toBasketButton = document.getElementById('toBasket');
 
-      {# ** Debug cases ** #}
+                            if (toBasketButton) {
-      {# event.preventDefault(); #}
+                                toBasketButton.addEventListener('click', function() {
+                                    dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});
 
-      let iArtQuantity = $("{{ htmlIdAmountOfArticles }}").val();
+                                    let iArtQuantity = document.getElementById("{{ htmlIdAmountOfArticles }}").value;
                                     let iArtQuantityAdded = {{ oGtmAmountArticlesAdded }};
 
-      if(!iArtQuantity && (iArtQuantityAdded is same as(1)){
+                                    if(!iArtQuantity && (iArtQuantityAdded === 1)){
-)
                                         iArtQuantity = 1;
                                     }else{
                                         iArtQuantity = iArtQuantityAdded;
@@ -34,8 +34,7 @@
                                         'ecommerce': {
                                             'currency':   "{{ currency.name }}",
                                             'value':      iArtQuantity*{{ d3PriceObject.getPrice() }},
-          'items':      [
+                                            'items': [{
-            {
                                                 'item_id':        '{{ oGtmProduct.getFieldData('oxartnum') }}',
                                                 'item_name':      '{{ oGtmProduct.getFieldData('oxtitle')|raw }}',
                                                 'price':          {{ d3PriceObject.getPrice() }},
@@ -49,14 +48,18 @@
                                                     'item_list_name':'{{ gtmCategory.getSplitCategoryArray() }}',
                                                 {% endif %}
                                                 'quantity': iArtQuantity
-            }
+                                            }]
-          ]
                                         }{% if oViewConf.isDebugModeOn() %},
                                         'debug_mode': 'true'
                                         {% endif %}
                                     });
+                                });
+                            }
+                        });
                     {% endapply %}
                 {% endset %}
+            </script>
+        {% endapply %}{% endset %}
         {{ script({ add: d3_ga4_add_to_cart_listtpl.__toString(), dynamic: __oxid_include_dynamic }) }}
     {% endblock %}
 {% endif %}

views/twig/event/begin_checkout.html.twig

@@ -1,25 +1,23 @@
-{# $oxcmp_basket|get_class_methods|dumpvar #}
-
 {% set d3BasketPrice = oxcmp_basket.getPrice() %}
 {% set d3BasketObject = oxcmp_basket %}
 {% set gtmCartArticles = d3BasketObject.getBasketArticles() %}
 {% set gtmCurrency = oView.getActCurrency() %}
 
 {% block d3_ga4_begin_checkout_block %}
+    {% set doNotShow %}{% apply spaceless %}
+        <script type="text/javascript">
             {% set d3_ga4_begin_checkout %}
                 {% apply spaceless %}
-            dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});  /* Clear the previous ecommerce object. */
+                    dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});
                     dataLayer.push({
                     'event': 'begin_checkout',
                     'eventLabel':'Begin of checkout',
-            'ecommerce':
+                    'ecommerce': {
-            {
                         'actionField': "Begin",
                         'currency': "{{ gtmCurrency.name }}",
                         'value': {{ d3BasketPrice.getPrice() }},
                         'coupon':         '{% for key, sVoucher in oxcmp_basket.getVouchers() %}{{ sVoucher.sVoucherNr }}{% if not loop.last %}, {% endif %}{% endfor %}',
-            'items':
+                        'items': [
-            [
                             {% for basketindex, basketitem in oxcmp_basket.getContents() %}
                                 {% set d3oItemPrice = basketitem.getPrice() %}
                                 {% set gtmBasketItem = basketitem.getArticle() %}
@@ -49,4 +47,6 @@
                 {% endapply %}
             {% endset %}
             {{ script({ add: d3_ga4_begin_checkout.__toString(), dynamic: __oxid_include_dynamic }) }}
+        </script>
+    {% endapply %}{% endset %}
 {% endblock %}

views/twig/event/purchase.html.twig

@@ -1,7 +1,9 @@
 {% block d3_ga4_purchase_block %}
+    {% set doNotShow %}{% apply spaceless %}
+        <script type="text/javascript">
             {% set d3_ga4_purchase %}
                 {% apply spaceless %}
-            dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});  /* Clear the previous ecommerce object. */
+                    dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});
                     {% set gtmOrder = oView.getOrder() %}
                     {% set gtmBasket = oView.getBasket() %}
                     {% set gtmArticles = gtmOrder.getOrderArticles() %}
@@ -53,4 +55,6 @@
                 {% endapply %}
             {% endset %}
             {{ script({ add: d3_ga4_purchase.__toString(), dynamic: __oxid_include_dynamic }) }}
+        </script>
+    {% endapply %}{% endset %}
 {% endblock %}

views/twig/event/remove_from_cart.html.twig

@@ -1,9 +1,11 @@
 {% block d3_ga4_remove_from_cart_block %}
     {% if hasBeenReloaded %}
+        {% set doNotShow %}{% apply spaceless %}
+            <script type="text/javascript">
                 {% set d3BasketPrice = oxcmp_basket.getPrice() %}
                 {% set d3_ga4_remove_from_cart %}
                     {% apply spaceless %}
-                dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});  /* Clear the previous ecommerce object. */
+                        dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});
                         dataLayer.push({
                             'isRemoveFromCart': true,
                             'event': 'remove_from_cart',
@@ -42,5 +44,7 @@
                     {% endapply %}
                 {% endset %}
                 {{ script({ add: d3_ga4_remove_from_cart.__toString(), dynamic: __oxid_include_dynamic }) }}
+            </script>
+        {% endapply %}{% endset %}
     {% endif %}
 {% endblock %}

views/twig/event/view_cart.html.twig

@@ -1,12 +1,12 @@
-{# $oxcmp_basket|get_class_methods|dumpvar #}
-
 {% set d3BasketPrice = oxcmp_basket.getPrice() %}
 {% set gtmCartArticles = oView.getBasketArticles() %}
 
 {% block d3_ga4_view_cart_block %}
+    {% set doNotShow %}{% apply spaceless %}
+        <script type="text/javascript">
             {% set d3_ga4_view_cart %}
                 {% apply spaceless %}
-            dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});  /* Clear the previous ecommerce object. */
+                    dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});
                     dataLayer.push({
                         'event': 'view_cart',
                         'eventLabel':'Checkout Step 1',
@@ -47,4 +47,6 @@
                 {% endapply %}
             {% endset %}
             {{ script({ add: d3_ga4_view_cart.__toString(), dynamic: __oxid_include_dynamic }) }}
+        </script>
+    {% endapply %}{% endset %}
 {% endblock %}

views/twig/event/view_item.html.twig

@@ -3,19 +3,17 @@
 {% set gtmManufacturer = gtmProduct.getManufacturer() %}
 
 {% block d3_ga4_view_item_block %}
-    {% set d3_ga4_view_item %}
+    {% set doNotShow %}{% apply spaceless %}
-        {% apply spaceless %}
+        <script type="text/javascript">
-            dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});  /* Clear the previous ecommerce object. */
+            {% set d3_ga4_view_item %}{% apply spaceless %}
+                dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});
 
                 dataLayer.push({
                     'event': 'view_item',
                     'eventLabel':'Product View',
-                'ecommerce':
+                    'ecommerce': {
-                {
                         'currency': '{{ currency.name }}',
-                    'items':
+                        'items': [{
-                        [
-                            {
                             'item_name': '{{ gtmProduct.getFieldData('oxtitle')|raw }}',
                             'item_id': '{{ gtmProduct.getFieldData("oxartnum") }}',
                             'item_brand': '{% if gtmManufacturer %}{{ gtmManufacturer.getFieldData('oxtitle')|raw }}{% endif %}',
@@ -29,13 +27,13 @@
                             {% endif %}
                             {% set d3PriceObject = gtmProduct.getPrice() %}
                                 'price': {{ d3PriceObject.getPrice() }}
-                            }
+                        }]
-                        ]
                     }{% if oViewConf.isDebugModeOn() %},
                         'debug_mode': 'true'
                     {% endif %}
                 });
-        {% endapply %}
+            {% endapply %}{% endset %}
-    {% endset %}
+        </script>
+    {% endapply %}{% endset %}
     {{ script({ add: d3_ga4_view_item.__toString(), dynamic: __oxid_include_dynamic }) }}
 {% endblock %}

views/twig/event/view_item_list.html.twig

@@ -5,8 +5,9 @@
 
 {% block d3_ga4_view_item_list_block %}
     {% if gtmProducts|length %}
-        {% set d3_ga4_view_item_list %}
+        {% set doNotShow %}{% apply spaceless %}
-            {% apply spaceless %}
+            <script type="text/javascript">
+                {% set d3_ga4_view_item_list %}{% apply spaceless %}
                     dataLayer.push({ecommerce: null});
                     dataLayer.push({
                         'event':'view_item_list',
@@ -38,8 +39,9 @@
                             'debug_mode': 'true'
                         {% endif %}
                     });
-            {% endapply %}
+                {% endapply %}{% endset %}
-        {% endset %}
                 {{ script({ add: d3_ga4_view_item_list.__toString(), dynamic: __oxid_include_dynamic }) }}
+            </script>
+        {% endapply %}{% endset %}
     {% endif %}
 {% endblock %}

views/twig/event/view_search_result.html.twig

@@ -2,9 +2,10 @@
 
 {% block d3_ga4_view_search_result_block %}
     {% if gtmProducts %}
-    {% set d3_ga4_view_search_result %}
+        {% set doNotShow %}{% apply spaceless %}
-      {% apply spaceless %}
+            <script type="text/javascript">
-        dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});  /* Clear the previous ecommerce object. */
+                {% set d3_ga4_view_search_result %}{% apply spaceless %}
+                    dataLayer.push({"event": null, "eventLabel": null, "ecommerce": null});
                     dataLayer.push({
                         'event': 'view_search_result',
                         'eventLabel':'view_search_result{% if oViewConf.isDebugModeOn() %}_test{% endif %}',
@@ -35,9 +36,10 @@
                             'debug_mode': 'true'
                         {% endif %}
                     });
-      {% endapply %}
+                {% endapply %}{% endset %}
-    {% endset %}
                 {{ script({ add: d3_ga4_view_search_result.__toString(), dynamic: __oxid_include_dynamic }) }}
+            </script>
+        {% endapply %}{% endset %}
     {% endif %}
 {% endblock %}