Snipcart 数据项-url 在本地主机上不工作

Question

我目前正在本地 (Wampserver) 上测试产品付款，但在确认付款时我总是遇到 'domain-crawling-failed' 无法解决的错误。

https://i.stack.imgur.com/HVxjd.png

https://i.stack.imgur.com/iU0zJ.png

我已经将 'localhost' 设置为 snipcart 上的默认域，并且还放置了子域：

https://i.stack.imgur.com/AhouQ.png

我带有购买按钮的产品在页面中：“http://localhost/Site/boutique”。这是代码：

<ul id="Product-List">
    <li class="product-item shown">
        <img src="assets/word.png">
        <div class="product-description">
            <h1>Word Guide Complet</h1>
        </div>
        <div class="product-pay">
            <h2>39,99 €</h2>
            <button class="buy-button snipcart-add-item"
            data-item-id="word"
            data-item-price="39.99"
            data-item-url="http://localhost/Site/boutique"
            data-item-description="Le guide complet de Word"
            data-item-image="assets/word.png"
            data-item-name="Word Guide Complet">
                Ajouter au panier
            </button>
        </div>
       
    </li>
    <li class="product-item shown">
        <img src="assets/excel.png">
        <div class="product-description">
            <h1>Excel Guide Complet</h1>
        </div>
        <div class="product-pay">
            <h2>39,99 €</h2>
            <button class="buy-button snipcart-add-item"
            data-item-id="excel"
            data-item-price="39.99"
            data-item-url="http://localhost/Site/boutique"
            data-item-description="Le guide complet de Excel"
            data-item-image="assets/excel.png"
            data-item-name="Excel Guide Complet">
                Ajouter au panier
            </button>
        </div>
        
    </li>
    <li class="product-item shown">
        <img src="assets/powerpoint.png">
        <div class="product-description">
            <h1>Powerpoint Guide Complet</h1>
        </div>
        <div class="product-pay">
            <h2>39,99 €</h2>
            <button class="buy-button snipcart-add-item"
            data-item-id="powerpoint"
            data-item-price="39.99"
            data-item-url="http://localhost/Site/boutique"
            data-item-description="Le guide complet de Powerpoint"
            data-item-image="assets/powerpoint.png"
            data-item-name="Powerpoint Guide Complet">
                Ajouter au panier
            </button>
        </div>
        
    </li>
</ul>

Answer 1

Snipcart 需要验证产品价格，为此它将尝试访问 data-item-url 并尝试在那里验证产品价格。

但是，Snipcart 无法访问您的 localhost。您必须将验证器数据放在 Snipcart 可以访问的地方。您可以通过多种方式做到这一点：

解决方案 1

例如，您可以在 codesandbox.io（或任何其他在线编辑器）上创建项目。在该项目中，创建一个 json 文件并将所有产品 ids 和 prices 放入其中。现在您可以将 data-item-url 的值设置为指向 json。由于 codesandbox.io 项目在云端，Snipcart 将能够访问它并验证产品价格。此解决方案的缺点是，每当您拥有新产品或更改现有产品的价格时，您都需要手动修改此 json。

注意：请记住将 codesandox.io 域添加到 Snipcart 仪表板中的 Snipcart's 域和子域。

codesandbox 项目中 json 文件的示例：

https://codesandbox.io/s/agitated-sid-6jqpl?file=/src/assets/all-products.json

解决方案 2

您可以使用 ngrok npm 包将数据传送到您的 localhost。这样 Snipcart 甚至可以在您的 localhost 中验证产品。此解决方案的缺点是您需要创建 ngrok 帐户才能使用该程序包。

ngrok 套餐：

https://www.npmjs.com/package/ngrok

解决方案 3

如果你问我，这是最好的解决方案。在您的服务器上创建一个端点，它将 return 数据库中的所有产品放入 json 文档中。当您这样做时，您可以将 data-item-url 设置为指向您服务器上的那个 endpoint。每当 Snipcart 需要验证某些内容时，它会调用您的服务器，并且您的服务器将始终 return 最新数据。您现在需要做的就是将您的服务器托管在云中的某个地方，这样 Snipcart 就可以访问该端点。

注意：请记住将您的服务器域添加到 Snipcart 仪表板中的 Snipcart's 域和子域。

Snipcart 数据项-url 在本地主机上不工作

Snipcart data-item-url not working on localhost

html

snipcart