close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Product results column layout?

Thread began 2/01/2010 2:51 pm by jeremykrick399007 | Last modified 2/08/2010 7:59 pm by Eric Mittman | 1151 views | 11 replies |

jeremykrick399007

Product results column layout?

How would I change the product results layout to have four products acroos the page in a column layout instead of the single column list layout?

Sign in to reply to this post

Eric Mittman

The menu on the right side is generated dynamically using recordsets and ULs. In order to modify this so that it is not creating an up and down list you would need to edit the code in the CSSMenuWriter > intermediate.php file. You might need to supress the <li></li> so that it only occurs for every fourth item.

This would be a very custom edit of this menu and will require some knowledge of php to get it worked out.

Sign in to reply to this post

jeremykrick399007

Re: Product results column layout?

Is it possible for you to walk me through exactly what I would need to modify; or is there a sample file I could download?

Sign in to reply to this post

jeremykrick399007

Re: Product results column layout?

Is there documentation on how to acheive the multi-column layout? Can this be done by using eCart to edit the files?

Sign in to reply to this post

Eric Mittman

This is not a straight forward edit and would be completely custom. In a test that I did I was able to add a counter variable, then check for this value being divisible by four to allow for the <li> and </li> tags to be written. Here is the code from my test if you want to check that out to get an idea of how this can be done:

intermediate.php lines 38-42 original

php:
<?php do { ?>

      <?php if ($totalRows_ProductMenu 0) { // Show if recordset not empty ?>
  <li><span><a href="<?php echo($assumedRoot); ?>Products_Detail.php?ProductID=<?php echo $row_ProductMenu['ProductID']; ?>"><?php print $row_ProductMenu['ProductName']; ?></a></span></li>
  <?php // Show if recordset not empty ?>
<?php 
} while ($row_ProductMenu mysql_fetch_assoc($ProductMenu)); ?></ul>



update these lines to this

php:
<?php $i 0?>

  <?php do { ?>
      <?php if ($totalRows_ProductMenu 0) { // Show if recordset not empty ?>
  <?php if($i == || $i == 0) {?><li><?php ?><span><a href="<?php echo($assumedRoot); ?>Products_Detail.php?ProductID=<?php echo $row_ProductMenu['ProductID']; ?>"><?php print $row_ProductMenu['ProductName']; ?></a></span><?php if($i == && $i != 0) {?></li><?php ?>
  <?php // Show if recordset not empty ?>
  <?php $i += 1?>
<?php 
} while ($row_ProductMenu mysql_fetch_assoc($ProductMenu)); ?></ul>
Sign in to reply to this post

jeremykrick399007

Product results column layout?

What exactly does the intermediate.php page do? I made the code changes and nothing changed!

I deleted the intermediate.php page from the server and went back to my page and still nothing changed, so the brings me to my question, what does this page actual do and why isn't anything changing for me?

Sign in to reply to this post

jeremykrick399007

RE: Product results column layout?

I was able to achieve the multi column layout without using any php code changes. I strictly used CSS by making edits to the common.css and content.css files.

Thank you for your help in trying to help me achieve this.

Sign in to reply to this post

Eric Mittman

That is great to hear, were the changes that you made something that you can share on the forums? If so I'm sure that others could benefit from it. I'm glad you were able to get it worked out.

Sign in to reply to this post

jeremykrick399007

Re: Product results column layout?

I made one css change and one css addition.

1. Open the common.css file and add this style anywhere in the page

.WADAResultThumb {
width:100px;
height:100px;
}

You can chage the demensions of these to the size that will look best on the Products_Results.php page.

2. Open the content.css file and change:

.productResultsWrapper {
overflow: hidden;
height: 1%;
min-height:100px;
float: left;
width:190px;
margin:10px 25px 10px 0px;
display:inline;

}
.productResultsWrapper .left {
float: left;
}

.productResultsWrapper .left .imageWrapper img {
border: solid 1px #CFCFCF;
margin:0px 0px 10px 0px;
width:170px;
}

Then just edit these styles to fit what you want your Products_Results.php page to look like.

Enjoy!

Sign in to reply to this post

Eric Mittman

Thank you very much for posting back with that, I'm sure than others will find this very helpful. Sorry about the misunderstanding, the edits I was telling you to make would not affect the listing that you see on this results page, just the menu for the products one the left side of the page.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...