I am using the user interface to give me a lot more options for a store products. One of the options a client needs is for the buyer to choose a font. I can do this as a drop down but is there anyway to change each font to the actual font type? Here is the URL that I am playing about with this on https://hartandesign.wixsite.com/codeshop/order-details
You can see the drop down in the ‘choose your font’ option. Hope that makes sense.
Hay Tania,
At this time we do not have the capability to customize the drop down to the extent you need.
However, you can easily create a preview using a second Text element and the .html property it has.
Something like the following will work
let yourFont = ... // value from the dropdown
$w('#previewText').html =
`<p><span style="font-family: ${yourFont}">Preview Text</span></p>`;
Thanks Yoav
I haven’t even looked at the ‘do your own code’ section of the Wix Code yet. Where would I put that? Is there now custom CSS sections like in WP where code is added?
Thanks
Hay Tania,
You can select the dropdown element and in the property panel select the onChange event, which is triggered anytime the dropdown value is changed. In the generated event handler, you write the code above. It will probably look something like
export function dropdown1_onChange(event) {
let yourFont = $w('#dropdown1').value;
$w('#previewText').html = `<p><span style="font-family: ${yourFont}">Preview Text</span></p>`;
}
Note this is assuming you have previously set the values for the dropdown to valid font names.
Right Yoav I am getting there. I understand that on change it will in theory show the hidden text box but what I can’t seem to figure out is how to identify each separate drop down menu item. They are not listed as separate property ID’s only the drop down box itself. I’m sure there is an instruction I am missing because I am not telling it how to identify which selection goes with which hidden text box. It is telling me that the ‘event’ parameter is never used? You can seen on the right the newly created boxes which I have hidden on load but they are still not showing when I click in the drop down.
This is now the error I am getting
Wix code SDK error: The value parameter of item at index 0 that is passed to the options method cannot be set to the value . It must be of type string.
Hay Tania,
The dropdown values are set via the Manage Items button. Checkout the following dialog
In this dialog you can set the names of the options as well as the values for each. The values are strings.
When you do
$w('#fontdropdown').value;
You will get the value of the selected option.
You will need to enter as the values valid font names, such as
-
“Times New Roman”
-
Helvetica
-
Courier
-
Verdana
Yes I have done that. I changed them all that’s why I can’t understand why it is still not working. These are all now Wix fonts.
Hay Tania,
I am afraid I have made a mistake in the code I have written above
The right code should be
export function dropdown1_onChange(event) {
let yourFont = $w('#dropdown1').value;
$w('#previewText').html = `<p><span style="font-family: ${yourFont}">Preview Text</span></p>`;
}
Notice the fix in the 3rd line
$w(‘#previewText’).html = <p><span style="font-family: ${yourFont}">Preview Text</span></p>;
Let me know if now it works
Hi Yoav
Thanks for getting back to me. This code is the same as the code above? I am unable to see what has changed. I am getting the same error still.
Tania
Hi Tania,
What has changed is the world class to style in the HTML fragment.
Can you share the error you are getting?
Yes thank you it has always said style if you look at your first post above with the coding. It seems to be the same. Attached is the image from the coding the word ‘event’ is in red because it says 'Parameter ‘event’ is never used.
And this the code error on preview which I’ve just noticed says item at index 1? Is this something to do with the onReady function? Thank you for your patience with helping me
Hi Yoav - I am just watching all the instruction videos again and was wondering that as coding is not working with this option. Is it possible to add a database and dataset to that drop down menu? It mentioned rich text which I guess means we could use different fonts in the database sections? Although I am guessing it only works with pages? Rather than having a dynamic box!
Other option is I can add you to the sample page I’m working on so you can see the issue in action.
Hi Tania,
It looks like there is an issue with the values you set for the dropdown options. Is it possible that for some items in your database, the field you have connected to the options value is empty?
Hi Yoav - So I have connected the drop down fontoption to the font dataset and the font column (value) so that when they select the font that is where it is recorded
You can see in the database where I have tested the inputs and that they are going into the database from the form - I as the client can see what text they require but what I want them to be able to do is see a sample of the font type so they are able to choose.
I think what I will end up doing is making images of each font type and put them next to radio buttons as I have with the other options
Thank you for your help
Tania,
I think the problem you see is caused by having the empty cells for Font in lines 1 to 6. Try entering font names for all rows and checkout if the error disappears.
Thanks Yoav I think we are at cross purposes. This is not a content database but a user input database.
It is the client that completes that when they choose which font they want? This database will be empty until the user chooses their font. Once it goes live they will all be empty until orders are made.
I think you are thinking it is a database that feeds the content but it is not it is a user entry form to populate the database.
I have now worked around it by adding images of the fonts they can select using radio buttons. Thank you for your help