Appmaker Filters

webview-custom-url-filters

Filters the Urls that are passed inside the webview. For example, you can use this filter to filter the URLs that are passed inside the webview and redirect them to a different page.

Parameter	Type	Description
currentFilters	Array	An array of the current filters if any.

Usage

appmaker.addFilter(
   'webview-custom-url-filters',
   'namespace', // The namespace of the filter
    myFunctionHook, // The function that will be called when the filter is triggered
);

function myFunctionHook(currentFilters) {
  // Do something with the current filters
  return currentFilters;
}

Example:

import { appmaker, appmakerFunctions } from '@appmaker-xyz/core';
import  { customPaymentSchema } from './oneclick'; // your custom function path

export function activate() {
 appmaker.addFilter(
    'webview-custom-url-filters', // hook to add custom url filters
    'oneclick-payment-url-filters', // namespace for the filter
    (currentFilters) => {
      return [...currentFilters, customPaymentSchema]; // add the filter to the list of filters
    },
  );
}
const Plugin = {
  id: 'one-click-checkout',
  name: 'One Click Checkout',
  activate,
};
appmaker.registerPlugin(Plugin);
export default Plugin;

export const customPaymentSchema = {
  id: 'oneclick-payment-schema',
  regex: [
    /phonepe:\/\/pay\?.*/i,
    /paytm:\/\/upi\/pay?.*/i,
    /paytmmp:\/\/pay?.*/i,
    /upi:\/\/pay?.*/i,
    /tez:\/\/upi\/pay?.*/i,
  ],
  action: (url) => {
    return {
      action: 'OPEN_URL',
      params: {
        url,
      },
    };
  },
};

inapp-page-data-response

Filters the data that is returned from the server when a page is loaded.

Parameter	Type	Description
data	Object	The data of the page.
pageId	String	The id of the page.

Usage

appmaker.addFilter(
   'inapp-page-data-response',
   'namespace',
   myFunctionHook,
);

function myFunctionHook(data, {pageId}) {
  if (pageId === 'productDetail') { // Filter the data of the productDetail page
    // Do something with the data like adding a new block
  }
  return data;
}

firebase-analytics-blacklisted-custom-events

Filters the custom events that are blacklisted from being sent to Firebase Analytics.

Usage

appmaker.addFilter(
   'firebase-analytics-blacklisted-custom-events',
   'namespace',
   myFunctionHook,
);

function myFunctionHook(currentblacklistedevents) {
  // list of events that need to be blacklisted
  return ['block1_clicked', 'block2_clicked', 'block3_clicked']
}

firebase-analytics-whitelisted-custom-events

Filters the custom events that are whitelisted to be sent to Firebase Analytics.

Usage

appmaker.addFilter(
   'firebase-analytics-whitelisted-custom-events',
   'namespace',
   myFunctionHook,
);

function myFunctionHook(currentwhitelistedevents) {
  // list of events that need to be whitelisted
  return ['block1_clicked', 'block2_clicked', 'block3_clicked']
}

clevertap-whitelisted-custom-events

Filters the custom events that are whitelisted to be sent to CleverTap.

Usage

appmaker.addFilter(
   'clevertap-whitelisted-custom-events',
   'namespace',
   myFunctionHook,
);

function myFunctionHook(currentwhitelistedevents) {
  // list of events that need to be whitelisted
  return ['block1_clicked', 'block2_clicked', 'block3_clicked']
}

clevertap-blacklisted-custom-events

Filters the custom events that are blacklisted from being sent to CleverTap.

Usage

appmaker.addFilter(
   'clevertap-blacklisted-custom-events',
   'namespace',
   myFunctionHook,
);

function myFunctionHook(currentblacklistedevents) {
  // list of events that need to be blacklisted
  return ['block1_clicked', 'block2_clicked', 'block3_clicked']
}

moengage-blacklisted-custom-events

Filters the custom events that are blacklisted from being sent to MoEngage.

Usage

appmaker.addFilter(
   'moengage-blacklisted-custom-events',
   'namespace',
   myFunctionHook,
);

function myFunctionHook(currentblacklistedevents) {
  // list of events that need to be blacklisted
  return ['block1_clicked', 'block2_clicked', 'block3_clicked']
}

moengage-whitelisted-custom-events

Filters the custom events that are whitelisted to be sent to MoEngage.

Usage

appmaker.addFilter(
   'moengage-whitelisted-custom-events',
   'namespace',
   myFunctionHook,
);

function myFunctionHook(currentwhitelistedevents) {
  // list of events that need to be whitelisted
  return ['block1_clicked', 'block2_clicked', 'block3_clicked']
}

shopify-coupons-list

Filters the list of coupons that are displayed in the cart page.

Usage

appmaker.addFilter(
    'shopify-coupons-list',
    'app-coupon-list', // The namespace of the filter
    async (currentCouponList) => {
      console.log('currentCouponList', await currentCouponList); // await is required as the currentCouponList is a promise
      // Do something with the current coupon list
      return currentCouponList;
    },
    99, // The priority of the filter.
  );

cart-line-item-custom-attributes

Filters the custom attributes of the cart line item.

Usage

import { addFilter } from '@appmaker-xyz/core';
​
function activate(theme) {
  // other codes here
  addFilter(
    'cart-line-item-custom-attributes',
    'yasi-theme',
    (customAttributes, args) => {
      const { variantId, quantity, product, variant } = args; // In these variantId and quantity are required. product and variant are optional.
      
      // add any condition to check if the custom attribute should be added. Showing an example here.
      const myVariantId = 'gid://shopify/ProductVariant/40026424869026';
      if (variantId == myVariantId) {
        customAttributes.push({
          key: 'my_custom_attribute_key',
          value: 'my_custom_attribute_value',
        });
      }
      return customAttributes;
​
    },
  );
}

appmaker-recently-viewed-product-scroller-pdp-styles

Filters the styles of the recently viewed product scroller in the product detail page.

import { addFilter } from '@appmaker-xyz/core';


addFilter(
    'appmaker-recently-viewed-product-scroller-pdp-styles',
    'your-theme-name',
    (styles) => {
      return {
        childContainerStyle: {
          ...(styles?.childContainerStyle ? styles.childContainerStyle : {}),
          // your custom styles here
        },
        wholeContainerStyle: {
          ...(styles?.wholeContainerStyle ? styles.wholeContainerStyle : {}),
          // your custom styles here
        },
      };
    },
  );

shipping-address-validator

This filter is used to validate the shipping address.

Parameter	Type	Description
shape	Object	The shape of the address.
yup	Object	The yup object.

Usage

import { appmaker } from '@appmaker-xyz/core';

appmaker.addFilter(
    'shipping-address-validator',
    'custom-address-validator',
    (shape, { yup }) => {
      let newShape = shape;
      newShape.zip = yup
        .string()
        .test('required', 'Please enter valid ZIP', (value) => {
          return value?.length > 4;
        });

      return newShape;
    },
  );

You can use any of the yup validation methods to validate the address, to know more about yup validation methods, please refer to the yup documentation

Following is the shape of the address:

{
    email,
    address1,
    address2,
    city,
    company,
    country,
    firstName,
    lastName,
    phone,
    province,
    zip,
}

shopify-custom-products-response

Filters the products response

This filter is used to customize the response data received from Shopify when retrieving product information. It provides the flexibility to apply custom processing and adjustments to the data before it is used in your application. The example code snippet demonstrates how to use this filter and includes placeholders for your custom logic.

You can access the current response data, custom parameters (if any), and additional dependencies to create the modified response as needed for your application. Please replace the comment // Your custom processing logic goes here with your actual code to tailor the response to your requirements.

Parameter	Type	Description
_currentResponse	Object	The current response data from Shopify.
params	Object	Custom parameters for the filter.
dependencies	Object	Additional dependencies that may be required.

Usage

/**
 *
 * @param {object} _currentResponse - The current response data from Shopify.
 * @param {object} params - Custom parameters for the filter.
 * @param {object} dependencies - Additional dependencies that may be required.
 * @returns {object} - The modified response after applying custom processing.
 */
export const productResponse = () => {
  appmaker.addFilter(
    'shopify-custom-products-response',
    'yourThemeName',
    async (_currentResponse, params, dependencies = {}) => {
        const collectionId = shopifyIdHelper(params?.collectionId, true);
        const collectionHandle = params?.collectionHandle;
        const { filterParams = {}, page = 1 } = dependencies;
        const search = (params && params.search) ? params.search : "";
        const convertedProducts = convertProducts(allProducts, collectionId); // Your custom processing logic goes here

        return {
            data: {
                data: {
                    products: {
                        edges: convertedProducts,
                    },
                },
            },
        };
    }
);
};