I found out that an earlier template had the product listing in a table, but the new responsive l/o has the product listing set in divs. This is what I need my pages to look like:
{links saved}
I know how to code a table to be responsive, but am thinking the only way to get the products 3 up with these divs is somehow implementing flexbox. What do you recommend?
Sorry I wasn't clearer. I want to change the product listing to a grid format (not the single product page, the multiple products list):
{link saved}
I'd like each item to be in a grid as the Featured Products. I believe this is in searchresults.php,
Hi Retro135,
Check out this thread from this comment which describes how to use the Featured Products HTML module as the basis for search results. In your case, having made your new html/searchresults.php from a copy of html/featured.php and modified as described, simply use medium-block-grid-3 for a 3-up display instead of medium-block-grid-5 as described in the modification...
Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Very helpful, thank you David! I did note that those edits are on the 15/01 template.
15/01 & /09 searchresults.php are the same (I think). Successfully done for the most part, thank you!
1. I wanted a description, so I add 3 lines from the old searchresults.php (changed 250 to 150):
(added the bottom 3 after this line 32,
<?php
print tapestry_price($product["minPrice"]);
?>
<?php if ($product["description"]): ?>
<p class="small"><?php print tapestry_substr($product["description"],150,"..."); ?></p>
<?php endif; ?>2. Then commented out line 10 ("Featured Products") + these, now starting at 41 instead of 34 as I didn't want "Reviews" to appear here:
<!-- <?php if ($config_useInteraction): ?>
<br>
<span class='pt_fp_interaction'>
<?php if ($product["reviews"]): ?>
<?php print tapestry_stars($product["rating"],"s"); ?> <a href='<?php print $product["reviewHREF"]; ?>'><?php print $product["reviews"]." ".translate("Reviews"); ?></a>
<?php else: ?>
<a href='<?php print $product["reviewHREF"]; ?>'><?php print translate("Review This Product"); ?></a>
<?php endif; ?>
</span>
<?php endif; ?> -->Is this correct?
3. What is <div class='medium-3 large-2 columns'> </div> at the top & bottom supposed to do. Just a space maker?
4. PROBLEM
medium-block-grid-2 (or 3) looks horrendous. Items overlap. small-block-grid-1 & large-block-grid-3 are fine. I see it in foundation.min.css but have no idea how to correct.
You can view here, {link saved}
Hi,
Code changes look fine, I'm not sure where;
<div class='medium-3 large-2 columns'> </div>...originate from, but looking at your site and using the inspector I think it is actually these lines which are causing medium-block-grid-2 to appear incorrectly - as they are effectively putting a 3 column margin around the results which doesn't leave much room in medium resolution.
Give it a go with those lines removed and I think all will be fine!
Cheers,
David.
--
PriceTapestry.com
Removed those lines, slightly better, but still no joy. searchresults.php, line 6, changed medium-6 to medium-9. This fixed it.
<div class='medium-9 large-12 columns'>
P.S. - Fixed many. Some still overlap slightly, but I'll live with this.
P.P.S. - Added margin-right to html > default.css (picked up from foundation.min.css):
.medium-block-grid-9>li{width:11.11111%;list-style:none;margin-right:50px}
This helps account for those merchants with odd size images. Fixed even more.
As I'm retrofitting PT to an older site that I made responsive, there's little glitches that I'm sure come from either overlapping or conflicting code. TY David for your never-ending patience!
No problem!
foundation.min.css can be a little tricky to study so if you haven't done so already, if you go to;
http://foundation.zurb.com/develop/download.html
...and choose "Download Everything", the .zip contains css/foundation.css which is the non-minified version...
Cheers,
David.
--
PriceTapestry.com
Hi,
The responsive templates that display content in grid layout use Foundation's block-grid layout, so if you edit your new design and search for "block-grid" for example, html/featured.php displays Featured Products in a single column for mobile (small-block-grid-1), 2 columns for tablet (medium-block-grid-2) and 4 columns for desktop (large-block-grid-4), so in this case to use 3 columns on tablet and above (Foundation classes automatically inherit upwards in size) you can delete
large-block-grid-4and REPLACEmedium-block-grid-2withlarge-block-grid-3.Hope this helps!
Cheers,
David.
--
PriceTapestry.com