Customise the quantity box

  • Posts: 363
  • Thank you received: 28
  • Hikashop Multisite
2 years 10 months ago #341245

-- HikaShop version -- : 4.5.1
-- Joomla version -- : 4.1.2
-- PHP version -- : 8.0

Hi,
How can i customise the quantity box ? Whatever i select in the configuration, the layout is really bad.
As you can see in the screenshot :



I want to have that, like in your documentation :


Actually is "show regrouped".

“Si tu ne travaille pas pour tes rêves, quelqu'un t'embauchera pour travailler pour les siens" - Steeve Jobs
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
Attachments:

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
2 years 10 months ago #341276

Hello,

You are right, the screenshot was made with the Joomla 3 template, now it seems that we have some work in order to keep this consistent with the Joomla 4 template.

We will work on our side in order to improve this on Joomla 4, in the meantime to immediately solve your problem and have what you need, follow me step by step :
1. Learn how to add custom css command thanks to this documentation .
2. Copy/past this code at the end of your Css file
=> Code Sample :

.add-on.hikashop_product_quantity_div.hikashop_product_quantity_change_div_regrouped a {
    text-decoration: none !important;
    color: rgba(118,118,118,1);
}
div#hikashop_product_quantity_field_1_area {
    height: 50px;
    border: 1px solid rgb(118, 118, 118) !important;
    border-radius: 3px;
}
input#hikashop_product_quantity_field_1 {
    border: none;
    background: none;
}
.add-on.hikashop_product_quantity_div.hikashop_product_quantity_change_div_regrouped {
    display: inline-block !important;
    border: 1px solid rgb(118, 118, 118) !important;
    border-width: 0 0 0 1px !important;
    padding: 0 9px !important;
    width: 30px !important;
    background-color: #f7f7f7;
}

Note that we usually don't post ready to paste code in general but here, since we are in default, the situation is different and that is why we are providing this fix.
Plus, maybe there are some adjustments to process (to better fetter fit your contest made of your template and maybe custom css), if you need some help notify us and provide the Url link where we can see your quantity input.

Sorry for the inconvenience, and thanks for your returns.
Regards

Last edit: 2 years 10 months ago by Philip.

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

  • Posts: 363
  • Thank you received: 28
  • Hikashop Multisite
2 years 10 months ago #341290

Hi,
OK, thank you.
It is better, but a little bit big, as you can see in my screenshot.
Is it possible to reconcile the + and the - ?
Or put them horizontally?



I just modified the height to 53px in place of 50 for the border fit the height correctly. But as said, it is too heigh.

Here is the url, but you have to enter with the following credentials :
This message contains confidential information


Regards.

“Si tu ne travaille pas pour tes rêves, quelqu'un t'embauchera pour travailler pour les siens" - Steeve Jobs
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
Attachments:

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
2 years 10 months ago #341298

hello,

In order to get the + & - side by side :

.hikashop_product_quantity_change_div_regrouped .hikashop_product_quantity_change_div_plus_regrouped {
    display: inline-block;
    margin: 0 3px;
}

Then adjustements in order to be more consistent in the display :
(Take care this following will replace previously provided css command)
.add-on.hikashop_product_quantity_div.hikashop_product_quantity_change_div_regrouped {
    display: inline-block !important;
    border: 1px solid rgb(118, 118, 118) !important;
    border-width: 0 0 0 1px !important;
    padding: 0 9px !important;
    width: 45px !important;
    background-color: #f7f7f7;
}
div#hikashop_product_quantity_field_1_area {
    height: 29px;
    border: 1px solid rgb(118, 118, 118) !important;
    border-radius: 3px;
}

Hope this will be better to fit your needs
Regards

Last edit: 2 years 10 months ago by Philip.

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

  • Posts: 363
  • Thank you received: 28
  • Hikashop Multisite
2 years 10 months ago #341309

Hi and thank you.
I had to modify your code, because it was not working. It was staying too high.
I put the code used below (I hope I did it right) :

.hikashop_product_quantity_change_div_regrouped .hikashop_product_quantity_change_div_plus_regrouped {
    display: inline-block;
    margin: 0 3px; 
}
div#hikashop_product_quantity_field_1_area {
    border: 1px solid rgb(118, 118, 118) !important;
    border-radius: 3px;
    background: #f7f7f7;
    padding-right: 5px;
}
.add-on.hikashop_product_quantity_div.hikashop_product_quantity_change_div_regrouped {
    display: inline-block !important;
    border: 1px solid rgb(118, 118, 118) !important;
    border-width: 0 0 0 1px !important;
    background-color: #f7f7f7;
	padding-left: 3px;
}
input#hikashop_product_quantity_field_1 {
    border: none;
    padding-left: 7px;
    margin-right: -4px;
}

I still have 2 small questions:
- I can't align the field with the buttons vertically.
- Is it possible to align the + sign with the - sign? They are not at the same height.



I know that these are small details, but if I can solve them it would be perfect.

Regards

“Si tu ne travaille pas pour tes rêves, quelqu'un t'embauchera pour travailler pour les siens" - Steeve Jobs
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
Attachments:
Last edit: 2 years 10 months ago by thefbi.

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
2 years 10 months ago #341312

Hello,

For this very specific and precise adjustements, there are a quick and efficient commands.
Example :

div#hikashop_product_quantity_field_1_area {
    position: relative;
    top: 1.5px;
}
And you can use this kind of Css command for "+/-" as well :
.hikashop_product_quantity_change_div_plus_regrouped a.hikashop_product_quantity_field_change_minus.hikashop_product_quantity_field_change {
    position: relative;
    top: -0.95px;
}

Hope that this will allow to meet your expectations.
Regards

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

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

  • Posts: 363
  • Thank you received: 28
  • Hikashop Multisite
2 years 10 months ago #341351

Thank you very much.
Now it is perfect.

“Si tu ne travaille pas pour tes rêves, quelqu'un t'embauchera pour travailler pour les siens" - Steeve Jobs
"La sagesse, c’est d’avoir des rêves suffisamment grands pour ne pas les perdre de vue quand on les poursuit." - Oscar Wilde
The following user(s) said Thank You: Philip

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

Time to create page: 0.082 seconds
Powered by Kunena Forum
loading