Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Product Listing Enhancements, Thumbnails & Manufacturer Headings


spooks

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. :)

Link to comment
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.

Link to comment
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. :)

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
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 ;/

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

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

Link to comment
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!

Link to comment
Share on other sites

  • 1 month later...

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;

}

Link to comment
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

Link to comment
Share on other sites

  • 4 weeks later...
  • 1 year later...

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'])

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...