Ad

Shopify Toggle Cart Button Location

- 1 answer

I'm currently using the Shopify Buy Button.

For the most part, I just copy and pasted the embed code and didn't change much. If you scroll all the way down to "toggle":{, you'll notice I made it so iframe and sticky is set to false.


The Issue

When a product is added to a cart, a button that toggle's the shopping cart appears in the body. .shopify-buy-frame.shopify-buy-frame--toggle

It normally appears as a fixed div on the middle right hand corner of the screen but since my sticky option is set to false, it is placed at the bottom of the body.

I'd like to be able to assign a parent container that this toggle button ends up in. Ideally, I want to put it in my header somewhere and not have it be generated at the bottom of the body of my page.

For example:

<body>

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

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

Bonus Points if I can figure out how to generate a second toggle button for my mobile navigation area.

I've searched the default compenents and the developer section for the toggle options and can't seem to figure it out.

If anyone could help it would be greatly appreciated.


My Embed Code

<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>
Ad

Answer

You can use events option inside toggle config to define events you need. Use afterInit event to move toggle node in another place after initialization:

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

I assume that you can`t create two toggle components within a single Shopify embed. But you may operate on existing one using media queries in JS (i.e. enquire.js), so when your media query matches/unmatches, you move toggle button wherever you like in the DOM (i.e. inside mobile navigation area)

Ad
source: stackoverflow.com
Ad