Shopify.onItemAdded 更新#cart 和 cart.item.count

2024-03-03

我正在尝试在 Shopify 中制作一个 ajaxed 购物车。我已使产品页面将商品添加到购物车,而无需刷新或转到购物车页面。要查看购物车,您可以单击输入或带有 .cart-show 的链接,因此我将其添加到“添加到购物车”输入中:

<input style="margin-top: 40px; width: 50%;" type="submit" value="Add to cart" class="button cart-show" onclick=" Shopify.addItemFromForm('add-item-form'); return false" />

其作用是将商品添加到购物车并显示购物车 div #menu。当然,添加新商品时购物车不会更新,问题是:我该怎么做?如何使购物车 div #cart 在每次单击输入时更新?当添加新产品时,如何更新 div #cart-total-items 中的 cart.item_count ?我花了一天多的时间来解决这个问题,但仍然没有任何进展。我什至尝试过在 Shopify 论坛上提问,但它根本就死了,没有任何帮助可以到达那里。

添加新商品时的“Shopify.onItemAdded”脚本如下:

 Shopify.onItemAdded = function(line_item) {
    Shopify.getCart();

    refresh #menu script here

    refresh cart.item.count script  in theme.liquid could be something like this, but it doesn't work: 

    $('#cart-total-items').update(cart.item_count);
  };

购物车.item_count

<span style="" id="cart-total-items"><a class="cart-show">Bag ({{ cart.item_count }})</a></span>

有任何想法吗?


这可能不完全是您所需要的,但可能会有所帮助。我在我为其开发的 Shopify 网站上制作并实现了 ajax 购物车。我使用 jquery 和 JSON 来做这类事情,这就是我所做的:

jQuery.getJSON('/cart.js', function (cart, textStatus) {
  //the cart info is in the callback. the item_count is available as part of the callback
  //below I set my cartcount div with the current cart item_count
  var carttext=cart.item_count;
  jQuery("#cartcount").text(carttext);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Shopify.onItemAdded 更新#cart 和 cart.item.count 的相关文章

  • 是否可以用 json 进行表达式/计算?

    我使用出色的 json server 作为应用程序的后端 它对于访问自定义端点以检索一些数据非常有用 但是如果它允许我进行计算 表达式以便我也可以模仿后端行为 那将会非常有用 以这个数据结构为例 products name football
  • 在 AngularJS 中覆盖运行时的依赖关系

    我有一个服务叫 doggedHttp 它公开了与 http 现在我想创建一个 doggedResource服务是有角度的 resource服务之上 doggedHttp代替 http 换句话说我想注入 doggedHttp as the h
  • GeoJSON 要素坐标未显示在 OpenLayers 地图上

    我正在尝试显示一个GeoJSON地图上的多边形 我使用了 OpenLayers 提供的示例以及以下数据 但仅显示第二个多边形 var geojsonObject type FeatureCollection crs type name fe
  • 向 FTP 服务器执行跨域 XMLHTTPREQUEST 的语法是什么?

    我有一个 webDav CORS 插件 可以使用它在 webDav 服务器上 POST PUT GET REMOVE ALLDOCS 文件 我现在想对 FTP 做同样的事情 但我正在努力获取xmlhttprequest 工作语法 我只是收到
  • 将服务连接到现有的流星帐户

    我正在设置一个流星应用程序 其中涉及使用用户名和密码进行注册 然后希望将该帐户与 Facebook 和 Twitter 连接起来 我只需使用帐户包即可轻松启动并运行第一部分 但是当我有一个登录用户调用 Meteor loginWithFac
  • Node.js 和 Express:异步操作后如何返回响应

    我是 Node js 新手 所以我仍然对异步函数和回调很感兴趣 我现在的难题是如何在异步操作中从文件读取数据后返回响应 我的理解是发送回复的工作方式如下 这对我有用 app get search function req res res s
  • HTML if 语句在 CDN 失败时加载本地 JS/CSS

    当从 CDN 或任何外部服务器加载 CSS JS 文件时 有可能 即使概率很低 由于外部故障而丢失该文件 在这种情况下 html 页面将因缺乏适当的 CSS 和 JS 而被损坏 有没有一种实用的方法可以在 CDN 故障时加载本地版本 IF
  • 如何在流程图中间隔刻度线?

    我下面有一个流程图 您将看到标签被压缩 我想使刻度之间的宽度确保显示所有标签 标记如下 div div class graph info a href span span a a href class active span span a
  • jQuery 在提交的数据中附加一些奇怪的字符串

    重现该bug的代码 在html页面中放入以下代码并读取Fiddler中提交的数据 jQuery 1 4 2工作正常 问题发生在1 5 1和1 5 2
  • 使用 keyup 事件仅触发表单验证中文本框的部分规则,并取消其余规则的事件

    我的应用程序中有一个表单 我正在使用 jQuery 表单验证插件对其进行验证 其中一项规则是远程类型 用于验证用户名是否不存在 我已经能够覆盖 onkeyup 事件 因此规则不会为我输入的每个字母发送到服务器 我完成的方式如下 var va
  • 设计 Javascript 前端 <-> C++ 后端通信

    在我最近的将来 我将不得不制作一个具有 C 后端和 Web 前端的系统 要求 目前 我对此了解不多 我认为前端将触发数据传输 而不是后端 所以不需要类似 Comet 的东西 由于在该领域的经验可能很少 我非常感谢您对我所做的设计决策的评论
  • Rails - 使链接与 ajax 一起工作

    我有一个链接 应该使用 ajax 加载它旁边的部分内容 而无需重新加载页面 链接在这里 这是链接应该转到的控制器 class ProfilesController lt ApplicationController def profile f
  • 单击窗口后才检测到 keydown

    在我的 Web 应用程序中 我有一个用于打开菜单的键的事件侦听器 仅当我单击页面上的任意位置后 此功能才可以正常工作 我尝试将焦点添加到窗口加载 但这仍然不会让 keydown 函数运行 直到我单击页面上的某个位置之后 有谁知道这是否可能
  • ERR_IMPORT_ASSERTION_TYPE_MISSING 用于导入 json 文件

    这段代码运行良好 我不知道是因为我升级到 Node 17 还是什么原因 但现在我明白了 TypeError ERR IMPORT ASSERTION TYPE MISSING Module file Users xxxxx code pro
  • 在javascript中定义Date.parse的格式[重复]

    这个问题在这里已经有答案了 我正在使用 Date parse 将字符串转换为 JavaScript 中的日期 但是 如果字符串看起来像 10 11 2016 它会被解释为 2016 年 10 月 11 日 我需要将其解释为 2016 年 1
  • 如何逐步绘制矢量路径? (拉斐尔.js)

    如何逐步动画化矢量路径 就像它被绘制一样 换句话说 慢慢地逐像素地显示路径 我在用着Rapha l js but如果您的答案不是特定于库的 例如可能有一些通用的编程模式可以完成此类事情 我对矢量动画相当陌生 欢迎 使用直线路径很容易做到 就
  • 如何将 default.html 的字符编码设置为 UTF-8?

    我花了几个小时来验证我的网站HTML 4 01 严格事实上我已经成功了 但仍然有一个警告我无法摆脱 警告是 字符编码不匹配 中指定的字符编码 HTTP 标头 iso 8859 1 是 与中的值不同 元素 utf 8 我将使用该值 来自 HT
  • JS中如何过滤多个字符串? [复制]

    这个问题在这里已经有答案了 我希望能够过滤数组中的多个字符串 类型 例如我想过滤类型meat并输入fruit在下面的数据结构中 我想要实现的是过滤数据对象 const data type meat food hamburger type f
  • addEventListener keydown 不起作用

    我在互联网上找到了一些基本的 Pong 代码 并尝试添加按键 代码在这里 http cssdeck com labs ping pong game tutorial with html5 canvas and sounds http css
  • 截断段落前 100 个字符并隐藏段落的其余内容,以通过更多/更少链接显示/隐藏其余内容

    我有一个超过 500 个字符的段落 我只想获取最初的 100 个字符并隐藏其余部分 我还想在 100 个字符旁边插入 更多 链接 单击更多链接时 整个段落应显示并编辑文本 更多 到 更少 单击 更少 时 它应切换行为 段落是动态生成的 我无

随机推荐

  • 如何使用 Flask 和 sqlalchemy 进行选择查询?

    我是 Flask 和 SQLAlchemy 的新手 我在 postgress 有一个数据库 该数据库有表 数据 200 条记录 我想做一个 Select 语句 但当我这样做时总是给我同样的错误 这是我的代码 这是我的模型 py from s
  • DateTime.AddYears 在闰年的行为

    在 DateTime 上使用 AddYears 方法时 任何人都可以解释 NET 中闰年计算背后的数学或简单推理吗 如果您将 2012 年 2 月 29 日加上一年 您将得到 2013 年 2 月 28 日 而不是 2013 年 3 月 1
  • 如何在 Scala 中为泛型类型提供默认类型类?

    在 Scala 中 如果你创建一个类型类 比如代数结构Monoid T 您可以为不同类型的幺半群提供许多默认类型类实现 假设幺半群定义为 trait Monoid T def op x T y T T def id T Since Stri
  • 具有三个表的递归 CTE

    我正在使用 SQL Server 2008 R2 SP1 我想通过 沿着树向上走 来递归地找到某个组织单位的第一个非空经理 我有一张包含组织单位 ORG 的表 一张包含每个组织的父级的表 ORG 中的单位 我们将该表称为 ORG PAREN
  • 如何清除 firebase 云消息通知?

    我使用firebase云消息向手机发送消息 并且可以成功接收通知 但在某些情况下 我不会单击通知来打开我的应用程序 而是手动打开应用程序以进入前台 我想要的是当我打开应用程序时 通知栏中的通知应该自动清除 以下代码将清除您的应用程序的所有通
  • 有没有办法更新云功能中的collectionGroup

    我正在构建一个聊天应用程序 当用户对其本地配置文件进行更新时 我想使用云功能在整个集合组中进行更新 我成功侦听云函数中的更新并检索具有以下内容的 collectionGroups 列表 const collectionGroupNamere
  • swift 不允许函数参数初始化吗?

    第一个块生成一个通用的 Swift 编译错误 甚至不指向该行 let screenDivision size width 5 var game1 SKSpriteNode color redColor size CGSize width 2
  • Nativescript:在路由器出口之间导航

    更好的介绍请参见关于奥特莱斯的博客文章 https www nativescript org blog using nested router outlets with nativescript and angular 我使用 TabVie
  • 如何在 Swagger UI 中删除“示例”组合框或更改其文本?

    我的 Swagger UI 有一个问题 它显示一个空的 示例 组合框 下图中标记为黄色 看起来不太好 有没有办法删除它或将其文本更改为有用的内容 我尝试添加example标签 但它不起作用 操作定义如下所示 post tags pet su
  • azurepipelines-coverage.yml 的架构,用于为 PR 配置新发布的代码覆盖率指标功能

    该功能已描述here https learn microsoft com en us azure devops release notes 2019 sprint 155 update code coverage metrics and b
  • 如何删除数据库,错误5030数据库无法锁定

    我正在尝试删除 SQL Server 2005 中的现有数据库 我的第一次尝试产生了以下错误 5030 数据库不能独占 锁定以执行操作 此后我已经杀死了所有正在访问数据库的进程 我还删除了它之前涉及的复制订阅 除了 SQL Server 进
  • 未出现写入 ILogger 的 Serilog (Azure Functions V2)

    我已安装 Serilog 并配置为将日志事件数据写入 MS SQL Server for Azure Function 中的表 系统日志和静态类本身写入的日志显示在表中 但是当我尝试使用 Extensions Logging ILogger
  • 核心数据和分页

    我有一个包含 50 000 条记录的数据库 我正在使用核心数据从搜索中获取记录 一次搜索可以轻松返回 1000 条记录 使用 core data 和 uitableview 来分页这些记录需要什么 我想一次显示 100 条记录 并在查看 1
  • iOS 中如何将字符串的一部分加粗?

    我想让文本字符串的某些部分变为粗体 Eg 这就是要大胆 这是正常的字符串 在Android中 可以通过使用可生成字符串轻松实现 iOS 中的等价物是什么 是的 可以通过以下方式实现NSAttributedString https devel
  • Laravel 用户特定的缓存

    我从来没有对缓存做过太多事情 但现在我正在尝试尝试一下 我有一个返回大量数据的仪表板 为了减轻负载 我像这样缓存数据 return cache gt rememberForever something function return aut
  • EF Core 2.2,将字符串参数传递给 FromSql 语句

    public List
  • 如何一次反编译多个jar?

    好吧 我想主题已经说明了一切 理想的解决方案将找到某个文件夹中的所有 jar 它们可能位于子文件夹中 并将找到的所有源写入单个 src 目录 当然还要维护包文件夹 具体用例 反编译所有 Eclipse 插件 jar 下载JAD反编译器 ht
  • 在 PHPUnit 中,如何模拟父方法?

    我想测试一个调用同名父方法的类方法 有没有办法做到这一点 class Parent function foo echo bar class Child function foo foo parent foo return foo class
  • 无法修复“语法错误,‘foreach’语句仅在源级别为 1.5 时可用”

    我正在编写一个 Java 代理 它使用参数化集合类型和增强的 for 循环 然后 Domino Designer 8 5 3 告诉我通过快速修复操作将项目的合规性级别更改为 1 5 如果我这样做 项目就会重建 并且不会发生任何变化 如果我转
  • Shopify.onItemAdded 更新#cart 和 cart.item.count

    我正在尝试在 Shopify 中制作一个 ajaxed 购物车 我已使产品页面将商品添加到购物车 而无需刷新或转到购物车页面 要查看购物车 您可以单击输入或带有 cart show 的链接 因此我将其添加到 添加到购物车 输入中