APIs for customisation

Here are our open APIs:

AMP_API.OPEN_CART()

AMP_API.CLOSE_CART()

=> Usage eg. AMP_API.OPEN_CART().then(() => console.log(“Run the custom code here”))

window.AMP_CART_LOADED = function(cart)

// Fires once the cart has loaded on the web page and returns the current cart

window.AMP_CART_OPENED = function()

// Fires whenever Slide Cart has been opened. Don’t not return the cart

window.AMP_CART_CHECKOUT_BUTTON_CLICKED = function ()

// Fires whenever checkout is clicked

window.AMP_CART_UPDATED = function (cart)

// Fires whenever slide cart has updated

21st Aug: We have updated the AMP_CART_UPDATED callback to allow updating the internal state of the Cart similar to what you do for slidecart with the SLIDECART_STATE. The usage is a bit different for AMP Cart. I'll try and explain here, feel free to ask questions if there are any doubts. Essentially AMP_CART_UPDATED callback function now has a second parameter called cartTarget. This is the internal state of our cart which we use to render all the blocks (e.g. upsell block, announcement block etc.). This cartTarget also contains the theme / colors that the merchant has set in the merchant admin.With this cartTarget, you can return a new cartTarget which has been modified via the AMP_CART_UPDATED function. Ensure that you are not mutating the original cartTarget and instead are returning a new object.

Example illustrating use:

 <script>
      window.AMP_CART_UPDATED = function(rawCart, cartTarget) {
        console.log("AMP::DEBUG", rawCart, cartTarget);

        // Ensure there is a cartTarget as it can be null at initialization
        // Any changes needed can be done within this if block
        if (cartTarget) {
          // All the blocks have a type. All the config for the blocks lives
          // under content key for that block.
          // To change any block, essentially you need to find that block,
          // then return the entire new cartTarget back.
          // E.g. below we find the announcement block, then build a new block
          // which contains all the original data via ...block,
          // then build the new content which contains all the original content
          // via ...block.content, then specify the bits that we want to customize.
          const newBlocks = cartTarget.blocks.map((block) => {
            if (block.type === "CartAnnouncementBlock") {
              return {
                ...block,
                content: {
                  ...block.content,
                  announcements: ["Hey There!"]
                },
              }
            }

            if (block.type === "CartUpsellBlock") {
              return {
                ...block,
                content: {
                  ...block.content,
                  header: "New header for upsell block",
                },
              }
            }

            // Ensure that all the other blocks are returned as well, else they wont render in the UI
            return block;
          });

          // Ensure the new cartTarget with updated blocks is fully returned
          return {
            ...cartTarget,
            blocks: newBlocks,
          }
        }
      }
    </script>

And this is essentially what the cart target payload looks like

If need be, always reach out to hello@apphq.co for more help on customisations!