Product Page Layout

[rulegacy 1]

We would like to set up the shown layout in Frozen on desktop. Having tried multiple variations of sort order and width for the respective modules, we are yet to achieve our goal. Either modules refuse to be positioned next to each other or run under gallery. Is this possible with stock means or do we want to employ styling as well? Any insight would be greatly appreciated.

[LeeFoster 39]

This should be possible but I haven't tried it yet, I'll look at is tonight but if this doesn't work there is the modular product page addon.

[♥JcMagpie 343]

first do you have the modular product info page or not!

If its not modular then its quite easy as you can force the layout to be what ever you like. If its the modular page then you are constrained by the bootstrap columns,   

ie you can only have it fit within that layout so if one item is 12 width then nothing can sit next to it! 2 at 6 width can sit side by side 3 at 4 width and so on!

so you need to work out your layout based on this.

Remember that as this is BS ie responsive, what looks good on a large screen will look very different on a small scree.

Edited August 8 by JcMagpie

[♥raiwa 582]

The product info page in CE Frozen is already modular, no need for the old add-on.

You need some additional css adjusting.

Try to add the pull right class to all template files except the gallery.

Or fix the gallery min height to at least the height of all other modules you have on the right side. This can be tricky due to the height depends on the description length, amount of options etc.

You may also need to take extra care for mobile view.

Edited August 8 by raiwa

[♥BrockleyJohn 157]

I agree that doesn't fit very well with the delivered code.

The layout that best represents what you want is two divs side by side, each half the width on sm and above, with the one on the right containing everything else that's not the gallery.

The easiest way to achieve this is two extra modules, one that begins the container and another that ends it.

[Hotclutch 70]

This layout is not possible with the stock osCommerce - because you want a 2 column layout and you need to be able to insert rows into each column.

This is stock osCommerce on the product_info.php:

  <div class="row is-product">
    <?php echo $oscTemplate->getContent('product_info'); ?>
  </div>

This is what you need to do:

  <div class="row">
	  <div class="col"><?php echo $oscTemplate->getContent('product_info'); ?></div>
	  <div class="col"><?php echo $oscTemplate->getContent('product_info2'); ?></div>
  </div>

 

[burt 2,426]

Totally do-able, it is exactly as @raiwa says.

Gallery 10 6
Name 20 6
Model 30 3
Price 40 3
Attributes 50 6
Buy 60 3
Reviews 70 3
Description 80 6

You are constrained by the DEPTH of the Gallery, so place a minimum height on this using CSS which would be placed in user.css

@media only screen and (min-width : 768px) {
  div.cm-pi-gallery {
    min-height: 1000px;
  }
}

Change the min-height on this to better reflect your needs.

You will then also need to amend tpl_ files for product_info, at the very least;

• remove clearfix from reviews button tpl
• restyle price as it would look weird as a h*

Prior to the extra tpl_ change for price, you would end up with something like:

Of course, how this would look in XS...is debatable, and that is why you can micromanage the layout using those tpl_ files if you so wish.  My system for these modules uses only the SM layer.... however, that micro-management is where things get really complicated really quickly and hence why I did not put that level of management into Core.

 

Edited August 8 by burt

[rulegacy 1]

Thank you all for chiming in.

So far we have attempted to implement the changes suggested by @burt and see that buy/review buttons do get overlayed in smaller viewports despite attempts to pull or clear divs using CSS. That would be the main usability issue.

Aestheticly, we'd prefer to have model/price on the same line but haven't been able to achieve that through styling either.

Given the mobile view issues, is the two-module approach the way to go or could the template styling still get us there? Perhaps we are just not applying the styles correctly.

[Hotclutch 70]

3 hours ago, rulegacy said:

Thank you all for chiming in.

So far we have attempted to implement the changes suggested by @burt and see that buy/review buttons do get overlayed in smaller viewports despite attempts to pull or clear divs using CSS. That would be the main usability issue.

Aestheticly, we'd prefer to have model/price on the same line but haven't been able to achieve that through styling either.

Given the mobile view issues, is the two-module approach the way to go or could the template styling still get us there? Perhaps we are just not applying the styles correctly.

If by two module approach you mean the 2 column approach i mentioned, then yes absolutely that's the way to do it - it will have to be a combination of core code change (a small one) plus template changes (organising your rows and columns). Using bootstrap you don''t want to be putting down media queries and styling to that extent - it defeats the purpose of using Bootstrap.

 

[rulegacy 1]

@Hotclutch Could you please share how we would go about specifying what rows (modules) go into either of those columns? This must be basics but we would like to start somewhere. Many thanks in advance.

[♥BrockleyJohn 157]

29 minutes ago, rulegacy said:

@Hotclutch Could you please share how we would go about specifying what rows (modules) go into either of those columns? This must be basics but we would like to start somewhere. Many thanks in advance.

to do as suggested, create an extra subfolder under includes/modules/content/ (and includes/languages/....../modules/content/) called product_info2, move the modules that you want into that folder (and their template files to the subfolder and their language files to the language folder)

[rulegacy 1]

@BrockleyJohn Thank you. Having done this, we used the following to arrange the columns but the modules are still all over the place. Do we want to use different CSS rules for both the row div and individual module divs in tpl files? Also how do we reset certain rules for XS view so that major parts are underneath one another?

  <div class="product-row">
      <div class="col1"><?php echo $oscTemplate->getContent('product_info'); ?></div>
      <div class="col2"><?php echo $oscTemplate->getContent('product_info2'); ?></div>
  </div>
  
  .product-row {column-count:2;}

[♥BrockleyJohn 157]

It's simply

 <div class="row">
      <div class="col-sm-6 row"><?php echo $oscTemplate->getContent('product_info'); ?></div>
      <div class="col-sm-6 row"><?php echo $oscTemplate->getContent('product_info2'); ?></div>
 </div>

If you want two columns of equal width above xs. Otherwise adjust them but make sure it adds to 12. Bootstrap does the rest for you.

Done like this, your module widths are divisions of the column width rather than the whole centre section (above xs).

[14steve14 381]

31 minutes ago, BrockleyJohn said:

It's simply

 <div class="row">
      <div class="col-sm-6 row"><?php echo $oscTemplate->getContent('product_info'); ?></div>
      <div class="col-sm-6 row"><?php echo $oscTemplate->getContent('product_info2'); ?></div>
 </div>

If you want two columns of equal width above xs. Otherwise adjust them but make sure it adds to 12. Bootstrap does the rest for you.

Done like this, your module widths are divisions of the column width rather than the whole centre section (above xs).

@BrockleyJohn Stupid question. Lets say you have two equal height columns that match the height of the image, and you want to add say the description or tabs below the two columns, is there anything that needs doing again.

[rulegacy 1]

@BrockleyJohn Thank you so much. Finally got it. The only thing to correct is to make model and price sit on the same line as opposed to how it is now (image attached). They are currently set at 6/6 width. We tried floating template divs without success.

On a completely separate but related note, we'd also like to include a reviews block (see image) right under the product name. Taking code from our current website (based on a ready-made theme), we converted it to a version with hardcoded links but something else is missing for it to work correctly. Perhaps the $HTTP_GET_VARS bit?

                        <div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate" class="reviews-box">
                            <?php
                            $reviews_query = tep_db_query("select count(*) as count, r.reviews_rating from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and reviews_status = 1");
                            $reviews = tep_db_fetch_array($reviews_query);

                            $review_query_rating = tep_db_query("SELECT ROUND(SUM(`reviews_rating`)/COUNT(`reviews_id`)) as rating
             FROM " . TABLE_REVIEWS . " WHERE products_id = '" . $product_info['products_id'] . "'  AND `reviews_status` = 1");
                            $review_rating = tep_db_fetch_array($review_query_rating);

                            if ($reviews['count'] == 0) {
                                echo
                                    '<p class="no-rating">'
                                    .tep_draw_button(NO_RATING, 'comment', tep_href_link('product_reviews_write.php', tep_get_all_get_params()), 'primary').'</p>';
                            } else {
                                echo '<div class="rating-stars">
                                 '.rating_output($product_info['products_id']).'&nbsp;&nbsp;&nbsp;&nbsp;
                                 <a class="reviews_link" href="'.tep_href_link('product_reviews.php', 'products_id=' . $product_info['products_id']).'"><span itemprop="count">'.$reviews['count'].'</span>&nbsp;'.MENU_TEXT_REVIEWS.'</a>&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;
                                 '.tep_draw_button(ADD_REVIEW, 'comment', tep_href_link('product_reviews_write.php', tep_get_all_get_params()), 'primary').'
                                 </div>';
                            }
                            ?>
                        </div>

************

We also added the following function to includes/functions/general.php

function rating_output($products_id) {
    $rating = '';
    $review_query = tep_db_query(
        "SELECT
            ROUND(SUM(`reviews_rating`)/COUNT(`reviews_id`)) as rating
         FROM
            " . TABLE_REVIEWS . "
         WHERE
            products_id = '" . (int)$products_id . "'
            AND `reviews_status` = 1");
    $review = tep_db_fetch_array($review_query);

    if ( !empty($review['rating']) ) {

             $rating .= '<strong>';
             for ($i = 1; $i <= $review['rating']; $i ++) {
                 $rating .= '<i class="icon-star"></i>';
             }
             $rating .= '</strong>';

            $k =  5 - $review['rating'];
            for ($j = 1; $j <= $k; $j ++) {
                $rating .= '<i class="icon-star"></i>';
            }
    } else {
        $rating = '
                <i class="icon-star"></i>
                <i class="icon-star"></i>
                <i class="icon-star"></i>
                <i class="icon-star"></i>
                <i class="icon-star"></i>
            ';
    }
    return '<div class="rating">'.$rating.'</div><meta itemprop="rating" content="'.$review['rating'].'" />' ;
}

Any advice would be greatly appreciated.

[♥BrockleyJohn 157]

@rulegacy first off, change $HTTP_GET_VARS to $_GET which is globally accessible

@14steve14 that's where Hotclutch's approach gets properly messy - you need a third div of width 12, which this way is yet another set of pi modules. What I would do is keep all modules together and add two new ones to top and tail the right section. Shown in sort order:

1. pic is width 6

2. start new div, width 6 also class row

3. modules you want on the right at sm up

4. end new div

5. modules you want underneath

[rulegacy 1]

@BrockleyJohn Tried that but no progress. Does anything else stand out from the code?

[burt 2,426]

@rulegacy Did you try the way I suggested.  I've just done that on a test site and it worked well.

@14steve14 My way you'd just add the Tabs module as the very last sort order (eg 1000) and set width to 12. 

I don't understand why people are advocating core code changes when it can be done with none?

[rulegacy 1]

@burt Yes. We had it exactly as in your screenshot but the buy/review buttons and the module below it (we tried tabs in place of stock description) get overlayed in XS view. As seen in your screenshot, model/price also aren't on the same line as we want them to be. We are all for changes without touching the core but it seems trickier than expected. Either that or we are missing something.

[burt 2,426]

You're missing the micro-adjustments I mentioned.  These would be performed in each modules template file.

https://github.com/gburton/Responsive-osCommerce/blob/master/includes/modules/content/product_info/templates/tpl_cm_pi_price.php

to (eg):

<div class="col-sm-<?php echo $content_width; ?> cm-pi-price">
  <p><?php echo (tep_not_null($specials_price)) ? sprintf(MODULE_CONTENT_PI_PRICE_DISPLAY_SPECIAL, $specials_price, $products_price) : sprintf(MODULE_CONTENT_PI_PRICE_DISPLAY, $products_price); ?></p>
</div>

To remove the massive header div and instead put the content into a paragraph.

[14steve14 381]

Wouldnt it be better to create a new price module, or what ever modules are being altered, so that code supplied in the core is not changed. Would make updating at a later date so much easier.

[♥BrockleyJohn 157]

1 hour ago, burt said:

I don't understand why people are advocating core code changes when it can be done with none?

There's only one advocating it - I think it's a bad idea.

@rulegacy there are reviews in core - did you check out whether you can use the existing reviews module? If your data is incompatible, migrating it would be better than bespoke code unless that lacks something important to you. If you just want to display it differently, see if you can achieve that by updating only the template file. Updating functions/general.php (apart from being the wrong place for html output) is likely an unnecessary change to core code.

[Hotclutch 70]

24 minutes ago, BrockleyJohn said:

There's only one advocating it - I think it's a bad idea.

Really ? This is probably THE layout to have for an ecommerce shop today and osCommerce can't achieve it without a hack solution.

[14steve14 381]

Seeing as this is the page layout to have, why doesn't someone creative enough get something set up and release as an addon package of modules to achieve this. With all the skilled coders here, it shouldnt take too long. I am sure it would be appreciated by many.

[rulegacy 1]

Just an update to say that we have managed to get the desired layout without any core code changes as suggested by @burt. So don't touch the core.

One thing we'd like to correct though is how price jumps under model in xs view. We do have both wrapped in p tags inside divs now.