如何使用 FastSpring 正确设置模式商店？

Question

我目前正在探索 FastSpring，但他们的示例记录非常少，因此我什至很难理解有关如何为我的产品创建模式对话框的最基本示例。在下面的 link 中，他们有一个“购买 Photo.io 应用程序”的示例，但他们各自的 JavaScript 代码在我的测试网页上失败了。

https://fastspringexamples.com/full-cart/modal-carts/

具体来说，在第 176 行：

var fsb_modal = document.getElementById('fsb-modal');

将部分内容复制到我的测试网页后，这就是脚本中断的地方。 fsb-modal是从哪里来的？这是在哪里创建的？没有解释“JavaScript”代码是如何嵌入到 HTML 中的。非常感谢任何帮助！

P.S。我的测试网页包含来自我的测试帐户的 script 指令：

<script
    id="fsc-api"
    src="https://1234567890.cloudfront.net/sbl/0.8.3/fastspring-builder.min.js"
    type="text/javascript"
    data-storefront="x-y-z.test.onfastspring.com/popup-x-y-z">
</script>

Answer 1

div with id fsb-modal 是 HTML 的一部分，描述了购物车模式的内容。在您提到的 link 上，它位于第 76 行的 HTML 选项卡下：

<!--
    This is the modal shopping cart.  The contents of the below will be populated by the handlebars script defined below.
-->
<div id="fsb-modal" class="fsb-modal">
    <div class="fsb-modal-content" id="fsb-modal-content">
        <div class="fsb-modal-header" style="background: #28a745; color: #ffffff;">
            <span id="fsb-close" class="fsb-close">&times;</span>
            <span class="fsb-cart_title">Shopping Cart</span>
        </div>
        <div class="fsb-modal-body">
            <div id="fsb_error" class="fsb-alert fsb-alert-danger" role="alert">
                <p class="fsb-alert-heading"><strong>I'm sorry, there was an issue.</strong></p>
                <p id="fsb_error_msg"></p>
            </div>
            <div id="fsb" data-fsc-selections-smartdisplay>
                <div data-fsc-selections-smartdisplay data-fsc-items-container='fastspring_shopping_cart' data-fsc-filter="selected=true" class="fsb-container-fluid px-5 py5">
                </div>
            </div>
            <div data-fsc-selections-smartdisplay-inverse>
                <p class="fsb-emptyCart">Your cart is empty.</p>
            </div>
        </div>
    </div>
</div>

如何使用 FastSpring 正确设置模式商店？

How to properly setup a modal shop with FastSpring?

html

javascript

modal-dialog