Shopware 6 插件：如何集成额外的 JavaScript 以在结帐成功页面上报告购买情况？

Question

我正在开发 Shopware 6 项目，我需要在结账成功页面 (/checkout/finish) 上集成额外的 JavaScript 代码，以向第三方服务或平台报告购买情况。现有代码已包含用于跟踪 Google Ads 转化的 JavaScript，但我需要添加单独的逻辑以将购买详细信息报告给其他服务。

相关代码如下：

{% sw_extends '@Storefront/storefront/page/checkout/finish/index.html.twig' %}

{% block layout_head_javascript_tracking_google_ads_after %}
    {{ parent() }}
    {% block layout_head_javascript_tracking_google_ads_after_finish %}
        {% if swagData.active and swagData.conversionLabel %}
            <script>
                window._tmGoogleAdsFns.push(function () {
                    gtag('event', 'conversion', {
                        'send_to': '{{ swagData.conversionId }}/{{ swagData.conversionLabel|escape('js') }}',
                        'value': '{{ page.order.amountNet|escape('js') }}',
                        'currency': '{{ context.currency.shortName|escape('js') }}',
                        'transaction_id': '{{ page.order.orderNumber|escape('js') }}'
                    });
                });
            </script>
        {% endif %}
    {% endblock %}
{% endblock %}

我需要添加自定义 JavaScript 代码以向第三方服务报告购买详细信息。我需要发送的购买详细信息包括订单号、总金额和货币。 有人可以指导我如何在现有 Twig 模板中正确集成额外的 JavaScript 代码吗？我不确定代码的具体位置以及如何使用 Twig 变量访问订单详细信息。

Answer 1

在

index.html.twig

目录中创建一个名为

<plugin root>/src/Resources/views/storefront/page/checkout/finish/

的新文件。

文件内容

index.html.twig

:

{% sw_extends '@Storefront/storefront/page/checkout/finish/index.html.twig' %}

{% block layout_head_javascript_tracking_google_ads_after %}
    {{ parent() }}

    {% block block_name %}
        <script>
            // Write your code here
        </script>
    {% endblock %}
{% endblock %}

使用

{{ dump(page.order) }}

获取此页面上所有可用的变量。

订单号 -

{{ page.order.orderNumber }}

总金额（毛额） -

{{ page.order.amountTotal }}

总额（净额） -

{{ page.order.amountNet }}

货币 -

{{ context.currency.shortName }}

对您有帮助的其他文档：

• 自定义模板
• 添加自定义Javascript