Shopify是一个用于创建电子商务网站和其他动态网站的在线平台。
我们需要复制现有的 Shopify 自定义应用程序。我们无权访问密钥,因此需要重建/重新定义 网络钩子 元字段/元对象 再生能力
初始化 Shopify Hydrogen 项目时出错:ENOENT 没有此类文件或目录
我正在尝试通过参考shopify的文档在我的Windows计算机上使用Shopify CLI初始化一个新的Shopify Hydrogen项目。但是,我不断遇到与文件路径相关的错误...
我正在尝试使用 Liquid 中的架构在 Shopify 块中创建指向应用程序设置的链接。我想在 URL 中包含动态变量,例如 shop.domain 和 block.id。 这是我的代码: {% 方案...
我在节点 22.11.0 上使用 NPM 10.9.0 和 Shopify CLI 3.70.0。 该屏幕截图是 Shopify 应用程序初始化未完成的情况。每次我以不同的方式重试命令时,我都被困在那里超过 10 分钟......
嘿 Shopify 社区, 我尝试在我的 Shopify 商店中创建“999 买 2”折扣,但遇到了一些问题。我尝试过使用内置的“买 X,送 Y”discou...
我已经尝试了几天来解决这个问题但无法解决。我需要重新加载我的页面并忘记某些函数中先前设置的值。我尝试了很多方法来做到这一点,但没有一个在我...
如果逻辑包含日期对象,请注意,该值将是上次从模板生成页面时的当前时间,而不是在缓存或静态时将页面呈现给用户时的时间...
Shopify Storefront API如何将密钥传递给变体片段?
我的 Graphql 上生锈了我正在使用 Shopify 的 Storefront API 版本 2024-10 我有一个查询: 导出 const getProductQuery = /* GraphQL */ ` 查询 getProduct($handle: String!) { 产品(句柄:$...
使用 Shopify API,有没有办法为您的商店创建促销活动? 如果没有,是否有办法在 Shopify 中以编程方式创建促销活动? (不使用 CURL 向管理员发布帖子) 那...
我有一个通过 MerchantOS 与 Lightspeed 连接的 Shopify 网站。 我需要通过 MerchantOS 添加的新产品在同步/创建时隐藏。 感谢所有帮助。
对于Shopify来说,使用Script Editor,是他们实现以下功能的代码: 一个自定义脚本,可阻止使用所有联盟代码和奖励代码(来自第 3 方应用程序的所有折扣代码)...
我在 Flodesk 中制作了一个弹出表单,并在我网站的结束头标签之前安装了以下 Javascript 代码片段。 (函数(w,d,t,h,s,n){ w.FlodeskObject...</desc> <question vote="2"> <p>我在 Flodesk 中制作了一个弹出表单,并在我网站的结束 head 标签之前安装了以下 Javascript 代码片段。</p> <pre><code><script> (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 = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60; var sm = d.createElement(t); sm.async = true; sm.type = 'module'; sm.src = h + s + '.mjs' + v; f.parentNode.insertBefore(sm, f); var sn = d.createElement(t); sn.async = true; sn.noModule = true; sn.src = h + s + '.js' + v; f.parentNode.insertBefore(sn, f); })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd'); </script> <script> window.fd('form', { formId: '615edb53f88d548e68f5c863' }); </script> </code></pre> <p>目前,我的弹出表单会在页面加载时自动打开。我希望它在单击按钮时打开。请问我有什么办法可以做到这一点吗?谢谢!</p> </question> <answer tick="true" vote="0"> <p>看起来像</p> <pre><code>window.fd('form', { formId: '615edb53f88d548e68f5c863' }); </code></pre> <p>打开模式,因此您可以在单击按钮时使用函数调用它。示例:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script> (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 = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60; var sm = d.createElement(t); sm.async = true; sm.type = 'module'; sm.src = h + s + '.mjs' + v; f.parentNode.insertBefore(sm, f); var sn = d.createElement(t); sn.async = true; sn.noModule = true; sn.src = h + s + '.js' + v; f.parentNode.insertBefore(sn, f); })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd'); </script> <script> function openModal() { window.fd('form', { formId: '615edb53f88d548e68f5c863' }); } </script> <button onclick="openModal()">Open Modal</button></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>对于所有寻找简单解决方案的人来说,这就是。</p> <pre><code> function openModal() { var pu = document.getElementsByClassName('fd-focus-visible-applied'); var modal = pu[0].getElementsByClassName('fd-modal'); modal[0].classList.add('fd-is-open'); } </code></pre> </answer> </body></html>
Shopify:将值从非 Shopify 网站传递到 Shopify Checkout 并获取 URL
我有一个带有购物车的静态(非 Shopify)HTML 和 JS 网站,其功能是使用 JS 和 Jquery 执行的。我需要将我的购物车值传递给 Shopify 并直接引导用户...
通过 GraphQL API 将产品同步到 Shopify 时,如何检索类别元字段值的 GID?
我正在开发一个产品同步系统,通过 Shopify GraphQL API 将产品从我的后端系统上传到 Shopify。我可以使用标准元字段创建产品,但我也想使用类别...
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)
将值从页面表单传递到 Shopify Liquid 中的 javascript
我在 Shopify 的页面模板中使用链接列表,我需要将其长度传递给 javascript 代码段。我不知道该怎么做。 页面模板包含这一行: {% 分配链接列表 =
如何编辑assets/notifications/styles.css?
请告诉我在哪里可以找到此文件:assets/notifications/styles.css(通知样式) 我在“主题”->“编辑 MyTheme 的代码”中看不到它。 我需要向其中添加样式但找不到...
错误:Shopify CLI 主题开发中超出了最大调用堆栈大小
我在 Shopify CLI 主题开发中遇到问题,收到错误“超出最大调用堆栈大小”。堆栈跟踪指向文件系统操作,特别是
在我的 Shopify 上安装了 Videowise 跟踪像素,但它没有触发
在 Shopify 商店上安装了 Videowise 跟踪像素。当我检查开发者网络选项卡时,我没有看到它触发像素。 Videowise 购物视频应用程序扩展已启用。 复制了