Trigger an "add to cart" function from an HTML embedded external app?

Retired Boards Appdev Store Design
, , , ,
1

Hi all,

I’m trying to see if it’s possible to add an extra functionality to an embedded app. The problem is, I’m using Acuity scheduler (which embeds seamlessly) but the booking payment is recorded outside of Shopify. I realize I can use webhooks to just mimic the sale and report it to Shopify. But I’m wondering if there is a way to actually customize the embed to trigger an “add to cart” function, the same way it would if I was using an actual Shopify app.

I’m very new at all of this so forgive me if my question doesn’t make sense. But please help!?!?!?!?

2

Hi BerlinMeta27,

It is possible to add extra functionalities to an embedded app in Shopify - it sounds like you’ll need to integrate the app with the AJAX API to add products to the cart..

  1. Here is an example of how you can add a product to the using Shopify’s AJAX API:
$.ajax({
  type: "POST",
  url: '/cart/add.js',
  data: {
    quantity: 1,
    id: 'variant_id'
  },
  dataType: 'json',
 : function() { 
    console.log("Added to cart"); 
  }
});

You’ll need to replace 'variant_id' with the actual variant ID of the product you want to add to the cart.

You could also use webhooks to sync data between your app and Shopify. For example, when a booking is made through Acuity, you can use a webhook to trigger a function in your app that adds a corresponding product to the cart in Shopify.

Hope this helps!