Move procuct description right of image/right part

Dafilla
Topic Author
Offline

13 years 6 months ago #97686 by Dafilla

Move procuct description right of image/right part was created by Dafilla

Hi,

How can I move the product description to the right of the image?

Thanks.

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

Mohamed Thelji
Offline

13 years 6 months ago #97722 by Mohamed Thelji

Replied by Mohamed Thelji on topic Move procuct description right of image/right part

Hi,

You'll just have to edit your product page view through "Hikashop->Display->Views" by editing the "show_default" file of your "product" view of your front-end template, and move the code that's displaying your product description :

Code:

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

after this line :

Code:

<div id="hikashop_product_right_part" class="hikashop_product_right_part span6">

Hope this will help you a little.

The following user(s) said Thank You: Dafilla

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

Dafilla
Topic Author
Offline

13 years 6 months ago #97791 by Dafilla

Replied by Dafilla on topic Move procuct description right of image/right part

Great thanks, that's what I was looking for.

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

Winterthorn
Offline

13 years 6 months ago #98079 by Winterthorn

Replied by Winterthorn on topic Move procuct description right of image/right part

i am a bit nervous about editing this code can you please provide a full before and after shot of this code so that i can make sure that i don't make a mistake i would really appreciate it thanks so much.

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

Dafilla
Topic Author
Offline

13 years 6 months ago #98083 by Dafilla

Replied by Dafilla on topic Move procuct description right of image/right part

I added the image after the transer of the div with the black line in front of it. So cut the div and put it here. This puts the discription under the price. Don't worry about it, you can remove the adjustments if you did it wrong (trashcan end of line Displays). Good luck.

The following user(s) said Thank You: Winterthorn

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

Winterthorn
Offline

13 years 6 months ago #98099 by Winterthorn

Replied by Winterthorn on topic Move procuct description right of image/right part

Thank you for that information i really do appreciate it is there some way i can see a before and an after shot of this so i know i change only the correct code i would really appreciated that thank you so much. This shop is about to go in to production and i really need to make this change. Thank you all for your help in this urgent matter

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

Dafilla
Topic Author
Offline

13 years 6 months ago - 10 years 1 month ago #98100 by Dafilla

Replied by Dafilla on topic Move procuct description right of image/right part

Ok. Go Hikashop-configuration-dispay-displays.
Select the 'show_default' file.

This is BEFORE (so description in the bottom part):

Code:

  <?php
  if(!empty($this->element->extraData->bottomBegin))
    echo implode("\r\n",$this->element->extraData->bottomBegin);
  ?>
   <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>

And this is AFTER (so discription moved to the right):

Code:

  <div id="hikashop_product_contact_main" class="hikashop_product_contact_main">
    <?php
    $contact = $this->config->get('product_contact',0);
    if (hikashop_level(1) && ($contact == 2 || ($contact == 1 && !empty ($this->element->product_contact)))) {
      $empty = '';
      $params = new HikaParameter($empty);
      global $Itemid;
      $url_itemid='';
      if(!empty($Itemid)){
        $url_itemid='&Itemid='.$Itemid;
      }
      echo $this->cart->displayButton(JText :: _('CONTACT_US_FOR_INFO'), 'contact_us', $params, hikashop_completeLink('product&task=contact&cid=' . $this->row->product_id.$url_itemid), 'window.location=\'' . hikashop_completeLink('product&task=contact&cid=' . $this->row->product_id.$url_itemid) . '\';return false;');
    }
    ?>
  </div>
  <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>

Good luck.

Last edit: 10 years 1 month ago by Jerome. Reason: [code] is nice

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

Winterthorn
Offline

13 years 6 months ago #98105 by Winterthorn

Replied by Winterthorn on topic Move procuct description right of image/right part

so i went crazy and cut and pasted you entire file to my site all that moved was y add to cart button the txt remande in the same place not sure what was going on with that but sadly it did not work ... anymore ideas ??

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

chaoslogic
Offline

13 years 6 months ago #98106 by chaoslogic

Replied by chaoslogic on topic Move procuct description right of image/right part

so do we have any traction on this as i am at a total loss of how to do this as well... any help would be appreciated.

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

nicolas
Away

13 years 6 months ago #98120 by nicolas

Replied by nicolas on topic Move procuct description right of image/right part

The solution has already been provided by Dafilla.
Simply edit the file show_default and move the code

Code:

<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>

right after:

Code:

echo $this->cart->displayButton(JText :: _('CONTACT_US_FOR_INFO'), 'contact_us', $params, hikashop_completeLink('product&task=contact&cid=' . $this->row->product_id.$url_itemid), 'window.location=\'' . hikashop_completeLink('product&task=contact&cid=' . $this->row->product_id.$url_itemid) . '\';return false;');
}
?>
</div>

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

chaoslogic
Offline

13 years 5 months ago - 13 years 5 months ago #99096 by chaoslogic

Replied by chaoslogic on topic Move procuct description right of image/right part

i know it is a sad thing to have to do and others have tried it but can you show me a before and after of this i would really appreciate it and i know it would move things right along. Ok so here is the issue i finally figured out what was going on and how to move the code segments as described but what happens is the following please look at the attached screen shot this is the problem..

Last edit: 13 years 5 months ago by chaoslogic.

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

nicolas
Away

13 years 5 months ago #99111 by nicolas

Replied by nicolas on topic Move procuct description right of image/right part

That's the correct solution. And the modification is correct.

Your problem is now that because the description is too big, the right area goes automatically below the left area.
The solution is simple: you need to add the CSS code below in the frontend CSS file of HikaShop via the Display tab of the configuration page:
.hikashop_product_right_part{ width:45% }

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

chaoslogic
Offline

13 years 5 months ago - 13 years 5 months ago #99122 by chaoslogic

Replied by chaoslogic on topic Move procuct description right of image/right part

so i tried that and admittedly i had high hopes however all it did was narrow the txt and keep it in the wrong place i even went down as far as 15% and still did not put it in the desired place... any more ideas ?? any help is apericated thanks in advanced

Last edit: 13 years 5 months ago by chaoslogic. Reason: added additional details

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

Xavier
Offline

13 years 5 months ago #99194 by Xavier

Replied by Xavier on topic Move procuct description right of image/right part

Could you give us a link to your website ?

You have maybe to restrict the width of the left part too.
.hikashop_product_left_part{ width:45% }

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

chaoslogic
Offline

13 years 5 months ago #99256 by chaoslogic

Replied by chaoslogic on topic Move procuct description right of image/right part

kelowna.directrouter.com/~cowdnzdk/store.../category_pathway-83
here is the link you have requested. This site is still pre production.

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

Xavier
Offline

13 years 5 months ago #99286 by Xavier

Replied by Xavier on topic Move procuct description right of image/right part

Try to add a float right on .hikashop_product_right_part{width: 45%; float:right;}

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

chaoslogic
Offline

13 years 5 months ago - 13 years 5 months ago #99362 by chaoslogic

Replied by chaoslogic on topic Move procuct description right of image/right part

that is fantastic that worked now i just need to get every thing lined up because that threw every thing off how do we go about doing that ? and also can we get the description below the button instead of in line with it once we get that done we will be done i have included a picture to assist and again thank you all for your help with this i could not have done it with out your assistance.

ok so i was able to fix the description issue by putting a return in but the price is quite another issue please let me know how to fix that thank you.

Last edit: 13 years 5 months ago by chaoslogic. Reason: fixed one issue still need help with the other.

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

nicolas
Away

13 years 5 months ago #99516 by nicolas

Replied by nicolas on topic Move procuct description right of image/right part

You can do that with additional CSS on your website:
.hikashop_product_price_main{
display: block;
float: right;
margin-top: 35px;
margin-right: 30%;
}
.hikashop_product_quantity_main{
float: left;
}

The following user(s) said Thank You: chaoslogic

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

chaoslogic
Offline

13 years 5 months ago - 13 years 5 months ago #99601 by chaoslogic

Replied by chaoslogic on topic Move procuct description right of image/right part

never mind i found it thank you for all of your help you guys as usual are amazing.

Last edit: 13 years 5 months ago by chaoslogic.

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

geogeo
Offline

10 years 1 month ago #247906 by geogeo

Replied by geogeo on topic Move procuct description right of image/right part

Good afternoon,
i did all the above changes to css and show_default file but the description is still on the left side. Can you help me? here is a link of my site www.giakourtines.gr/kourtines/kourtinesramenes/product/2065-2-4

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

Time to create page: 0.320 seconds