Change product page layout

  • Posts: 279
  • Thank you received: 1
10 years 4 months ago #201457

-- url of the page with the problem -- : www.ckdev.info/2015
-- HikaShop version -- : 2.4.0
-- Joomla version -- : 3.4.1
-- PHP version -- : 5.3.29

Please refer these 2 URLs:

Current site (running 2.2.2 Hikashop) : www.digitalguarddawg.com/automobiles-tru...less-ikey-rs/product

Revamped site : www.ckdev.info/2015/automotive/ikey-keyl...-2go-keyless-ikey-rs

You'll see that I moved everything in the <div id="hikashop_product_right_part> to be like an inline display with the left part. Trouble is, I cannot find where I did it!! :blush: The client loves the way I laid it out on the existing site, so I want to reproduce it...

Please help!!!! :cheer: Thanks.

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

  • Posts: 26274
  • Thank you received: 4045
  • MODERATOR
10 years 4 months ago #201528

Hi,

I think that you have a view override in your current site because the product options are displayed differently.
That's why the content can be display at the right of the page.
In your new site, the title of the option is display in one column and the value in a second column. It makes the table too large and it can't feet into the allocated space near the image. So your browser display it below the image.

Please take a look at your view overrides in your current site for the "product" view (of your current template).
You will see the override for the product options display.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 279
  • Thank you received: 1
10 years 3 months ago #202234

Nope - there's nothing in the template. I definitely edited one of HS's files - remember doing it. The problem is, I cannot remember where the <div class="hikashop_left_part"> and right_part are located to change the code again. I remember I had to fool around using tables to make it work. Can yo utell me where this code is please.

The other thing I would like to change is the white space around the product images. These don't appear in the old site (and this is a direct copy with Joomla 3.4.1 and HS 3.4.0 installed). I just don't see how they've appeared.

Thanks.

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

  • Posts: 84304
  • Thank you received: 13699
  • MODERATOR
10 years 3 months ago #202236

We don't recommend that you directly modify the files of HikaShop and always recommend that you go through the Display->Views menu to do your modifications.
If you edited directly the files of HikaShop via FTP, then you want to look at the files in the folder components/com_hikashop/views/product/tmpl/ one of them should have the code modifications.
If you went through the interface as we recommend, then, as Jerome said, your modifications are stored in the template in the folder templates/YOUR_TEMPLATE/html/com_hikashop/product.

For the white space, turn off the "force size" option of the HikaShop configuration.

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

  • Posts: 279
  • Thank you received: 1
10 years 3 months ago #202346

H Nicolas

Thanks found the image switch.

Yes, I was a lot newer to the whole override thing when I did this site 2-3 years back and, unfortunately as it turns out, did a direct hack on the file. Unfortunately, I can't remember which file that was, hence my current dilemma. However, I just found that Configuration | Display | Default Parameters for Products I can set the "Layout on product page" to "Reversed" and it almost does what I want without any tweaking. Yes, the image appears on the right instead of the left but I can live with that (assuming the client can!). The only thing I'd like to change is to put the variable "Want an extra fob?..." on a separate line to the dropdown associated with it. I'm sure it's just a <br /> needs to be inserted, but not sure which file. I looked in the product options file (which I thought was the most likely) but couldn't see it there.

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

  • Posts: 84304
  • Thank you received: 13699
  • MODERATOR
10 years 3 months ago #202356

Hi,

I'm getting a blank page on the previous link you had given:
take.ms/6FyJn
Could you give a link to the product page you're talking about so that we can analyze the problem ?

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

  • Posts: 279
  • Thank you received: 1
10 years 3 months ago #202438

Sorry Nicolas

I'd done a menu change since I first posted. Correct URL is www.ckdev.info/2015/automotive/push-butt...uxury-series/ikey-rs

On my previous setup the image looked like it had been floated left, whereas, in this reverse layout, it looks like the image is centered in the right hand part.

What I'd like to happen:

  1. Image floated right
  2. Text for button selection appear above the dropdown
  3. Text for extra fob appear above the dropdown
    4. T
hanks.

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

  • Posts: 84304
  • Thank you received: 13699
  • MODERATOR
10 years 3 months ago #202448

Hi,

You can do that by adding such CSS on your website:

.hikashop_product_left_part{
  width: 325px !important;
}
.hikashop_product_options_table td {
  display: block;
}
www.hikashop.com/support/support/documen...ize-the-display.html

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

  • Posts: 279
  • Thank you received: 1
10 years 3 months ago #202522

Thanks Nicolas - worked a treat!

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

  • Posts: 279
  • Thank you received: 1
10 years 2 months ago #205558

Hmm, doing that SEEMS to have screwed up a page I have a few individual products on. Please see www.ckdev.info/2015/automotive/push-butt...tomotive-accessories - It used to display like this - www.digitalguarddawg.com/auto-accessories - which is great. The new version... isn't!

Please tell me how I can fix this. Thanks!

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

  • Posts: 84304
  • Thank you received: 13699
  • MODERATOR
10 years 2 months ago #205570

Hi,

I'm not seeing anything on your website at the moment:
take.ms/4qyBd

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

  • Posts: 279
  • Thank you received: 1
10 years 2 months ago #205612

We've been getting attacked by brute force recently. You may have tried while one of those was happening.

Please try:
www.ckdev.info/2015/automotive/automotive-accessories

and

www.ckdev.info/2015/motorcycle/tracking-...torcycle-accessories

Thanks.

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

  • Posts: 84304
  • Thank you received: 13699
  • MODERATOR
10 years 2 months ago #205746

Hi,

The main differences I see are that there is no title/description at the top, and that the text is centered on itself instead of left centered.
To change that, you want to edit the menu with the id 1312 via the menu Display>Content menus to change the text centering and turn on the "show description" option.
Then, you want to edit the same menu item via the Joomla menu manager to activate the "component heading" setting.

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

  • Posts: 279
  • Thank you received: 1
10 years 2 months ago #206261

Very confused now. Text centering off or on makes no difference. Cannot find the "component heading" setting anywhere.

These settings in the Joomla menu and the Hikashop options are identical to the existing site which behaves properly. Why is the new site not behaving the same way?

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

  • Posts: 84304
  • Thank you received: 13699
  • MODERATOR
10 years 2 months ago #206405

Hi,

The name has changed on Joomla 3. The exact name of the option is "Show Page Heading".

I can see that the text is now left aligned on both links.

The listings behaves like you set them. There is no magic to it.

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

  • Posts: 279
  • Thank you received: 1
10 years 2 months ago #206408

How does Show page heading have anything to do with the issue I'm asking about? It just shows the <title> tag as the heading of the page.

The problem is that the layout is not nice. There is text spilling out of the boxes and it needs a complete makeover. I think I have tried every combination and nothing looks even remotely presentable. Something is making the div which the image is in reserve 575px which is way too much. Reducing that to 75px makes the layout much more acceptable (done with Inspect element). Unfortunately, I do not know where this is coming from so can't change it.

Perhaps no malice was intended Nicolas, but your parting comment wasn't necessary. I'm a paying customer asking for help. I acknowledge you have offered a solution previously, but implementing it did not work. I don't see I'm being unfair asking for further help.

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

  • Posts: 84304
  • Thank you received: 13699
  • MODERATOR
10 years 2 months ago #206438

Hi,

Your question was about to make the listing www.ckdev.info/2015/motorcycle/tracking-...torcycle-accessories looks like the one here www.ckdev.info/2015/automotive/automotive-accessories from what you said on your previous messages.
On both links the listing elements text goes out of their block. So it's normal that changing what I talked about doesn't help.
My instructions were to add the page heading and display the category description at the top of the listing, which are the only differences between the two links.

No malice was intended. I'm just saying that the listing displays like you configured it, answering to your question "Why is the new site not behaving the same way?"

Now regarding your new question :
The main issue with the text going out is that you configured your thumbnails with a width of 575px. So the image area reserves that width for itself on the left of the box and thus the rest is pushed out of it on the right.
Reduce the width of the thumbnails to a normal width (150px for example) in the settings of your menu item (when you edit it via the menu Display>Content menus) and that should greatly help it look like a normal listing of products.

The following user(s) said Thank You: trogladyte

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

  • Posts: 279
  • Thank you received: 1
10 years 2 months ago #206450

HI Nicolas

Thank you! After checking the element with Inspect Element, and playing with the parameters, I knew it was the div width, but couldn't figure out where it was being specified from.

Appreciate the support and apologies for taking the wrong meaning from the "power (or not!!) of the written word"!! :P My wife and I dated online for 6 months after we met. Boy did we have some "moments" when emailing or messaging on Skype!

Thanks again, that fixed it perfectly!

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

Time to create page: 0.069 seconds
Powered by Kunena Forum