В настоящее время я использую кнопку Buy Buy Buy.
По большей части я просто копировал и вставлял код для встраивания и не сильно менял. Если вы прокрутите весь путь до "toggle":{, вы заметите, что я сделал так: iframe и липкий установлен на false.
Проблема
Когда товар добавляется в корзину, кнопка, которая переключает корзину покупок, появляется в теле. .shopify-buy-frame.shopify-buy-frame--toggle
Обычно он отображается как фиксированный div в среднем правом углу экрана, но поскольку моя липкая опция установлена в false, она помещается внизу body.
Я хотел бы иметь возможность назначить родительский контейнер, в который входит эта кнопка переключения. В идеале я хочу помещать его в свой заголовок где-нибудь и не создавать его в нижней части тела моей страницы.
Например:
<body>
<header>
<div id="cart-toggle">
<!-- THIS IS WHERE I WANT IT TO APPEAR -->
</div>
<header>
<!-- THIS IS WHERE IT APPEARS -->
</body>
Бонусные очки, если я могу выяснить, как создать вторую кнопку переключения для моей мобильной навигационной области.
Я искал стандартные комманды и раздел разработчика для параметров переключения и не может показаться, что это понятно.
Если кто-то может помочь, это будет очень полезно.
Мой код для вставки
<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>