Can I display Round-up on my drawer or pop-up cart?

Created by Shop for Good Support, Modified on Wed, 6 Jan, 2021 at 4:08 PM by Shop for Good Support

Yes, you can.

To display Round-up on your drawer or pop-up cart, you'll first want to switch from Automatic to Manual mode:

Hit Save.

Then, find your code files:

For example, if using a drawer cart, your code file might be cart-drawer.liquid:

Look for your drawer or pop-up cart code file and paste in this snippet:

<div class="dk-round-up-popup-static"></div>

in your cart file where you want the widget to appear.

Remember to save your changes! Then go back to your store, refresh the page, add an item to your cart, and you should see your Round-up widget in your drawer or pop-up cart. If you don't see it, try moving the snippet within the code file.

Templated Ajax Carts

Please note that if you use a templated ajax cart in your store, you'll need to add more code to your theme files. Here is the integration guide for templated ajax carts using the Handlebars template:

1. Cart.liquid Counters:

Find this code block and see below for the numbered code snippets/blocks you should add and where in your code to add them:

                  <div class="grid grid--full cart__row--table">
                   <div class="grid__item one-third text-center">
                   <label for="updates_{{ item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>

<!--1st code block to add-->                    
                    {% if item.vendor == 'DailyKarma' %}
                    <input style="display:none" type="number" name="updates[]" id="updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">
                      {% else %}
<!--1st code block ends here-->
                             
<input type="number" name="updates[]" id="updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">

<!--2nd code snippet-->
                      {% endif %}
<!--2nd code snippet ends here-->

                             </div>
                             <div class="grid__item two-thirds text-right">
                             {% if item.original_line_price != buddy_item_line_price %}
                            <small class="cart__price cart__price--strikethrough">{{ item.original_line_price | money }}</small>
                            {% endif %}
 
<!--3rd code block starts here-->
                            {% if item.vendor == 'DailyKarma' %}
                            <span class="cart__price">{{ item.final_line_price | money }}</span>
                            {% else %}
<!--3rd code block ends here-->

                           <span class="cart__price">{{ item.price | money }}</span>

<!--4th code block starts here-->
                           {%endif%}
<!--4th code block ends here-->

{%- assign discounts_size = item.discounts | size -%}
                      {% if discounts_size > 0 %}
                        {% for discount in item.discounts %}
                          <small class="cart__discount">{{ discount.title }}</small>
                        {% endfor %}
                      {% endif %}
                    </div>
                  </div>

<!--Placement-->
<!--5th code block to add is the Round-up snippet-->
<div class="dk-round-up-static"></div>
<!--5th code block ends here-->

{% if cart.total_discounts > 0 %}

                  {%- assign cartTotalDiscounts = cart.total_discounts | money -%}

                  <p class="cart__savings">{{ 'cart.general.savings_html' | t: savings: cartTotalDiscounts }}</p>

                {% endif %}

2. Theme.js.liquid:

Find this code block and see below for what you should add and where:

<!--Data for ajax cart:-->

item = {

              key: product.key,

              url: product.url,

              img: prodImg,

              animationRow: animation_row,

              name: product.product_title,

              variation: product.variant_title,

              properties: product.properties,

              itemQty: product.quantity,

              price: theme.Currency.formatMoney(
<!--1st code block starts here-->
(product.vendor === 'DailyKarma') ? product.final_line_price :
<!--1st code block ends here-->

product.price, theme.settings.moneyFormat),

              discountedPrice: theme.Currency.formatMoney((product.price - (product.total_discount/product.quantity)), theme.settings.moneyFormat),

              discounts: product.discounts,

              discountsApplied: product.price === (product.price - product.total_discount) ? false : true,

              vendor: product.vendor,

<!--2nd code block starts here-->
isDK: product.vendor === 'DailyKarma'
<!--2nd code block ends here-->
 };

3. Ajax-cart-template.liquid Placement:

Find this code block and see below for what you should add and where:

{% raw %}
<!--1st code block-->
               <div class="dk-round-up-popup-static"></div>
<!--1st code block ends here-->
      {% endraw %}
 {% if additional_checkout_buttons and settings.cart_additional_buttons %}

          <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>

        {% endif %}

<div class="grid__item display-table-cell one-half">

<!--Counters:-->
<!--2nd code snippet starts here-->
                  {{#unless isDK}}
<!--2nd code snippet ends here-->
                  <div class="ajaxcart__quantity js-qty">

                    <label for="updates_{{key}}" class="visually-hidden">{% endraw %}{{ 'products.product.quantity' | t }}{% raw %}</label>

                    <input type="number" id="updates_{{key}}" name="updates[]" value="{{itemQty}}" min="0" class="js-qty__fallback" data-id="{{key}}">

                  </div>
<!--3rd code snippet starts here-->
                  {{/unless}}
<!--3rd code snippet ends here-->
                </div>

To avoid having the customer redirected to your cart page

When you install Round-up in your drawer or pop-up cart and a customer checks the widget to donate, the customer is redirected to your cart page. To avoid this, you need to provide a drawer refresh function for our widget. Specifically, your team would need to assign a function to the window.dkRefreshCartAction variable. That function takes a Shopify cart object, already with our donation included. You can use it to re-draw the content.