Wix VELO Location, Variable Text

Ask the community
, , ,
1

I’m using Wix Editor, and I am trying to make it so the text on the hero strip of my homepage changes based on where the user’s location is. My dream would be that somehow it could update with the user’s name… but idk if that’s possible so I settled on location.

using GPT i got a ton of code, but it didn’t seem to work. here’s it’s directions, and how it’s currently setup.

Let’s simplify the process and provide clear, concise directions for setting up the code to fetch location data and display it on your Wix site.

Step 1: Create Backend File for Fetching Location Data

location.js

  1. Go to the Backend section in the Wix Editor.
  2. Create a new file named location.js.
  3. Add the following code:
import { fetch } from 'wix-fetch';

export async function getLocation() {
  const url = 'https://ipinfo.io?token=MY_TOKEN_IS_HERE';

  try {
    console.log('Fetching location data from API...');
    const response = await fetch(url);
    console.log('API response received:', response);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Location data:', data); // Log the location data
    return data;
  } catch (error) {
    console.error('Error fetching location:', error);
    throw new Error('Unable to fetch location');
  }
}

Step 2: Create HTTP Function to Expose the Location Data

http-functions.js

  1. In the Backend section, create a new file named http-functions.js.
  2. Add the following code:
import { ok, serverError } from 'wix-http-functions';
import { getLocation } from 'backend/location';

export async function get_location(request) {
  try {
    console.log('HTTP function get_location called');
    const location = await getLocation();
    console.log('Location data returned from getLocation:', location);

    const response = {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(location)
    };

    return ok(response);
  } catch (error) {
    console.error('Error in HTTP function:', error);
    console.error('Error details:', error.message);

    const errorResponse = {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ error: 'Unable to fetch location', details: error.message })
    };

    return serverError(errorResponse);
  }
}

Step 3: Client-Side Code to Fetch Location Data

  1. Go to the page where you want to display the location data.
  2. Add the following code to the page code section:
$w.onReady(function () {
  console.log('Fetching location data from backend...');
  fetch('/_functions/get_location')
    .then(response => {
      console.log('Response from backend received:', response);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(location => {
      console.log('Location response:', location); // Log the location response
      const city = location.city || 'DIGITAL';
      $w('#locationText').text = city;
    })
    .catch(error => {
      console.error('Error in fetching location:', error);
      $w('#locationText').text = 'DIGITAL';
    });
});

Step 4: Publish and Verify

  1. Save and Publish: Ensure all backend and HTTP function files are saved and publish your site to make the changes live.
  2. Verify Endpoint Accessibility:
    • Open your browser and go to https://carterventuresolutions.com/_functions/get_location.
    • This should return the location data or an error message.

Summary

  1. Create location.js: Add code to fetch location data.
  2. Create http-functions.js: Add HTTP function to expose location data.
  3. Client-Side Code: Add code to fetch location data and update text on the page.
  4. Publish and Verify: Ensure changes are live and verify endpoint accessibility.

I did put my Ipinfo.info in there correctly. based on that… why doesn’t it work?