Jump to content
coelroy

Osc BS Edge Product Info

Recommended Posts

Okay, so I decided to give OSC BS a go.

I've done everything from scratch.

Now the product_info looks messy and untidy.

Guys, please how to fix this?

Come on this is not nice.

I need to even this out, like a the same height for the product description and the bottom where the pricing is displayed.

 

Elroy

product_info.png.7f8c24b5d0e5b06f81d512e1db26c095.png

 

Share this post


Link to post
Share on other sites

@coelroy

Which OSC BS version? Don't go by the version number. What is the date on the original ZIP package?


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites
3 hours ago, coelroy said:

I need to even this out, like a the same height for the product description and the bottom where the pricing is displayed

This is an issue with the long names as BS cards will always move to make room for the text. The only working solution I have found is to add the class "text-truncate" to the product discription in the card header this will give you this. Please note images are from a custom site and NOT the offical site.

image.png.e8b4599873c79db5c8d9e965740a0445.png


 

Share this post


Link to post
Share on other sites
46 minutes ago, JcMagpie said:

This is an issue with the long names as BS cards will always move to make room for the text. The only working solution I have found is to add the class "text-truncate" to the product discription in the card header this will give you this. Please note images are from a custom site and NOT the offical site.

image.png.e8b4599873c79db5c8d9e965740a0445.png

BS cards are perfectly fine. This is a design issue.

Share this post


Link to post
Share on other sites

😊 Ok I 'm happy to be wrong, I've just  not found a working solution other that to set the truncate. I have had a look at all the notes on these on the boostrap site and not found a fix to change the text to maintain the same size card bodys and header and footer. As default they are set to just grow to acommodate content.

 For now the truncate works ok and it's responsive not a fixed trim so as the view port changes more or less text is shown.

Happy to learn if you feal like throwing a bone or two. 😊.


 

Share this post


Link to post
Share on other sites
1 hour ago, JcMagpie said:

This is an issue with the long names as BS cards will always move to make room for the text. The only working solution I have found is to add the class "text-truncate" to the product discription in the card header this will give you this. Please note images are from a custom site and NOT the offical site.

image.png.e8b4599873c79db5c8d9e965740a0445.png

Thank you very much.

I will look into this, though from the outset it might look like you displaying duplicate content should you list similar products.

Share this post


Link to post
Share on other sites
6 hours ago, JcMagpie said:

😊 Ok I 'm happy to be wrong, I've just  not found a working solution other that to set the truncate. I have had a look at all the notes on these on the boostrap site and not found a fix to change the text to maintain the same size card bodys and header and footer. As default they are set to just grow to acommodate content.

 For now the truncate works ok and it's responsive not a fixed trim so as the view port changes more or less text is shown.

Happy to learn if you feal like throwing a bone or two. 😊.

I would change the card design. I would build the card without class="card-header" i.e only with a body and footer if necessary. You can use class="card-title" inside the body for product names if you want to. Also i would put the image first in the card, followed by the product name. Then the varying name lengths become less visible. Have a look at the other ecommerce platforms most of them do it this way

Share this post


Link to post
Share on other sites
Posted (edited)

Yes that work's but I think it wiil be down to individuals to decide which they prefer, Me I like the short compact size of the truncated layout other may prefer to have all the text visable? Note:- images are NOT from official test site.

image.png.6b4495ae9371eca9813d62af7703d53c.png

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites
14 hours ago, JcMagpie said:

This is an issue with the long names as BS cards will always move to make room for the text. The only working solution I have found is to add the class "text-truncate" to the product discription in the card header this will give you this. Please note images are from a custom site and NOT the offical site.

image.png.e8b4599873c79db5c8d9e965740a0445.png

Zahid, I think we have to put ourselves in the customer's shoes instead of the computer scientist's shoes. I say that without any animosity, it's just my opinion.
In your example of the first two articles (Apple Gala & Gold):
- according to the computer scientist the first two articles are different so 2 different references.
- according to the customer: the designations, photos and prices are identical, so there is duplicate and the customer will not go see both items to see the difference.

Do not forget that slowing the choice of a customer can cause the sale to fail.


Get the latest Responsive osCommerce CE (community edition) here .

(Live   : OsC 2.2, php 5.4 & UTF-8  |  Local : OsC 234BS php7.2 Edge for future shop)

Share this post


Link to post
Share on other sites
Posted (edited)

@bonbec yes you are right, but this was just a test to see how to deal with long names, In the real world you would make sure either the image was not the same or the start of the discription showed the difference

( French Apple Gala & Gold )

(Spanish Apple Gala & Gold)

or somthing like that. If not then just use the first option. The main issue is that with the current set up the page look untidy as a number of users have pointed out.

However it's for each user to decide whats best for there site display. It's quite easy to do this the right way.

Note:- images are NOT from official test site.

image.png.4620583fb2143aa53a6f5c9d15d188f9.png

I have also spotted a strange effect on the layout that if you have box's on both sides of the page having a long name over a certain number of characters brakes the page layout. On the example below if you add 3 more

image.png.ab29e6df1607d772862dd3216f10bbf0.png

Like this the page is messed up. The box on the right is pused down to the bottom of the page? So looks like long names are causing some issues. Page is messed up even if you use @Hotclutch option of displaying in card body.

image.png.4f6d7f46469df5e4f440cefb6f004bd6.png

image.thumb.png.a0a5d3f37b8a2674175b24f62ba4199b.png

 

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites
13 hours ago, JcMagpie said:

Yes that work's but I think it wiil be down to individuals to decide which they prefer, Me I like the short compact size of the truncated layout other may prefer to have all the text visable? Note:- images are NOT from official test site.

Amazon truncates theirs i believe, but they have very long names. Personally i have never had a need to do that.

Share this post


Link to post
Share on other sites

@coelroy

(At the risk of repeating myself ...)

Which OSC BS version? Don't go by the version number. What is the date on the original ZIP package?

M


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites
1 hour ago, ArtcoInc said:

@coelroy

(At the risk of repeating myself ...)

Which OSC BS version? Don't go by the version number. What is the date on the original ZIP package?

M

osCommerce Online Merchant v2.3.4.1 CE
pixel_trans.gif

Share this post


Link to post
Share on other sites
21 hours ago, Hotclutch said:

Also i would put the image first in the card, followed by the product name. 

I did that.

pixel_trans.gif

Share this post


Link to post
Share on other sites

Okay, what I have now is much better than what it was.

Also, made this small change:

     <div class="thumbnail equal-height">
          <h6 class="group inner list-group-item-heading">
            <a itemprop="url" href="<?php echo tep_href_link('product_info.php', 'products_id=' . (int)$card_products['products_id']); ?>"><span itemprop="name"><?php echo $card_products['products_name']; ?></span></a>
          </h6> 

product_info_osc.PNG.16bfcb0f58dd0df7a716f9ed480b6a03.PNG

Share this post


Link to post
Share on other sites

@JcMagpie @coelroy

That picture of the tamatoes, and the one next to it. Are they the same dimensions in the install package? If not, and you make them the same, your layout should be perfect.

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

×