मैं वर्तमान में Shopify Buy Button का उपयोग कर रहा हूं।Shopify टॉगल कार्ट बटन स्थान
अधिकांश भाग के लिए, मैंने बस एम्बेड कोड कॉपी और पेस्ट किया और बहुत कुछ नहीं बदला। यदि आप "toggle":{ पर सभी तरह से स्क्रॉल करते हैं, तो आप देखेंगे कि मैंने इसे iframe और चिपचिपाfalse पर सेट किया गया है।
अंक
किसी उत्पाद के एक गाड़ी में जोड़ा जाता है, कि एक बटन को चालू खरीदारी की टोकरी शरीर में प्रकट होता है है। .shopify-buy-frame.shopify-buy-frame--toggle
यह सामान्य रूप से प्रकट होता है के रूप में एक स्क्रीन के बीच दाहिने हाथ कोने पर तय div लेकिन मेरे चिपचिपा विकल्प गलत पर सेट है के बाद से, यह 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
@ हिमन्ज़ मुझे पता है कि यह शैलियों को हटा देता है। ** किसी भी ** ** के साथ शैली क्या करना है? कृपया केवल मेरे प्रश्न से संबंधित जानकारी का योगदान दें। – bryan
सहमत .. लेकिन टिप्पणी का दूसरा भाग मेरे लिए एक समाधान की तरह दिखता है .. – HymnZ