Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Recommended Posts

4 hours ago, 14steve14 said:

What I meant was is there a way of making all the images the same size if they are uploaded to the store in different sizes. I make all my images the right size so both large and small images are consistent, but I do know others don't do this.

Some type of images system would have been high up the to-do list for a future release (probably Final).  I think I've talked about it previously;

  • shopowner uploads one large image
  • it is resized to (say) 5 different resolutions and saved appropriately
  • tep_image is updated to use srcset 
    srcset automatically works out which image is best shown at which resolution

Maybe in some future code?

Link to comment
Share on other sites

  • Replies 83
  • Created
  • Last Reply
1 hour ago, burt said:

Some type of images system would have been high up the to-do list for a future release (probably Final).  I think I've talked about it previously;

  • shopowner uploads one large image
  • it is resized to (say) 5 different resolutions and saved appropriately
  • tep_image is updated to use srcset 
    srcset automatically works out which image is best shown at which resolution

Maybe in some future code?

Definitely need this.

osCommerce user since 2003! :thumbsup:

Link to comment
Share on other sites

If you take a look at the "CARDS" module now, you hopefully will see my main issue, which I cannot now un-see.

http://template.me.uk/frozen2bs4/

I set the parameters as so;

  • SM - 2 (per row)
  • MD - 3
  • LG and up - 4

As I also set it to show just 6 items, what happens in LG and up, is Fugly in my opinion;

item | item | item | item
   item     |    item

I can't find a way to do this;

item | item | item | item
item | item

Can anyone find the answer ?

 

ps:  not bothered about the display of the price, name etc - that'll be squished as 4 boxes is too many in a row (for MD).  Only set to 4 in MD to show what I am struggling with...

Link to comment
Share on other sites

8 hours ago, burt said:

item | item | item | item
item | item

Can anyone find the answer ?

 

ps:  not bothered about the display of the price, name etc - that'll be squished as 4 boxes is too many in a row (for MD).  Only set to 4 in MD to show what I am struggling with...

Try a regular row instead of card-deck, wrap cards with divs (col-*) and add h-100 to cards:

 

  <div class="row cm-i-card-products" itemscope="" itemtype="http://schema.org/ItemList">

    <meta itemprop="numberOfItems" content="6">
    <div class="col-3">
      <div class="card h-100 is-product" data-is-special="0" data-product-price="749.99" data-product-manufacturer="0" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product" >
        <div class="card-header caption">
          <h6 class="group inner list-group-item-heading">
            <a itemprop="url" href="product_info.php?products_id=28"><span itemprop="name">Samsung Galaxy Tab</span></a>
          </h6>
        </div>
        <div class="card-body">
          <a href="product_info.php?products_id=28"><img src="cards2_files/galaxy_tab_1.jpg" alt="Samsung Galaxy Tab" title="Samsung Galaxy Tab" class="img-fluid" itemprop="image" width="640" height="480"></a>
        </div>
        <div class="card-footer">
          <div class="row">
            <div class="col-4" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
              <meta itemprop="priceCurrency" content="USD">
              <p class="text-muted"><span class="align-middle" itemprop="price" content="749.99">$749.99</span></p>
            </div>
            <div class="col-8 text-right">
              <div class="btn-group" role="group">
                <a role="button" href="product_info.php?products_id=28" class="btn btn-light btn-sm btn-index btn-view">View</a><a role="button" href="index.php?action=buy_now&products_id=0" data-has-attributes="0" data-in-stock="0" data-product-id="0" class="btn btn-success btn-sm btn-index btn-buy">Buy</a>              </div>
            </div>
          </div>
        </div>
      </div>
      </div>

     ... etc ...
</div>

still needs bottom margins in the cards but seems to work. Equal heights on card titles would also make them nicer.

Link to comment
Share on other sites

@burt

I guess it looks even sillier if you've got one on the last row! Bootstrap docs says

Quote
Sizing

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated.

which makes it look like they're always going to do that unless you give them a fixed width, eg

.card-deck .card {
    max-width: calc(25% - 30px);
}

https://stackoverflow.com/questions/49095075/how-make-bootstrap-4-card-decks-same-width-each-row

but if you have different numbers per row at different sizes, that's a bunch of style rules...

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

3 minutes ago, BrockleyJohn said:

@burt

I guess it looks even sillier if you've got one on the last row! Bootstrap docs says

which makes it look like they're always going to do that unless you give them a fixed width, eg


.card-deck .card {
    max-width: calc(25% - 30px);
}

https://stackoverflow.com/questions/49095075/how-make-bootstrap-4-card-decks-same-width-each-row

but if you have different numbers per row at different sizes, that's a bunch of style rules...

Now you clearly see the problem. 

Cards are "nice", but are a PITA to correctly code.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...