Shopify Function - How to fetch app data to the frontend/browser.

Shopify Function - How to fetch app data to the frontend/browser.

kristi01
Shopify Partner
6 0 0

I am developing a discount app for my Shopify store, and I need to store some settings data—specifically, a selection of products that the app should apply discounts to. I know that using Metafields is one way to store this data and use those to read on the browser, but I am looking for other methods to store and fetch this app data to be used on the frontend. I am using the remix template and finding the solution using the app data on the run.js file.

 

Could anyone provide insights or suggestions on:

  1. Storing App Data Other than Using Metafields: What are other reliable methods to store app data in Shopify that can be easily accessed by the frontend?

  2. Fetching Stored Data and Making It Available on the Frontend: How can I fetch this stored data and use it within the run.js file?

I am currently using the following code to read the data using Metafields:

 
export function run(input) {
  /**
  * @type {{
  *   quantity: number
  *   percentage: number
  * }}
  */
  const configuration = JSON.parse(
    input?.discountNode?.metafield?.value ?? "{}"
  );

  if (!configuration.quantity || !configuration.percentage) {
    return EMPTY_DISCOUNT;
  }

  let targets = [];
  targets = input.cart.lines
    .filter(line => line.quantity >= configuration.quantity &&
      line.merchandise.product.id == configuration.productID &&
      line.merchandise.product.hasAnyTag &&
      line.merchandise.__typename == "ProductVariant")
    .map(line => {
      const variant = /** @type {ProductVariant} */ (line.merchandise);
      return /** @type {Target} */ ({
        productVariant: {
          id: variant.id
        }
      });
    });

  if (!targets.length) {
    console.error("No cart lines qualify for volume discount.");
    return EMPTY_DISCOUNT;
  }

  return {
    discounts: [
      {
        message: `${configuration.percentage}% Off`,
        targets,
        value: {
          percentage: {
            value: configuration.percentage.toString()
          }
        }
      }
    ],
    discountApplicationStrategy: DiscountApplicationStrategy.First
  };
};
 

Any guidance or examples would be greatly appreciated. Thank you!

Replies 5 (5)

topshop
Shopify Partner
68 5 9

Storing discount configuration in metafields should be the preferred way because it lets you access it from both the frontend as well as from the deployed function. Can you explain why you're looking for a way to store data other than using metafield? 

Discount Bot: Sitewide Sales - How to Exclude Products from Shopify Discounts: A Step-by-Step Guide
- Instantly create discounts for your entire product catalog with a single discount
- Exclude any products / collections / already on sale items for which the discounts should NOT apply
- Built using Shopify Functions for native performance and feel
kristi01
Shopify Partner
6 0 0

Thank you for your response. I am aware of the solution using metafields, but I am exploring if there are alternative methods for storing data that can also be utilized within the discount functions.

kristi01
Shopify Partner
6 0 0

I just wanted to know if we go with the metafield option. Can we create metafields for various entities such as products, collections, and carts with specific data? Are there any caveats or limitations to be aware of? Will these metafields be easily accessible, and is there any risk of them being deleted if they are accessible from the store?

topshop
Shopify Partner
68 5 9

I'm not aware of any such limitations. In fact, I think there might be limitations with approaches other than metafields. So I'm still not understanding why we would search for a solution that is not metafields. Do you notice a limitation and can probably share here?

Discount Bot: Sitewide Sales - How to Exclude Products from Shopify Discounts: A Step-by-Step Guide
- Instantly create discounts for your entire product catalog with a single discount
- Exclude any products / collections / already on sale items for which the discounts should NOT apply
- Built using Shopify Functions for native performance and feel
SatishMantri
Shopify Partner
1 0 0

For your concern you can prefer app owned metafields which will only accessible by the app

Founder, OSCP Sales & Volume Discount

- Effortlessly showcase tiered costs and quantity discounts on the product page.

- Provision for customer group management.

- Compatible with built-in Shopify discounts.

- Built using Shopify Functions for native performance and feel

- Customizable discount widget displaying on the product page.