Jump to content

RadicalRooster

Members
  • Posts

    1
  • Joined

  • Last visited

RadicalRooster's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hello everyone, I have an issue where an external iFrame I am loading using Javascript displays fine on iOS, Android and Windows, but doesn't display on Mac Chrome, Firefox or Edge. Using Chrome Inspector, I can see the reason why it doesn't display is because height is set to 0px. If you resize the browser window, the iFrame then displays, as if Chrome is nudged into resizing the iFrame. My thinking is to force the iFrame's height, that way it will be displayed no matter what. I am fairly new to JS, so could someone recommend what that code might look like? Below is my code (a Shopify Buy Button): <div id='product-component-[product component]'></div> <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(); } 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: 'golden-moments-usa.myshopify.com', storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '[product id]', node: document.getElementById('product-component-[product component]'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(25% - 20px)", "margin-left": "20px", "margin-bottom": "50px" }, "text-align": "left" }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "width": "100%", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" }, "price": { "font-family": "Lato, serif", "font-weight": "700", "font-size": "20px", "color": "#4d4d4d" }, "compareAt": { "font-family": "Lato, serif", "font-weight": "bold", "color": "#0b1c51" } }, "contents": { "img": false, "button": false, "buttonWithQuantity": false, "title": false, "options": false, "price": true }, "googleFonts": [ "Lato" ] }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": false, "button": true, "buttonWithQuantity": false }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#ed2a47" }, "background-color": "#0b1c51", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" } }, "text": { "button": "Add to cart" } }, "cart": { "styles": { "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px" } }, "text": { "total": "Subtotal" }, "contents": { "note": true } }, "toggle": { "styles": { "toggle": { "font-family": "Lato, sans-serif", "background-color": "#ed2a47", ":hover": { "background-color": "#a81f33" }, ":focus": { "background-color": "#13308a" } }, "count": { "font-size": "14px", "color": "#ffffff", ":hover": { "color": "#c8ad76" } }, "iconPath": { "fill": "#ffffff" } } } }, }); }); } })(); /*]]>*/ </script> Below is the resulting iFrame rendered in browser: <iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe> Below is the full code as it's rendered in browser: <div class="collection-price-div"><div class="additionalprice w-embed w-script"><div id="product-component-1840729411716" class="shopify-buy-frame shopify-buy-frame--product shopify-buy__layout-vertical" style="max-width: 280px;"><iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe></div> <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(); } 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: 'golden-moments-usa.myshopify.com', storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '4840729411716', node: document.getElementById('product-component-1840729411716'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(25% - 20px)", "margin-left": "20px", "margin-bottom": "50px" }, "text-align": "left" }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "width": "100%", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" }, "price": { "font-family": "Lato, serif", "font-weight": "700", "font-size": "20px", "color": "#4d4d4d" }, "compareAt": { "font-family": "Lato, serif", "font-weight": "bold", "color": "#0b1c51" } }, "contents": { "img": false, "button": false, "buttonWithQuantity": false, "title": false, "options": false, "price": true }, "googleFonts": [ "Lato" ] }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": false, "button": true, "buttonWithQuantity": false }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#ed2a47" }, "background-color": "#0b1c51", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" } }, "text": { "button": "Add to cart" } }, "cart": { "styles": { "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px" } }, "text": { "total": "Subtotal" }, "contents": { "note": true } }, "toggle": { "styles": { "toggle": { "font-family": "Lato, sans-serif", "background-color": "#ed2a47", ":hover": { "background-color": "#a81f33" }, ":focus": { "background-color": "#13308a" } }, "count": { "font-size": "14px", "color": "#ffffff", ":hover": { "color": "#c8ad76" } }, "iconPath": { "fill": "#ffffff" } } } }, }); }); } })(); /*]]>*/ </script></div></div> Many thanks
×
×
  • Create New...