1

我目前正在本地（Wampserver）上测试产品付款，但在确认付款时总是出现“域抓取失败”错误，我无法解决。

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 €&lt;/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 €&lt;/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 €&lt;/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>
4

1 回答 1

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's域和子域Snipcart。

json项目中的文件示例codesandbox：

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

解决方案 2

您可以使用ngroknpm 包将数据传输到您的localhost. 这样Snipcart即使在您的localhost. 此解决方案的缺点是您需要创建ngrok帐户才能使用该软件包。

ngrok包裹：

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

解决方案 3

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

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

于 2021-04-29T14:41:23.177 回答