1

我在尝试将 Snipcart 与 Reactjs 网页一起使用时遇到问题，我知道 URL 应该是您的购买按钮所在的位置，但在我的情况下，我在不同的页面上有按钮，所以我试图动态地这样做，就像这样：

import "./itemList.css";
import { Col } from "react-bootstrap";
import { Link } from "react-router-dom";

function ItemList({ name, price, id, info, categ }) {
  // var product_page = useLocation()
  return (
    <Col className="mx-auto" xs="12" sm="12" md="4" lg="4" xl="4">
      <div className="itemCard">
        <figure>
          <img
            className="img-item"
            src={`/assets/${name}.jpg`}
            alt={`${name}`}
          ></img>
        </figure>
        <div className="infoBox">
          <h1>
            <Link to={`/item/${id}`} className="ver">
              {name}
            </Link>
          </h1>

          <p className="item-info">{info}</p>
          <button
            className="agregar snipcart-add-item"
            data-item-id={id}
            data-item-price={price}
            data-item-url={`/categories/${categ}`}"
            data-item-name={name}
            data-item-image={`/assets/${name}.jpg`}
            data-item-custom1-name="Servings"
            data-item-custom1-options="1|2[+100.00]|3[+200.00]|4[+300.00]"
          >
            Add to cart (${price})
          </button>
        </div>
      </div>
    </Col>
  );
}
export default ItemList;

问题是，当我尝试下订单时，会出现下一条消息： 产品抓取错误定义的产品价格与购物车中的价格不匹配，或者在抓取的端点上找不到产品。查看产品 ID、价格和 URL。此订单验证条目可能会有所帮助。有关更多详细信息，请参阅开发者控制台。 如果有人可以帮助我，我将不胜感激，我让你我的 app.js 文件以查看路线，谢谢！

import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import Header from "./components/header/header";
import HeaderItems from "./components/header-items/header-items";
import Home from "./components/home/home";
import ItemListContainer from "./components/itemListContainer/itemListContainer";
import AllItems from "./components/AllItems/allItems";
import Footer from "./components/footer/footer";
import ProductDetailContainer from "./components/ProductDetail/productDetailContainer";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Redirect to='/home' />
        </Route>
        <Route exact path='/home'>
             <Header />
            <Home />
            </Route>
        <Route exact path="/categories/:categ">
          <HeaderItems />
          <ItemListContainer />
        </Route>
        <Route exact path="/categories">
          <HeaderItems />
          <AllItems />
        </Route>
        <Route path="/item/:id">
          < ProductDetailContainer />
        </Route>
      </Switch>
      <Footer />
    </BrowserRouter>
  );
}

export default App;
4

1 回答 1

2

当你有像 React 这样的单页应用程序时，你应该使用JSON Crawler方法来验证订单。基本上，您必须创建一个 JSON 文件，其中包含带有ids和的项目prices。所以它应该是这样的：

[
  {
    id: "item_1_id",
    price: "item_1_price"
  },
  {
    id: "item_2_id",
    price: "item_2_price"
  }
]

现在，data-item-url您应该指定该urlJSON 文件。这个 JSON 文件应该在某个地方公开可用，以便 Snipcart 可以使用该 JSON 文件验证您的购物车项目。

于 2021-06-09T01:50:19.923 回答