时间戳

首页 > 解决方案 > 将内联 Javascript 从组件移动到 Javascript 文件以由 Stencil CLI 正确捆绑

javascript - 将内联 Javascript 从组件移动到 Javascript 文件以由 Stencil CLI 正确捆绑

问题描述

如何将内联 javascript 从 html 组件移动到单独的 js 文件，以便可以捆绑和缩小它？

我正在编辑 BigCommerce 和最新的 Cornerstone 主题。

该组件是一个按钮，通过向店面 api 发出 POST 请求，将 3 个项目添加到购物车（它按预期工作，我只需要正确移动它以进行捆绑）

<script>
    let lineItems = {
        "lineItems": [
            {
                "quantity": 1,
                "productId": 103
            },
            {
                "quantity": 1,
                "productId": 81
            },
            {
                "quantity": 1,
                "productId": 77,
                "variantId": 11
            }
        ]
    };

    function postData(url = ``, cartItems = {}) {
        return fetch(url, {
            method: "POST",
            credentials: "same-origin",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(cartItems),
        }).then(function (response) {
            redirectToCart();
        });
    }

    function redirectToCart() {
        window.location = "/cart.php";
    }

    function showLoadingOverlay() {
        document.getElementsByClassName("loadingOverlay").forEach(x => x.style.display = "block");
    }

    function addBundleToCart() {
        let cartID = "{{cart_id}}"
        let url = `/api/storefront/cart`;

        if (cartID.length > 0) {
            // cart wasn't empty, update url
            showLoadingOverlay();
            url = `/api/storefront/carts/${cartID}/items`
        }
        postData(url, lineItems)
            .then(data => console.log(JSON.stringify(data)))
            .catch(error => console.error(error));
    }
</script>

<button type="button" style="margin:0 auto;display:table; padding:20px; font-size: 1.5em; font-weight: bold; border: 3px solid rgba(128, 128, 128, 0.164)"
    onclick="addBundleToCart()" id="addToCart">ADD BUNDLE TO CART</button>

我正在阅读文档，但不清楚该怎么做。我应该为此创建一个自定义模板吗？（品牌、类别、页面、产品）

标签： javascripthtmlbigcommerce

解决方案

处理此问题的方法不止一种，我将从在这种情况下的建议开始：

您可以在 Storefront > Script Manager 中添加代码的脚本部分，并将其包含在将放置按钮的页面的标题中。您可能需要对此进行试验，以确定最适合您的方法。使用按钮的剩余代码，您将把它添加到您希望按钮出现的 .html 主题文件中，或者任何接受 HTML 的地方。

如果需要将此添加到捆绑的主题中，您可以将 .js 文件添加到资产文件夹并在使用按钮的 HTML 文件中引用该脚本。我建议您查看此处的 Handlebars Helpers for injection，其中详细介绍了如何使用 CDN 有效地引用您的脚本。

推荐阅读