Code Implementation

Should you have moved or updated your theme, Rebillia’s codes have probably been erased from your design mode. Follow the insturctions below to re-implement Rebillia into your store.

For BluePrint Themes:

From your BigCommerce admin panel, click on “Storefront Design“.

In the main page (right panel), under the title “Design Options” you will find a “More” tab. Click on it and choose “Template Files” from the dropdown menu.

Search for the “footer.html” file, click on the ‘…’ icon and choose “Edit” from the dropdown menu.

Scroll down to the bottom of the file, give it a couple of enters (to create spacing) and paste this following code:

<div id=’rebillia_overlay’ style=”z-index:-1; display:none;”></div><script type=”text/javascript”>var currentcustomeremail = ‘%%GLOBAL_CurrentCustomerEmail%%’;var shopPath = ‘%%GLOBAL_ShopPathSSL%%’;var domainName = ‘https://app.rebillia.com’;var domainURL = ‘https://app.rebillia.com/’;var appClientId = “ageychj33ynffm8otcbd88hxt9spicx”;var rebpostxmlhttpURL = ‘https://app.rebillia.com/storefront/login/guest’;var rebxmlhttpUrl = ‘https://app.rebillia.com/storefront/login/’;$(document).ready(function(){var matches=window.location.href.match(/[^\/]+$/);if (matches && matches.length) {var vec=(matches[0].split(‘.’));if (vec[0] == ‘account’ || vec[0] == ‘checkout’ || vec[0] == ‘finishorder’){$.getScript(domainName+”/js/embed-“+ vec[0] +”.js”);}if (vec[0] == ‘account’){customerJWT();}}});function customerJWT(bc_email) {var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 ) {if (xmlhttp.status == 200) {var rebxmlhttp = new XMLHttpRequest();rebxmlhttp.onreadystatechange = function() {if (rebxmlhttp.readyState == 4 ) {if (rebxmlhttp.status == 200) {console.log(‘Rebillia Message. Authentication Success’);}else if (rebxmlhttp.status == 404) {console.log(‘Rebillia Message. Token Error’);}else {console.log(‘Rebillia Message. Authentication Failed’);}}};rebxmlhttp.open(“GET”, rebxmlhttpUrl+xmlhttp.responseText, true);rebxmlhttp.withCredentials = true;rebxmlhttp.send();} else if (xmlhttp.status == 404) {var rebpostxmlhttp = new XMLHttpRequest();rebpostxmlhttp.onreadystatechange = function() {if (rebpostxmlhttp.readyState == 4 ) {if (rebpostxmlhttp.status == 200) {console.log(‘Rebillia Message. Authentication Success. Customer login successfully.’);}}};params=”bc_email=”+bc_email;rebpostxmlhttp.open(“POST”, rebpostxmlhttpURL, true);rebpostxmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);rebpostxmlhttp.withCredentials = true;rebpostxmlhttp.send(params);} else {console.log(‘Rebillia Message. Something went wrong’);}}};xmlhttp.open(“GET”, “/customer/current.jwt?app_client_id=”+appClientId, true);xmlhttp.send();}</script>

After pasting the code to the “footer.html” file, click on the “Save” button on the top left corner of the page.

Now search and click on the “styles.css” file on the left panel of the page, it is normally highlighted in a blue background.

Again, scroll down to the bottom of the file, give it a couple of enters (to create spacing) and paste this following code:

/* Rebillia Styling START */ #CheckoutStepPaymentDetails .ExpressCheckoutContent { opacity: 0; visibility: hidden; } /* Rebillia Styling END */

After pasting the code to the “styles.css” file, click on the “Save” button on the top left corner of the page.

Rebillia is now re-implemented on your store, you can close the design mode tab and go create a test transactions to make sure the app is connecting.

For Stencil Themes:

Note: It is not possible to edit an applied Stencil theme, thus you will need to create a copy of the theme, edit it and then apply it on your store.

From your BigCommerce admin panel, click on “Storefront Design” –> “My Themes“.

In the main page (right panel), under the title “My Themes“, click on the theme image. This will transfer you to the theme page, where you will click on “Theme Options” on the top right corner and choose “Make A Copy” from the dropdown menu.

Recommended: Set the copy name as “The name of the theme” + Rebillia + “The version of the theme”.

After submitting, BigCommerce will process the copied theme files. Once the processing is done, click on the theme picture, click “Theme Options” on the top right corner and choose “Edit Theme Files” from the dropdown menu.

In the design mode tab that was just opened, follow this path – Assets –> SCSS.

paste the following code in the bottom of the “checkout.scss” file:

/* Rebillia Styling START */ #CheckoutStepPaymentDetails .ExpressCheckoutContent { opacity: 0; visibility: hidden; } /* Rebillia Styling END */

After pasting the code in the directory, click on the “Save All Files” button on the bottom right corner.

Last step, from your BigCommerce admin panel, click on “Advanced Settings” –> “Web Analytics“. If you don’t have a “Google Analytics” tab showing, check the “Google Analytics” checkbox and click save on the botton. Now go to the “Google Analytics” tab and paste the following code (if you have something there already, paste the code on the bottom, under everything else):

  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script><div id=’rebillia_overlay’ style=”z-index:-1; display:none;”></div><script type=”text/javascript”>var currentcustomeremail = ‘%%GLOBAL_CurrentCustomerEmail%%’;var shopPath = ‘%%GLOBAL_ShopPathSSL%%’;var domainName = ‘https://app.rebillia.com’;var domainURL = ‘https://app.rebillia.com/’;var appClientId = “ageychj33ynffm8otcbd88hxt9spicx”;var rebpostxmlhttpURL = ‘https://app.rebillia.com/storefront/login/guest’;var rebxmlhttpUrl = ‘https://app.rebillia.com/storefront/login/’;$(document).ready(function(){var matches=window.location.href.match(/[^\/]+$/);if (matches && matches.length) {var vec=(matches[0].split(‘.’));if (vec[0] == ‘account’ || vec[0] == ‘checkout’ || vec[0] == ‘finishorder’){$.getScript(domainName+”/js/embed-“+ vec[0] +”.js?”+(new Date).getTime());}if (vec[0] == ‘account’){customerJWT();}}});function customerJWT(bc_email) {var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 ) {if (xmlhttp.status == 200) {var rebxmlhttp = new XMLHttpRequest();rebxmlhttp.onreadystatechange = function() {if (rebxmlhttp.readyState == 4 ) {if (rebxmlhttp.status == 200) {console.log(‘Rebillia Message. Authentication Success’);}else if (rebxmlhttp.status == 404) {console.log(‘Rebillia Message. Token Error’);}else {console.log(‘Rebillia Message. Authentication Failed’);}}};rebxmlhttp.open(“GET”, rebxmlhttpUrl+xmlhttp.responseText, true);rebxmlhttp.withCredentials = true;rebxmlhttp.send();} else if (xmlhttp.status == 404) {var rebpostxmlhttp = new XMLHttpRequest();rebpostxmlhttp.onreadystatechange = function() {if (rebpostxmlhttp.readyState == 4 ) {if (rebpostxmlhttp.status == 200) {console.log(‘Rebillia Message. Authentication Success. Customer login successfully.’);}}};params=”bc_email=”+bc_email;rebpostxmlhttp.open(“POST”, rebpostxmlhttpURL, true);rebpostxmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);rebpostxmlhttp.withCredentials = true;rebpostxmlhttp.send(params);} else {console.log(‘Rebillia Message. Something went wrong.’);}}};xmlhttp.open(“GET”, “/customer/current.jwt?app_client_id=”+appClientId, true);xmlhttp.send();}</script>

Rebillia is now re-implemented on your store, you can close all the tabs, apply the copied theme that we just edited and go create a test transactions to make sure the app is connecting.