Cashback: Cartdrawer
Toggle Section
cart-cashback.liquid Snippet
_10Coming soon.
Cart Page Section
your-shop-domain.com/cart
Not standardized. This is dependent on the theme you are using. You need to find the theme file that manages the themes cart page implementation.
Below is an example implementation:
_10{% if settings.memberr %}_10 <div class="good-choice-on-main-cart ed-good-on-main-cart-mobile" style="margin-top: -16px;">_10 {% render 'cart-cashback' %}_10 </div>_10{%- endif -%}
Cart Drawer
Display dynamic cashback amount in cart drawer
Below is an example implementation:
- Create a new snippet:
_68{%- assign store_credit_name = shop.metafields['app--60169453569--memberr_v2'].store_credit_name_68 | default: 'Store Credit'_68-%}_68_68{% comment %} Get Cashback program {% endcomment %}_68{%- assign cashback_program = shop.metaobjects['app--60169453569--cashback_program'].v2 -%}_68_68{% comment %} Check if cashback program is enabled {% endcomment %}_68{%- if cashback_program.is_active -%}_68 {% comment %} Divisor has to be a float to get a decimal {% endcomment %}_68 {%- assign cashback_rate = cashback_program.cashback_percentage | divided_by: 100.0 -%}_68{%- else -%}_68 {%- assign cashback_rate = 0 -%}_68{%- endif -%}_68_68{% comment %} Check if customer is logged in and has active membership {% endcomment %}_68{%- assign active_membership_id = customer.metafields['app--60169453569--memberr_v2'].customer_membership.value.membership_id -%}_68{%- if active_membership_id -%}_68 {%- assign memberships = shop.metaobjects['app--60169453569--membership'].values -%}_68 {%- assign active_membership = memberships | where: 'memberr_id', active_membership_id | first -%}_68{%- endif -%}_68_68{% comment %} Check if there is a cashback override for the active membership {% endcomment %}_68{%- if active_membership.benefit_cashback_override.value.is_active -%}_68 {%- assign cashback_rate = active_membership.benefit_cashback_override.value.cashback_percentage_68 | divided_by: 100.0_68 -%}_68{%- endif -%}_68_68{% comment %} If no cashback_rate is set, we check if the theme is in design mode and set the cashback rate to 5% {% endcomment %}_68{%- if cashback_rate == 0 -%}_68 {%- if request.design_mode -%}_68 {%- assign cashback_rate = 5.0 | divided_by: 100.0 -%}_68 {%- endif -%}_68{%- endif -%}_68_68{% comment %} Now we render the cashback amount if the rate is > 0 {% endcomment %}_68{%- if cashback_rate > 0 -%}_68 {%- assign cashback_amount = cart.total_price | times: cashback_rate -%}_68{%- else -%}_68 {%- assign cashback_amount = 0 -%}_68{%- endif -%}_68_68{% assign cashback_amount_formatted = cashback_amount | money %}_68_68{% if cashback_amount > 0 %}_68 <div class="shipping-header-info-container">_68 <div class="shipping-header-info" style="background-color: {{ settings.color_good_choice_background }};">_68 <svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">_68 <g clip-path="url(#clip0_6163_8801)">_68 <path d="M6.27794 4.93717C10.3696 1.58404 16.4165 1.81737 20.2363 5.63717C24.304 9.70487 24.304 16.3007 20.2363 20.3684C16.1686 24.4361 9.57273 24.4361 5.50503 20.3684C4.25672 19.1218 3.34573 17.5784 2.85759 15.8831C2.36945 14.1878 2.32018 12.3963 2.7144 10.6768L2.79461 10.3507L4.80919 10.882C4.30976 12.7801 4.49637 14.7937 5.33615 16.5678C6.17592 18.3418 7.61496 19.7626 9.39964 20.5795C11.1843 21.3965 13.2001 21.5573 15.0917 21.0336C16.9834 20.5099 18.6294 19.3353 19.7398 17.7168C20.8503 16.0983 21.3537 14.1398 21.1615 12.1864C20.9693 10.233 20.0938 8.4102 18.6893 7.03915C17.2847 5.6681 15.4413 4.83682 13.4839 4.69182C11.5264 4.54682 9.58064 5.0974 7.9894 6.24654L7.75919 6.41946L8.81857 7.47883L4.03107 8.583L5.13523 3.7955L6.27794 4.93717Z" fill="#000000" style="stroke: none;"/>_68 <path d="M10.9956 11.125C11.0833 11.0084 11.1802 10.8965 11.2864 10.7903C12.5068 9.5699 14.4854 9.5699 15.7058 10.7903L17.0316 9.46447C15.079 7.51184 11.9132 7.51184 9.96055 9.46447C9.47063 9.95438 9.10364 10.5207 8.85956 11.125H7.87109V12.375H8.53506C8.48308 12.7899 8.48308 13.2101 8.53506 13.625H7.87109V14.875H8.85956C9.10364 15.4793 9.47063 16.0456 9.96055 16.5356C11.9132 18.4881 15.079 18.4881 17.0316 16.5356L15.7058 15.2097C14.4854 16.4301 12.5068 16.4301 11.2864 15.2097C11.1802 15.1036 11.0833 14.9916 10.9956 14.875H13.4961V13.625H10.4339C10.3502 13.2129 10.3502 12.7871 10.4339 12.375H13.4961V11.125H10.9956Z" fill="#000000" style="stroke: none;"/>_68 </g>_68 <defs>_68 <clipPath id="clip0_6163_8801">_68 <rect width="25" height="25" fill="white" transform="translate(0.371094 0.5)"/>_68 </clipPath>_68 </defs>_68 </svg>_68 <span class="content">_68 {{_68 'cart.general.cashback'_68 | t: cashback_amount: cashback_amount_formatted, store_credit_name: store_credit_name_68 }}_68 </span>_68 </div>_68 </div>_68{% endif %}
- Render Snippet in cart drawer
_10{% if settings.memberr %}_10 <div class="good-choice-on-main-cart ed-good-on-main-cart-mobile" style="margin-top: -16px;">_10 {% render 'cart-cashback' %}_10 </div>_10{%- endif -%}
memberr Store Credit toggle in Card drawer or on Cart Page
Activate memberr Elements in Theme Settings:
Store Credit Toggle in Card drawer
This is an example implementation
1. Example implementation
snippets/memberr-toggle.liquid
_62{% assign current_store_credit_balance = customer.metafields['app--60169453569--memberr_v2'].current_balance.value | default: 0 %}_62{% assign store_credit_name = shop.metafields['app--60169453569--memberr_v2'].store_credit_name.value %}_62_62{% if customer and current_store_credit_balance > 0 %}_62 {% assign current_store_credit_balance_formatted = current_store_credit_balance | money %}_62 _62 <div style="display: flex;_62 align-items: center;_62 justify-content: space-between;_62 padding-bottom: 1rem;_62 padding-top: 0;"_62 >_62 <span>_62 {{- 'cart.general.apply_store_credit' | t:_62 amount: current_store_credit_balance_formatted,_62 store_credit_name: store_credit_name -}}_62 </span>_62 _62 <memberr-store-credit-toggle_62 active-color="#000000"_62 height="24"_62 width="48"_62 initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"_62 style="height: 24px;"_62 ></memberr-store-credit-toggle>_62 </div>_62_62 <script>_62 document.addEventListener('memberr-toggle:change', () => {_62 if (window.location.pathname === window.themeVariables.routes.cartUrl) {_62 window.location.reload();_62 } else {_62 (async function() {_62 const response = await fetch(${window.themeVariables.routes.cartUrl}.js, {_62 headers: {_62 "Content-Type": "application/json"_62 }_62 });_62 _62 const cartContent = await response.json();_62 _62 document.documentElement.dispatchEvent(new CustomEvent("cart:updated", {_62 bubbles: true,_62 detail: {_62 cart: cartContent_62 }_62 }));_62_62 document.documentElement.dispatchEvent(new CustomEvent("cart:refresh", {_62 bubbles: true,_62 detail: {_62 cart: cartContent,_62 replacementDelay: 600_62 }_62 }));_62 })();_62 }_62 }, {_62 bubbles: true_62 });_62 </script>_62{% endif %}
Render toggle snippet:
_10{%- render 'memberr-toggle' -%}
2. Example implementation
snippets/memberr-toggle.liquid
_50{% if customer.metafields['memberr-v1'].store_credit_balance.value.current %}_50 {% assign current_store_credit_balance = customer.metafields['memberr-v1'].store_credit_balance.value.current_50 | minus: 0_50 %}_50{% else %}_50 {% assign current_store_credit_balance = 0 %}_50{% endif %}_50_50{% if customer and current_store_credit_balance > 0 %}_50 {% assign current_store_credit_balance_formatted = current_store_credit_balance | money %}_50 <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px">_50 <span_50 {% if request.page_type == 'cart' %}_50 class="text--subdued"_50 {% endif %}_50 >_50 {{- 'cart.general.apply_store_credit' | t: amount: current_store_credit_balance_formatted -}}_50 </span>_50 <memberr-store-credit-toggle_50 active-color="#1b3e33"_50 height="24"_50 width="48"_50 initial-state="{%- if cart.attributes.memberr_apply_store_credit == 'Yes' -%}true{%- else -%}false{%- endif -%}"_50 ></memberr-toggle>_50 </div>_50 <script>_50 document.addEventListener(_50 'memberr-toggle:change',_50 () => {_50 fetch( ${window.themeVariables.routes.cartUrl}.js )_50 .then((response) => response.json())_50 .then((cart) => {_50 if (window.location.pathname === window.themeVariables.routes.cartUrl) {_50 window.location.reload();_50 } else {_50 document.documentElement.dispatchEvent(_50 new CustomEvent('cart:refresh', {_50 bubbles: true,_50 detail: { cart },_50 })_50 );_50 }_50 });_50 },_50 {_50 bubbles: true,_50 }_50 );_50 </script>_50{% endif %}
Render toggle snippet:
_10{%- render 'memberr-toggle' -%}
3. Example implementation
snippets/memberr-toggle.liquid
_47{% if customer.metafields['memberr-v1'].store_credit_balance.value.current %}_47 {% assign current_store_credit_balance = customer.metafields['memberr-v1'].store_credit_balance.value.current_47 | minus: 0_47 %}_47{% else %}_47 {% assign current_store_credit_balance = 0 %}_47{% endif %}_47_47{% if customer and current_store_credit_balance > 0 %}_47 {% assign current_store_credit_balance_formatted = current_store_credit_balance | money %}_47 <div style="display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--gutter); padding-top: 0;">_47 <span>_47 {{- 'cart.general.apply_store_credit' | t: amount: current_store_credit_balance_formatted -}}_47 </span>_47 <memberr-store-credit-toggle_47 active-color="#1b3e33"_47 height="24"_47 width="48"_47 initial-state="{%- if cart.attributes.memberr_apply_store_credit == 'Yes' -%}true{%- else -%}false{%- endif -%}"_47 ></memberr-store-credit-toggle>_47 </div>_47 <script>_47 document.addEventListener(_47 'memberr-toggle:change',_47 () => {_47 if (window.location.pathname === window.theme.routes.cartUrl) {_47 window.location.reload();_47 } else {_47 document.documentElement.dispatchEvent(_47 new CustomEvent('theme:cart:reload', {_47 bubbles: true,_47 })_47 );_47 }_47 },_47 {_47 bubbles: true,_47 }_47 );_47 </script>_47{% endif %}_47_47Render toggle snippet:_47For example in `main-cart.liquid`_47_47```liquid_47{%- render 'memberr-toggle' -%}
Advanced
Display Store Credit separately from Store Credit:
Part 1
_21{%- if settings.memberr_enabled == true -%}_21 {%- assign store_credit_name = shop.metafields['memberr-v1'].store_credit_name -%}_21_21 {%- if cart.cart_level_discount_applications != blank -%}_21 <ul class="mini-cart__discount-list list--unstyled" role="list">_21 {%- for discount_application in cart.cart_level_discount_applications -%}_21 {%- unless discount_application.title == store_credit_name -%}_21 <li class="mini-cart__discount">_21 <span class="mini-cart__discount-badge discount-badge">_21 {%- render 'icon' with 'discount-badge' -%}_21 {{ discount_application.title -}}_21 </span>_21 <span class="mini-cart__discount-price text--xsmall text--subdued">_21 -{{ discount_application.total_allocated_amount | money -}}_21 </span>_21 </li>_21 {%- endunless -%}_21 {%- endfor -%}_21 </ul>_21 {%- endif -%}_21{%- endif -%}
Part 2
_13{%- for discount_application in cart.cart_level_discount_applications -%}_13 {%- if discount_application.title == store_credit_name -%}_13 <div class="ds-mini-cart__sum-item">_13 <span>_13 {{- 'cart.general.store_credit' | t -}}_13 </span>_13 <span>_13 -_13 {{- discount_application.total_allocated_amount | money -}}_13 </span>_13 </div>_13 {%- endif -%}_13{%- endfor -%}