0

I like to set up a Shopify shop via a simple HTML/CSS/JS/PHP website structure, where I include the highly customizable Shopify Buy Button JS library.

I followed the tutorial, and everything is set up correctly, as I can fetch and display all my products, which I have set up via the Shopify dashboard.

The default styles and iFrames of the Shopify UI elements (cart, drawer, buy-button, etc.) do not match the style and UX of my website, therefore I want to customize them via css. I deactivated the iFrames of most elements via the directive "iframe: false", and this works properly.

I also want to create a customized toggle button, that opens the cart (instead of the classic toggle button form Shopify, that is fixed to the middle of the right side of the screen).

The weird thing is, I'm not able to open the cart via ui.openCart(), as mentioned in the docs. I'm able to open the cart via ui.openCart() when I do it with a setTimout (3s), but I'm not able to do so via a jQuery click event. What am I doing wrong?

My code so far:

<script src="//sdks.shopifycdn.com/buy-button/1.0.0/buybutton.js"></script>
<script>
var client = ShopifyBuy.buildClient({
  domain: 'domain.myshopify.com',
  storefrontAccessToken: '2b3xxxxxxxxjh5', // previously apiKey, now deprecated
});

ui = ShopifyBuy.UI.init(client);

ui.createComponent('product', {
  id: 23xxxxxx56,
  node: document.getElementById('my-product'),
  options: {
    "product": {
      "iframe": false
    },
    toggle: {
      "iframe": false
    }
  }
});

// -- this does not work --
$('#shoppingCartDropdownInvoker').click(function(){
  ui.openCart();
});

// -- this does work --
setTimeout(function(){
  ui.openCart();
}, 3000);
</script>

The code for #shoppingCartDropdownInvoker is:

<a id="shoppingCartDropdownInvoker" class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button">
  <span class="fas fa-shopping-cart btn-icon__inner"></span>
</a>
John Brunner
  • 2,672
  • 9
  • 42
  • 79
  • post the html of shoppingCartDropdownInvoker –  Dec 14 '19 at 11:42
  • My first guess would be: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Andreas Dec 14 '19 at 11:42
  • @Unknown I've updated the question with the HTML code of ’shoppingCartDropdownInvoker’ – John Brunner Dec 14 '19 at 11:50
  • I have copy/pasted your code and it works fine for me, check if there is an error in developer tools when you click on the link –  Dec 14 '19 at 11:55
  • @Unknown Thank you for trying. I also tried my above code in a new plain HTML file, but it does not work either. That's really strange. I also tried this with a different browser. – John Brunner Dec 14 '19 at 12:05
  • is there an error in developer tools? –  Dec 14 '19 at 12:09
  • @Unknown no, nothing. When I insert a console.log("click"); statement, this works fine. I also tried the above code (and a plain HTML file) with a basic 'javascript click handler', instead of 'jQuery', but this does not work either. I'm running this thing with XAMPP on localhost. – John Brunner Dec 14 '19 at 12:11
  • hmm.. try adding console.log(ui) to the click handler to see what functions can be called on UI, I cannot find the openCart function in the documentation from a quick look –  Dec 14 '19 at 12:17
  • @Unknown The strange thing is that it works perfectly with the 'setTimeout' function – John Brunner Dec 14 '19 at 12:24

1 Answers1

1

You need to stop the event from bubbling up the chain. Add event.stopPropagation as shown

$('#shoppingCartDropdownInvoker').click(function(event){
  event.stopPropagation();
  ui.openCart();
});
Michael Theodore
  • 15
  • 4