Product listing horizontal

Start
Prev
1
Next
End

WebmasterRD
Topic Author
Offline

Posts: 26
Thank you received: 1
Hikashop Business

1 year 4 months ago #354154

-- HikaShop version -- : 4.7.5
-- Joomla version -- : 4.3.3
-- PHP version -- : 8.2

Hi
I am trying to find a way to make a DIV product listing, that will display products i horizontal rows, rather then grid.

I am trying to migrate our old site from Redshop to Hikashop and I would like a similar layout. I tried with table layout, but then I am missing some information and it is very static with columns. I really want to use HikaShop, but I keep having a lot of issues with getting the layout I like. I am fairly good in CSS and HTML and I normally know how to do things. I think I just need a little pointer in a direction.
I have attached a pring from our current layout in Redhsop - I did code that entirely based on Gantry

Any pointers are greatly appreciated

Attachments:

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

nicolas
Online

Posts: 83007
Thank you received: 13400
MODERATOR

1 year 4 months ago #354162

Hi,

There are several things I can tell, you regarding what you want to do:
Since HikaShop 4.2.2, we've added a "table switcher" for the DIV display mode: www.hikashop.com/home/blog/447-hikashop-4-2-2.html#switch
The "List" mode of the switcher looks quite a lot like what you want. So, you might want to use it.

Now, it will default to grid mode, not list mode. But with a simple view override, you could have it default to list mode. For that, you just need to change the line:

$cookie_value = 'display_grid';

to:

$cookie_value = 'display_list';

in the view file product / listing_div via the menu Display>Views

Another thing is that that in DIV mode, you have another setting called "Layout type" which allows you to choose the layout to use for each product on the listing. By default, it is set to "image and title", and the description is not displayed, like on your screenshot. Change it to "image and description" and you'll have the description as well.
Basically, you can have all the information displayed on your screenshot, with the proper setup of the settings of the menu item / module.

Also, when you edit the menu item / module, you can potentially change the number of columns. By default, it is set to 3 columns. But you could have it in 1 column, making it closer to what you want, without using the table switcher system.

Finally, If you need extra information displayed, or you want to rearrange the information displayed, I would recommend you read this : www.hikashop.com/support/documentation/1...-display.html#layout
It will tell you how to find which view file to edit in the Display>Views menu. The drag & drop view builder area will also greatly help you, especially if you don't know coding as you can rearrange the elements visually with the interface provided.

The following user(s) said Thank You: Tradesell

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

WebmasterRD
Topic Author
Offline

Posts: 26
Thank you received: 1
Hikashop Business

1 year 4 months ago #354248

Cool - that was what I was looking for. My problem was that I had the columns set in the menu - that explained why I could not get it to show properly. Now I have something to work with

However I cannot get the table switch to work - It does not show and it does not matter that I override it - it has no effect.

I also looked a lot on the page that you are pointing to. The thing is that it does not tell what the different displays do - it is a little guesswowrk, so if there is a good description of teh different types it will be great - but for now I am very happy with your suggestion to use "image and description"

Thanks a lot

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

nicolas
Online

Posts: 83007
Thank you received: 13400
MODERATOR

1 year 4 months ago #354249

Hi,

The table switcher won't show if you configured the listing to be in one column. The goal of the switcher is to be able to switch between several columns (and you can configure the number of columns in the menu item) and one column.

Regarding the finding of which view file to edit, you must have missed this part in the link I gave :

To know which view you have to edit, just set the "Display view files" setting to "all" under the "Advanced" tab of the HikaShop configuration.

This will add dashed borders around eah view file used with the name of the view file used on the top left corner of the view file. It will have 2 parts separated by a /. The left part will be the view name and the right part will be the file name so you'll be able to easily find what you need to edit.

The "Display view files" setting will make it obvious to you which view file is used where on your frontend once you activate it.

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