Opening the cart drawer with own button

[sniepoort]

Is it possible to create custom button on our site that can trigger the cart to open?

[tanema]

You will have to setup your button to call ui.openCart() on your ShopifyBuy.UI instance.

[sniepoort]

And how exactly would I get a hold of the ui variable?

[tanema]

It is the exact same ui variable that is referenced in all of the docs. http://shopify.github.io/buy-button-js

[sniepoort]

I see. That is just not a variable that is accessible outside scope when having used the premade codesnippet from Shopify.

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: 'koishopper.myshopify.com',
          apiKey: '2d5bb08eaabf97e3f1a05637cb2ac3c0',
          appId: '6',
        });

        ShopifyBuy.UI.onReady(client).then(function (ui) {
          ui.createComponent('collection', {
            id: 409207441,
            node: document.getElementById('collection-component-723f407073e'),
            moneyFormat: '%7B%7Bamount%7D%7D%2C-',
            options: {

[tanema]

Yes that script snippet is supposed to be self contained to make sure anyone can copy and paste it and have it work. If you need something custom you will need to edit it.

[philmatt]

I too am looking for a <script> I can add to my pages that will allow me to trigger the Cart Drawer to open when a button is clicked. I had something similar with my HelpDesk widget.

This does not currently work, but here is what I am attempting:
I then would set the Button CSS Class to open-cart

-- Shopify Cart Open API --
script
function opensCart() { ui.openCart(); }
/script

-- Shopify Cart Open onclick() --
script
jQuery( document ).ready( function( $ ) { $( document ).on( 'click', '.open-cart', function( event ) { event.preventDefault() opensCart(); } ); } );
/script

[cinghaman]

if anyone else is also looking for a solution add this code inside
ShopifyBuy.UI.onReady(client).then(function (ui) { const button = document.querySelector('#clickCart'); button.addEventListener('click', (event) => { event.stopPropagation(); ui.openCart(); }); });

Works perfectly and my external button opens the cart drawer

[Alureber]

@cinghaman Hi, im wondering if i can integrate that on custom liquid, is that possible? do you have some steps how did you integrate that? Help me pleaseee. Thanks in advance