Customizing ProductCart - Help with Cross Selling

Print Page | Close Window

Help with Cross Selling

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=3479
Printed Date: 29-September-2024 at 12:18am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Help with Cross Selling

Posted By: LittleOnesResource
Subject: Help with Cross Selling
Date Posted: 01-March-2010 at 12:00pm

I need help with identifying where in the code I need to make a change for cross selling. I am running v3.51.

It appears this questions has been asked before, but I didn't find an answer in either a forum search or the wiki.

I have cross selling running on the product details page. In the control panel, you can select how many products you want to show. I have selected 4. The problem comes in that the 4th item is shown on a second line. There is plenty of room to show 4 items on one line, but there must be coding that needs to be modified.

If you view this page http://www.littleonesreadingresource.com/store/pc/Take-Along-Butch-32p80.htm I have added borders around the cross selling to make it easier to see what I am talking about.

There is a lot of dead space between the items. It is not a css issue. It appears to be a table cell issue, but I cannot find it. Anyone have any ideas? It seems that the modification will need to be made to the cs_img.asp page.

I am spinning my wheels and hoping a fresh pair of eyes can help.

Thanks so much.
Amy.

Replies:

Posted By: intour
Date Posted: 01-March-2010 at 12:07pm

Hi Amy,

It is a CSS issue. I had the same issue with a site I built last year.

Go have a coffee and and I'll be back with the4 answer in 15 mins.

Nigel

-------------
http://www.innerview.co.uk - Innerview
Productcart Platinum Reseller
Web Design/Hosting/Virtual Tours

Posted By: LittleOnesResource
Date Posted: 01-March-2010 at 12:33pm

Gosh...if you can help I would be oh so happy!!

I tried every css thing I could think of....

Just goes to show you that taking a break can be a very smart thing.

Amy.

Posted By: intour
Date Posted: 01-March-2010 at 12:38pm

Hi Amy,

Sorry this is taking a bit longer than I thought. I definitely have the answer here somewhere.

I did this last September. I think Hamish gave me some help on another similar issue with spacing.

It is to do with the height/width settings that apply to the cross selling in the CSS. If I remember correctly you have to remove the setting altogether.

I have to pop out for an hour - I'll look again when I return.

Nigel

-------------
http://www.innerview.co.uk - Innerview
Productcart Platinum Reseller
Web Design/Hosting/Virtual Tours

Posted By: intour
Date Posted: 03-March-2010 at 6:35am

Hi Amy,

Sorry to be so long getting back to you with this.

Here is the answer:

In pcstorefront .css change this:

/* pcShowProductsHCS handles the table that shows product info
    when cross selling products are shown with images */

  .pcShowProductsHCS {
   width: 125px;
   height: 225px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
  }

to this:

/* pcShowProductsHCS handles the table that shows product info
    when cross selling products are shown with images */

  .pcShowProductsHCS {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
  }

Nigel

-------------
http://www.innerview.co.uk - Innerview
Productcart Platinum Reseller
Web Design/Hosting/Virtual Tours

Posted By: LittleOnesResource
Date Posted: 03-March-2010 at 10:44am

Hi Nigel.

I know exactly to what you are referring. I will try this and see what happens. The only problem that may arise is that the pictures will not be scaled down enough which will mess up the formatting anyway.

I will post back what happens.

Thanks so much. I REALLY appreciate your help!

Amy.

Posted By: LittleOnesResource
Date Posted: 03-March-2010 at 11:01am

Okay...that didn't work.

Here is a page link to see how the change affected the page:

http://www.littleonesreadingresource.com/store/pc/Take-Along-Alfie-32p84.htm

It really seems to be with the table. Maybe a colspan setting or a td width setting.

Any other ideas?

Thanks.
Amy.

Posted By: intour
Date Posted: 03-March-2010 at 11:14am

Hi Amy,

I may have made another change somewhere else as well though I'm not entirely sure.

On the page you showed me there are only 3 products across horizontally. What happens when you set it to 4?

I know that the site I amended displayed perfectly after i had made the CSS changes.

Nigel

-------------
http://www.innerview.co.uk - Innerview
Productcart Platinum Reseller
Web Design/Hosting/Virtual Tours

Posted By: Hamish
Date Posted: 03-March-2010 at 11:21am

Hi Amy,
I just took a look at the V4 code & the number of products across is controlled via the settings in the admin pages, so SHOULD be the same as the other displays of products.
I also looked at the page source code & it's definately a table issue as there is a TR between the two rows which has been placed their by the code. I suggest raising a support ticket.

Hamish

-------------
Editing ProductCart Code?

See http://wiki.earlyimpact.com/developers/editcode" rel="nofollow - WIKI Guidelines for Editing ProductCart's ASP Source Code

Posted By: intour
Date Posted: 03-March-2010 at 11:25am

I just re-checked that style sheet and I did make some other changes to it.

Here is the whole section dealing with displaying the images and detail horizontally:

/* pcShowProductsH handles the table that shows product info
    when products are displayed horizontally */

  .pcShowProductsH {
   width: 125px;
   height: 225px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
  }

  .pcShowProductImageH {
   height: 125px;
   vertical-align: bottom;
   text-align: center;
   padding-bottom: 3px;
  }

  #pcMain .pcShowProductImageH img {
   border: 1px solid #E1E1E1;
   padding: 2px;
  }

  #pcMain .pcShowCategoryImage img {
   border: 1px solid #E1E1E1;
   padding: 5px;
  }

  .pcShowProductInfoH {

   margin-top: 5px;
   vertical-align: top;
  }

  .pcShowProductInfoH p {
   text-align: center;
  }

/* pcShowProductsHCS handles the table that shows product info
    when cross selling products are shown with images */

  .pcShowProductsHCS {

   text-align: center;
   margin-left: auto;
   margin-right: auto;
  }

It was a versin 3.51 webiste so the stylesheet will have minor differences to version 4 but this did work for me.

Nigel

-------------
http://www.innerview.co.uk - Innerview
Productcart Platinum Reseller
Web Design/Hosting/Virtual Tours

Posted By: LittleOnesResource
Date Posted: 03-March-2010 at 11:30am

UGH!! Sometimes coding can be SO frustrating.

Thank you Nigel and Hamish!!

Yes, Nigel you are correct. I needed to set the product number to 4...but I swear I had done that. Maybe what I had done was set an "individual" product page to 4 and NOT set the global setting to 4.

Yes, Hamish you are also correct. I had just located the extra <tr></tr> which was forcing the 4th product to the next row. But...this was happening because the global setting was 3 instead of 4.

Anyway....thank you both!! I think all is working now. Here is the same page link to show that now all 4 products are on the same line. Yeah!! I just need to remove the border and add back the center align.

http://www.littleonesreadingresource.com/store/pc/Take-Along-Alfie-32p84.htm

Amy.