Price sensitive and price neutral characteristics/variants

  • Posts: 121
  • Thank you received: 2
3 years 3 months ago #328418

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.23
-- PHP version -- : 7.3.25
-- Browser(s) name and version -- : Firefox

For my site's four hosting products, I need customers to choose three variables:

1. subscription period (3 choices)
2. datacenter location (8 choices)
3. UNIX distribution (5 choices)

I have already created characteristics and variants for the three different subscription periods with their respective pricing.

My question is how do I best get customers to select server location and UNIX distribution, which are both price neutral?

Last edit: 3 years 3 months ago by andrewwinkler.

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

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
3 years 3 months ago #328420

Hi,

I think the best would be to create a custom field of the table "item" and of the type "single dropdown" or "radio" via the menu Display>Custom fields.

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

  • Posts: 121
  • Thank you received: 2
3 years 2 months ago #328443

Thanks for that. I've now got two custom selection fields for the hosting product category. I just need your advice now how to align the variant selection field for the subscription period with the new custom selection fields for datacenter location and UNIX distribution.


Here's the link to the page:
infinitymind.consulting/shop/hosting/product/15-standard-server

Attachments:
Last edit: 3 years 2 months ago by andrewwinkler.

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

  • Posts: 4508
  • Thank you received: 610
  • MODERATOR
3 years 2 months ago #328461

Hello,

As a start on this point, have a look on this documentation to learn how to add your custom Css command.

Then, now to guide you, it seems that you have to work on 2 points :
1. Your custom Item name : "Datacenter Location" & "UNIX Distribution"
=> Add the required width css command to constrain the width of your elements, like this :

.html_class_item_name {width:  value px;}

2. Your dropdown width AND the way it's display :
=> Like previous, constrain the width of your dropdown, and allow your elements to have other elements next to it, here the asterisk (*)
.html_class_dropdown_container1 select, 
    .html_class_dropdown_container2  select {
        width: value px;
        display: inline-block; // Allow other element on the same line
    }

Hope this will help you to achieved what you requested.
Regards

Last edit: 3 years 2 months ago by Philip.
The following user(s) said Thank You: andrewwinkler

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

  • Posts: 121
  • Thank you received: 2
3 years 2 months ago #328497

Thank you for your guidance. Since I'm still a little bit nervous about making stylesheet changes to Hikashop, I ended up adding the following code to the custom.css file of the template.

.key {
    width: 240px !important;
}
.
The page is looking almost perfect now.

The only thing I still would like to change is setting the fontweight of "Subscription Period" to bold, or of "Datacenter Location" and "UNIX Distribution" to normal, in order to make all three labels look the same. When trying to achieve the prior, I ended up turning both the label and selection bold, which is not what I want, and when I added the following code to the custom.css file, the setting is being ignored, in spite of deleting caches.
.hikashop_product_custom_item_name {
	font-weight: normal !important;
}

Attachments:
Last edit: 3 years 2 months ago by andrewwinkler.

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

  • Posts: 4508
  • Thank you received: 610
  • MODERATOR
3 years 2 months ago #328505

Hello,

first the minimum necessary to work properly :
Check that your selector is well written, good class (or Id) html and no mistake or typo.
To create your selector, you can use your navigator inspector tool like this, point your element you want to edit via Css code, then right-click => Inspect (or inspector tool).
A new window will open, that show your html code with class (and/or Id) in order to build your selector.

When you have write a good selector, sometime this won't works for a priority reason.
More precisely, if your command is visible in your inspector tool, but is overridden (css command crossed out), then his priority isn't strong enough.



Now, some css priority system explanation :
From less to the highest priority :
.html_class_element {command: value}
.html_class_module .html_class_element {command: value}
.html_class_page .html_class_module .html_class_element {command: value}
.html_class_page .html_class_module .html_class_element {command: value !important;}


Note, that if 2 css commands have strictly the same selector, then the last written in the css file will be the one used.
Hope this will help you to achieve what you need.

Regards

Last edit: 3 years 2 months ago by Philip.

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

  • Posts: 121
  • Thank you received: 2
3 years 2 months ago #328552

So how do you suggest I change my following code so that the labels for the custom selectors are no longer displayed in bold?

.hikashop_product_custom_item_name {
	font-weight: normal !important;
}
I pondered for a while over your Oracle-like reply above but couldn't work out what exactly you meant I was doing wrong. I'm not that smart.
Here's the link to the page in question again: infinitymind.consulting/shop/hosting/product/15-standard-server

Last edit: 3 years 2 months ago by andrewwinkler.

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

  • Posts: 4508
  • Thank you received: 610
  • MODERATOR
3 years 2 months ago #328566

Hello,

As explained you have to use the navigator inspector tool to get from your html element and build your selector, more precisely in my example, "hikashop_product_custom_item_name" isn't an html class, this is pseudo code, and so this can't work.

In the forum we will never provide code for custom purpose, only advice, guide and method that's maybe why there are a misunderstood here.
Sorry to haven't be more precise in my messages.

Regards

Last edit: 3 years 2 months ago by Philip.

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

  • Posts: 121
  • Thank you received: 2
3 years 2 months ago #328606

Now I tried the following code, but it still isn't working.

#hikashop_product_custom_item_info {
    font-weight: normal !important;
}
The custom field label keeps being displayed in bold. This is really weird. I've been working with custom.css overrides for many years.

By the way, I have the same problem with making the "required field" asterix disappear. Here's my code:
.hikashop_field_required {
    visibility: hidden !important;
}
That override works perfectly when used in the code inspector. However, in the CSS it keeps getting ignored. Why is that? Am I putting the code in the wrong file? I'm using the custom.css file of the T3 template.

Last edit: 3 years 2 months ago by andrewwinkler.

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

  • Posts: 2143
  • Thank you received: 747
3 years 2 months ago #328607

Hi,

1.) For the labels use

.hikashop_product_custom_item_name > label {
    font-weight: normal;
}

2.) Your CSS for hiding the asterisks should work (even without "!important"). If you're not seeing it work in the frontend, you'll need to clear caches, including the one of JCH Optimize, and eventually also your browser's cache.


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )
The following user(s) said Thank You: Philip, andrewwinkler

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

  • Posts: 121
  • Thank you received: 2
3 years 2 months ago #328621

It's all good now. By the way, I found an easier way to get rid of the asterix. I turned off "required field".

Last edit: 3 years 2 months ago by andrewwinkler.

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

Time to create page: 0.099 seconds
Powered by Kunena Forum