Help with Product page layouts

  • Posts: 301
  • Thank you received: 1
12 years 5 months ago #51988

Hi
Have attached an image of the product page currently on my site (Mockup). I am having trouble finding where things are in views to manipulate the layout. A couple of things.
I want to basically make the Hika layout look like that shown in Mockup2 image (which is prestashop)

How do I make the Main product image larger (the thumbnails below are ok)?

It looks like that if things aren't being used such as vote, or dimensions - it is leaving blank space where they are normally located - you can see the spacing. Not sure how to stop this.

How do I get the intro text (before the readmore in my product description) to sit on the right hand side where the price and characteristic currently is.

My order would be
Product Description
Characteristics
Quantity
Price
Add to Cart

Much the same as the Mockup2 image,

I want to add the word quantity in front of the text box as well - not sure which view

Hopefully this makes sense
Thanks

Attachments:

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

  • Posts: 179
  • Thank you received: 17
12 years 5 months ago #52018

you seem to have a LOT more description (intro text) in your product in mockup than mockup2 ? are you going to have less inf on you site, its nice having it below so you can show as much information as possible. If you do want it on the right hand side its just a matter of moving this information in the Display -> Views -> file if your using commercial edition of Hikashop.

The bit below :

<div id="hikashop_product_description_main" class="hikashop_product_description_main">
<?php echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description)); ?>
</div>

Is currently located in <div id="hikashop_product_bottom_part" class="hikashop_product_bottom_part"> move it to just under <div id="hikashop_product_right_part" class="hikashop_product_right_part">.

Last edit: 12 years 5 months ago by rikatos.

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

  • Posts: 301
  • Thank you received: 1
12 years 5 months ago #52036

That isn't working - it puts ALL the product description in - I only want the section above the readmore which is the intro text.

I might be doing something wrong though

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

  • Posts: 179
  • Thank you received: 17
12 years 5 months ago #52079

ok this will do the job then :

<?php
echo preg_replace('#<hr *id="system-readmore" */>.*#is','',$this->row->product_description);
?>

stripped from the listing products, please be aware if you have any code such as tabs etc above the intro text that comes across as well, so you have to format it right :)

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

  • Posts: 301
  • Thank you received: 1
12 years 5 months ago #52146

Thanks - that worked. The only problem was it doesn't sit to the right of the images now - it drops everything below the product images. Tried a lot of things to get it to sit on the right but to no avail. Will need to look at that on a rainy day when I get time.

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

  • Posts: 179
  • Thank you received: 17
12 years 5 months ago #52161

You have definitions for left_part, right_part and lastly bottom_part in the CSS (Hikashop->system->configuration->Display CSS box, custom CSS), make sure they are set to defined widths (in my case 40% for left, 60% for right and 100% for bottom. I must admit on my sandbox site it all sits nicely, but that could be a mod I did at one point !

If you have a link can poke it to check :)

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

  • Posts: 301
  • Thank you received: 1
12 years 5 months ago #52212

That was it - doh. Thanks. Works fine now - still a bit more tinkering to do with other things there.

There is another problem - somewhere along the line all the categories showing in a module, related items, featured items, have all of a sudden gone vertical - cannot for the life of me think why. Haven't made any changes in the modules. Might have done something in the CSS though - accidently deleted something. Boxes are showing around them which is fine, but the rounded corners have disappeared.
www.ecomad.com.au/ecomadBamboo/eco-shop.html

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

  • Posts: 179
  • Thank you received: 17
12 years 5 months ago #52213

in the css you have put a' clear:both ' in the definition :

<div class="hikashop_category_image" style="height: 80px; text-align: center; clear: both;">


that will make it do that. go into config->display->Css-> front end css

maybe you were thinking of a float: left; instead ?

Last edit: 12 years 5 months ago by rikatos.
The following user(s) said Thank You: nicolas

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

  • Posts: 301
  • Thank you received: 1
12 years 5 months ago #52381

Thanks - didn't work though. I haven't added any clear: both anywhere - they are all part of the CSS when you get hikashop.

Even restoring the CSS to original doens't help.

Totally lost now as to what is causing it to all go vertical

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

  • Posts: 179
  • Thank you received: 17
12 years 5 months ago #52391

Its not as simple as your category grid being defined as a table?, or you setting the divs in the cateogry listing to 1 column ? You could either pop across on private message some login details or use akeeba backup to save the enitre site and I could restore a local backup of it here to have a look, but hopefully those two should give you some guidance.

As sefs are on cant quite see whats happening with links, but more than likely its one of the above, but here if need help.

Last edit: 12 years 5 months ago by rikatos.

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

  • Posts: 301
  • Thank you received: 1
12 years 5 months ago #52480

Its sorted - I had some CSS over rides for the main template and when I deleted them all, hikashop went back to normal again showing things as they should. I narrowed it down to some css that had nothing to do with Hikashop but must have clashed somehow.

Thanks for your help.

Would you know where the code is located that holds the table with the quantity and the plus and minus signs to increase/decrease product stock, and the Add to cart buttong on the product page? Can't find it in the views anywhere - thought it might be the view product quantity but can't see it in there. I need to style this particular table only. You can see here under the price www.ecomad.com.au/ecomadBamboo/shop-cate.../product/cid-32.html

Cheers

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

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
12 years 5 months ago #52544

It's in the file administrator/components/com_hikashop/helper/cart.php
Note that we recommend that you use a template override to change that instead of modifying that file directly:
www.hikashop.com/en/support/documentatio...tation.html#override

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

  • Posts: 301
  • Thank you received: 1
12 years 5 months ago #52570

That looks a little out of my league.

All I want to do is amend styling. It would be good if each of the separate sections like the product page price and the module cart price for instance have their own CSS ID - as I have found it hard to change one thing without it changing another using CSS. The table in the product page which I want to change doesn't have a CSS ID or CLASS assigned and any changes I make to a table affect tables everywhere. This would make it simple to change styling of elements. But I might be missing something :)

The only other thing I wanted to do with this section is add the word Quantity in front of the Quantity text box. And it would be nice if it had similar look to the checkout where you get the refresh graphic. Will keep tinkering to see if I can do it
Thanks

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

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
12 years 5 months ago #52572

Each section HAS classes and ids in order to do any CSS you need.
Please explain what "table" you want to change, a link to the page on your website and I'll tell you the CSS you can use.

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

  • Posts: 301
  • Thank you received: 1
12 years 5 months ago #52574

Hi
The page is here: www.ecomad.com.au/ecomadBamboo/shop-cate.../product/cid-32.html

I am trying to move the section where it has quantity, the plus and minus, and Add to Cart to the right. Also there is too much space between the + and - signs. And I want to add the word quantity in front of the text box. When I look at the source code of my page the table itself has no id or class.
<span class="hikashop_product_stock_count"></span>
<table>
<tr>
<td rowspan="2">

So I am not sure how to do this.
Thanks for your help.

EDIT: Have managed to right align that table but I can't seem to make the table padding smaller. Still having trouble with a few other styles like setting a height for the table and manipulating the padding / margins for the table.

Last edit: 12 years 5 months ago by Huski.

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

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
12 years 5 months ago #52638

You can do like that:

.hikashop_product_stock_count table{
//your css
}

and that will apply CSS to that table.

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

  • Posts: 12
  • Thank you received: 0
11 years 8 months ago #95771

ok this will do the job then :

<?php
echo preg_replace('#<hr *id="system-readmore" */>.*#is','',$this->row->product_description);
?>

stripped from the listing products, please be aware if you have any code such as tabs etc above the intro text that comes across as well, so you have to format it right


Hi first of all, thanks for this thread Huski and rikatos. I have followed the steps and I manage to make the product description to appear on the right part. However, it puts everything in there including tabs where I actually want only the description before the tab. I have tried to fix it for some time but to no avail. Huski, you managed to fix it, what exactly did you do?

Please see the screenshots attached. Mockup is as-is and Mockup2 is to-be.

Many thanks in advance guys.

Attachments:
Last edit: 11 years 8 months ago by max.mandias. Reason: more clarity

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

  • Posts: 179
  • Thank you received: 17
11 years 8 months ago #95774

Basically you are talking like my quote site ?

www.glcportal.co.uk/leisure/product/560-kru-xs-iso.html

Just that I have removed pricing:)

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

  • Posts: 12
  • Thank you received: 0
11 years 8 months ago #95775

Yes! I want it exactly like that. What should I do now?

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

  • Posts: 179
  • Thank you received: 17
11 years 8 months ago #95785

From my memory all I did was change product/show.php files within hikashop (Display..Views..Filter by Front end and your template).

This allows you to edit the override file (ie if you mess it up you just get rid of your override and all returns to default).

I will pop across (attached) my show.php file so you can paste over and see if it fits your needs. Naturally I recommend doing on a test site not a live one !

Attachments:
Last edit: 11 years 8 months ago by rikatos. Reason: attachment

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

Time to create page: 0.108 seconds
Powered by Kunena Forum