Stencil - 如何从 javascript 获取 CDN 链接

Question

我正在使用 Big Commerce 的模板向我的产品页面添加一些高级功能。此功能的一部分需要从服务器加载文件。每个产品页面都需要一个不同的文件，所以我不能只在模板文件中使用 {{cdn ...}}，我需要 javascript

中的等效文件

模板文件： {{cdn "mydogpicture.jpg"}} 输出 www.cdn.bigcommerce.com/some/link/mydogpicture.jpg

我需要类似的东西 var linkToDogPicture = loadFileFromServer("mydogpicture.jpg"); 这样我就可以使用 link 将文件加载到我需要的地方（它不会总是图片文件）

有什么想法吗？

Answer 1

您需要使用 BigCommerce 的 Custom Fields 功能。

对于每个产品，将 CDN link 添加为自定义字段。
您的自定义字段应该会自动显示在产品页面上。

Answer 2

我在 Whosebug 和 BigCommerce 论坛上都问过这个问题，似乎没有更干净的解决方案，所以我会继续 post 我的工作作为答案。在自定义字段中定义 CDN links 不起作用有两个原因：在 javascript 从服务器加载配置 json 文件之前不知道所需的文件，我想要确保最终用户将 cdn link 指向离他们最近的服务器以利用 CDN。我是这样做的：

将文件上传到 /content 目录的根目录。这个文件可以是空白的，你只需要知道它的名字，永远不要改变名字。就我而言，我称之为 cdn.json
在您的模板文件中使用

<span id="cdn_link" style="display: none">{{cdn "cdn.json"}}</span>

将 CDN link 到 cdn.json 放在页面上的不可见范围内。 cdn 函数应该输出类似于 httpx://cdnX.bigcommerce.com/xxxxxx/cdn.json

在javascript中获取span的innerhtml并移除cdn.json

var cdnLink = $("#cdn_link").html(); cdnLink = cdnLink.replace("version.json", "");

现在您可以将路径附加到 cdnLink 以从 BigCommerce 为用户选择最快的 CDN 服务器加载文件

Answer 3

可能更简单的解决方案是将以下内容添加到您的 base.html 模板中：

<script type="text/javascript">
    function cdn(path) {
        return `{{ cdn '/' }}${path}`;
    }
</script>

然后，每当您需要 javascript 中资产的 CDN 路径时，您可以：

image.src = cdn('/img/logo.png');

Stencil - 如何从 javascript 获取 CDN 链接

Stencil - How to get CDN links from javascript

javascript

bigcommerce