Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How to add a prefix to a user input on Wix

daniellachev

New Coder
I am creating a virtual business card where people can add their information and create a page with their social media links. I am almost done but I need help coding this:

When a user goes to the update profile page they are presented with a bunch of option for example an Instagram username text input or a Facebook username text input etc. I want to make it so when a person writes their social media username it is then send to the dataset hook where a prefix is added depending on which user text input was used. Then the link that has been created in the hook goes to the dataset where it is stored as a url.

Example: I write my username in the Instagram box - daniel_lachev and I click submit. The hook sees that and adds a prefix - (theInstagramUrldotcom/) to the username and the whole url is then send to the dataset collection - theInstagramUrldotcom/daniel_lachev.

Can someone help me with this task please?
 
I had a look at Wix and after 100 third party providers were involved, the domain immediately landed on my blacklist.
I would rather recommend to create a website with Wordpress or similar than to use this service.
 
Honestly, I don't have any experience with Wix myself. What have you tried so far? What code do you have so far?

Whe I typed "wix hooks" into google I landed on https://support.wix.com/en/article/corvid-using-data-hooks and https://www.wix.com/corvid - not kowing the product I have no idea if these are the things that you need to use?

If so, it looks like you simply need to write a js function to manipulate the data before you insert to your collection. Something like the following I guess:

JavaScript:
export function collection_beforeInsert(item, context) {
    // prepend instagram URL if handle was set
    if (typeof item.instagram_handle === "string") {
        item.instagram_handle = `https://instagram.com/${item.instagram_handle}`;
    }
    
    return item;
}

I think `collection` needs replacing with the name of your collection and instagram_handle with the name of your field.

All speculation of course from a super-quick Google. Otherwise, answers to the above questions would help me get a clearer picture :)
 
Honestly, I don't have any experience with Wix myself. What have you tried so far? What code do you have so far?

Whe I typed "wix hooks" into google I landed on https://support.wix.com/en/article/corvid-using-data-hooks and https://www.wix.com/corvid - not kowing the product I have no idea if these are the things that you need to use?

If so, it looks like you simply need to write a js function to manipulate the data before you insert to your collection. Something like the following I guess:

JavaScript:
export function collection_beforeInsert(item, context) {
    // prepend instagram URL if handle was set
    if (typeof item.instagram_handle === "string") {
        item.instagram_handle = `https://instagram.com/${item.instagram_handle}`;
    }
   
    return item;
}

I think `collection` needs replacing with the name of your collection and instagram_handle with the name of your field.

All speculation of course from a super-quick Google. Otherwise, answers to the above questions would help me get a clearer picture :)

Hello Swift. Sorry for the late response and thank you very very much for helping me. That means a lot man.

First I want to say that this code looks like it is REALLY CLOSE to the answer. I have made a hook for making the first letters uppercase and this is how it looks:


[CODE title="Lower- to Uppercase"]export function SocialMedia_beforeInsert(item, context) {
item.firstName = toUpperFirst(item.firstName);
item.lastName = toUpperFirst(item.lastName);

if(item.status > 1000000 && item.type === 'GoInside') {
item.priority = true;
}

return item;
}

function toUpperFirst(s) {
return s.charAt(0).toUpperCase() + s.slice(1);
}[/CODE]


Back to your code. I have my collection set to SocialMedia and my input to instagramUser but when I add the names and everything and try to write my username it is saved as a text and the prefix isn't added. It feels as if the hook ignores this code. Here is how it looks:


[CODE title="Challenge Code"]import wi:laugh:ata from 'wix-data';
import wixLocation from 'wix-location';
import wixUsers from 'wix-users';



export function SocialMedia_beforeInsert(item, context) {

if (typeof item.instagramUser === "string") {
item.instagramUser = 'https://instagram.com/${item.instagramUser}';
}

return item;
}
[/CODE]


I feel like you are really really close to the solution but there is something missing. What could that be?
 
Hello Swift. Sorry for the late response and thank you very very much for helping me. That means a lot man.
No probs! That's why I'm here!
First I want to say that this code looks like it is REALLY CLOSE to the answer.
Good to know that we're on the right path :) Is there any kind of error logging for this? I can't see anything inherently wrong here.

There are a couple of things I would try though to debug this:
  • If you have multiple hooks operating, try to see if it makes any difference if you just have 1. (I have no idea if multiple hooks are supported on the same collection?)
  • I'd remove the conditional and ALWAYS set item.instagramUser to some value - this will give us an indication if the function is being called because your instagramUser will always be something you know regardless of the input. It could be that the typeof check doesn't work here, if that's the case we'll just need to work out the best way to check that instagramUser was set. (eg. something like item.instagramUser.length > 0 or simply item.instagramUser)

Finally, I notice your code has apostrophes instead of back ticks. Back ticks are template literals (assuming this is all js of course) which allows you to have things like ${item.instagramUser} in the string. What you have right now wouldn't evaluate the value of instagramUser. To prepend with strings only it'd be something like:
item.instagramUser = "https://instagram.com/" + item.instagramUser.

Hope that all makes sense! Let us know how you get on.
 
No probs! That's why I'm here!

Good to know that we're on the right path :) Is there any kind of error logging for this? I can't see anything inherently wrong here.

There are a couple of things I would try though to debug this:
  • If you have multiple hooks operating, try to see if it makes any difference if you just have 1. (I have no idea if multiple hooks are supported on the same collection?)
  • I'd remove the conditional and ALWAYS set item.instagramUser to some value - this will give us an indication if the function is being called because your instagramUser will always be something you know regardless of the input. It could be that the typeof check doesn't work here, if that's the case we'll just need to work out the best way to check that instagramUser was set. (eg. something like item.instagramUser.length > 0 or simply item.instagramUser)

Finally, I notice your code has apostrophes instead of back ticks. Back ticks are template literals (assuming this is all js of course) which allows you to have things like ${item.instagramUser} in the string. What you have right now wouldn't evaluate the value of instagramUser. To prepend with strings only it'd be something like:
item.instagramUser = "https://instagram.com/" + item.instagramUser.

Hope that all makes sense! Let us know how you get on.
Swift listen to what happened. Yesterday I spent 3-4 hours trying every possible combination of the fixes you gave me - nothing happened.

Today I said to myself that we need to start over and see the original code with the backticks. I felt that it is wrong because half of the url became grey and I thought that because of the // the code thinks that this is a comment. But I persisted and again - nothing happened.

I showed the code to a friend and he said - do you think that instagramUser is the correct name for the input? And was like umm yes? And he said to try to put in the name of the input in the collection. IT WORKED!!!

So all this time I was trying to put the id of the text field which was on the page and not the instagram field in the collection... Swift I am really sorry that I made you do a debugging session and you were ABSOLUTELY CORRECT from the beginning.

Thank you very much for the help. I edit videos professionally so if you need something like that write me a message in instagram - daniel_lachev and I will return the favor.
 
This stuff happens, I have had plenty of times in the past debugging why something wasn't working only to find that it was the smallest of typos - I'm sure that any programmer would tell you that we've all been there!

I'm glad you managed to get it sorted - if you need any more help give us a shout! :)
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom