购物车刷新策略

Posted 2023-03-18

参考技术A

电商APP基本都有购物车页面，购物车的数据会受用户在其他页面的操作的影响。比如说：用户不仅可以在购物车VC里进行商品的添加与删除操作，也可以在商城的商品列表里操作、还可以在商品详情页以及商品搜索页操作。而这些操作都会导致购物车数据的变动。那我们应该在什么时候刷新购物车呢？

虽然可行，但是用户并未进行任何增删操作也需要刷新购物车？

也可行，但是用户都没有在购物车页面，刷不刷新对他也没影响啊。

用户进行商品增删操作时，发通知给购物车，购物车将属性 shouldUpdate 标为 YES ，当进入购物车页面时，根据 shouldUpdate 的值决定是否刷新：

多对一的情况下通知和单例都是可行的选择。使用单例的话就是直接对单例进行操作，如 [CQShopcartManager sharedInstance].shouldUpdate = YES ，然后在购物车的 viewWillAppear: 里根据单例的值决定是否刷新，刷新后将单例的值改回 NO 。

我测试了一下淘宝APP。

先添加一个商品，再关掉网络，然后切换到购物车主页，toast提示网络崩了。为什么会出现提示？因为它想去后台拿数据，奈何没网。

如果我没添加商品，关掉网络切换到购物车主页，此时并没有toast提示。说明它没有去后台拿数据。

因此可判断淘宝APP也是 只有进行商品增删操作后才会刷新购物车 。

先标记，需要的时候再刷新，相对于每次进入页面都刷新或者每次操作都发通知直接刷新，这种做法在满足实时更新的前提下节省了用户的流量并且提高了用户体验度。

浏览器刷新时，购物车值重置

在ECommerce React项目中，我在单击时创建了购物车，更改为“在购物车中”，然后被禁用，这表明该产品在购物车中并且无法单击，但是当刷新浏览器时，购物车值重置为。

以下为代码参考

Product.js

export default class Product extends Component {
    render() {
        const {id, title, img, price, inCart} = this.props.product;
        const dataValue = JSON.parse(localStorage.getItem('myCart'))

        return (
            <ProductWrapper className="col-9 mx-auto col-sm-6 col-lg-3 my-3 " >
                <div className="card" >
                    <ProductConsumer>
                        {(value) => (
          <div  className="img-container p-3" >

         <img style={imageSize}  src={img} alt="product" 
         className="card-img-top center img-fluid img-responsive"/>


        <button className="cart-btn" disabled={inCart?true:false}
        onClick={() => {value.addToCart(id)}}> 
        {console.log('DATA VALUE', dataValue)}
        { inCart ? (
            <p className="text-capitalize mb-0" disabled>
            {" "}
            In Cart</p>
        ) : (
            <i className="fas fa-shopping-cart"/>
        )}
          </button>
        </div>)}
       </ProductConsumer> 
       </div> 
    </ProductWrapper>   
         );
    }

}

ProductList.js（产品列表）

export default class ProductList extends Component {

    render() {
        return (
            <React.Fragment>
                <ProductConsumer>
                 {value => {

             return value.products.map((product, key) => {
             return  <Product key={product.id} product={product} />;
                                      });
                                }}
                            </ProductConsumer>
            </React.Fragment>
        );
    }
}

App.js

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Route render={({location}) => (
                  <Switch location={location}>
                    <Route exact path="/" component={ProductList}/>
                  </Switch>
        )} />
      </React.Fragment>
    );
  }
}

export default App;

我已经尝试过localStorage，但是没有效果。可以做些什么使购物车值存储在localStorage中，以便在刷新时保留“购物车中”。有什么合适的解决方案吗？

下面是codeandbox链接：https://codesandbox.io/s/tdgwm

答案

<button
   className="cart-btn"
              disabled={inCart ? true : false}


              onClick={() => {
                value.addToCart(id);
                localStorage.setItem("added", "In Cart");
                console.log(localStorage.getItem("added"));
              }}
            >
              {localStorage === null ? (
                <i className="fas fa-shopping-cart" />
              ) : (
                <p className="text-capitalize mb-0" disabled>
                  {" "}
                  {localStorage.getItem("added")}
                </p>
              )}


            </button>

我快速浏览了一下。上面的代码将获取localStorage项目集并呈现购物车中的值。但是，我将留给您将其应用于单个产品并更新图标/购物车中的条件。如果您有任何问题，我会再待一会儿。但基本上，您需要在渲染之前查看是否已设置localstorage。