/fb-bundle-builder-shopify-app

Primary LanguageJavaScript

QuickFresh Bundle Builder Proxy App

Start development mode

  • Copy .env.example to .env and set the variables

Create a private app

  • In your Shopify admin, go to Apps
  • Manage private apps
  • Create an app with permission to:
    • read and write Customers
    • read and write Order Editing
    • read and write Orders
    • read and write Products
    • read and write Fulfillment Services
  • Copy the api key and secret to use on your .env file

Configuring the .env file

NODE_ENV Your environment. It can be 'development' or 'production'
PROXY_APP_URL Example: https://your-app.ngrok.io
STORE_SETTINGS_KEY Example: company_abc, for available options check src/store/settings/settings.js

REQUEST_TOKEN_SECRET Used to make sure that a request is coming from the app
REQUEST_TOKEN_DURATION How long the token should be valid (in seconds)

LOCAL_STORAGE_KEY Local storage key. Example: bundleApp
EMPTY_STATE_IMAGE Use an public image example https://...

BUNDLE_API_URL Example "http://localhost:8080" this is the url for the API
BUNDLE_API_SECRET Secret used for the API app

SHOPIFY_API_SECRET Shopify API secret (this is the API Password in Shopify Admin)
SHOPIFY_API_VERSION Example: 2022-01
SHOPIFY_PRIVATE_APP_API_SECRET Create a private Shopify app and copy the password

SHOPIFY_MULTIPASS_SECRET Please enable multipass in Shopify and paste the secret
SHOPIFY_MULTIPASS_SHOP Default shop in case of this value have not being defined in the query string
SHOPIFY_BUNDLES_COLLECTION Will be the bundles' collection
SHOPIFY_PRODUCTS_COLLECTION Menu items

LOGO_URL Company's logo url starting with https://
PAGE_TITLE Example: QuickFresh
PAGE_DESCRIPTION Description for Shopify liquid (string)

SENTRY_DSN Sentry DSN
SENTRY_SAMPLE_RATE Sentry sample rate (example: 0)
SENTRY_ENVIRONMENT Sentry environment (example: local)

RECHARGE_API_TOKEN Token from Recharge platform

Configuring Shopify Products Collection

Env variable: SHOPIFY_PRODUCTS_COLLECTION

  1. In the Shopify Admin, go to `Settings``
  2. On the left menu, click on Metafields, Variants
  3. Add these metafields:

    Net Carbs | Namespace and key: my_fields.net_carbs) | Measurement: Weight
    Protein | Namespace and key: my_fields.protein) | Measurement: Weight
    Calories | Namespace and key: my_fields.calories) | Measurement: Weight
    Total Fat | Namespace and key: my_fields.total_fat) | Measurement: Weight
    Subtitle | Namespace and key: nutrition.subtitle) | Measurement: Text (multi-line text)
    Contains | Namespace and key: nutrition.contains) | Measurement: Text (multi-line text)
    Ingredients | Namespace and key: nutrition.ingredients) | Measurement: Text (multi-line text)
    Calorie Range | Namespace and key: nutrition.calorie_range) | Measurement: Text (single line text)
    Average Macros | Namespace and key: nutrition.average_macros) | Measurement: Text (single line text)
    Gluten Free | Namespace and key: nutrition.is_gluten_free) | Content Type: True or False
    Dairy Free | Namespace and key: nutrition.is_dairy_free) | Content Type: True or False
    Peanut | Namespace and key: nutrition.is_peanut_free) | Content Type: True or False
    Spicy | Namespace and key: nutrition.is_spicy) | Content Type: True or False
  4. Go back to On the left menu, click on Metafields, Products and add these metafields:

    Bundle Key Points | Namespace and key: bundle-builder.balanced_bundle_key_points) | Measurement: Text (multi-line text)
    Bundle Key Points | Namespace and key: bundle-builder.keto_bundle_key_points) | Measurement: Text (multi-line text)
    Protein | Namespace and key: nutrition.balanced_protein) | Measurement: Text (single line text)
    Protein | Namespace and key: nutrition.keto_protein) | Measurement: Text (single line text)
    Net Carbs | Namespace and key: nutrition.balanced_net_carbs) | Measurement: Text (single line text)
    Net Carbs | Namespace and key: nutrition.keto_net_carbs) | Measurement: Text (single line text)
    Fat | Namespace and key: nutrition.balanced_fat) | Measurement: Text (single line text)
    Fat | Namespace and key: nutrition.keto_fat) | Measurement: Text (single line text)
  5. Go to your collection and add values to each metafield, for all your variants and products

Configuring Shopify Bundles

Env variable: SHOPIFY_BUNDLES_COLLECTION

  1. In the Shopify Admin, go to Collections
  2. Select the collection that you configured for the env variable above
  3. Add these tags to the respect bundle(product):

    7 Day with breakfast | 7 Day
    5 Day with breakfast | 5 Day
    3 Day with breakfast | 3 Day

Opening the app in Shopify

In one terminal, run:

yarn dev / npm run dev

It generates and watch the bundle.js file

In a second terminal run:

yarn server / npm run server

Using Only React

To start the react application with hot reloading run:

yarn start / npm run start

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Building the app

yarn build / npm run build

Builds the app for production to the public folder.
It generates a bundle.js file

Shopify Configuration for the App Proxy

Example:

Shopify Configuration for the Multipass