Appmaker Web SDK

Introduction

The Appmaker Web SDK is a JavaScript library that allows you to interact with the Appmaker webview.

Requirements

• This library is only compatible with the Appmaker webview.

Installation

npm install @appmaker-xyz/web-sdk

Usage

import AppmakerWebSdk from "@appmaker-xyz/web-sdk";

Methods

isAppmakerWebview()

Returns true if the app is running inside the Appmaker webview.

Example:

AppmakerWebSdk.isAppmakerWebview(); 

getPlatform()

Returns the platform the app is running on. Possible values are android and ios.

Example:

AppmakerWebSdk.getPlatform(); 

openCart()

Opens the cart page.

Example:

AppmakerWebSdk.openCart();

openProductById(productId)

Opens the product page for the product with the given id.

Example:

AppmakerWebSdk.openProductById('gid://shopify/Product/6793295167650')

openProductByHandle(productHandle)

Opens the product page for the product with the given handle.

Example:

AppmakerWebSdk.openProductByHandle("t-shirt")

openCollectionById(collectionId)

Opens the collection page for the collection with the given id.

Example:

AppmakerWebSdk.openCollectionById('gid://shopify/Collection/269255016610')

openCollectionByHandle(collectionHandle)

Opens the collection page for the collection with the given handle.

Example:

AppmakerWebSdk.openCollectionByHandle("t-shirts")

applyCoupon(couponCode, { goBackAfterApply = false } )

Applies the given coupon code to the cart. If goBackAfterApply is true, the app will go back to the previous page after the coupon is applied.

Example:

AppmakerWebSdk.applyCoupon("SUMMER20", { goBackAfterApply: true });

removeCoupon(couponCode)

Removes the given coupon code from the cart.

Example:

AppmakerWebSdk.removeCoupon("SUMMER20");

addProductToCart({ product, variant, quantity, customAttributes })

Adds the given product to the cart. product and variant are the product and variant objects returned by the Shopify Storefront API. quantity is the quantity of the product to add to the cart. customAttributes is an object containing custom attributes to add to the line item.

Example:

const customAttributes = [
      {
        "key": "_appmaker",
        "value": "true"
      }
    ]
const variant = {        
   id: 'gid://shopify/ProductVariant/40026424869026',            
  }
const product =  {      
  id: 'gid://shopify/Product/6796049809570',       
  }    
  AppmakerWebSdk.addProductToCart({ product:product, variant:variant, quantity:1, customAttributes:customAttributes }); // make sure to pass the values to its respective keys

updateCartCustomAttributes({ customAttributes })

Updates the custom attributes of the cart. customAttributes is an object containing custom attributes to add to the cart.

Example:

const customAttributes = [
  {
    "key": "test_custom_attribute",
    "value": "true"
  },
  {
    "key": "test_custom_attribute_2",
    "value": "true"
  }
];
AppmakerWebSdk.updateCartCustomAttributes({ customAttributes }); 

// use delete key to remove the custom attribute
// delete can only be used with boolean true, it will throw an error if you use any other value
customAttributes.push({ key: 'test_custom_attribute', value: null, delete: true });

removeProductFromCart(lineItemId, product, variant, quantity, updateCartPageStateRequired)

Removes the product with the given line item id from the cart.

Example:

AppmakerWebSdk.removeProductFromCart( { lineItemId:'gid://shopify/CheckoutLineItem/400264248690260?checkout=9454b13ff3037f9ec0636b57b075a2a9',product:product , variant:variant ,updateCartPageStateRequired:true}) // refer to addProductToCart for product and variant

updateProductQuantityInCart({ lineItemId, product, variant, quantity, updateCartPageStateRequired})

Updates the quantity of the product with the given line item id in the cart.

Example:

AppmakerWebSdk.updateProductQuantityInCart({ lineItemId:'gid://shopify/CheckoutLineItem/400264248690260?checkout=9454b13ff3037f9ec0636b57b075a2a9',product:product , variant:variant , quantity:2,updateCartPageStateRequired:true}) // refer to addProductToCart for product and variant

clearCart()

Clears the cart.

Example:

AppmakerWebSdk.clearCart();

setLineItemProperties({ lineItemId, product, variant, properties })

Sets the custom attributes of the product with the given line item id in the cart.

Example:

const properties = [
        {
          "key": "custom",
          "value": "appmaker"
        }
      ]
AppmakerWebSdk.setLineItemProperties({lineItemId:'gid://shopify/CheckoutLineItem/400264248690260?checkout=9454b13ff3037f9ec0636b57b075a2a9',product:product, variant:variant, properties:properties}); // refer to addProductToCart for product and variant

openInAppPage({ pageId, title, replacePage = false })

Opens the in-app page with the given id. If replacePage is true, the app will replace the current page with the in-app page.

Example:

AppmakerWebSdk.openInAppPage({ pageId: "home", title: "In-app home page", replacePage: true });

openHome({ replacePage = false })

Opens the home page. If replacePage is true, the app will replace the current page with the home page.

Example:

AppmakerWebSdk.openHome({ replacePage: false });

showMessage({ title })

Shows a message with the given title.

Example:

AppmakerWebSdk.showMessage({ title: "Hello world!" });

goBack()

Goes back to the previous page.

Example:

AppmakerWebSdk.goBack();

copyToClipboard({ text })

Copies the given text to the clipboard.

Example:

AppmakerWebSdk.copyToClipboard({ text: "Hello world!" });

openCheckout()

Opens the checkout page.

Example:

AppmakerWebSdk.openCheckout();

openSearch()

Opens the search page.

Example:

AppmakerWebSdk.openSearch();

Usage

import AppmakerWebSdk from "@appmaker-xyz/web-sdk";

AppmakerWebSdk.openCart();