Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Osc BS Edge Product Info


coelroy

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

 

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

 

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

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

 

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

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

Link to comment
Share on other sites

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

 

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

with OsC 2.2 since 2006 ...

Link to comment
Share on other sites

@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

 

 

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

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

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...