Examples

SIJO Home

For Days

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>

Move the widget into a dynamic parent element