2412 Views
May 05, 2021
Find your theme from the below list to add the Ajax code to your theme.
Debut theme
Ajax cart discount will attempt to install its code in your theme coding.
For AJAX cart, you have to edit theme.js. please follow these steps:
Step 1: From Shopify’s admin, select Online Store, then Actions > Edit code.
Step 2: Find the theme.js from
Step 3: Open the theme.js file.
Step 4: press Ctrl + F / Command + F to enable the search code input box, Now find “state.total_price” code in theme.js
Step 5: Replace with this code
'<span class="csapps-cart-original-total">'+theme.Currency.formatMoney(
state.total_price,
theme.moneyFormatWithCurrency
) +'</span>';
Here is the before and after code screenshot:
Boundless theme
Please follow these steps:
Step 1: From Shopify’s admin, select Online Store, then Actions > Edit code.
Step 2: Go to the assets and find theme.js.liquid
Step 3: Open theme.js.liquid file.
Step 4: press Ctrl + F / Command + F to enable the search code input box, Now find “cart.total_price” code in theme.js.liquid
Step 5: Replace with this code in 2 places.
1. '<span class="csapps-cart-original-total">'+Shopify.formatMoney(cart.total_price, settings.moneyFormat)+'</span>',
Here is the before and after code screenshot:
2. '<span class="csapps-cart-original-total">'+Shopify.formatMoney(cart.total_price, settings.moneyFormat)+'</span>'
Here is the before and after code screenshot:
Narrative theme
Please follow these steps:
Step 1: From Shopify’s admin, select Online Store, then Actions > Edit code.
Step 2: Go to the first theme.js / theme.min.js from Asset.
Step 3: Open theme.js and theme.min.js files.
Step 4: First go to theme.js
press Ctrl + F / Command + F to enable the search code input box, Now find “state.total_price” in theme.js
Step 5: Replace with this code
'<span class="csapps-cart-original-total">'+currency.formatMoney(state.total_price, theme.moneyFormat)+'</span>'
Here is the before and after selected code screenshot:
Step 6: Now go to theme.min.js
press Ctrl + F / Command + F to enable the search code input box, Now find “total_price” in theme.min.js
Step 7: Replace with this code
'<span class="csapps-cart-original-total">'+G.formatMoney(e.total_price,theme.moneyFormat)+'</span>'
Here is the before and after code screenshot:
Venture theme
Please follow these steps:
Step 1: From Shopify’s admin, select Online Store, then Actions > Edit code.
Step 2: First go to the cart-template.liquid under sections
Step 3: Open cart-template.liquid file.
Step 4: press Ctrl + F / Command + F to enable the search code input box, Now find “{{{totalPrice}}}” in cart-template.liquid
Step 5: Replace with this code
<span class="csapps-cart-original-total">{{{totalPrice}}}</span>
Here is the before and after code screenshot:
Express theme
Please follow these steps:
Step 1: From Shopify’s admin, select Online Store, then Actions > Edit code.
Step 2: Go to the first theme.js / theme.min.js from Asset.
Step 3: First Open theme.js file.
Step 4: press Ctrl + F / Command + F to enable the search code input box, Now find “formattedCartPrice” in theme.js
Step 5: Replace with this code
'<span class="csapps-cart-original-total">'+formattedCartPrice+'</span>'
Here is the before and after code screenshot:
Step 6: Now go to theme.min.js
press Ctrl + F / Command + F to enable the search code input box, Now find “this.elements.cartPrice.forEach” in theme.min.js
Step 7: Replace “e” with below code
'<span class="csapps-cart-original-total">'+e+'</span>'
Here is the before and after code screenshot:
Brooklyn theme
Please follow these steps:
Step 1: From Shopify’s admin, select Online Store, then Actions > Edit code.
Step 2: Go to the first ajax-cart-template.liquid from snippets
Step 3: Open cart-template.liquid file.
Step 4: press Ctrl + F / Command + F to enable the search code input box, Now find “{{{totalPrice}}}” in cart-template.liquid
Step 5: Replace with this code
<span class="csapps-cart-original-total">{{{totalPrice}}}</span>
Here is the before and after code screenshot:
Debutify theme
snippets/cart-page.liquid, templates/cart.ajax.liquid
Step 1: From Shopify’s admin, select Online Store, then Actions > Edit code.
Step 2: Go to the first cart-page.liquid from snippets and then cart.ajax.liquid from template
Step 3: press Ctrl + F / Command + F to enable the search code input box, Now find “cart.total_price” in these “cart-page.liquid & cart.ajax.liquid”
Old code:
<p class="cart__subtotal text-money spacer-bottom-none text-large" data-cart-total><span class="money">{{ cart.total_price | money }}</span></p>
Step 4: Replace with this code
<span class="csapps-cart-original-total"><p class="cart__subtotal text-money spacer-bottom-none text-large" data-cart-total><span class="money">{{ cart.total_price | money }}</span></p></span>
Note: Disable checkout button cost from settings for this theme.
Step 5: Put css in assets/theme.scss.liquid
#CartContainer .csapps-cart-total {
display: inline-block !important
}
.csapps-cart-total {
margin-left: 5px
}
.csapp-discount-list .discount .dis-text {
color: #63c17d !important
}
#CartContainer .mini_cart .csapp-discount-list .discount-label-conatiner {
display: flex !important
}
.csapp-discount-list .discount svg path {
fill: #63c17d !important
}
.csapp-discount-list .discount .dis-name {
align-items: center
}
.csapp-discount-list .discount {
display: flex !important
}
.csapp-discount-list .discount_price .csapp_money {
background: #63c17d !important;
color: #fff;
}
.csapps-table td,
.csapps-volume-discount-tiers table thead tr:last-child td,
.csapps-volume-discount-tiers table thead tr:last-child th {
text-align: left
}
If your theme is not listed above don’t worry. Click here to request to configure App with AJAX.