liquid 相关问题

这是我的代码：在产品模板.液体中这是我的代码：在product-template.liquid <div class="product-form__controls-group"> <div class="product-form__item"> <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label> <div class="qty-box"> <span class="qty-btn qty-minus">-</span> <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" pattern="[0-9]*" class="product-form__input product-form__input--quantity" data-quantity-input > <span class="qty-btn qty-plus">+</span> </div> </div> </div> 在 qty.liquid 中，我将其包含在 theme.liquid 中 <style> .qty-btn { display: flex; cursor: pointer; border-top: 1px solid var(--color-border-form); border-bottom: 1px solid var(--color-border-form); background-color: var(--color-text-field); color: var(--color-text-field-text); border-radius: 2px; line-height: 1.2; height: 44px; width:30px; align-items: center; justify-content: center; } .qty-minus { border-left: 1px solid var(--color-border-form); } .qty-plus { border-right: 1px solid var(--color-border-form); } .qty-box { display: flex; } </style> <script> $('.qty-box .qty-btn').on('click', function(){ var qty = parseInt($(this).parent('.qty-box').find('.product-form__input').val()); if($(this).hasClass('qty-plus')) { qty++; }else { if(qty > 1) { qty--; } } qty = (isNaN(qty))?1:qty; $(this).parent('.qty-box').find('.product-form__input').val(qty); }); </script> 样式可以工作，jquery不行，但是我通过查看浏览器控制台看到jquery存在，控制台中也没有错误，我想我错过了一些简单的东西，出了什么问题？我从这里修改了解决方案https://community.shopify.com/c/Shopify-Design/Add-Quantity-Buttons-to-Debut-Theme/td-p/593001 原来我忽略了控制台中的“jQuery 未定义”，所以我自己包含了 jQuery 文件问题就解决了我仍然不太明白为什么我必须再次添加文件，因为我确信 jQuery 已经定义了（我通过登录控制台确认了这一点）我将为您提供添加带有加号和减号按钮的数量框的正确解决方案。只需打开要添加数量框的 product.liquid 或 cart.liquid 文件并添加以下代码即可。 <quantity-selector class="quantity-selector"> <button type="button" class="quantity-selector__button minus-btn" data-line-key="{{ line_item.key }}">{% render 'icon' with 'minus', width: 10, height: 2 %}</button> <input class="quantity-selector__input quantity-input" type="text" value="{{ line_item.quantity }}" data-line-key="{{ line_item.key }}" style="border: none"> <button type="button" class="quantity-selector__button plus-btn" data-line-key="{{ line_item.key }}">{% render 'icon' with 'plus', width: 10, height: 10 %}</button> </quantity-selector> 关于购物车/后端更新，我们必须在theme.js文件中添加Javascript代码。 document.querySelectorAll('.quantity-input').forEach(input => { input.addEventListener('change', updateQuantity); }); function updateQuantity(event) { const input = event.target; const lineKey = input.getAttribute('data-line-key'); const quantity = input.value; fetch(`/cart/change.js`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ id: lineKey, quantity: quantity }), }) .then(response => response.json()) .then(data => { // Update cart UI or reload page based on response location.reload(); }) .catch(error => { console.error('Error updating cart:', error); }); } document.querySelectorAll('.plus-btn').forEach(button => { button.addEventListener('click', function() { let _key = this.dataset.lineKey; let input = document.querySelector(`.quantity-input[data-line-key='${_key}']`) input.value = parseInt(input.value) + 1; input.dispatchEvent(new Event('change')); }); }); document.querySelectorAll('.minus-btn').forEach(button => { button.addEventListener('click', function() { let _key = this.dataset.lineKey; let input = document.querySelector(`.quantity-input[data-line-key='${_key}']`) input.value = parseInt(input.value) - 1; input.dispatchEvent(new Event('change')); }); });

jquery shopify liquid

回答 2 投票 0

如果满足条件，如何将一个项目设置为 Liquid for 循环中的第一个项目

我在 Liquid 中有一个 for 循环，它循环访问客户地址。我想做的是将已设置为默认地址（customer.default_address）的第一个地址设置为...

javascript shopify liquid

回答 2 投票 0

如何使此 Shopify 代码片段不那么冗长？

我正在学习Shopify开发。我想知道如何使这个代码片段不那么冗长，以遵循 DRY 规则。我使用特色图像呈现产品列表，并检查产品是否有第二张图像...

shopify liquid

回答 1 投票 0

如何在 Shopify 中对元对象进行分页？

我将元对象与元字段结合使用，在 Shopify 模板的产品页面中呈现一些特定信息。我目前面临的问题是通过...

pagination shopify liquid

回答 2 投票 0

检查集合元素的名称是否包含在集合元素或其任何子元素中

我有一个“文件夹”的集合。每个文件夹都有一个字符串数组，其中包括称为子文件夹的其他文件夹的名称。例如，文件夹结构可能如下所示：在这个

jekyll liquid

回答 1 投票 0

在 Liquid 标签调用中使用 Liquid 变量

我在 Liquid 中创建了一个自定义链接标签，我试图将 Liquid 变量传递到该标签的调用中，如下所示 {{ allocate id = 'something' }} // 这个值在循环时是实际动态的

ruby-on-rails-3 template-engine liquid

回答 6 投票 0

将数据与 Jekyll 中的帖子合并

我有一个目录_posts，用于存储文章。我还有一个数据文件 _data/teasers.yml，其中包含有关其他网站上发布的文章的信息。我试图避免重新发布内容...

ruby jekyll liquid

回答 1 投票 0

在twilio studio流程中访问json对象的值

在 twilio studio 流程中，我有一个 http 请求，它返回如下结构的 json： {“对象”：{“foo”：{“酒吧”：“测试”}}} 我想获取“bar&

twilio liquid twilio-studio liquid-template twilio-flow

回答 1 投票 0

如何在 Jekyll / Liquid for 循环中使用 page.id？

每个页面在 frontmatter 中都有一个 id： --- 标题：它是如何工作的布局：页面 id: 工作原理 --- ... 我有一个 _config.yml 文件：进度条：指数： - “第一个索引” - “第二个Inde...

for-loop jekyll liquid

回答 1 投票 0

面临边框对齐、内容对齐和边距问题

我的网站目前面临一些问题，该网站基于 Shopify 构建并包含自定义部分。我不完全确定我的代码中做错了什么，但存在三个主要问题......

html css shopify liquid

回答 2 投票 0

我对边框对齐、内容对齐和边距有疑问

我的网站目前面临一些问题，该网站基于 Shopify 构建并包含自定义部分。我不完全确定我的代码中做错了什么，但存在三个主要问题......

html css shopify liquid

回答 1 投票 0

如何解决 HTML 文件中 JavaScript 和 CSS 中与 Liquid 模板语言相关的 ESLint 解析器问题？

我在标签内使用带有 JavaScript 的 HTML 代码和 Shopify 的 Liquid 模板语言。我还在项目中安装了 ESLint。由于 L...</desc>，ESLint 给出了解析错误 <question vote="2"> <p>我在 <pre><code><script></code></pre> 标签内使用带有 JavaScript 的 HTML 代码和 Shopify 的 Liquid 模板语言。我还在项目中安装了 ESLint。由于 Liquid 语法，ESLint 给出了<strong>解析错误</strong>。我想知道是否有一个插件或解析器可以安装以包含 Liquid 语法（或忽略它）。我遇到了几种可能的解决方案，但它们对我的用例无效。我突出显示了其中一些。</p> <ul> <li>我不想禁用整个文件的 linting，因为其他 ESLint 规则对于 <pre><code><script></code></pre> 标签内的 JavaScript 代码很有价值</li> <li>我无法使用 Visual Studio Code（或其他编辑器）设置，因为我所在的团队使用不同的编辑器。</li> <li>有一些建议使用 ESLint 预处理器来忽略某些语法，但由于时间/复杂性，我更喜欢更简单的现成解决方案</li> <li>这是一个解析器错误，而不是可以禁用的 ESLint 规则</li> </ul> </question> <answer tick="false" vote="0"> <p>您可以尝试一下这个：<a href="https://github.com/Fire-/eslint-plugin-ignore-liquid" rel="nofollow noreferrer">https://github.com/Fire-/eslint-plugin-ignore-liquid</a></p> </answer> </body></html>

javascript html eslint liquid

回答 0 投票 0

Shopify 部分不显示背景图片

我有一个自定义的 Shopify 部分来显示某些产品。我无法显示背景图像。下面是液体文件部分中使用的 css 和 html。 .pimage1{背景图像...

css background shopify liquid

回答 1 投票 0

liquid 相关问题

最新问题