If you want to integrate Quantity Break app codes on a fresh Brooklyn theme, then click here to download the Brooklyn theme and upload it to your store from store admin section. This theme has all the app codes integrated, so you will not need to do anything.


 

This app requires few theme liquid file changes. The changes depend on theme liquid codes. If you understand liquid logic / codes then follow the steps given below and let us know if you face any problems. Otherwise add install@solvercircle.com as a staff member of your store (If you don't know how to add "staff member" then click here) and email us at install@solvercircle.com, then we will install the codes for you.

 

  1. Login your Shopify Store in Admin panel.
  2. Now hit our Apps URL and click on to "Get App" button.

For show this application in Brooklyn theme, you should add some code in your template. So total process are given below.

Go to “Themes” menu of Admin Dashboard and Edit your published theme (Brooklyn) to install the application.

Click on “Template Editor” and put the Quantity Break Application “Code” on the following files.

 

Step 1 (a): Put the following code in theme.js.liquid file under the “Assets” folder just before key: cartItem.key, this code.

        //Start: SC Quantity Break
        sc_qb_product_id: cartItem.product_id,
        sc_qb_variant_id: cartItem.variant_id,
        sc_qb_base_price: cartItem.price,
        sc_qb_title: cartItem.title,
        //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (b): Put the following code in theme.js.liquid file under the “Assets” folder before cartCallback = function(cart) this functions code.

    //Start: SC Quantity Break
    //Modified Start
    sc_gqbreak_app_global.get_cart_prices(function(calc_prices){
              var calc_prices_by_keys={};
              var i=0;
              for(i=0;i<calc_prices.item_prices.length;i++){
                calc_prices_by_keys[calc_prices.item_prices[i].variant_id]=calc_prices.item_prices[i];
              }
              for(i=0;i<data.items.length;i++){                
                data.items[i].discountedPrice=theme.Currency.formatMoney(calc_prices_by_keys[data.items[i].sc_qb_variant_id].price*100, settings.moneyFormat);
                
                if(calc_prices_by_keys[data.items[i].sc_qb_variant_id].discount_amount>0){
                  data.items[i].discounts=calc_prices_by_keys[data.items[i].sc_qb_variant_id].discount_amount*100;
                  data.items[i].discountsApplied=true;
                }
              }
              data.totalPrice=theme.Currency.formatMoney(calc_prices.total_price*100, settings.moneyFormat);
              if(calc_prices.total_discount_amt>0){
                data.totalCartDiscount={{ 'cart.general.savings_html' | t | json }}.replace({% raw %}'{{ savings }}'{% endraw %}, theme.Currency.formatMoney(calc_prices.total_discount_amt*100, settings.moneyFormat));
                data.totalCartDiscountApplied=true;
              }
              if($cartContainer.is(':empty') || $cartContainer.find('form.ajaxcart').length==0){
                $cartContainer.append(template(data));
              }
      
      

                cartCallback(cart);
                  
    },false);
    //Modified End
    //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (c): Put the following code in theme.js.liquid file under the “Assets” folder just before var itemAdd = currentQty + 1, this code.

        //Start: SC Quantity Break
        var sc_qb_qty_cls='';
        $($el.attr('class').split(' ')).each(function() { 
            if (this.indexOf('sc-qb-cart-item-qty-2017210342-')==0) {
                sc_qb_qty_cls = this;
            }    
        });
        //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (d): Put the following code in theme.js.liquid file under the “Assets” folder just before key: $el.data('id'), this code.

              //Start: SC Quantity Break
              sc_qb_qty_cls:sc_qb_qty_cls,
              //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (e): Put the following code in theme.js.liquid file under the “Assets” folder after this._updateHistoryState(variant); the end of this code.

//Start: SC Quantity Break
if (typeof SC_QB_On_Variant_Select == 'function')
SC_QB_On_Variant_Select(variant);
//End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 2: Add the following code in the product-template.liquid file in “Sections” folder after the product select option code (</select>)

<!--  Start: SC Quantity Break -->
{% include "sc-quantity-break" with "sc-qb-product-script" %}
<!--  end: SC Quantity Break -->

Please see the following screenshot for clean overview.

 

 

Step 3 (a): In the cart.liquid file under “Templates” folder, put the following code as the class name of the quantity text box.

sc-qb-cart-item-qty-2017210342-{{item.product_id}}-{{item.variant_id}}

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-cart-item-qty-2017210342-{{item.product_id}}-{{item.variant_id}}"

Please see the following screenshot for clean overview.

 

 

Step 3 (b): In the cart.liquid file under “Templates” folder, put the following code at just before the html element where the cart line price is shown.

<!--  Start: SC Quantity Break -->
{% include "sc-quantity-break" with "sc-qb-cart-item-script" %}
<!--  end: SC Quantity Break -->

Please see the following screenshot for clean overview.

 

 

Step 3 (c): In the cart.liquid file under “Templates” folder, put the following code as the class name of the html element where the cart line price is shown.

sc-qb-cart-item-price-2017210342-{{item.product_id}}-{{item.variant_id}}

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-cart-item-price-2017210342-{{item.product_id}}-{{item.variant_id}}"

Please see the following screenshot for clean overview.

 

 

Step 3 (d): In the cart.liquid file under “Templates” folder, put the following code as the class name of the order note text box.

sc-qb-order-note-2017210342

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-order-note-2017210342"

Please see the following screenshot for clean overview.

 

 

Step 3 (e): In the cart.liquid file under “Templates” folder, put the following code as the class name of the html element where the cart sub-total is shown.

sc-qb-cart-subtotal-2017210342

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-cart-subtotal-2017210342"

Please see the following screenshot for clean overview.

 

 

Step 3 (f): In the cart.liquid file under “Templates” folder, change the type of the checkout button element from “submit” to “button” and Put the following code as the class name of the checkout button.

sc-qb-btn-checkout-2017210342

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-btn-checkout-2017210342"

Please see the following screenshot for clean overview.

Step 3 (g): In the cart.liquid file under “Templates” folder, put the following code at just before the form is end '</form>'

<!--  Start: SC Quantity Break -->
{% include "sc-quantity-break" with "sc-qb-cart-script" %}
<!--  end: SC Quantity Break -->

Please see the following screenshot for clean overview.

 

Step 4: Put the following code in theme.liquid file under the “Layout” folder just before the end of head tag '</head>'

  <!--  Start: SC Quantity Break -->
  {% include "sc-quantity-break" with "sc-qb-other-pages-script" %}
  <!--  end: SC Quantity Break -->

Please see the following screenshot for clean overview.

 

 

Step 5 (a): Put the following code in ajax-cart-template.liquid file under the “Snippets” folder as a class name in Item Quantity textbox code

sc-qb-ajx-cart-item-qty-2017210342-{{sc_qb_product_id}}-{{sc_qb_variant_id}}

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-ajx-cart-item-qty-2017210342-{{sc_qb_product_id}}-{{sc_qb_variant_id}}"

Please see the following screenshot for clean overview.

 

 

Step 5 (b): Put the following code in ajax-cart-template.liquid file under the “Snippets” folder just before the end of item tag {{/items}}

  <!--  Start: SC Quantity Break -->
	<input type="hidden" id="sc-qb-ajx-cart-item-hdn-2017210342-{{sc_qb_product_id}}-{{sc_qb_variant_id}}" class="sc-qb-ajx-cart-item-hdn-2017210342" value='{ "product_id":"{{sc_qb_product_id}}","variant_id":"{{sc_qb_variant_id}}","title":"{{sc_qb_title}}","price":{{sc_qb_base_price}} }' />
  <!--  end: SC Quantity Break -->

Please see the following screenshot for clean overview.

 

 

Step 5 (c): Put the following code in ajax-cart-template.liquid file under the “Snippets” folder as the class name of the order note text box.

sc-qb-ajx-order-note-2017210342

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-ajx-order-note-2017210342"

Please see the following screenshot for clean overview.

 

 

Step 5 (d): Put the following code in ajax-cart-template.liquid file under the “Snippets” folder as the class name in Quantity Number textbox code

{{sc_qb_qty_cls}}

Or, if there is no class attribute in that line of code then insert the following code:

class="{{sc_qb_qty_cls}}"

Please see the following screenshot for clean overview.