shopify 相关问题

Shopify是一个用于创建电子商务网站和其他动态网站的在线平台。

Shopify 自定义应用程序 Webhook 和元字段

我们需要复制现有的 Shopify 自定义应用程序。我们无权访问密钥,因此需要重建/重新定义 网络钩子 元字段/元对象 再生能力

回答 1 投票 0

初始化 Shopify Hydrogen 项目时出错:ENOENT 没有此类文件或目录

我正在尝试通过参考shopify的文档在我的Windows计算机上使用Shopify CLI初始化一个新的Shopify Hydrogen项目。但是,我不断遇到与文件路径相关的错误...

回答 1 投票 0

如何在 Shopify 块架构中创建带有变量的动态链接?

我正在尝试使用 Liquid 中的架构在 Shopify 块中创建指向应用程序设置的链接。我想在 URL 中包含动态变量,例如 shop.domain 和 block.id。 这是我的代码: {% 方案...

回答 1 投票 0

启动新应用程序命令挂起,不抛出任何错误

我在节点 22.11.0 上使用 NPM 10.9.0 和 Shopify CLI 3.70.0。 该屏幕截图是 Shopify 应用程序初始化未完成的情况。每次我以不同的方式重试命令时,我都被困在那里超过 10 分钟......

回答 1 投票 0

如何在Shopify中创建“999买2”折扣?

嘿 Shopify 社区, 我尝试在我的 Shopify 商店中创建“999 买 2”折扣,但遇到了一些问题。我尝试过使用内置的“买 X,送 Y”discou...

回答 1 投票 0

如何在Shopify JS中强制重新加载和清理数据?

我已经尝试了几天来解决这个问题但无法解决。我需要重新加载我的页面并忘记某些函数中先前设置的值。我尝试了很多方法来做到这一点,但没有一个在我...

回答 1 投票 0

如何在liquid shopify中生成随机数?

如果逻辑包含日期对象,请注意,该值将是上次从模板生成页面时的当前时间,而不是在缓存或静态时将页面呈现给用户时的时间...

回答 4 投票 0

Shopify Storefront API如何将密钥传递给变体片段?

我的 Graphql 上生锈了我正在使用 Shopify 的 Storefront API 版本 2024-10 我有一个查询: 导出 const getProductQuery = /* GraphQL */ ` 查询 getProduct($handle: String!) { 产品(句柄:$...

回答 1 投票 0

Shopify API:创建促销活动?

使用 Shopify API,有没有办法为您的商店创建促销活动? 如果没有,是否有办法在 Shopify 中以编程方式创建促销活动? (不使用 CURL 向管理员发布帖子) 那...

回答 5 投票 0

Shopify:如何让新产品默认隐藏?

我有一个通过 MerchantOS 与 Lightspeed 连接的 Shopify 网站。 我需要通过 MerchantOS 添加的新产品在同步/创建时隐藏。 感谢所有帮助。

回答 2 投票 0

阻止销售商品中的附属代码和奖励代码

对于Shopify来说,使用Script Editor,是他们实现以下功能的代码: 一个自定义脚本,可阻止使用所有联盟代码和奖励代码(来自第 3 方应用程序的所有折扣代码)...

回答 1 投票 0

单击按钮时打开弹出窗口

我在 Flodesk 中制作了一个弹出表单,并在我网站的结束头标签之前安装了以下 Javascript 代码片段。 (函数(w,d,t,h,s,n){ w.FlodeskObject...</desc> <question vote="2"> <p>我在 Flodesk 中制作了一个弹出表单,并在我网站的结束 head 标签之前安装了以下 Javascript 代码片段。</p> <pre><code>&lt;script&gt; (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n].q = w[n].q || []).push(arguments); }; w[n] = w[n] || fn; var f = d.getElementsByTagName(t)[0]; var v = &#39;?v=&#39; + Math.floor(new Date().getTime() / (120 * 1000)) * 60; var sm = d.createElement(t); sm.async = true; sm.type = &#39;module&#39;; sm.src = h + s + &#39;.mjs&#39; + v; f.parentNode.insertBefore(sm, f); var sn = d.createElement(t); sn.async = true; sn.noModule = true; sn.src = h + s + &#39;.js&#39; + v; f.parentNode.insertBefore(sn, f); })(window, document, &#39;script&#39;, &#39;https://assets.flodesk.com&#39;, &#39;/universal&#39;, &#39;fd&#39;); &lt;/script&gt; &lt;script&gt; window.fd(&#39;form&#39;, { formId: &#39;615edb53f88d548e68f5c863&#39; }); &lt;/script&gt; </code></pre> <p>目前,我的弹出表单会在页面加载时自动打开。我希望它在单击按钮时打开。请问我有什么办法可以做到这一点吗?谢谢!</p> </question> <answer tick="true" vote="0"> <p>看起来像</p> <pre><code>window.fd(&#39;form&#39;, { formId: &#39;615edb53f88d548e68f5c863&#39; }); </code></pre> <p>打开模式,因此您可以在单击按钮时使用函数调用它。示例:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;script&gt; (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n].q = w[n].q || []).push(arguments); }; w[n] = w[n] || fn; var f = d.getElementsByTagName(t)[0]; var v = &#39;?v=&#39; + Math.floor(new Date().getTime() / (120 * 1000)) * 60; var sm = d.createElement(t); sm.async = true; sm.type = &#39;module&#39;; sm.src = h + s + &#39;.mjs&#39; + v; f.parentNode.insertBefore(sm, f); var sn = d.createElement(t); sn.async = true; sn.noModule = true; sn.src = h + s + &#39;.js&#39; + v; f.parentNode.insertBefore(sn, f); })(window, document, &#39;script&#39;, &#39;https://assets.flodesk.com&#39;, &#39;/universal&#39;, &#39;fd&#39;); &lt;/script&gt; &lt;script&gt; function openModal() { window.fd(&#39;form&#39;, { formId: &#39;615edb53f88d548e68f5c863&#39; }); } &lt;/script&gt; &lt;button onclick=&#34;openModal()&#34;&gt;Open Modal&lt;/button&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>对于所有寻找简单解决方案的人来说,这就是。</p> <pre><code> function openModal() { var pu = document.getElementsByClassName(&#39;fd-focus-visible-applied&#39;); var modal = pu[0].getElementsByClassName(&#39;fd-modal&#39;); modal[0].classList.add(&#39;fd-is-open&#39;); } </code></pre> </answer> </body></html>

回答 0 投票 0

Shopify:将值从非 Shopify 网站传递到 Shopify Checkout 并获取 URL

我有一个带有购物车的静态(非 Shopify)HTML 和 JS 网站,其功能是使用 JS 和 Jquery 执行的。我需要将我的购物车值传递给 Shopify 并直接引导用户...

回答 2 投票 0

通过 GraphQL API 将产品同步到 Shopify 时,如何检索类别元字段值的 GID?

我正在开发一个产品同步系统,通过 Shopify GraphQL API 将产品从我的后端系统上传到 Shopify。我可以使用标准元字段创建产品,但我也想使用类别...

回答 1 投票 0

Shopify 自定义动画 css 仅适用于 ios 设备,但适用于网络和 Android 设备

Shopify 自定义动画 css 仅适用于 ios 设备,但适用于网络和 Android 设备。 我的 Shopify 代码: {{“MyLandAnimation.css”|资产网址 |样式表标签}} Shopify 自定义动画 css 仅适用于 ios 设备,但适用于网络和 Android 设备。 我的 Shopify 代码: {{ "MyLandAnimation.css" | asset_url | stylesheet_tag }} <div class="myContainer"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <g id="path-1"> <path d="M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306z" class="hair hair-main"></path> </g> <g id="path-2"> <path d="M0 12s-12.8 3-13.9-12c0 0 14.2-1.8 13.9 12z" class="leaf-2" /> <path d="M0 12s-12.8 3-13.9-12c0 0 3.9 2.9 7 5.6a71.5 71.5 0 0 1 6.9 6.4z" class="leaf-1" /> </g> <g id="path-3"> <path d="M24 12s-5.3 9.3-14.8 1.5c0 0 6.8-9.4 14.8-1.5z" class="leaf-4" /> <path d="M24 12s-5.3 9.3-14.8 1.5c0 0 3.8-.7 7.2-1a57.3 57.3 0 0 1 7.6-.5z" class="leaf-3" /> </g> </defs> <use xlink:href="#path-1" x="0" y="0" /> <g transform="translate(300, 0) scale(-1, 1) translate(-300, 0)"> <use xlink:href="#path-1" x="0" y="0" /> </g> <g transform="translate(195, 233) scale(-1,1) translate(-195, -233)"> <g> <use href="#path-2" x="195" y="235" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="6,185, 233" dur=".75s" begin="anim1.end" /> </g> </g> <g transform="translate(195, 233) scale(-1,-1) translate(-195, -233)"> <g> <use href="#path-2" x="195" y="233" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="2,185, 233" dur=".75s" begin="anim1.end" /> </g> </g> <g> <use href="#path-2" x="410" y="235" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,400, 235" to="-12,400, 235" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 235" to="2,400, 235" dur=".75s" begin="anim1.end" /> </g> <g transform="translate(410, 233) scale(1,-1) translate(-410, -233)"> <g> <use href="#path-2" x="410" y="233" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,400, 233" to="-12,400, 233" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 233" to="6,400, 233" dur=".75s" begin="anim1.end" /> </g> </g> <use xlink:href="#path-3" x="174" y="222" /> <use xlink:href="#path-3" x="398" y="222" /> <path class="text" fill-rule="evenodd" transform="translate(220, 215)" d="M 0 0.361 L 0 30.871 L 9.855 30.871 L 9.855 30.016 C 9.855 18.946 1.98 24.526 1.17 4.006 C 2.056 6.842 2.288 7.409 3.542 11.639 A 493.23 493.23 0 0 1 3.6 11.836 A 8.942 8.942 0 0 0 4.473 13.833 C 7.457 18.82 14.04 17.572 14.04 24.391 L 15.165 24.391 C 15.165 16.786 23.355 19.216 25.605 11.836 C 26.865 7.516 27.09 6.886 27.945 4.141 A 65.034 65.034 0 0 1 27.695 7.873 C 26.135 23.857 19.35 19.681 19.35 30.016 L 19.35 30.871 L 29.205 30.871 L 29.205 0.361 L 28.035 0.361 A 34.377 34.377 0 0 0 24.001 0.569 C 20.661 0.999 18.298 2.315 16.98 6.369 A 15.409 15.409 0 0 0 16.875 6.706 C 15.66 10.846 15.795 10.171 14.805 13.726 C 14.715 14.041 14.625 14.356 14.58 14.671 L 14.355 13.726 C 13.41 10.171 13.545 10.846 12.285 6.706 C 10.583 0.935 6.889 0.411 1.415 0.365 A 167.965 167.965 0 0 0 0 0.361 Z M 135.63 6.526 L 134.46 6.526 A 35.99 35.99 0 0 0 134.346 7.769 C 133.897 13.889 135.514 16.085 138.723 16.315 A 8.367 8.367 0 0 0 139.32 16.336 A 4.994 4.994 0 0 0 140.784 16.135 C 144.313 15.059 143.658 9.941 145.231 8.15 A 1.741 1.741 0 0 1 146.07 7.606 A 4.518 4.518 0 0 1 146.736 7.465 C 149.117 7.161 150.212 9.442 149.22 16.921 A 26.765 26.765 0 0 0 147.152 16.77 A 47.213 47.213 0 0 0 145.395 16.741 A 32.262 32.262 0 0 0 141.156 16.994 C 138.166 17.393 135.999 18.257 134.635 19.565 A 5.736 5.736 0 0 0 132.885 23.896 C 132.885 28.254 136.108 30.742 143.152 31.024 A 34.774 34.774 0 0 0 144.54 31.051 C 148.32 31.051 149.49 29.836 149.76 28.126 A 6.217 6.217 0 0 0 151.367 29.87 C 155.008 32.515 160.871 30.217 163.973 27.053 A 10.155 10.155 0 0 0 164.835 26.056 L 164.16 25.336 A 6.91 6.91 0 0 1 163.822 25.652 C 162.611 26.711 161.388 26.967 160.365 26.287 A 2.751 2.751 0 0 1 160.065 26.056 A 3.985 3.985 0 0 1 158.755 23.415 C 158.582 22.068 158.795 20.403 159.12 18.406 C 160.017 12.806 157.622 8.38 152.687 6.818 A 14.008 14.008 0 0 0 148.455 6.211 C 143.546 6.211 140.743 9.126 138.048 9.426 A 3.955 3.955 0 0 1 137.61 9.451 C 136.27 9.451 135.736 8.424 135.645 7 A 7.425 7.425 0 0 1 135.63 6.526 Z M 66.15 11.161 L 66.87 11.881 A 6.443 6.443 0 0 1 67.397 11.407 C 68.632 10.417 69.902 10.255 70.965 11.161 A 3.985 3.985 0 0 1 72.275 13.801 C 72.448 15.149 72.235 16.813 71.91 18.811 A 14.909 14.909 0 0 0 71.729 20.625 C 71.557 25.335 73.847 28.999 78.22 30.415 A 14.117 14.117 0 0 0 82.575 31.051 C 93.093 31.051 97.615 13.463 95.313 7.484 A 4.417 4.417 0 0 0 94.815 6.526 L 81.765 6.526 A 8.964 8.964 0 0 1 84.476 8.909 C 88.601 14.114 90.358 24.562 87.09 28.224 A 3.809 3.809 0 0 1 84.375 29.521 A 4.05 4.05 0 0 1 84.112 29.53 C 82.198 29.53 80.668 28.013 81.872 19.576 A 65.651 65.651 0 0 1 81.945 19.081 C 82.393 16.048 82.735 13.068 81.921 10.606 A 7.012 7.012 0 0 0 80.82 8.506 C 77.338 4.163 70.535 6.646 67.07 10.114 A 10.413 10.413 0 0 0 66.15 11.161 Z M 44.46 6.526 L 44.46 30.871 L 54.315 30.871 L 54.225 11.071 A 7.005 7.005 0 0 1 54.295 10.023 C 54.455 8.979 54.903 8.323 55.8 8.461 A 1.718 1.718 0 0 1 57.031 9.403 C 58.274 11.507 58.206 16.336 62.91 16.336 C 66.565 16.336 68.658 14.199 68.445 7.493 A 34.164 34.164 0 0 0 68.4 6.526 L 67.23 6.526 C 67.23 8.085 66.796 9.29 65.52 9.436 A 2.373 2.373 0 0 1 65.25 9.451 A 1.888 1.888 0 0 1 64.483 9.296 C 62.998 8.651 62.53 6.211 57.96 6.211 A 5.975 5.975 0 0 0 56.408 6.408 C 53.95 7.064 52.693 9.159 50.43 9.768 A 4.815 4.815 0 0 1 50.04 9.856 C 47.831 10.257 46.017 10.05 45.652 7.538 A 7.059 7.059 0 0 1 45.585 6.526 L 44.46 6.526 Z M 106.02 19.891 C 122.22 15.931 121.86 6.211 109.98 6.211 A 15.626 15.626 0 0 0 103.589 7.486 C 99.198 9.445 96.525 13.515 96.525 18.676 A 12.482 12.482 0 0 0 98.658 25.877 C 100.286 28.226 102.777 29.918 105.89 30.7 A 16.776 16.776 0 0 0 109.98 31.186 C 116.312 31.186 119.211 29.219 122.641 25.464 A 60.933 60.933 0 0 0 123.48 24.526 A 22.275 22.275 0 0 1 123.122 24.153 C 122.965 23.989 122.802 23.822 122.625 23.671 A 15.953 15.953 0 0 1 120.397 25.734 C 116.143 28.925 111.677 28.037 107.444 22.086 A 28.245 28.245 0 0 1 106.605 20.836 A 8.787 8.787 0 0 1 106.156 20.127 A 40.578 40.578 0 0 1 106.02 19.891 Z M 121.32 0.361 L 121.32 30.871 L 131.175 30.871 L 131.175 7.606 A 4.191 4.191 0 0 0 131.015 6.393 C 129.83 2.464 122.445 6.114 122.445 0.361 L 121.32 0.361 Z M 31.905 30.871 L 41.76 30.871 L 41.76 15.391 A 4.059 4.059 0 0 0 41.595 14.178 C 41.047 12.424 39.224 12.181 37.406 11.938 A 44.129 44.129 0 0 1 36.675 11.836 C 34.11 11.431 32.625 10.666 31.905 9.721 L 31.905 30.871 Z M 42.615 5.401 C 42.615 2.206 40.32 0.001 36.855 0.001 A 6.683 6.683 0 0 0 34.139 0.538 C 32.303 1.35 31.17 3.029 31.099 5.184 A 6.57 6.57 0 0 0 31.095 5.401 A 5.336 5.336 0 0 0 32.041 8.532 C 32.732 9.505 33.774 10.209 35.075 10.541 A 7.187 7.187 0 0 0 36.855 10.756 A 6.717 6.717 0 0 0 39.539 10.233 C 41.448 9.405 42.606 7.654 42.615 5.427 A 6.457 6.457 0 0 0 42.615 5.401 Z M 149.085 17.956 L 149.085 18.136 A 40.201 40.201 0 0 0 148.631 22.085 A 29.08 29.08 0 0 0 148.59 22.996 C 148.59 25.437 148.875 28.164 148.178 29.085 A 0.81 0.81 0 0 1 147.87 29.341 A 2.365 2.365 0 0 1 146.938 29.588 C 145.495 29.653 143.992 28.265 142.683 25.1 A 21.268 21.268 0 0 1 142.56 24.796 C 141.779 22.871 141.569 21.171 141.939 19.953 A 2.571 2.571 0 0 1 143.28 18.316 A 4.424 4.424 0 0 1 144.26 17.978 C 145.274 17.744 146.58 17.713 147.986 17.834 A 22.952 22.952 0 0 1 149.085 17.956 Z M 110.327 12.283 A 6.228 6.228 0 0 0 109.845 11.341 C 107.955 8.281 105.255 7.471 103.545 8.551 A 2.454 2.454 0 0 0 102.565 9.738 C 101.982 11.225 102.615 13.53 104.045 16.394 A 44.538 44.538 0 0 0 105.435 18.946 A 8.263 8.263 0 0 0 108.577 17.624 C 110.303 16.391 111.221 14.494 110.327 12.283 Z" /> <path d="M290.1 137.5s2.5 12.9-.5 22.4a1.7 1.7 0 0 0 .6 1.9 14 14 0 0 0 16.7 0v-.1a1.6 1.6 0 0 0 .7-1.7 47.4 47.4 0 0 1 0-22.5l-10.3-5.8z" class="face" /> <path d="M290.7 138.5a21 21 0 0 0 19.3-1c20.3-13 23-36.6 21.7-48.8-1.7-15.3-5.9-18-11.7-25.2s-14.1-12.3-23-12.9a12.2 12.2 0 0 0-7.9 1.7c-1 .7-1.7 2-2.8 2.7-26.7 14-31.5 65 4.4 83.5z" class="face" /> <path d="M333.1 93.8a100.2 100.2 0 0 1-.5 9.7c-4.5-5.9-1.5-11.7-4.9-25.3a18.2 18.2 0 0 0-9.6-12.4c-4.6-2.6-9.9-4-14-7.1a21 21 0 0 1-2.3-2 13.2 13.2 0 0 1-3.2-5 9.2 9.2 0 0 1-.5-2.3h4.3a23.6 23.6 0 0 1 14.8 5.5 35 35 0 0 1 6.9 7.5l.5.7c5.2 8 8.5 18.8 8.5 30.7z" class="hair" /> <path d="M299.5 48.8a8.3 8.3 0 0 1-.5 2.3 12.7 12.7 0 0 1-2.7 4.3 22 22 0 0 1-2.9 2.5 36.7 36.7 0 0 1-7.8 4.1c-6.6 2.8-13.5 5.4-15.9 15-3.3 13.3-.3 19-4.9 24.7l-.2-2q-.3-3.6-.3-7.3a53.5 53.5 0 0 1 10.5-32.7 31.3 31.3 0 0 1 9-7.7 23.3 23.3 0 0 1 11.5-3.1z" class="hair" /> <g class="heart"> <path d="M402.5 131s-13.6-20-2.6-23.1c6-1.7 8.9 7.9 8.9 7.9s8.1-5.5 11.8-.1c6.5 9.5-18 15.3-18 15.3z" /> <path d="M401.6 95.7s-9.6-8.9-4.2-11.8c3-1.6 5.7 3 5.7 3s3.6-3.8 6.2-1.4c4.5 4.2-7.7 10.2-7.7 10.2z" /> <path d="M426.3 106.1s-3.4-6.2 0-6.8c1.7-.3 2.3 2.6 2.3 2.6s2.5-1.4 3.4.3c1.6 3-5.7 4-5.7 4z" /> <path d="M196 131s13.7-20 2.7-23.1c-6-1.7-9 7.9-9 7.9s-8-5.5-11.8-.1C171.4 125.2 196 131 196 131z" /> <path d="M197 95.7s9.5-8.9 4.1-11.8c-3-1.6-5.6 3-5.6 3s-3.6-3.8-6.2-1.4c-4.6 4.2 7.6 10.2 7.6 10.2z" /> <path d="M172.2 106.1s3.4-6.2.1-6.8c-1.8-.3-2.4 2.6-2.4 2.6s-2.5-1.4-3.4.3c-1.6 3 5.7 4 5.7 4z" /> </g> <path d="M262 53.2a.3.3 0 0 1-.2 0 .4.4 0 0 1 0-.6 54.3 54.3 0 0 1 10.4-7.6c6-3.4 15.4-7.4 26.6-7a55.7 55.7 0 0 1 25.9 7.2 43.2 43.2 0 0 1 9 6.7.4.4 0 0 1 0 .6.4.4 0 0 1-.5 0 43 43 0 0 0-9-6.7 55 55 0 0 0-25.5-7.1c-11-.4-20.2 3.5-26.1 7a54 54 0 0 0-10.3 7.4.4.4 0 0 1-.2.1z" class="leaf-3" /> <path d="M300.3 38.2c.1-1.8-.1-5.3-3.6-6.6a2 2 0 0 0-2.7 2c0 1.8.9 4.2 4.3 5.4-1.8-.2-4.7.1-6.2 3a2 2 0 0 0 1.8 3 5.6 5.6 0 0 0 5.5-3.6 5.6 5.6 0 0 0 3 5.7 2 2 0 0 0 3-1.8 5.7 5.7 0 0 0-3.9-5.7c4 .3 5.6-1.7 6.4-3.5a2 2 0 0 0-1.8-2.7c-3.7 0-5.2 3-5.8 4.8z" class="flower-1" transform-origin="300 38" transform="scale(1.5)" /> <path d="M300.8 38.2c1-1.5 2.7-4.5.4-7.5a2 2 0 0 0-3.3.2c-.9 1.6-1.5 4.1.8 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.7 5.7 0 0 0 6.6 0 5.6 5.6 0 0 0-.5 6.4 2 2 0 0 0 3.4.2 5.6 5.6 0 0 0-.3-7c3.2 2.4 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6-.2-7.5 1z" class="flower-2" transform-origin="300 38" transform="scale(1.5)" /> <path d="M335.4 48.8c1-1.5 2.7-4.5.4-7.5a2 2 0 0 0-3.3.2c-1 1.6-1.5 4.1.8 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.6 5.6 0 0 0 6.5 0 5.6 5.6 0 0 0-.4 6.4 2 2 0 0 0 3.4.1 5.6 5.6 0 0 0-.3-6.9c3.2 2.3 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6.1-.2-7.5 1z" class="flower-1" transform-origin="335 48" transform="scale(1.35)" /> <path d="M334.8 48.5c0-1.9-.6-5.3-4.2-6.3a2 2 0 0 0-2.5 2.2c.2 1.8 1.2 4.2 4.8 5-1.9 0-4.7.6-6 3.7a2 2 0 0 0 2 2.7 5.6 5.6 0 0 0 5.3-4 5.6 5.6 0 0 0 3.5 5.4 2 2 0 0 0 2.8-2 5.7 5.7 0 0 0-4.4-5.3c4-.1 5.4-2.3 6-4.1a2 2 0 0 0-2-2.6c-3.7.3-5 3.5-5.3 5.3z" class="flower-2" transform-origin="335 48" transform="scale(1.35)" /> <path d="M265.8 48.8c1.1-1.5 2.7-4.5.5-7.5a2 2 0 0 0-3.3.2c-1 1.6-1.6 4.1.7 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.6 5.6 0 0 0 6.6 0 5.6 5.6 0 0 0-.5 6.4 2 2 0 0 0 3.5.1 5.6 5.6 0 0 0-.4-6.9c3.2 2.3 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6-.2-7.5 1z" class="flower-1" transform-origin="265 48" transform="scale(1.35)" /> <path d="M266 49.6c2-.4 5.2-1.5 5.6-5.2a2 2 0 0 0-2.6-2.1c-1.8.5-3.9 2-4.2 5.6-.3-1.9-1.3-4.6-4.5-5.3A2 2 0 0 0 258 45a5.6 5.6 0 0 0 4.9 4.5 5.6 5.6 0 0 0-4.8 4.4 2 2 0 0 0 2.4 2.4 5.7 5.7 0 0 0 4.6-5.2c.7 3.8 3.1 5 5 5.3a2 2 0 0 0 2.3-2.5c-1-3.6-4.4-4.3-6.2-4.3z" class="flower-2" transform-origin="265 48" transform="scale(1.35)" /> <g> <path d="M340 69.1s2-12.3 15.6-7.8c0 0-3.6 13.1-15.6 7.8z" class="leaf-2" /> <path d="M340 69.1s2-12.3 15.6-7.8c0 0-4 2.4-7.5 4.1a70.2 70.2 0 0 1-8.1 3.7z" class="leaf-1" /> </g> <g> <path d="M340.2 71.9s6.4-3.5 9.1 4.3c0 0-7.3 3-9-4.3z" class="leaf-4" /> <path d="M340.2 71.9s6.4-3.5 9.1 4.3c0 0-2.5-1-4.5-2a41.4 41.4 0 0 1-4.6-2.3z" class="leaf-3" /> </g> <g> <path d="M259.8 69.1s-2-12.3-15.6-7.8c0 0 3.6 13.1 15.6 7.8z" class="leaf-2" /> <path d="M259.8 69.1s-2-12.3-15.6-7.8c0 0 4 2.4 7.5 4.1a70.3 70.3 0 0 0 8.1 3.7z" class="leaf-1" /> </g> <g> <path d="M259.6 71.9s-6.3-3.5-9 4.3c0 0 7.2 3 9-4.3z" class="leaf-4" /> <path d="M259.6 71.9s-6.3-3.5-9 4.3l4.5-2a39.6 39.6 0 0 0 4.5-2.3z" class="leaf-3" /> </g> </svg> </div> {% schema %} { "name": "My Land Animation", "settings": [], "presets": [ { "name": "My Land Animation" } ] } {% endschema %} 这是我的CSS: @keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } @-webkit-keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } @-o-keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } @-moz-keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } .hair-main { animation:hair-flow 0.75s infinite alternate ease-in-out; -webkit-animation:hair-flow 0.75s infinite alternate ease-in-out; -o-animation:hair-flow 0.75s infinite alternate ease-in-out; -moz-animation:hair-flow 0.75s infinite alternate ease-in-out; } 大家好 我目前面临 CSS 动画在 iOS 设备上无法按预期工作的问题。尽管使用关键帧实现标准 CSS 动画,但动画在 iPhone 和 iPad 上无法触发或无法流畅播放。 以下是有关我的设置的一些详细信息: 动画类型:我正在使用 CSS 关键帧来为 svg 头发设置动画。 测试的浏览器:我在 iOS 上的 Safari 上进行了测试。 使用的CSS属性:在代码中解释。 预期行为:动画应该在 IOS 设备(例如网络和 Android 设备)上播放。 当前行为:在 iOS 上,动画无法触发,头发没有上下波动。 我怀疑这可能与 iOS 对动画或特定 CSS 属性的处理有关。有其他人遇到过这个问题吗?您对故障排除或解决方案有什么建议吗?任何帮助将不胜感激! 我尝试使用 -webkit- 但仍然不起作用......顺便说一句,我只关注“头发”的动画 谢谢! 迄今为止(2024 年)webkit 无法通过 d 更改 presentation 属性 path()。 作为解决方法,您可以使用 SMIL 动画来代替 @keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } .hair-main2 { fill: red; animation: hair-flow 0.75s infinite alternate ease-in-out; } <h3>SVG SMIL animation</h3> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <g id="path-1"> <path d="" class="hair hair-main"> <animate attributeName="d" attributeType="XML" values="M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306; M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306; M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306" dur="1.5s" repeatCount="indefinite" keyTimes="0; 0.5; 1" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" calcMode="spline" fill="freeze" /> </path> </g> </defs> <use href="#path-1" x="0" y="0" /> <use href="#path-1" x="0" y="0" transform="translate(300, 0) scale(-1, 1) translate(-300, 0)" /> </svg> <h3>CSS animation (not working in webkit)</h3> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <path id="path" d="" class="hair hair-main2" /> </defs> <use href="#path" x="0" y="0" /> <use href="#path" x="0" y="0" transform="translate(300, 0) scale(-1, 1) translate(-300, 0)" /> </svg> 您可以在 <animate> 内嵌套 <path> 元素(或通过 href 属性引用它。 values:包含逗号分隔的d(路径数据)值数组。我们需要复制第一个值,因为 SMIL 没有像 CSS alternate 那样在每次迭代中来回播放动画的本机方法 repeatCount="indefinite"使动画无限循环 keyTimes="0; 0.5; 1"指定不同动画“关键帧”的时间 keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" calcMode="spline" 模拟 ease-in-out 缓动行为 另请参阅 SVG 动画指南 (SMIL)

回答 1 投票 0

将值从页面表单传递到 Shopify Liquid 中的 javascript

我在 Shopify 的页面模板中使用链接列表,我需要将其长度传递给 javascript 代码段。我不知道该怎么做。 页面模板包含这一行: {% 分配链接列表 =

回答 1 投票 0

如何编辑assets/notifications/styles.css?

请告诉我在哪里可以找到此文件:assets/notifications/styles.css(通知样式) 我在“主题”->“编辑 MyTheme 的代码”中看不到它。 我需要向其中添加样式但找不到...

回答 2 投票 0

错误:Shopify CLI 主题开发中超出了最大调用堆栈大小

我在 Shopify CLI 主题开发中遇到问题,收到错误“超出最大调用堆栈大小”。堆栈跟踪指向文件系统操作,特别是

回答 1 投票 0

在我的 Shopify 上安装了 Videowise 跟踪像素,但它没有触发

在 Shopify 商店上安装了 Videowise 跟踪像素。当我检查开发者网络选项卡时,我没有看到它触发像素。 Videowise 购物视频应用程序扩展已启用。 复制了

回答 1 投票 0

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.