Reporting styling inconsistencies

-- HikaShop version -- : 3.0.0
-- Joomla version -- : 3.6.5
-- Browser(s) name and version -- : Various

Good day,
Just wondering if there is a central location or a preferred method for communicating styling inconsistencies within Hikashop? Most I come across are minor, but they are noticeable and do detract from the overall shopping experience. A quick example: Leaving all other configuration options the same, changing 'Configuration->Display->Product Options->Add to cart on listings' between "One Per Product" and "Global" results in differently styled Add To Cart buttons. Would you like these reported individually, or would you prefer a daily/weekly compiled list? Bug report, feature request, or other location/method?

Thanks,
Matt

Hi Nicolas,
Thanks for the reply. You can actually see what's happening with the add to cart button in one of my earlier screenshots related to the stock level display (attached).

Matt

Jerome,
Sorry for the confusion. In response to my initial post, Nicolas kindly provided an example site where this behavior is not seen, and suggested that it may have something to do with the site-wide template that I'm using. He requested additional information including a before/after screenshot. I used a screenshot from an earlier thread with Nicolas because it was handy. I did not take into account that others would be viewing this thread and that they would not have the reference frame of our earlier discussion. So, please ignore the yellow circles, and instead focus on the Add to Cart buttons in the side-by-side image. On the left is the view configured for Global add to cart. On the right, configured for one per item. The only configuration change is the add to cart button display method, yet it results in completely different styles for the Add to Cart button on my site. That is the inconsistency that I referred to. I am fully aware that this appears to be an issue exclusive to some element of my particular site, and that the designers at Hikashop can not design for every possible variation and configuration of Joomla website. I'm looking for guidance on how I may resolve this issue, and any information you might be able to provide to help me fix the issue would be most appreciated.

Matt

Hi,

did you check the link Jerome gave in his post?
Reading the article carefully should help you out, since your problem looks to be a CSS issue.

By changing the add to cart setting from "One per listing" to "Global" nothing changes to the Add to Cart button itself, only its position on the page changes. So you should check your CSS styles being applied on the button in both cases. For example, your green button style might only be applied when it is inside the Sizes table, but not outside of it.

Hope that helps.

Hey GW,
Thanks for helping out! I guess my question relates mainly to a point that you bring up in your post.

By changing the add to cart setting from "One per listing" to "Global" nothing changes to the Add to Cart button itself, only its position on the page changes.

Hi Matt,

these are just problems with your template and my previous answer still stands, you need to check your CSS styles and make some adjustments. Otherwise best take it up with your template designer, because your template doesn't appear to be made yet for Hikashop 3.

You would indeed expect the buttons to be styled the same everywhere on the page, but the fact they do not indicates your template has not been designed to take that into account.

OK, bear with me here. I understand what you are saying, but in this instance, it is not a matter of the template I am using overriding Hikashop and causing undesired results. From what I can tell, Hikashop is not consistently applying classes/styles or even element types to the Add to Cart button based on configuration options chosen.

For instance, when the configuration is set with Button Type set to Normal, (where I would expect my site template to take precedence) and Add To Cart On Listings is set to Global the expected behavior occurs and the Add to Cart button is displayed as #1 above, that is, rendered using the style from my template. The button is rendered as an input element with a class=" button hikashop_cart_input_button" and all applied styles are a result of the 'button' class in bootstrap.css or nexus.css, both of which are associated with my template. Switching from a Global to a Per Product configuration for the add to cart button, without changing any other configuration, results in the button being rendered as a hyperlink (a) element with a class="hikabtn hikacart", both classes being defined in one of two Hikashop css files depending on the Button Type configuration. As such, there is no call to any stylesheet other than those belonging to Hikashop, so there can be no reasonable expectation that an external, site-wide template would influence the display.

I guess I just don't understand why the drastic difference in code for the button between the Global and One Per Product configurations. Why not render the button the same way in each instance? I would understand if additional/differing classes were used for positioning purposes in the two different layouts, but why change the type of element entirely?

I'm not trying to be an ass. I'm simply reporting the behavior I am experiencing on my site and trying to understand why it is occurring. I'm operating under a number of assumptions, some of which may be erroneous, in which case I look forward to being corrected. My first assumption is that regardless of whether Hikashop is configured to rely on external CSS (Button Type Normal), or it's own CSS (Button Type CSS), it should use one or the other exclusively based on that configuration setting. I would further assume that the button would be rendered as the same type of element consistently, not changing between an input element and a hyperlink within the same Button Type configuration. The final assumption I'm working under is that while configuration is set to Button Type CSS, the same css rules related to general appearance of the Add to Cart button should be applied to that button (via the element's classes) regardless of its display position on the page. If these assumptions are incorrect, I apologize for my ignorance and would appreciate any clarification of the configuration options and their intended effects that the community might provide.

Matt

Hi Matt,

you're not wrong, there are indeed some different classes going on because of new improvements in Hikashop 3, so I guess you could say we're in a transitional phase from Hikashop 2 to 3, that's why they still have the legacy settings. Hopefully someone of the Hikashop team would gladly discuss that with you, but instead of writing these long posts it's really a matter of a few minutes to fix it.

Why not simply add the old button class in your display configuration under "Extra CSS for add to cart buttons" and everything should look fine, easy fix. Or just open your template CSS file and add the new button class in a few places, a few minutes work at most. Just trying to help with a quick solution.

Kind regards,

Nicolas and GW,
Thank you both for your consideration and input on this matter. I fear we have all spent too much time on what can admittedly be patched up with a workaround or two quickly and effectively. I am still puzzled as to why the Add To Cart button is rendered as a different element type based on configuration.

When the button type is set to "Default" and add to cart is configured as "Global" the button is rendered as an <Input> element:

<input type="submit" class=" button hikashop_cart_input_button" name="add" ...

<a class="hikabtn hikacart" href="/product-catalog/product/updatecart/add-1/cid-7" onclick= ...

Hi Matt,

yes, it displays differently because in your template only the .button class is defined, which is present in the "old" input elements but by default not in the new Add to Cart <a> buttons.
As you can see, by default Hikashop 3 now uses the class .hikabtn for the buttons, which isn't defined in your template hence it's not styled by your template, but the great thing is HS 3 allows you to set the class for the buttons yourself as defined in the Display Configuration with CSS for buttons.

So like I indicated in my previous answer, you can:
1. Change this default hikabtn class to button in your configuration and your buttons should look exactly the same with any of your settings whether you have an <input> or <a> element
2. Or add the class .hikabtn in your template CSS file to where the class .button is also defined

Kind regards,