Shopify 切换购物车按钮位置

Question

我目前正在使用 Shopify Buy Button。

在大多数情况下，我只是复制并粘贴了嵌入代码，并没有做太多更改。如果你一直向下滚动到 "toggle":{，你会注意到我把 iframe 和 sticky 设置为 false.

问题

将产品添加到购物车后，body 中会出现一个用于切换购物车的按钮。 .shopify-buy-frame.shopify-buy-frame--toggle

它通常显示为屏幕右中角的固定 div 但由于我的 sticky 选项设置为 false，它被放置在body.

底部

我希望能够分配一个 parent 容器，这个切换按钮最终位于其中。理想情况下，我想将它放在我的 header 某个地方而不是生成它在我页面 body 的底部。

例如：

<body>

    <header>
        <div id="cart-toggle">
            <!-- THIS IS WHERE I WANT IT TO APPEAR -->
        </div>
    <header>

<!-- THIS IS WHERE IT APPEARS -->
</body>

奖励积分 如果我能弄清楚如何为我的移动导航区域生成第二个切换按钮。

我在 default compenents and the developer section 中搜索了切换选项，但似乎无法弄明白。

如果有人能提供帮助，我们将不胜感激。

我的嵌入代码

<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy){if(window.ShopifyBuy.UI){ShopifyBuyInit();}else{loadScript();}}else{loadScript();}f
  function loadScript() {var script = document.createElement('script');script.async = true;script.src = scriptURL;(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);script.onload = ShopifyBuyInit;}
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({domain: 'domain.myshopify.com',apiKey: 'apikey',appId: '0'});
    ShopifyBuy.UI.onReady(client).then(function(ui){ui.createComponent('product',{moneyFormat:'%24%7B%7Bamount%7D%7D',
        
  options:{
    "product":{
      "variantId":"all",
      "width":"240px",
      "contents":{
        "img":false,
        "imgWithCarousel":false,
        "title":false,
        "variantTitle":false,
        "price":false,
        "description":false,
        "buttonWithQuantity":false,
        "quantity":false
      },
      "text":{
        "button":"ADD TO BAG"
      },
      "styles":{
        "product":{
          "text-align":"left",
          "@media(min-width:601px)":{
            "max-width":"100%",
            "margin-left":"0",
            "margin-bottom":"50px"
          }
        },
        "button":{
          "background-color":"#393a39",
          "font-family":"Lato,sans-serif",
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px",
          "padding-left":"35px",
          "padding-right":"35px",
          ":hover":{
            "background-color":"#333433"
          },
          "border-radius":"0px",
          ":focus":{
            "background-color":"#333433"
          },
          "font-weight":"normal"
        },
        "title":{
          "font-size":"26px"
        },
        "price":{
          "font-size":"18px"
        },
        "quantityInput":{
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px"
        },
        "compareAt":{
          "font-size":"15px"
        }
      },
      "googleFonts":[
        "Lato"
      ]
    },
    "cart":{

      "contents":{
        "button":true
      },
      "text":{
        "title":"Bag"
      },
      "styles":{
        "button":{
          "background-color":"#393a39",
          "font-family":"Lato,sans-serif",
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px",
          ":hover":{
            "background-color":"#333433"
          },
          "border-radius":"0px",
          ":focus":{
            "background-color":"#333433"
          },
          "font-weight":"normal"
        },
        "footer":{
          "background-color":"#ffffff"
        }
      },
      "googleFonts":[
        "Lato"
      ]
    },
    "modalProduct":{
      "contents":{
        "img":false,
        "imgWithCarousel":true,
        "variantTitle":false,
        "buttonWithQuantity":true,
        "button":false,
        "quantity":false
      },
      "styles":{
        "product":{
          "@media(min-width:601px)":{
            "max-width":"100%",
            "margin-left":"0px",
            "margin-bottom":"0px"
          }
        },
        "button":{
          "background-color":"#393a39",
          "font-family":"Lato,sans-serif",
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px",
          "padding-left":"35px",
          "padding-right":"35px",
          ":hover":{
            "background-color":"#333433"
          },
          "border-radius":"0px",
          ":focus":{
            "background-color":"#333433"
          },
          "font-weight":"normal"
        },
        "quantityInput":{
          "font-size":"13px",
          "padding-top":"14.5px",
          "padding-bottom":"14.5px"
        }
      },
      "googleFonts":[
        "Lato"
      ]
    },
    "toggle": {
      "iframe":false,
      "sticky":false,
      "contents":{
        "icon":true,
        "title":false
      },
      "styles":{
        "toggle":{
          "font-family":"Lato,sans-serif",
          "background-color":"#393a39",
          ":hover":{
            "background-color":"#333433"
          },
          ":focus":{
            "background-color":"#333433"
          },
          "font-weight":"normal"
        },
        "count":{
          "font-size":"13px"
        }
      },
      "googleFonts":[
        "Lato"
      ]
    },
    "productSet":{
      "styles":{
        "products":{
          "@media(min-width:601px)":{
            "margin-left":"-20px"
          }
        }
      }
    }
  }
}
);});}
})();
/*]]>*/
</script>

Answer 1

您可以使用 toggle 配置中的 events 选项来定义您需要的事件。初始化后使用afterInit事件将切换节点移动到另一个地方：

toggle: {
    events: {
        afterInit: function (component) {
            document.getElementById('cart-toggle').appendChild(component.node);
        },
    }
}

我假设您不能在单个 Shopify 嵌入中创建两个 toggle 组件。但是您可以使用 JS 中的媒体查询（即 enquire.js）对现有的进行操作，因此当您的媒体查询 matches/unmatches 时，您可以将切换按钮移动到 DOM 中任何您喜欢的位置（即在移动设备中导航区）

Answer 2

阅读 GitHub：insert toggle in the dom #569

我需要做同样的事情。经过验证，它对我有用。您可以在任何地方放置 DIV 并使用您自己的 CSS 来设置样式。是的，记得把iframe和sticky设置为false。

Answer 3

令人惊讶的是，@radioSPARKS 发布的内容仍然有效，仍在 2021 年。下面是更清晰的完整代码和更多详细信息：

HTML:

<div id="shopify-toggle"></div>
<div id="shopify-product-component"></div>

Javascript:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    ...
    node: document.getElementById('shopify-product-component'),
    toggles: [{node: document.getElementById('shopify-toggle')}], // <== This is it: it replaces this element with the toggle
    options: {
      ...
      toggle: {
        iframe: false,
        sticky: false,
        ...
       }
       ...
     }
  });
});

Shopify 切换购物车按钮位置

Shopify Toggle Cart Button location

javascript

jquery

shopify

问题