Re: 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
184 16 19

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? 

Founder, Discount Bot: Sitewide Sales
- Exclude hand-pick products/collections or on-sale items from discounts: Read the guide
- Increase AOV using multi-tier volume discounts
- Bulk coupon codes - for discount promotion
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
184 16 19

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?

Founder, Discount Bot: Sitewide Sales
- Exclude hand-pick products/collections or on-sale items from discounts: Read the guide
- Increase AOV using multi-tier volume discounts
- Bulk coupon codes - for discount promotion
SatishMantri
Shopify Partner
22 0 0

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