9
私は現在Shopify Buy Buttonを使用しています。Shopifyトグルカートボタンの位置
埋め込みコードをコピーして貼り付けただけで、あまり変更されませんでした。スクロールして"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>
ボーナスポイント私は私の携帯ナビゲーション領域のための第二トグルボタンを生成する方法を見つけ出すことができるかどうか。
私はdefault compenentsと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>
iframe：falseは、すべてのスタイルを削除することに言及しています。もう一つは、iframeの外側にある場合、プロキシを作成する新しい要素をこのカート要素にクリックして非表示にするカート要素ですか？ – HymnZ
@HymnZ私はそれがスタイルを削除することを知っています。スタイルは**何か**と何が関係していますか？私の質問に関連する情報のみを投稿してください。 – bryan
合意..しかし、コメントの2番目の部分は私のための解決策のように見えます.. – HymnZ