Select Nonprofit

Examples

Base widget

beam-select-nonprofit.liquid

This file should typically be copied as-is to add the base functionality of a Select Nonprofit widget. To move the widget to a non-standard location, this file should still be used as-is, and an appropriate script from the other sections below should be included in this file after the base widget code.

Replace

• beam_api_key - Your Beam SDK API Key
• beam_chain_id - Your Beam Chain Id
• beam_store_id - Your Beam Store Id
• beam_base_url - This value can remain unchanged, unless the partner is specifically using Beam’s Staging environment
• beam_language - Beam supports changing the displayed language based on a lang parameter passed into the widgets. If the partner supports multiple languages, this Liquid variable value should be updated based on any existing language detection method available in the theme. The supported values for this property can be found in the Beam Supported Languages documentation.
• beam_postal_code - Beam supports showing specific nonprofits based on the user’s postal code; this Liquid variable value should be updated based on any existing location detection method available in the theme. This functionality requires coordination with the Beam team, so please reach out to us if this is desired

{% assign beam_language = "en" %}

<!-- BEAM START -->
<!-- Script Properties
  data-em-disable // Used to disable Termly script rewrites
  data-categories="analytics" // Used to disable Termly script rewrites
-->
<script
  type="module"
  async
  crossorigin
  data-em-disable
  data-categories="analytics"
  src="https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/components/select-nonprofit.esm.js"
></script>

<script>
  // Default behavior is to not show the Beam Select Nonprofit widget if it is empty
  document.head.insertAdjacentHTML(
    "beforeend",
    `<style>[data-beam-widget="select-nonprofit"][data-cart-empty="true"]{display:none;}</style>`
  );
  // Default behavior is to not show the Beam Select Nonprofit widget until the configuration has loaded
  // This is important to add if running an AB test - if not, this code is unnecessary
  document.head.insertAdjacentHTML(
    "beforeend",
    `<style>[data-beam-widget="select-nonprofit"][data-init-load="true"]{display:none !important;}</style>`
  );
</script>

<div data-beam-widget="select-nonprofit" data-init-load="true" data-cart-empty="true">
  <beam-select-nonprofit
    apiKey="{{ settings.beam_api_key }}"
    storeId="{{ settings.beam_store_id }}"
    lang="{{ beam_language }}"
    baseUrl="{{ settings.beam_base_url }}"
  ></beam-select-nonprofit>
</div>

<!-- -->
<!-- Show the Select Nonprofit widget only when the cart has items in it -->
<!--  -->
<script type="module" async crossorigin>
  import { getCurrentCart } from "https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/integrations/shopify.js";
  import { events } from "https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/integrations/utils.js";
  
  document.querySelector('[data-beam-widget="select-nonprofit"]')?.removeAttribute("data-init-load");

  async function showBeamCartWidgetIfNeeded(event) {
    let itemCount = 0;
    if (event) {
      itemCount = event?.detail?.itemCount;
    } else {
        const currentCart = await getCurrentCart({
		      apiKey: "{{ settings.beam_api_key }}",
		      chainId: {{ settings.beam_chain_id }},
		      storeId: {{ settings.beam_store_id }},
		    });
        itemCount = currentCart?.cart?.itemCount;
    }

    [...document.querySelectorAll('[data-beam-widget="select-nonprofit"]')].forEach((widgetElement) => {
      widgetElement?.setAttribute("data-cart-empty", itemCount <= 0);
    });
  }

  await showBeamCartWidgetIfNeeded();
  window.addEventListener(events.BeamCartChangeEvent.eventName, showBeamCartWidgetIfNeeded);
</script>

---

Adding Beam into the Rebuy Smart Cart

The Beam Select Nonprofit widget can be added to Rebuy easily through Beam’s Rebuy Smart Cart App. The Beam team recommends this approach first!

1. Log in to your Shopify store admin dashboard, and click Apps in the left-hand navigation
2. Select or search for the “Rebuy Personalization Engine” app and click it to open the Rebuy administration dashboard
3. In the left hand navigation, click on Smart Cart then, click the tile for your active Smart Cart (or the kebab icon and chose Edit) to begin editing your Smart Cart
4. Scroll to the bottom of the page until you reach the list of available Apps. Beam Impact will be listed and available for you to configure

1. Click the gears icon on the right to open the Beam app settings and add your configuration values based on the information Beam has provided to you, the click Save
   1. Beam Version Number
   2. Beam SDK API Key
   3. Beam Store Id
   4. Beam Chain Id
2. Set the Enable toggle to enabled, set the Empty Cart dropdown to No, and choose your Cart Location to display the Beam widget where you would like it to display (Above Subtotal, Below Subtotal, or Below Checkout). Beam typically recommends using “Below Subtotal” or “Above Subtotal”
3. Save your new setup, and you’re good to go!

Using Custom CSS to adjust the Beam Rebuy Smart Cart App style

In many cases, you may wish to adjust the margin or padding of the Beam Rebuy Smart Cart App to match your existing Rebuy Smart Cart styles. Commonly, this is done in the Custom CSS section of your Rebuy Smart Cart configuration. This CSS snippet is an example of increasing the padding around the Beam widget:

.rebuy-beam-cart-widget {
	padding: 10px 0;
}

Testing the Beam Rebuy Smart Cart App

You may wish to test the Beam Rebuy Smart Cart App before setting the app live in your production store. You can do this by adding the following to the Custom CSS section of your Rebuy Smart Cart:

.rebuy-beam-cart-widget {
	display: none;
}

In a non-live Shopify theme, add the following CSS to enable showing the Beam Rebuy Smart Cart App

.rebuy-beam-cart-widget {
	display: inline !important;
}

This will hide the Beam Rebuy Smart Cart app by default so current users do not see it, and allows you to view the app in your non-live theme.

💡 Make sure to remove these Custom CSS rules prior to taking the Beam Rebuy Smart Cart App live.

Adding the Beam widget to a Rebuy Smart Cart using a custom template

If the the Beam Rebuy Smart Cart App is not feasible for your approach, or you are already using a Rebuy Smart Cart template in your theme, the following snippets may be used to add Beam’s Select Nonprofit widget.

The first snippet is beam-select-nonprofit.liquid and should be added to your theme after beam-config and beam-statsig-setup (if necessary).

Replace

• No replacements necessary

The second snippet is rebuy-cart-template.liquid, and is simply the Beam Select Nonprofit widget HTML + Vue which should be added to your existing Rebuy Smart Cart template file, in the location that you would like the widget to appear. Commonly, this is added below the cart items list, and above recommendations or the subtotal.

Replace

• beam_api_key - Your Beam SDK API Key
• beam_chain_id - Your Beam Chain Id
• beam_store_id - Your Beam Store Id
• beam_base_url - This value can remain unchanged, unless the partner is specifically using Beam’s Staging environment
• beam_language - Beam supports changing the displayed language based on a lang parameter passed into the widgets. If the partner supports multiple languages, this Liquid variable value should be updated based on any existing language detection method available in the theme. The supported values for this property can be found in the Beam Supported Languages documentation.
• beam_postal_code - Beam supports showing specific nonprofits based on the user’s postal code; this Liquid variable value should be updated based on any existing location detection method available in the theme. This functionality requires coordination with the Beam team, so please reach out to us if this is desired

<!-- beam-select-nonprofit.liquid -->
<!-- BEAM START -->
<script
  type="module"
  async
  crossorigin
  data-em-disable
  data-categories="analytics"
  src="https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/components/select-nonprofit.esm.js"
></script>

<script type="module" crossorigin>
  import { events } from "https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/integrations/utils.esm.js";
  await window.BeamImpact.awaitable;
  let beamSelectedNonprofitId = null;
  window.addEventListener(events.BeamNonprofitSelectEvent.eventName, (event) => {
    const {selectedNonprofitId, selectionId} = event.detail;
    if (selectedNonprofitId !== beamSelectedNonprofitId) {
      window.BeamImpact.logEvent("beam_selection", true, {
        nonprofitId: selectedNonprofitId,
        widget: 'select-nonprofit',
        selectionId,
      });
    }
    beamSelectedNonprofitId = selectedNonprofitId;
  });
</script>

<!-- beam-rebuy-cart-template.liquid -->
{% assign beam_api_key = "beamtest-KjWFWwS00MX2.8d67d44c-9d1f-4b3c-aae7-600044e4d2a0" %}
{% assign beam_chain_id = "1" %}
{% assign beam_store_id = "1" %}
{% assign beam_base_url = "https://api.beamimpact.com" %}
{% assign beam_language = "en" %}
{% assign beam_postal_code = "" %}
{% assign beam_country_code = "" %}

<!--BEAM START-->
<div data-beam-widget="select-nonprofit" v-if="hasItems()">
  <beam-select-nonprofit
    apiKey="{{ SDK API Key }}"
    storeId="{{ Store Id }}"
    lang="{{ Language }}"
    postalCode="{{ Postal Code }}"
    countryCode="{{ Country Code }}"
    baseUrl="{{ Base Url }}"
  ></beam-select-nonprofit>
</div>
<!-- BEAM END-->