Rich-text Reply

Moving Upsells Test

elburnso 05-30-16

Moving Upsells Test

Hi

 

I was hoping simeone could help me please. I have setup a test to test the positioning of the upsells on my website. I have used the below code to move the upsells just below the product image.

 

$(".box-collateral").detach().insertBefore(".desc-prod");

 

It works fine on products that don't have a product related to it. See link below.

 

https://www.oneills.com/tipperary-gaa-carron-polo-shirt.html?optimizely_x5696410453=1

 

But on products that have a related product it displays all wrong. Do you know anyway that I could fix this?


https://www.oneills.com/dublin-gaa-parnell-2stripe-t-shirt.html?optimizely_x5696410453=1

 

Thanks

Declan

Website Manager
Level 4

AllisonR 05-31-16
 

Re: Moving Upsells Test

Hi there,

 

I took a look at the two URLs you provided and I don't see anything out of place (I'm using Chrome v50 on a desktop). The format of the "We Recommend" box looks the same both on the original and variation of the /dublin-gaa-parnell-2stripe-t-shirt page apart from being in a different position on the page. Can you please elaborate on what is displaying wrong? Is this specific to certain browsers or devices? 

 

Happy to provide further guidance with some more context into what the issue is.

 

Thanks!

Allison
Sr. Technical Support Engineer
Optimizely | EMEA

Allison
Sr. Technical Support Engineer
Optimizely | EMEA
Optimizely
elburnso 05-31-16
 

Re: Moving Upsells Test

Hi Alison

 

Thanks for getting back to me. Sorry its the position of the We recommend box than i'm trying to fix on the /dublin-gaa-parnell-2stripe-t-shirt page. I want it to sit straight under the share, email a friend and wishlist text  the same as the /tipperary-gaa-carron-polo-shirt.html page.

 

Any help is greatly appreciated

 

Many Thanks

Declan

Website Manager
Level 4
Luciano 05-31-16
 

Re: Moving Upsells Test

Hi Declan, I think you should work on css property to positioning .box-collateral under .share-links-wish.
Your original css file has a rule that set "clear:both" on .box-collateral, this means that it will drop below any floated elements that precede.

I would check if .block-related exists on the document, if so change the css property from "clear:both" to "clear:left" and force the width of the element to 650px. If there are no releated items, leave .box-collateral as is.

Hope it helps.
Level 2
elburnso 06-07-16
 

Re: Moving Upsells Test

Thanks I have been able to get the upsell box up beside the related product in the example below but all the products are squashed together. Can youplease advise how I can fix this?

 

https://www.oneills.com/derry-gaa-carron-half-zip-training-top.html?optimizely_x6174181732=1

 

Many Thanks

Declan

Website Manager
Level 4
Luciano 06-08-16
 

Re: Moving Upsells Test

You need to force the width of single product container. Something like this should do the job:
jQuery('.box-collateral .slides .item div').css('width', '130px');
This will add inline styles to each item of box-up-sell. Anyway I see other things that must be fixed... like the hover styles on the item that add a border and sometimes "zoom-in" the image breaking the layout.
Level 2
elburnso 06-08-16
 

Re: Moving Upsells Test

Hi Luciano

 

Thats seems to work fine now on desktop but displays out of line in mobile. Any ideas?

 

Thanks

Declan

Website Manager
Level 4