Skip to main content

Show/Hide Elements Based On Customer Location

Updated
In this article, we will be going through the steps necessary show/hide elements based on location.
 
This may be useful to you if your default currency is the same currency you are using for Blackcart. Right now, Blackcart only supports a single currency and a single country per storefront. This means that depending on the customer's location, they may or may not be able to use Blackcart.
 
We will be working on supporting multiple currencies for merchants in the near future, we understand that it may provide a confusing experience to some customers.
 
Note: You will need to sign up for your own IP API service. The one used in this article will not work for your storefront. To find an IP API service please refer to this article.

 

Theme File:

image.png
  • You will need to access your theme editor
  • Locate your theme.js file, this is usually found in the Assets folder however your theme may be different. Contact your Theme Developer if you are unable to locate the file.

 

Code Placement : Script Injection

image.png
  • Scroll to the very bottom of the page.
  • Paste the following code block into the editor
class TBYBContainer extends HTMLElement {
 constructor() {
   super();
   this.validateVisibility()
 }
 validateVisibility() {
   fetch("http://ip-api.com/json").then((response) => {
     return response.json()
   }).then((result) => {
     if (result?.country_code !== "US") {
         this.style.display = "none"      
     }
   });
 }
}


customElements.define('tbyb-container', TBYBContainer);
Note: Please refer to http://ip-api.com/json in the code. This is the API service url. In order for this script to work on your own storefront, you will need to paste in your own IP API service url.
 

Adjusting Country Configurations

image.png
 
Depending on which customers you wish to see the TBYB elements you will need to change the script code. Currently the country code used in the example above is the United States, "US". If you wish to change it, please refer to the country codes available for Blackcart, and replace "US" with any of the supported codes below.
 
Canada - CA
United Kingdom - GB
Australia - AU
 

Code Placement: HTML

image.png
  • You will need to access your theme editor
  • Locate your product-template.liquid file, this is usually found in the Sections folder however your theme may be different. Contact your Theme Developer if you are unable to locate the file.
  • Locate your Add To Cart Button within the file. Look for a name of add to cart or add
  • If you have already integrated your storefront with Blackcart you will need to replace the following code <div data-tbyb="tbyb-button"></div> with the one below.
<tbyb-container><data-tbyb="tbyb-button"></tbyb-container>

Related articles