Post by aaragon » Mon May 06, 2019 4:34 am

I've been trying to change the layout of the product page for ThemeGlobal's free template for the last few hours without success. The product page (shown http://themeglobal.com/opencart/kingsto ... duct_id=55), has a single column, so I thought I would make the page more compact by just removing the Category column (which I did), and then change the layout. I want a responsive two-column layout that turns into 1 column in a mobile device. I have the setup working in other html pages (not related to the store):

Code: Select all

.row-sp {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sit next to each other */
.column-sp {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.column-sp img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column-sp {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
In the product.tpl file (which I edit directly through cPanel's file manager) I tried to change some "row" to "row-sp" and some "col-sm-" to "column-sp", but no matter what I try I can't seem to get it to work and I don't understand why. The relevant parts of the product.tpl are:

Code: Select all

<?php echo $header; 
$theme_options = $registry->get('theme_options');
$config = $registry->get('config'); 
include('catalog/view/theme/'.$config->get('theme_' . $config->get('config_theme') . '_directory').'/template/themeglobal/themeglobal_top.tpl'); ?>

<div itemscope itemtype="http://data-vocabulary.org/Product">
  <span itemprop="name" class="hidden"><?php echo $heading_title; ?></span>
  <div class="product-info">
  	<div class="row">
  		<div class="col-sm-<?php if($theme_options->get( 'custom_block', 'product_page', $config->get( 'config_language_id' ), 'status' ) == 1) { echo 9; } else { echo 12; } ?>">
  			<div class="row" id="quickview_product">
			    <?php if($theme_options->get( 'product_image_zoom' ) != 2) { ?>
			    <script>
...
...
...
    	
    	<?php if($theme_options->get( 'custom_block', 'product_page', $config->get( 'config_language_id' ), 'status' ) == 1) { ?>
    	<div class="col-sm-3">
    		<div class="product-block">
    			<?php if($theme_options->get( 'custom_block', 'product_page', $config->get( 'config_language_id' ), 'heading' ) != '') { ?>
    			<h4 class="title-block"><?php echo $theme_options->get( 'custom_block', 'product_page', $config->get( 'config_language_id' ), 'heading' ); ?></h4>
    			<div class="strip-line"></div>
    			<?php } ?>
    			<div class="block-content">
    				<?php echo html_entity_decode($theme_options->get( 'custom_block', 'product_page', $config->get( 'config_language_id' ), 'text' )); ?>
    			</div>
    		</div>
    	</div>
    	<?php } ?>
...
...
...    	
The entire file is attached to this post. I'm really frustrated and I don't know how to proceed. I thought changing the layout of an OpenCart theme would be way easier than this. Any help is really appreciated.

Newbie

Posts

Joined
Sun Mar 03, 2019 6:42 pm

Post by IP_CAM » Mon May 06, 2019 10:33 am

... for the last few hours without success.
Well, I wasted whole nights, to eventually then scrap some
Extensions again, so, don't take it personal, this place is full
of such poor fellows. :D

But it's a rather strange Coding, what makes it hard to assist. Better
get in Contact with the Theme Creator, or move on to something, using
more 'OC Default like' Code and Style.
Good Luck!
Ernie

Code: Select all

.column-sp {
-ms-flex: 100%;
flex: 100%;

Code: Select all

 <div class="col-sm-<?php if($theme_options->get( 'custom_block', 'product_page', $config->get( 'config_language_id' ), 'status' ) == 1) { echo 9; } else { echo 12; } ?>">

I'm rarely still active at the OC Forum. To reach me, contact: jti@jacob.ch
A Demoversion of my free OpenCart LIGHT v.1.5.6.5 Software Edition
can be seen in real Action here: http://www.jti.li/shop/
---
1'000+ FREE OC Extension-Repositories - from OC v.1.5.x up,
on the world's largest OC-related Github Site: https://github.com/IP-CAM
---
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Who is online

Users browsing this forum: No registered users and 5 guests