memberr Docs

Renders a store credit toggle element that customers can use to apply their store credit balance to their order. Normally placed in the shops cart drawer.

<memberr-store-credit-toggle
  active-color="#000000"
  height="24"
  width="48"
  initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
  style="height: 24px;"
>
</memberr-store-credit-toggle>

Additionally it may be necessary to trigger a cart refresh when the state of the memberr toggle changes. The memberr SC toggle triggers the event memberr-toggle:change whenever the state of the toggle changes. You can add an event listener to handly your cart refresh. Note that the way a cart refresh is triggered varies on the theme you use in your store.

  <script>
    document.addEventListener('memberr-toggle:change', (event) => {
      const updatedCart = event.detail.updatedCart;

      /* handle your cart refresh here */

    }, {
      bubbles: true
    });
  </script>

Customization

You can pass the following props to customize the store credit toggle to your liking:

interface StoreCreditToggleProps {
  activeColor?: string
  inactiveColor?: string
  handleColor?: string
  width?: number
  height?: number
  initialState?: string
  debug?: boolean
}

Example Implementation

{% assign current_store_credit_balance = customer.metafields['app--60169453569--memberr_v2'].current_balance.value | default: 0 %}
{% assign store_credit_name = shop.metafields['app--60169453569--memberr_v2'].store_credit_name.value %}

{% if customer and current_store_credit_balance > 0 %}
  {% assign current_store_credit_balance_formatted = current_store_credit_balance | money %}
  
  <div style="display: flex; align-items: center;justify-content: space-between;">
    <span>
      {{- 'memberr.apply_store_credit' | t: amount: current_store_credit_balance_formatted, store_credit_name: store_credit_name -}}
    </span>
    
    <memberr-store-credit-toggle
      active-color="#000000"
      height="24"
      width="48"
      initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
      style="height: 24px;"
    ></memberr-store-credit-toggle>
  </div>

  <script>
    document.addEventListener('memberr-toggle:change', (event) => {
      const updatedCart = event.detail.updatedCart;

      /* handle your cart refresh here */

    }, {
      bubbles: true
    });
  </script>
{% endif %}

Store Credit Toggle

On this page