Shopify前端如何判断当前页面是否为购物车页面？

以下是几种可靠的判断方式，替代你之前使用的ShopifyAnalytics.meta.page.pageType方案：

• 检查URL路径
  购物车页面默认的路径是/cart，可以直接通过浏览器的URL路径判断：

  if (window.location.pathname === '/cart') {
    // 当前是购物车页面
  }
  

  注意：如果你的店铺自定义了购物车页面路径（比如/checkout/cart），需要替换成对应的路径值。

• 检测页面专属DOM元素
  多数Shopify主题的购物车页面会包含唯一的DOM元素（比如特定id或class的容器），可以通过选择器判断：

  // 示例：根据主题实际的元素调整选择器
  if (document.getElementById('CartForm') || document.querySelector('.cart-container')) {
    // 当前是购物车页面
  }
  

  你可以通过浏览器开发者工具查看购物车页面的DOM结构，找到专属的标识元素。

• 通过Liquid模板注入标识
  利用Shopify的Liquid模板变量，在页面渲染时直接标记购物车页面，这种方法最稳定：

  1. 在店铺主题的theme.liquid文件中，给<body>标签添加专属类名：

     <body class="{% if template contains 'cart' %}is-cart-page{% endif %}">
     

  2. 前端JS中读取这个类名判断：

     if (document.body.classList.contains('is-cart-page')) {
       // 当前是购物车页面
     }
     

至于你提到的ShopifyAnalytics.meta.page.pageType失效，大概率是因为购物车页面中该对象未完成初始化，或者主题没有在这个页面注入相关的分析数据，因此不建议依赖这个属性做页面判断。

内容的提问来源于stack exchange，提问作者disha Lashkari