Page 1 of 1

Moving product description module to the right beside the product image

Posted: Wed Oct 03, 2018 7:35 pm
by sag33
Hi,
I am using Opencart version 2.3.0.2. I would like to move the description module either to the right column beside the 'Add to Cart' button or below the 'Add to Cart' button, whichever is possible. Can someone please help me with this?

Re: Moving product description module to the right beside the product image

Posted: Wed Oct 03, 2018 9:16 pm
by IP_CAM
Well, something like this should work (in a default Theme)
to place it above the Description Section. And this way, the title
line content also still exists above, but just in 'regular' letter size.
Ernie
---
as VqMod: move_product_title.vqmod.xml

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<id><![CDATA[Move Product Title to description Tab]]></id>
<version><![CDATA[OC v.2.x]]></version>
<vqmver><![CDATA[2.6.1]]></vqmver>
<author><![CDATA[Ernie - IP_CAM]]></author>
<file name="catalog/view/theme/*/template/product/product.tpl">
<operation error="log">
<search position="replace"><![CDATA[<h1><?php echo $heading_title; ?></h1>]]></search>
<add><![CDATA[<br>&nbsp;<br /><strong><?php echo $heading_title; ?></strong>]]></add>
</operation>
<operation error="log">
<search position="before"><![CDATA[<ul class="nav nav-tabs">]]></search>
<add><![CDATA[<h1><?php echo $heading_title; ?></h1>]]></add>
</operation>
</file>
</modification>
or as OcMod: move_product_title.ocmod.xml (Mod Title possibly needs to be rewritten to install.xml ??? )

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<name><![CDATA[Move Product Title to description Tab]]></name>
<version><![CDATA[OC v.2.x]]></version>
<author><![CDATA[Ernie - IP_CAM]]></author>
<code><![CDATA[move_product_title]]></code>
<file path="catalog/view/theme/*/template/product/product.tpl">
<operation>
<search><![CDATA[<h1><?php echo $heading_title; ?></h1>]]></search>
<add position="replace"><![CDATA[<br>&nbsp;<br /><strong><?php echo $heading_title; ?></strong>]]></add>
</operation>
<operation>
<search><![CDATA[<ul class="nav nav-tabs">]]></search>
<add position="before"><![CDATA[<h1><?php echo $heading_title; ?></h1>]]></add>
</operation>
</file>
</modification>

Re: Moving product description module to the right beside the product image

Posted: Thu Oct 04, 2018 4:48 pm
by sag33
Hi Ernie,

I think I was not clear in my question, not the product title, I want to move the entire product description, like this:

Re: Moving product description module to the right beside the product image

Posted: Fri Oct 05, 2018 2:00 am
by IP_CAM
Sorry, my fault, I was visually displaced, as it looks! :crazy:
Still, this might NOT be so easy, since you don't seem to use an OC DEFAULT Theme
either, as it looks. But I added a default product.tpl File from an OC v.2.2.x Version,
and I marked, where about I 'moved' the Description/Attribute/Review- Section just below
the Add to Cart Button Section, to make it work in my range of OC 2.0.x Themes at least.
The problem is, that this Section not only includes the Description Section, but optionally
also the Attribute and and Review Section, and one has to make sure, NOT to end up, having
any </DIV>'s placed in the wrong sections, or the Botton of the Page could look screwed up.
You'll have to try, there is no other way ...
Good Luck ;)
Ernie
Temporary Demo Link:
http://www.ejacob.ch/cart/en/Desktops/H ... 47c20.html
---
Image

Re: Moving product description module to the right beside the product image

Posted: Fri Oct 05, 2018 3:53 am
by sag33
Hi Ernie,

I've gone through your product.tpl, you're right I'm not using the default theme that's why your file is different from mine. I don't want to move the review tab, issue is I am using a review widget that needs to be spread across the page laterally and cannot fit itself in the column to the right. I am attaching my version of the product.tpl, could you go through it and let me know if it's possible to shift only the description or description+specification tab to the right?

Re: Moving product description module to the right beside the product image

Posted: Fri Oct 05, 2018 8:22 am
by IP_CAM
what a weird piece of code, I had to align it, to see, how it's built, all on one Screen... :crazy:
Test it, as shown, but that's all I can do for you, since you never showed anything in real, so,
one would at least get an idea, how your stylesheet looks like, in order to get the best Style .
Or then, get a hold of the Fellow, creating this Theme.
Good Luck! ;) UNTESTED
Ernie
---
PS: That <li class="active">, default-existing here:

Code: Select all

<li class="active">
<a href="#tab-description" data-toggle="tab">
would then come here:

Code: Select all

<li class="active">
<a href="#tab-specification" data-toggle="tab">
instead of looking like this:

Code: Select all

<li>
<a href="#tab-specification" data-toggle="tab">
to 'pre-select' the Attribute Value(s) to display on pageload, if such exist.
- - - - -
And the same is VALID for this:

Code: Select all

<div class="tab-pane active" id="tab-description">
where the class="tab-pane active" needs to be moved to:

Code: Select all

<div class="tab-pane" id="tab-specification">
to make it look like:

Code: Select all

<div class="tab-tab-pane active" id="tab-specification">
---
Image

Re: Moving product description module to the right beside the product image

Posted: Sat Oct 06, 2018 4:17 am
by sag33
Hey Ernie,

I followed your instructions but I don't see any change on the product page. I've tried removing all server/browser cache and cookies, still nothing. Here is a link to one of the product page and it's structure: https://carenclass.com/index.php?_route ... mboo-Water
Also attaching the style sheet file for your reference.

Re: Moving product description module to the right beside the product image

Posted: Sat Oct 06, 2018 7:44 am
by IP_CAM
Well, if you placed the product.tpl file into:

Code: Select all

catalog/view/theme/booksstore/template/product/...
IF the 'bookstore' Theme uses it's own Theme product.tpl file,
it would probably function.
But not, if you placed the modified product.tpl into:

Code: Select all

catalog/view/theme/default/template/product/...
The Site Product Page Source at least does NOT contain the changed Code:

Code: Select all

</div>
</div>
<hr>
<!-- AddThis Button BEGIN -->
but it sure would, despite of beeing displayed or not, if it would exist.
---
This is exactly, as it looks in my v.2.0.x type default Theme product.tpl file,
to present, what's shown below on the image, and 'placed' below the ADD TO CART
Button Section:

Code: Select all

<button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>
</div>
 <?php if ($minimum > 1) { ?>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> <?php echo $text_minimum; ?></div>
<?php } ?>
</div>
<hr>

<!-- FROM HERE  -->
<div class="nav nav-tabs">
<li class="active"><a href="#tab-description" data-toggle="tab"><?php echo $tab_description; ?></a></li>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab-description"><?php echo $description; ?></div>
</div>
<hr>
<!-- TO HERE  -->

<?php if ($review_status) { ?>
...
...
Image
---
and this is the Code used, further up in the File, just below the Image Thumbs Section,
but now without the Description Section Tab:

Code: Select all

<li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>

<!--  FROM HERE  -->
<ul class="nav nav-tabs">
<?php if ($attribute_groups) { ?>
<li class="active"><a href="#tab-specification" data-toggle="tab"><?php echo $tab_attribute; ?></a></li>
<?php } ?>
<?php if ($review_status) { ?>
<li><a href="#tab-review" data-toggle="tab"><?php echo $tab_review; ?></a></li>
<?php } ?>
</ul>
<div class="tab-content">
<?php if ($attribute_groups) { ?>
<div class="class="tab-pane active" id="tab-specification">
<table class="table table-bordered">
<?php foreach ($attribute_groups as $attribute_group) { ?>
<thead>
<tr>
<td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td>
</tr>
</thead>
<tbody>
<?php foreach ($attribute_group['attribute'] as $attribute) { ?>
<tr>
<td><?php echo $attribute['name']; ?></td>
<td><?php echo $attribute['text']; ?></td>
</tr>
<?php } ?>
</tbody>
<?php } ?>
</table>
</div>
<?php } ?>
<!-- TO HERE  -->

<?php if ($review_status) { ?>
...
... 
but that's all I can do for you! ::)
Good Luck!
Ernie