Hikashop 4.1.0 few question

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306348

Hi,

1. I see with update we have received new filter cursor. Well great but My concern is why would we need to load extra css "nouislider.min.css" file only for this cursor? It also has only few lines of css but again it is extra request for server which is slowing down page....
Why not just add it to front-end css as it was with old one? So we could just copy code if needed and apply to our own css style...

I would suggest to rethink it again with those extra css files you adding each year...
Why not just put everything into ONE hikashop css file, seperate each library inside and minify it, and give some settings to load or not that file?
So insteed of having 7 request we could have 1.

Usually who is using hikashop, has Joomla template with some customizations on it and 90% of them wont need any hikashop css file at all... As example bootstrap 3 or even joomla 4 with bootstrap 4, so why would we need hikashop grid css?

Please make hikashop more flexibile and give us pssibility to use hikashop css or not...


2. I see you have added support for webP images. That's briliant improvement!

Looked into code:

$this->config->get('add_webp_images', 1)

However couldn't find settings for this? Where are they?

Thanks

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

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
5 years 6 months ago #306353

Hi,

1. It could indeed be a good idea to include the CS of that slider in the HikaShop CSS.
We'll look into it.
If we put everything into one CSS file and minify it, it would cause several problems:
- if it's minified, you would have a hard time modifying the CSS code or even reading it. For customization purposes, it's not a good idea
- If you override that CSS (like we offer the capability in the Hikashop configuration) then you wouldn't get any new CSS from the moment you do the override. Having different files allows you to override the frontend/style CSS files which are mainly to style the elements (color, size, etc), while forcing the update of the main hikashop.css file which contains positioning CSS critical to the interface displaying somewhat properly (for example, the tabs, the grid system, the responsive CSS, etc).
- updating the elements for us is more complex in the future (for example, when a new version of nouislider comes out)

To take your example of the grid system, unfortunately, using the grid system in Joomla is not possible for us. We actually tried with bootstrap 2 when Joomla 3 was released and it was a big problem for us. Templates use different grid systems. Joomla 3 is using bootstrap 2 with the default template, but other templates will use bootstrap 4 or another grid system. Unfortunately, each grid system (even between bootstrap 2 and bootstrap 4) requires different HTML code structure, classes, etc.
If we were to support all the different grid systems of different templates, we would end up with complex view files and we would need to keep updating them to add support for new versions of grid systems each time a new one would come out.
Otherwise, it would lead to issues like this:
www.hikashop.com/forum/4-how-to/865505-b...-3-and-hikashop.html
And that's not even talking about view overrides that you would make which would have to be updated a lot more frequently, creating issues with updates, or changing templates.
Using our own grid system allows it to work regardless of which template you decide to use, even for templates that aren't developed yet.
That's a big advantage for us and for you as a user so that you can choose any template.
And that's just for the grid system, I'm not even talking about all the rest.
You'll see that in the backend we actually base ourselves on Bootstrap 2 (and bootstrap 4 for Joomla 4) and it works fine because no one use alternative templates in the backend. But in the frontend, it would just be an endless mess.
HikaShop already gives you the possibility to deactivate the styling CSS. We do not give you the possibility to deactivate the positioning CSS for all the reasons I mentioned above, which, ironically, is more flexible as thanks to that, you can use any Joomla template with HikaShop.

2. There is no setting. It's activated automatically. Just look at the HTML of your images and you should see the picture tag with the source tags with the webp image, etc.
The code you found is only to deactivate the support of webp via a hidden setting. But there is no point in doing that (as far as we know so far) so that's why it's not a setting you can turn off in the interface.

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306369

Hi,

1. I understand Nicolas your position regarding this. You right, it could give a lot issues... if not used right, but i am not asking to support everything. I only asking some settings to include hikashop css or not. It could be somewhere under advanced tab settings with some red notice about what it does and disabled by default.

2. Updating css is not so hard if you have good structure of it. Why not use it like this?

/* CORE GRID SYSTEM */
..Code here...
/*NOUISLIDER*/
...Code here...

So you just copy paste code where you need....

3. Please take a look into us. We use plazart framework which is based on boostrap 3 by default. So every page created is using bootstrap 3 styling, if we add some css we try to use bootstrap 3 classes as much as possible.

So you have now included new cursor filter which has own css. For sure we will have to override that css in order to have our own look as it was before. Do we need that core css? No. And it will be loaded and not used. Extra request....Same for chosen library, grid system, vex popup and many other. We don't use any hikashop css styling at all but like 7 requests are loaded each time on the page for no reason.

Also sometimes to override it we need to use "!important" tag which is basically not best practice at all...

We usually try to avoid components/modules who not allow to disable they css/jss but some of them have been listening and added such feature, like easy profile....

Anyway, it's you component which is getting better each year and thats really great but please stop adding extra css file for each library if it can be included somewhere into main css file.

2. Thanks. I have looked into media folder and i see that only 1 webP image is created. I assum it's for default one? What if you swap images via product edition page?

Just want to know more about it how it works.

Thank you

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306371

4. Been trying to add some styling to new cursor filter and found that there is no possibility style ( add different color) current range state. Please take a look at screenshots:




5. Filter type cursor, setting input fields to "YES" and saving, it wont save and goes back to "NO" after page refresh. Not sure what it does thought...



Thanks

Attachments:

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306372

And one more...

6. Using price range, price is displayed via tooltips but how could we make them static/fixed as it was with old price range?

I could disable it using:

tooltipSlider.noUiSlider.removeTooltips();

But the price range would be not displayed at all. Would be great to have some settings regarding this.

Thanks again.

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

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
5 years 6 months ago #306370

Hi,

1. and 3. Craming all the CSS and JS into one file is definitely not what we want to do. I can only see disadvantages. Otherwise, we would also have all the PHP code of HikaShop into one file... expect you would load plenty of things which aren't used most of the time and the memory requirement would be enormous. Adding the nouislider CSS (4KB) in the default CSS of HikaShop would result in the default CSS of HikaShop being 4KB bigger while only 1% of the people have a cursor filter which need that CSS. You might say that for this, there's not a lot of CSS so that's fine, but it's the same for all the other CSS and JS files.
Normally, when you start having a lot of CSS and JS files loaded, what you want to do is use a JS/CSS compression tool like JCHoptimize so that it generate cache files of the CSS/JS files so you end up with only 1 file for the CSS and 1 file for the JS on each page, especially optimized for the needs on your website.
Now, having hidden options to remove all the JS/CSS files could be something to do. But I'm afraid we'll end up with additional support as people set these options while they don't know what they do. Please understand that we make HikaShop for everyone, no just for people who know what they do :)

2. webp images are stored next to the thumbnails. So if you have your thumbnails in images/com_hikashop/upload/thubmnails/... then you'll find the webp images there. They are generated dynamically, like other thumbnails. So when you change images in the backend, nothing will happen until someone displays the images on the frontend and new thumbnails and webp images are regenerated for the new/modified images.

4. and 5. Good points ! Thanks for the feedback. I've added patchs for both. Download again the install package on our website and install it on yours and you'll get the patchs for these points.

6. It's the "input field" setting which allows you to do that. With the setting fixed, you'll be able to activate it and get a fixed display of the cursor values.

Last edit: 5 years 6 months ago by nicolas.

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306402

Hi,

1. Indeed you right. So the question is what is worst? To have 1 extra request for people using cursor filter or to have few lines of css for everyone who use front-end css :)

2. Input fields does work now but values are not updated dynamically when you move cursor? Also why it's input fields if basically user will use cursor for adjusting the values insteed of writing them directly into input fields? Why not just have values as per nouislider documentation?



Thank you for your time.

Attachments:

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

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
5 years 6 months ago #306404

Hi,

2. The values are updating dynamically on my end. Could you give a link to the page if that's not working on your end so that we can see the situation ?
Having input fields with the value instead of plain text is something that was requested by several people. The big advantage is that on mobile devices, it's a lot easier to enter the value in the input fields rather than drag the cursors with your finger, especially if you want a precise value and you have a lot of steps possible.

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306430

Hi,

I cant give you a link as all tests are done on local host. The values are updating for me only after you end dragging cursor.

As example:
Value is 10.
I drag cursor. Stop dragging and only then value changes.
Value is 15

With old cursor, when you were dragging it, the values would change instantly while dragging so you could see current value while dragging. Not sure how to explane it more clearly.

Are you able to reproduce it?

Thanks

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306448

And one more. Using input fields there is no currency sign.



Thanks

Attachments:

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306449

Also i would suggest to add one more settings for people who don't want to use input fields or either tooltips. So only values would be visible as with old cursor... Maybe it is useful for someone but i don't understand why would you want to use cursor if you allow people to enter values via input fields? Especially then cursor drag is working really well on mobile now!

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

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
5 years 6 months ago #306466

Hi,

1. Ah yes, that's a good idea to update the value while dragging the cursor.
I didn't thought of that.
Change the line:
hkSlider.noUiSlider.on('set', function (values, handle) {
to:
hkSlider.noUiSlider.on('update', function (values, handle) {
in the file administrator/components/com_hikashop/classes/filter.php and it will do that.
We'll do the change on our end too.

2. Adding the currency sign inside the input field is not possible. We could potentially add it before or after but that's about it.
We'll look at doing that.

3. As I said previously, having input fields is better for mobile. Tapping or dragging is less precise than directly entering a number in an input field. And with the tooltip mode, you already have the prices displayed in the tooltips. I don't see the need to have an extra option to not have tooltips and have text instead. It's more difficult for us to update and doesn't add anything compared to the tooltip mode as far as I can see.

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306501

Hi,

1. I don't see From UI perspective why i should want to use inputs and enter some values there while cursor dragging is working really well and it takes less time to adjust price on mobile or other devices. So it's a bit odd that while you add new features for someone else, you also brake old features who still in use of it :/

2. User should see what kinda currency he tries to adjust while dragging cursor or entering new values into inputs? It's not some kinda numbers it is price though....

Thanks

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

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
5 years 6 months ago #306515

Hi,

1. Dragging with your finger on a cursor with 10000 steps is bulky and it's almost impossible to be able to select an exact value in such case with dragging. That's why inputs make sense.
We didn't break any feature with this. It seems you don't want to hear that it's really hard in some cases to be able to select an exact value with a cursor with dragging. Even with the new cursor working better, it's still hard to select an exact value when you have a lot of steps, I can assure you that. Plus, for accessibility, it's also an important improvement as entering a value in a field is easier than dragging for disabled people and tools for disabled people.

2. And I agree. That's why I said we'll do something for that...

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306533

Hi,

After you add currency sign to inputs, the issue will be solved. We will be able to make inputs look like simple labels with some css. Not sure when you will be able to add it??

Thank you

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

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
5 years 6 months ago #306534

Hi,

It will be in the next version. So in around 2 months from now.

The following user(s) said Thank You: kyratn

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306562

Hi,

I thought it could be added as hot fix but it is fine having it within 2 months.

Thanks for support!

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306611

Hi,

One more question:)

I see wNumb.js library is used when price cursor is enabled. Not usre was it with previous version or it came with hikashop 4.1.0...
I would like to unset that js as i couldn't see any difference when doing it.

What is this library used for?

Thanks

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

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
5 years 6 months ago #306615

Hi,

This library is used to format the tooltips of the cursor fields as prices when necessary. That way, it takes into account the symbol, the number of decimals, the decimal separator, etc instead of just displayed the float number straight as javascript would:
refreshless.com/wnumb/

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

  • Posts: 1119
  • Thank you received: 114
5 years 6 months ago #306682

Hi,

Thanks for explanation. So if it is only used with tooltips then why it is also loaded while using inputs?

Thanks

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

Time to create page: 0.117 seconds
Powered by Kunena Forum