Jump to content
Sign in to follow this  
spooks

Product Listing Enhancements, Thumbnails & Manufacturer Headings

Recommended Posts

I haven't selected anything yet. I've just completed installation following the installation.html (included in the package). And I don't know how to configurate it and make teh changes I want. It seems there is no place to set it up in admin panel.

 

After installation the products boxes look like this (quite messy):

post-309620-0-41044000-1332366528_thumb.jpg

 

I want to customize it. I know I can play with CSS but that won't change everything.

 

Where can I find the docs section?

Edited by al3ks

Find this post helpful? Click the 'Like this' button. :)

Share this post


Link to post
Share on other sites

Within the package there is a file called Product Listing Enhancements, Thumbnails & Manufacturer Headings.html its in the same place you found Installation.html (which also links to the first) I can't see how you missed it!

 

open that, it has all the info you should need.

 

PS Admin settings appear under 'Product Listing' did you look there?

 

 

Looking at your image you have line feed chars within the product descriptions, thats not normal, you will need to apply the nl2br function on them.


Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Share this post


Link to post
Share on other sites

Ok, Thanks for the help. I've manged to change a lot of stuff I wanted. There is just two things I cannot figure out, I'd be really grateful if you can help me out.

 

How can I make the products appear in ideal squares (e.g. 125x125px)

 

post-309620-0-04432900-1332369590_thumb.jpg

 

And how can I specify how many products per page I want?

 

(I cannot find it in Product Listing options in admin, and tried css)

Edited by al3ks

Find this post helpful? Click the 'Like this' button. :)

Share this post


Link to post
Share on other sites

@@al3ks

 

 

how can I specify how many products per page I want?

 

That's a standard osC var and it does say in the doc, look for 'search results'

 

If your needing a set listing box size you may have issues as the content of each product box will vary by content for that.

 

You could set product box sizes to suite your final size and use css to prevent overflow so long as you don't care about cut offs.


Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Share this post


Link to post
Share on other sites

You could set product box sizes to suite your final size...

 

But how can I set the size?


Find this post helpful? Click the 'Like this' button. :)

Share this post


Link to post
Share on other sites

Have you read the doc?

 

It tells you how.


Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Share this post


Link to post
Share on other sites

Yes :D


Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Share this post


Link to post
Share on other sites

i installed this mod, and the list looked wrong. on FF i couldnt get the blocks to look right. the background color wasnt white...couldnt change it...

 

ill have to tinker with it another time i guess ;/

Share this post


Link to post
Share on other sites

what are the file edits to do in the files asking to overwrite when uploading to the site?

 

product_listing.php

new_products.php

manufacturers.php

Share this post


Link to post
Share on other sites

Thanks for the great contribution! Due to the fact we have really different size of pictures and product names I really have a problem to get the whole thing to a nice clean look. Please take a look at this screenshot to see what I mean http://www.cartuning.at/screenshot_grid.jpg

 

1) Is there any way to define a kind of max allowed size for the pic? Something like "maxum wide= 200 and maximum height=200" to define the available space and resize the image to max possible siize within this available space without changing side ratio?

 

2) Is there a way to change the product listing in the way that "product model" and "product price" share a row? Something like model left and price right but within the same row?

 

Thanks in advance!

 

Greets,

 

Alexej

Share this post


Link to post
Share on other sites

Great contribution! Just upgraded and loving it.

 

But I a problem. If you do an advanced search without using a keyword, e.g. search for products within a certain price range, and use the 'Buy now' button on the listing page and have the option of not showing cart after adding, then the listing returns a blank advanced search page.

 

Tried fiddeling with the tep_href_link(basename($PHP_SELF), but no success... There's always the option to swich on the show cart after adding, but prefer not.

 

Did anyone run into the same problem or know of a solution?

 

Very, very much appreciated!

Share this post


Link to post
Share on other sites

Hello! This question may have already been answered but I'm not sure I can go through 1800+ posts to find it. I've successfully installed this contribution and just need some help to tweak it.

 

1. Where/what do I need to do to the stylesheet in order for the product grid to have a black background?

2. How can I center the images? (the are closer to the bottom of their cells)

 

This is what my stylesheet looks like...

 

/*

$Id$

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Copyright © 2010 osCommerce

Released under the GNU General Public License

*/

.ui-widget {

font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;

font-size: 11px;

}

body {

background: #000000;

color: #ffffff;

margin: 0px;

font-size: 11px;

font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;

}

#bodyWrapper {

}

#bodyContent {

}

#header {

height: 60px;

}

#storeLogo {

float: left;

margin-top: 5px;

}

#headerShortcuts {

float: right;

margin-top: 15px;

}

#columnLeft {

padding-top: 5px;

}

#columnRight {

padding-top: 5px;

}

.infoBoxContainer { }

.infoBoxHeading {

padding: 2px;

font-size: 11px;

}

.infoBoxContents {

padding: 5px;

font-size: 11px;

line-height: 1.5;

}

.contentContainer {

padding-bottom: 10px;

}

.contentContainer h2 {

font-size: 16px;

text-decoration: underline;

font-weight: normal;

margin-bottom: 0;

padding-bottom: 5px;

}

.contentText, .contentText table {

padding: 5px 0 5px 0;

font-size: 11px;

line-height: 1.5;

}

.productListTable {

padding: 5px;

font-size: 11px;

line-height: 1.5;

}

.productListTable tr.alt td {

background-color: #000000;

}

.fieldKey {

font-size: 11px;

font-weight: bold;

line-height: 1.5;

width: 150px;

}

.fieldValue {

font-size: 11px;

line-height: 1.5;

}

h1 {

font-size: 20px;

margin-bottom: 0;

padding-bottom: 5px;

}

img {

border: 0;

}

table, p {

font-size: 11px;

line-height: 1.5;

}

#piGal ul {

list-style-type: none;

}

#piGal img {

-webkit-box-shadow: 0px 0px 1px #000;

-moz-box-shadow: 0px 0px 1px #000;

}

#piGal .outer {

margin-left: -30px;

}

.buttonSet {

clear: both;

}

.buttonAction {

float: right;

}

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }

.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }

.productsNotifications { background: #f2fff7; }

.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

A {

color: #ffffff;

text-decoration: none;

}

A:hover {

text-decoration: underline;

}

FORM {

display: inline;

}

TR.header {

background: #000000;

}

TR.headerNavigation {

background: #bbc3d3;

}

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #bbc3d3;

color: #ffffff;

font-weight : bold;

}

A.headerNavigation {

color: #FFFFFF;

}

A.headerNavigation:hover {

color: #ffffff;

}

TR.headerError {

background: #ff0000;

}

TD.headerError {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

background: #ff0000;

color: #ffffff;

font-weight : bold;

text-align : center;

}

TR.headerInfo {

background: #00ff00;

}

TD.headerInfo {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

background: #00ff00;

color: #ffffff;

font-weight: bold;

text-align: center;

}

TR.footer {

background: #bbc3d3;

}

TD.footer {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #bbc3d3;

color: #ffffff;

font-weight: bold;

}

.infoBox {

background: #b6b7cb;

}

.infoBoxNotice {

background: #FF8E90;

}

.infoBoxNoticeContents {

background: #FFE6E6;

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background: #bbc3d3;

color: #ffffff;

}

TD.infoBox, SPAN.infoBox {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {

background: #000000;

}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {

background: #000000;

}

TABLE.productListing {

border: 1px;

border-style: solid;

border-color: #b6b7cb;

border-spacing: 1px;

}

.productListingHeader {

table-layout: fixed;

color: #FFFFFF;

font-weight: bold;

}

.productListingHeader A:hover {

color: #FFFFFF;

}

.productListingData {

table-layout: fixed;

}

A.pageResults {

color: #0000FF;

}

A.pageResults:hover {

color: #0000FF;

background: #FFFF33;

}

TD.pageHeading, DIV.pageHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 20px;

font-weight: bold;

color: #9a9a9a;

}

TR.subBar {

background: #f4f7fd;

}

TD.subBar {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color: #000000;

}

TD.main, P.main {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

line-height: 1.5;

}

TD.smallText, SPAN.smallText, P.smallText {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

TD.accountCategory {

font-family: Verdana, Arial, sans-serif;

font-size: 13px;

color: #aabbdd;

}

TD.tableHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

SPAN.newItemInCart {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color: #ff0000;

}

CHECKBOX, INPUT, RADIO, SELECT {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

TEXTAREA {

width: 100%;

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

SPAN.greetUser {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

color: #f0a480;

font-weight: bold;

}

TABLE.formArea {

background: #f1f9fe;

border-color: #7b9ebd;

border-style: solid;

border-width: 1px;

}

TD.formAreaTitle {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

SPAN.markProductOutOfStock {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

color: #c76170;

font-weight: bold;

}

SPAN.productSpecialPrice {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

SPAN.errorText {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }

.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }

.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

.infoBoxProducts {

text-align: center;

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

border: 2px;

border-style: solid;

border-color: #666666;

font-weight: normal;

background-color: #000000;

color: #333333;

margin-bottom:-8px;

-moz-border-radius:20px;

-webkit-border-radius:20px;

-khtml-border-radius:20px;

border-radius:20px;

vertical-align: bottom;

}

.infoBoxProducts a {

color: #333333;

}

TD.infoBoxGrid {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

border: solid 0px #999999;

}

TD.infoBoxGrid:hover {

background-color: #d3d3d3;

}

/* set pos buy/details button on list */

img.buy_now {

margin-bottom:10px;

}

/* set pos buy/details button on thumbnail */

img.thm_buy_now {

margin-bottom:-3px;

}

/* set style buy/details seperator thumbnail */

.buy_now {

font-weight: bold;

font-size: 18px;

color: #999999;

}

.infoBoxList {

border: ridge 4px #faf0e6;

border-collapse: collapse;

background-color: #fff;

}

.thumbcontent {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color:#666666;

text-align:center;

}

TD.noborderbox {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

TD.separator {border-bottom: 1px solid #ccc;}

.productListing-list-price {

font-family: Verdana, Arial, sans-serif;

font-size: 16px;

color: #333;

}

.productListing-title a, .productListing-title {

font-family: Verdana, Arial, sans-serif;

font-size: 16px;

color: #333;

padding-left:18px;

padding-bottom:10px;

}

.productListing-name a, .productListing-name {

font-family: Comic Sans MS,Verdana, Arial, sans-serif;

font-size: 12px;

color: #333;

font-weight: bold;

padding-bottom: 6px;

}

.productListing-short {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color: #333;

}

TABLE.buytable {

width: 100%;

height: 80px;

vertical-align: bottom;

text-align:right;

}

DIV.multi_buy_now {

width: 99%;

text-align : right;

position:relative;

}

DIV#gbutton1 {

margin-bottom:-25px;

z-index:30;

}

DIV#gbutton2 {

margin-top:-25px;

z-index:30;

}

.quantity {

font-family:Verdana,Arial,sans-serif;

font-size:10px;

text-align : center;

}

.quantity input {

font-family:Verdana,Arial,sans-serif;

font-size:11px;

text-align : center;

background: #c0c0c0;

font-weight: bold;

border:2px solid #666666;

color:#333;

}

TD.attributes {

font-family:Verdana,Arial,sans-serif;

font-size:11px;

text-align : right;

}

TABLE.attributes select {

font-family:Verdana,Arial,sans-serif;

font-size:11px;

background: #c0c0c0;

font-weight: bold;

color:#333;

}

TABLE.drop select {

font-family:Verdana,Arial,sans-serif;

font-size:11px;

background: #c0c0c0;

font-weight: bold;

color:#333;

}

TR.list-block {

}

SPAN.list_info {

font-family: Verdana, Arial, sans-serif;

font-size: 16px;

color: #333;

cursor:pointer;

}

SPAN.list_info span {

display:none;

position:relative;

}

SPAN.list_info:hover span {

display:block;

cursor:pointer;

margin-top:-20px;

margin-left:-100px;

position:absolute;

padding: 5px;

font-family:Verdana,Arial,sans-serif;

font-size:12px;

color:#333;

background: #c0c0c0;

border:2px solid #666666;

text-align : center;

}

 

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }

.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

/* buttons */

.tdbLink a { }

.tdbLink button { }

/* account link list */

.accountLinkList {

list-style-type: none;

margin: 2px 2px 2px 10px;

padding: 5px;

}

.accountLinkListEntry {

float: left;

margin-right: 5px;

}

Share this post


Link to post
Share on other sites

Hi All ,

 

I am trying to make the following way of displaying for the products in some categories like you see here:

 

I only need that on some categories , other need to behave like the normal OsCommerce way.

Do you think that is possible and how would i go about it?

 

Many thanks in advance,

 

Rob

Share this post


Link to post
Share on other sites

Great contribution! Just upgraded and loving it.

 

But I a problem. If you do an advanced search without using a keyword, e.g. search for products within a certain price range, and use the 'Buy now' button on the listing page and have the option of not showing cart after adding, then the listing returns a blank advanced search page.

 

Tried fiddeling with the tep_href_link(basename($PHP_SELF), but no success... There's always the option to swich on the show cart after adding, but prefer not.

 

Did anyone run into the same problem or know of a solution?

 

Very, very much appreciated!

 

change to basename($_SERVER['PHP_SELF'])

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×