List of Fonts in Product

  • Posts: 89
  • Thank you received: 2
3 years 6 months ago #335159

Good day Peeps! I hope everyone is doing great!

I need to add a List of available Fonts in each product like the attached screenshot.



Is this possible in Hikashop?

Also - That same website "counts" the Letters entered derived from the Text / Name the visitor enters...
Is this also possible?

Attachments:
Last edit: 3 years 6 months ago by Uriel.

Please Log in or Create an account to join the conversation.

  • Posts: 83403
  • Thank you received: 13497
  • MODERATOR
3 years 6 months ago #335166

Hi,

You need to create a custom field of the table "item" and of the type "single dropdown" via the menu Display>Custom fields.
And in the "values" section, you need to have one row per font.
And in the "title" input field of each row, you can enter something like that:

<span class='myfont_class'>My font</span>
Then, in your template custom CSS file (or via the HikaShop custom CSS interface www.hikashop.com/support/documentation/1...ize-the-display.html ), you can add such CSS:
.myfontclass {
font: myfont;
}
and add your font to the pages ( www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website )

Regarding the counting of the letters, there is no automatic system you can configure to display the number of letters entered.
However, you could add that with a few lines of coding in the view file product / show_default.php via the menu Display>Views.
Here is a jsfiddle which presents a minimalist example of code to use (of course the javascript needs to be adapted so it requires a developer to add that, but it's quite easy for a normal developer ): jsfiddle.net/9cpqgvm2/
jsfiddle.net/9cpqgvm2/
Finally, if you need the price of the product to be calculated based on the number of letters entered once the product is added to the cart, it's possible with this plugin:
www.hikashop.com/marketplace/product/138...ce-letter-count.html

Please Log in or Create an account to join the conversation.

  • Posts: 89
  • Thank you received: 2
3 years 6 months ago #335236

Hi Nicolas, tahnk you for the detailed reply! - I appreciate that you always take the time to be thurough.

I think I have done as you suggested.
1) I downloaded the Font
2) I converted the Open Source Google Font to a wof (Web font file)
3) I uploaded those wof font files to : /public_html/templates/mytemplate/fonts
4) In my Template custom.css I added the following :


5) In Hikashop I did as you suggested :


The Single Dropdows is displaying on the Product, but that Font is not pulling through:


Any Ideas on what the problem could be please?

Attachments:
Last edit: 3 years 6 months ago by Uriel.

Please Log in or Create an account to join the conversation.

  • Posts: 83403
  • Thank you received: 13497
  • MODERATOR
3 years 6 months ago #335237

Hi,

From the top of my head:
- maybe it's because it's a dropdown and the browser cannot style the elements ?
- I see you're using double quotes instead of simple quotes and I don't see all of the HTML in the title input field, so maybe there is some issue there.
- it could be the CSS of the template or of chosen overriding the font of the select for some reason.

I would need the URL of the page to check on the situation to be able to confirm or not each possibility.

Please Log in or Create an account to join the conversation.

  • Posts: 89
  • Thank you received: 2
3 years 6 months ago #335244

Hi Nicolas,
I've sent the URL to you on the Contact Forum Support Page.

Please Log in or Create an account to join the conversation.

  • Posts: 83403
  • Thank you received: 13497
  • MODERATOR
3 years 6 months ago #335246

Hi,

So if you check the HTML of the page, you can see that the HTML you entered in the "title" input field of the custom field has been stripped. I suppose what I proposed would work for a radio display.
However, if you check the HTML, you can see that the option of the select there already has an id on which you can rely to customize it in CSS:
i.imgur.com/TiGXPpT.png
So in your CSS, instead of .yellowtail, you could use #yellowtail_Yellowtail and it should then work.
I did the change with my browser developer tools and as far as I can see it works:
i.imgur.com/WucSAab.png

Please Log in or Create an account to join the conversation.

  • Posts: 89
  • Thank you received: 2
3 years 6 months ago #335253

Hi Nicolas, thanks again for your response.
The # method works - thank you.

I noticed that the new Custom Field is not pulling into the Order, although it is set up to?



Nicolas - Is there a way to add an Image to the same Dropdown?
So my idea is to place an image with the font name in the dropdown insdtead of all this font stuff that is in any case not working on all browsers...

Attachments:
Last edit: 3 years 6 months ago by Uriel.

Please Log in or Create an account to join the conversation.

  • Posts: 83403
  • Thank you received: 13497
  • MODERATOR
3 years 6 months ago #335254

Hi,

The issue is that you selected "yes" in the "disabled" option of the yellowtail font choice. So that means that this choice can't be selected in the dropdown. And since you don't have any other value, the browser displays it as been selected even though it's disabled so you think it's selected but it isn't and that's why it doesn't appear in the checkout / order.

Having images inside dropdowns is not possible. You could do it, but you would have to change the type of the field to "radio" instead.

Please Log in or Create an account to join the conversation.

  • Posts: 89
  • Thank you received: 2
3 years 6 months ago #335296

That nakes perfect sense - Thank you Nicolas.
How would I place images in Radio Buttons?
Would it also need to get code like <span> etc?

Please Log in or Create an account to join the conversation.

  • Posts: 83403
  • Thank you received: 13497
  • MODERATOR
3 years 6 months ago #335310

Hi,

As I said, the span is for when you use radios.
For a select custom field, you actually don't need it.

Please Log in or Create an account to join the conversation.

  • Posts: 89
  • Thank you received: 2
3 years 6 months ago #335318

Hi Nicolas,

You said use Span while I had a dropdown on that Product (Not a Radio)
What I need to know is how to use a Radio Selct with Images please?

I have read through: www.hikashop.com/live-demo/10-documentat...d-listing.html#relai and I am not finding anything on this.

Last edit: 3 years 6 months ago by Uriel.

Please Log in or Create an account to join the conversation.

  • Posts: 83403
  • Thank you received: 13497
  • MODERATOR
3 years 6 months ago #335327

Hi,

For images, you can directly write the

<img src='xxx' />
HTML tag of your image (where xxx is the path of the image) in the "title" input field of each value of your custom item field. Note that this will work for a radio custom field, like you want, but not for "single dropdown" custom fields as, like I said before, you can't have HTML in dropdowns.

Please Log in or Create an account to join the conversation.

Time to create page: 0.098 seconds
Powered by Kunena Forum