如何确定出现在 Stripe 结帐中的产品的顺序/顺序答案

【问题标题】：How to determine order/sequence in which products appear in Stripe checkout如何确定出现在 Stripe 结帐中的产品的顺序/顺序
【发布时间】：2020-12-14 09:59:20
【问题描述】：

在stripe.redirectToCheckout() 中，我们使用lineItems 列出要呈现的产品；这些产品是在 Stripe Dashboard 中配置的项目（在测试模式或生产模式下）。

我似乎找不到控制产品呈现顺序的方法：

如果我在lineItems 中更改数组元素的顺序，则没有观察到任何变化（见屏幕截图）。
Stripe Dashboard 中没有明显的工具，用于重新订购产品，例如通过“上/下移动”或可拖动卡片。

我曾考虑尝试通过归档和重新创建产品来更改订单，但这似乎是一种 hack，即使对于 2-3 个产品也是不可持续的。当想要对产品的订购进行 A/B 测试，或者当他们有大量产品时，商店会怎么做？

排错很麻烦，因为“order/ordering”、“arrange”、“sequence”都有不明确的含义……！

【问题讨论】：

你能解释一下后两个视图是什么吗？它们似乎与 Checkout 无关。我刚刚验证了仅客户端以及客户端和服务器结帐在重定向到结帐时都尊重行项目的顺序。我的直觉是，您正在呈现的产品列表是通过 API 列出产品的结果，在这种情况下，它们总是按创建日期倒序排列。在这种情况下确定订单的方法是将订单索引存储在您自己的数据库中，然后在您检索产品后重新订购。
这些视图是在更新 chackout.js 文件后重新渲染的结帐页面（执行完全缓存重置并等待 10 分钟再重新渲染）。感谢您验证功能，这帮助我意识到决定渲染的不是 checkout.js 页面，而是我 products.js 中的 GraphQL。一旦我弄清楚改进后的查询，我应该将其作为答案发布在下面吗？
当然谢谢！任何对社区有帮助的事情:)

标签： javascript stripe-payments e-commerce aws-amplify

【解决方案1】：

使用lineItems 数组对产品进行排序/排序确实工作（请参阅@v3nkman 对 OP 的评论），但在我的情况下，特定呈现的页面未连接到 checkout.js 上的该数组;相反，它由 Products.js 上的 GraphQL 字符串控制，我通过在其中添加 sort 字段解决了这个问题，如下所示：

const Products = () => {
  return (
    <StaticQuery
      query={graphql`
        query ProductPrices {
          prices: allStripePrice(
            filter: { active: { eq: true } }
            sort: { fields: [created], order: ASC } // new line
          ) {
            edges {
              node {
                id
                active
                currency
                unit_amount
                product {
                  id
                  name
                  images
                  description
                }
              }
            }
          }
        }
      `}
      render={({ prices }) => {
        // Group prices by product
        const products = {}
        for (const { node: price } of prices.edges) {
          const product = price.product
          if (!products[product.id]) {
            products[product.id] = product
            products[product.id].prices = []
          }
          products[product.id].prices.push(price)
        }
        return (
          <div style={containerStyles}>
            {Object.keys(products).map(key => (
              <ProductCard key={products[key].id} product={products[key]} />
            ))}
          </div>
        )
      }}
    />
  )
}

【讨论】：