Perhaps you copied a block of HTML out of the header where these images used to be, and just wound up copying too much?Quote:
Originally Posted by lat9
Printable View
Perhaps you copied a block of HTML out of the header where these images used to be, and just wound up copying too much?Quote:
Originally Posted by lat9
Considering adding a horizontal menu with flyouts. Has anyone done this yet?
It isnt the tpl_footer page. replaced it with the default file of 1.5.7c and the ez page footer still doesn't contain links.
any other thoughts?
FOUND IT... mis homer of code in tpl_ezpages_bar_footer.php - removed it, and wala!
I've just submitted v3.1.4 of the Bootstrap-4 template for the Zen Cart moderators' review and will post back here when it's available for download.
This release contains changes associated with the following GitHub issues:
#72: Correcting min/max/units display on product information pages.
#73: Removing unnecessary code from specials page's template.
#76: Move the "back-to-top" button so it doesn't cover 'important' buttons.
#77: Correcting ARIA tags on products' navigation.
#78: Remove multiple id= attributes from centerbox displays.
#80: Adding base Zen Cart .forward and .back selectors to stylesheet.
Forgive me please if my question is 'basic' but i am a bit lost in the zencart-woods. coming from a different template i find the bootstrap an great idea. But i like to only show the categories on my main page. i simply can not find where i change it in this template.
of cours the menu is on the product pages, ( in the sidebars) but i do want to use the hamburger menu for mobile divices.
how do i do this?
thanks in advance and again, sorry if my question is to basic for words
You don't indicate which sub-version of zc157 you're using (there was an issue in the unsuffixed version, IIRC), but navigate to your admin's Configuration :: Layout Settings and, towards the middle of those settings, set Main Page - Opens with Category to 0 (opens with top-level categories) and the previous setting (Categories - Always Show on Main Page) to 1 (to enable the feature).Quote:
Originally Posted by kernheimer
Sorry! my bad! 157C i'm using and am making a fresh start :D thank you Lat9!
Now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191Quote:
Originally Posted by lat9
I've done it as vertical on left side, if that's what you mean. Link in my signature.Quote:
Originally Posted by swguy
Hello all. Just upgrading an older site (1.5.6c). On apache with php7.4. So I started with fresh subdomain and DB copy from live site (same server cpanel copy over). Uploaded fresh zip, extracted into public then ran the ZC1.5.7c installer and upgraded database. Everything works great with responsive classic template. Installed the most recent boot strap and now the product listings are breaking out of their boxes. Like there's a missing clearBoth somewhere. Before I start digging around. Is there a known issue?
Thank you,
John
I'm not aware of any issues, but make sure to check your Layout Settings. Are you trying to display product-listings in row- or column-mode?Quote:
Originally Posted by bumba000
Hey Lat. I've been working with admin settings trying to fix this but to no avail. Any settings remaining in the DB would from the tableau template so that shouldn't bother anything. Aside from that template I really had nothing special going on. Just three columns per row. Super standard stuff.
Thank you,
John
Hate to mention the posting tips but, how's about a link? Use DOT vs . if you need to.
so i figure it's gotta be something i did. i wiped it out and started over. working on getting everyting moved in before i get the boot strap put on. i'll post back.
thanks again!
My bad (too many configuration groups). Try changing Product Listing :: Columns per row to 0.Quote:
Originally Posted by bumba000
Hey lat9, I was just about to post back when i saw your response. Thank you! I had just changed that from 1 which was fine ... to 3 which broke it again. I tried everything with left and right columns and everything else that made any sense. Zero there is perfect. I guess (without digging) you're taking advantage of flex ( annnnd yes i've looked now ). sweet. I've wanted something like that since 1.3.8a. Love it. Thank you sir!
Best,
John
No problem, happy to help (but I'm not a 'sir').Quote:
Originally Posted by bumba000
ha ha sorry about that. I've seen you and i imagine spoken with you here for years now. I've always assumed you were a dude. My apologies. And I thank you just the same.
So since you had me change that 3 to a 0 it was good. I've changed nothing. Just poking around the front end with inspector. All products in listing were fluid as they would increase in numbers and size per row as the browser expanded and the reverse as it shrunk. Now there are 4 per row. There are no css buttons and the number per row doesn't change with browser width.
Just found a bootstrap sql patch in the logs. applied and resolved. what the heck?! lol
I had (obviously) totally forgotten about that "suggested settings" log; thanks for the post back and the memory jogger!Quote:
Originally Posted by bumba000
I've just submitted v3.1.5 of the Bootstrap-4 template for the Zen Cart moderators' review; I'll post back here when it's available for download.
This release contains changes associated with the following GitHub issues:
#84: Adding language-translation for Back to Top button's title= tag.
#85: Adding alt= tag to additional images.
#86: Adding aria-label and -title to shopping-cart buttons.
#88: Correct form-start tag placement to correct invalid HTML on checkout_confirmation.
#89: Correct data-overflow on account page's Previous Orders.
#91: Correct PHP notices issued when left/right columns are fully disabled.
#92: Enable integration with attribute image-swapper plugins.
I’m looking for someone to implement some styling customizations to this template.
looking to make it more picture heavy, with a displayed shopping cart icon in the responsive mode, and moving it to a 2 column format.
I’m lacking skills in this field and need assist. PM if interested.
Now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191Quote:
Originally Posted by lat9
Tagline under logo should be aligned by default. Makes no sense to me why these two items would have different alignments.
includes/templates/bootstrap/common/tpl_header.php
That's what you call open-source. You're free to make changes if that's what layout you want.Quote:
Originally Posted by pixelpadre
Did it take you very long to think of your response. Very nice, I'm sure the community will appreciate your advice.Quote:
Originally Posted by lat9
Yes, it did. I looked at the full-screen layout (where the tagline is centered in the screen but next to the image) as well as the mobile rendering where the tagline is centered under the image.Quote:
Originally Posted by pixelpadre
@pixelpadre
One should NEVER bite the hand who generates money for your website.
lat9 is a major contributor to the zen cart community who donates her time for free advice.
Just a quick one, on the product listing...
modules/bootstrap/product_listing.php does not format correctly when setting the number of columns required.
thisneeds changing to thisPHP Code:if ($product_listing_layout_style === 'columns' || $product_listing_layout_style === 'fluid') { $lc_text = implode('<br>', $product_contents); $style = ''; if ($product_listing_layout_style === 'columns') { $style = ' style="width:' . $col_width . '%;"';
Or you need to take out the linePHP Code:if ($product_listing_layout_style === 'columns' || $product_listing_layout_style === 'fluid') { $lc_text = implode('<br>', $product_contents); $style = ''; if ($product_listing_layout_style === 'columns') { /* $style = ' style="width:' . $col_width . '%;"'*/;
altogetherPHP Code:$style = ' style="width:' . $col_width . '%;"'
I'll review that, but why would you hard-code the number of columns instead of letting the bootstrap responsiveness do its thing?Quote:
Originally Posted by Nick1973
The product listing when using columns doesn't fit 100% of the column width. For example, if I have it set to two columns it only fits 49.5% of the column width - or halfway across.Quote:
Originally Posted by lat9
I didn't really hardcode it, just took out style="width:49.5%" or whatever as that will change if you have three, four or five columns and so on. The responsiveness works fine without it.
I've attached images so you can see before and after the change:
Before
Attachment 19749
After
Attachment 19750
Right, if you really want a fluid set of columns, you should set the product-listing's configuration for columns-per-row to 0.
ok but then it changes to four across, plus that isn't very clear in the admin. Perhaps just a simple text instruction on columns per row?
So how do I change it from 4 across to 3 across or 2 across?
Quote:
Originally Posted by Nick1973
I recall DrByte strongly suggested not to mess with that line (around 400 correct?), and to edit in case the lines around 180
PHP Code:// set css classes for "row" wrapper, to allow for fluid grouping of cells based on viewport
// these defaults are based on Bootstrap4, but can be customized to suit your own framework
if ($product_listing_layout_style === 'fluid') {
$grid_cards_classes = 'row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-3';
// this array is intentionally in reverse order, with largest index first
$grid_classes_matrix = [
'10' => 'row-cols-1 row-cols-md-2 row-cols-lg-4 row-cols-xl-5',
'8' => 'row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'6' => 'row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-3',
];
Thanks, @keneso, that's exactly what I was going to suggest. FWIW, products' listings with this template are best rendered either in row or fluid mode, since setting specific column widths doesn't play well with bootstrap's 'card' layouts.Quote:
Originally Posted by keneso
Cindy, you have recommended this change to me in the past and it has worked like a charm. It is briefly mentioned in the documentation on Columnar Layout for Product Listing pages here:
https://docs.zen-cart.com/user/templ...sting_columns/
Thanks, Scott, I didn't realize that that documentation exists!Quote:
Originally Posted by swguy
Any chance someone has this as a demo that I can see? The original one listed in this thread says "domain for sale" lol
Sure: https://vinosdefrutastropicales.com/zc157_bs4/Quote:
Originally Posted by g2ktcf
You are the best!
Thanks!
Thanks for reporting; this has been fixed.Quote:
Originally Posted by g2ktcf
This issue hits the bootstrap template:
Zone restricted shipping modules won't show up in estimator unless state dropdown is used
https://github.com/zencart/zencart/issues/4476
How can I have two cards per row on mobile? I have tried fiddling with $grid_classes_matrix but that doesn't seem to be what's needed.
With this I see two per rowQuote:
Originally Posted by swguy
Code:'10' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'8' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'6' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
Thanks - this gives two per row on the index listing pages (/index.php?main_page=index&cPath=2_82) but not two per row for the centerboxes on the front page, which is what I was hoping to get.
(Sorry, I realize now that my original request didn't specify this detail.)
That's it! Edits to your clone's /includes/modules/bootstrap/product_listing.php's $grid_classes_matrix array.Quote:
Originally Posted by keneso
The products/row on those centerboxes are controlled by the various (e.g. featured, special, new) per-row counts present in Configuration :: Product Info. For instance, the new-products/row is controlled by SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS.Quote:
Originally Posted by swguy
Mobile seems to be stuck at 1. Yes, desktop and tablet home page centerbox products per row can be modified (I think it's configuration > Index listing though) but mobile always seems to let a single column take 100% of the width.
This is the home page centerboxes only - other index pages seem to be controlled using the grid as noted above.
When you say mobile, what viewport width are you referring to?Quote:
Originally Posted by swguy
I am using the Chrome simulator with iPhone 6/7/8, and that is 375x667. (Right click, Inspect, select device type.). Same for other phones - Pixel 2, Nexus 4, etc.
When I go to https://vinosdefrutastropicales.com/zc157_bs4/ and do this I see 1 item per row in the new products centerbox as shown in the attached image.
That's going to require changes to each of the /includes/templates/bootstrap/centerboxes/tpl*.php files, changing the overall container as identified in this Bootstrap document: https://getbootstrap.com/docs/4.4/la...d/#row-columns
I *thought* it would be something like this - thanks these were the leads I needed. I'll let you know how it goes.
If anyone else is interested in this, here's my diff for includes/templates/bootstrap/centerboxes/tpl_modules_featured_products.php; other files would be analogous.
Code:@@ -36,14 +36,14 @@ if (is_array($list_box_contents) > 0 ) {
//if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];
?>
-<div class="card-deck text-center">
+<div class="card-deck text-center row row-cols-2">
<?php
for($col=0, $j=sizeof($list_box_contents[$row]); $col<$j; $col++) {
$r_params = "";
if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
if (isset($list_box_contents[$row][$col]['text'])) {
?>
- <?php echo '<div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] . '</div>'; ?>
+ <?php echo '<span ' . $r_params . '>' . $list_box_contents[$row][$col]['text'] . '</span>'; ?>
<?php
}
}
Possibly interesting to Bootstrap template users:
I find having "Sold Out" presented as a button to be confusing. Even in CSS Buttons mode, I'd rather just use the graphic image (the same way "Call for Price" does).
I put in a PR for 1.5.8 that does this but it's an easy backport. See
https://github.com/zencart/zencart/pull/4479
I'm also using this template on a live store at https://www.thegluepeople.co.uk/Quote:
Originally Posted by g2ktcf
Here's a few of mine built with Bootstrap:Quote:
Originally Posted by CunningStunt2
https://businesscardprinting.uk
https://ventureengravings.uk
https://brassplaque.co.uk
https://engravedplaques.uk
https://theredarrows.co.uk
Fantastic template so many visitors since changing to this format and it really seems to create a nice retention and sale rate. So wanted to pass on appreciation for making my custom template completely obsolete due to your design prowess.
Hello,
Not sure where to post this as I'm not sure if its a Zencart or template issue.
I recently upgraded Zencart and ZCA versions and now my larger image modal popup is blank.
I tried changing tpl_image.php to the earlier version but that didn't work.Code:<div id="productLargeImageModal" class="modal-body"></div>
Doing some more digging I was able to get it partially working by adding the image dimensions. But if I change MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT to LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT it blanks again.PHP Code:<?php echo zen_image($products_image_large, $products_values->fields['products_name']); ?>
Any suggestions on how to display the full sized image?PHP Code:<?php echo zen_image($products_image_large, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT); ?>
-
PHP 7.2
Zen Cart 1.5.7c
ZCA Bootstrap 3.1.5
Thanks
I should add all my images are uploaded to /images. No folders for sizes, etc. I upload a single large image for all items with no special wording for size.
@ChrisLane, install Image Handler 5 (https://www.zen-cart.com/downloads.p...file&id=2169); that'll make various-sized images based on your single image present in the /images sub-directory.
I've just submitted v3.2.0 of the Bootstrap-4 Template for the Zen Cart moderators' review; I'll post back here when it's available for download.
This release contains changes associated with the following GitHub issues:
#87: Include "More Information" sidebox in mobile-menu, if enabled.
#93: Use loading="lazy" to lazy-load images.
#96: Screen-reader updates for reviews' rating stars.
#97: Correct javascript/jQuery error on address-gathering pages; missing #stBreak.
#98: Correct missplaced </div> in products' listing template module.
#99: Adding an AJAX search; template settings are now in their own configuration 'group'.
#100: Add product-listing default grids for 12-column and 9-column center sections; enable the listing's 'grid' layout to be overridden.
So in the preview it shows a Document box. I have gone in to the layout boxes controller and turned it on but it still not showing am I missing something. I tried searching the thread for document and nothing came back.
I am running Fresh install Zencart 1.5.7c and BS template 3.1.5
Thanks Shawn
By the preview, do you mean the template's demo site (https://vinosdefrutastropicales.com/zc157_bs4/)? If so, that Documents sidebox (when enabled) shows your site's products that are of type document-general and document-product.Quote:
Originally Posted by shawnchr
If you don't have any products of those types, that Documents box doesn't display.
I tried creating both types and it did show up.Quote:
Originally Posted by lat9
This is what I am referring too.Quote:
Originally Posted by shawnchr
Attachment 19849
So, is your issue resolved now that you've got at least one product of type document-general and/or document-product?Quote:
Originally Posted by shawnchr
No it was a typo sorry and the stupid time limit for editing had passed.Quote:
Originally Posted by lat9
Neither type allowed the box to show I tried adding to top level as well as creating a Documents category and creating both type there as well,
If you change the current template to the built-in responsive-classic, does the Documents link show?Quote:
Originally Posted by shawnchr
No it does not work there either.Quote:
Originally Posted by lat9
OK, so it's something in your base Zen Cart settings/configuration that's not showing those products. Are the products enabled?Quote:
Originally Posted by shawnchr
I've just submitted v1.0.0 of the Bootstrap-4/One-Page-Checkout integration for the Zen Cart moderators' review; I'll post back here when it's available for download.
This version corrects the "Add to Address Book" checkboxes' labels' `for=` attribute, making those checkboxes 'clickable'. Once approved, the plugin can be downloaded from https://www.zen-cart.com/downloads.php?do=file&id=2305.
Now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191Quote:
Originally Posted by lat9
Now available for download, too!Quote:
Originally Posted by lat9
I'd love to be able to mix and match rows mode (Product Listing - Columns Per Row = 1) on the desktop, but fluid columns (Product Listing - Columns Per Row = 0) on mobile. Is this possible?
Not currently. It'll take an additional configuration setting.Quote:
Originally Posted by swguy
I'll suggest opening an issue on the template's GitHub repository so that the request isn't lost in the ether.
Roger that. Issue 102 created.
Also: PR submitted - how to hide fields in portrait mode when rows_mode is being used.
https://github.com/lat9/ZCA-Bootstrap-Template/pull/103
Hello, I have installed a copy of ZCA bootstrap 3.2 on a fresh install of ZC 157. I would like to turn off the horizontal category bar can someone please give me directions on doing this. Thanks, Todd
That's the setting Configuration :: Layout Settings :: Categories-Tab Menu ON/OFF. Just change that to '0' to disable that display.Quote:
Originally Posted by tbokich
Hi
Would appreciate much need help! I read ZCA Bootstrap Template for 1.5.7c is the more robust version now. I just installed & everything seems fine except when I have a list of products showing either via New Products Listings, All Products listings. For those, I cannot click on the icon "add" & I also cannot select (only hover the item). The only way is to double-click & enter into the individual product to add. Please Help.
Best Regards, Noi
@noi.ng, I'm not sure I understand. Those "Add:" elements for each product are simply labels. You need to fill in the product-count you want to add to the cart and then press the "Add selected to cart" button.
Are you indicating that the above process doesn't work?
Of Gosh! Thanks @lat9. We thought they were meant to be clickable buttons like in single product rather than just labels. Then that works fine but I will probably disable it as it confuses our customers. Thanks for your help!
I can see the confusion that noi.ng might be experiencing.
Using my test site of jeandret.com and going to all products, once you scroll either of the Bug's Life items to the top of the screen, the Add Selected to Cart is not visible either at the top or the bottom.
One could assume (I know) that, when the quantity is changed from 0 to some positive number, the Add: would become an active submit button. Thus not having to scroll up or down to find the Add Selected to Cart.
Please note that this is not something new or that only happens with Bootstrap. It's been around a while and doesn't become a problem if all items have attributes, or are on special, or anything else that disables buying the item on the all products page.
Might be a 1.5.8 consideration.
Thanks much!
Yes, that was exactly my assumptions ! :) That's for validating @dbltoe.
With any template, CSS depends on the last command for the final representation to the user. In the past, someone had the idea of using stylesheet_zcustom.css to do those changes.
It helped me to keep track of things changed for troubleshooting/updating and worked fine with responsive_classic. Not so much with bootstrap.
While the file loads last in responsive_classic, it appears that the stylesheet_zca_colors.php loads last in bootstrap. I could be wrong but, I have not been successful in changing some items in either style_sheet_colors.css or stylesheet_zca_colros.php.
Where can I place CSS calls that will ensure they are the last presented to the browser?
THANX
You'll have to modify your cloned /commmon/html_header.php to include a site-specific overriding CSS.Quote:
Originally Posted by dbltoe
Noting also that there's a current issue on the template's GitHub (https://github.com/lat9/ZCA-Bootstra...late/issues/68) that addresses this issue.Quote:
Originally Posted by lat9
hello,
I was pointing in the direction of using this template as opposed of a responsive classic clone.
However, is there a list of ZC plugins that do or do not work with bootstrap? (i.e zx slideshow, flex slider footer...)
I have seen an implementation for one page checkout. Is there any other implementations?
Thank you
I have been using Bootstrap since it was only a bootlace but I use clone template (now V1.2.1) to make a copy and alter only my template version.
I also use separate stylesheets to over ride the original styles to avoid editing the originals eg I have a style sheet named "stylesheet_zcbmh_overides.css" which is loaded after the main "stylesheet.css" to improve on the bootstrap styles that annoy me or to improve the user interface.
I also have style sheets for many of the add-ons I use eg ceon back in stock; securepay; ozpost etc. I also have a style sheet named "stylesheet_xbanner.css" that colours the background on #logowrapper so each of my sites has a different colour and I can look at a screen and immediately determine which environment I am looking at eg vanilla is yellow; test is lime; build is purple; production is red.
Bootstrap 4 v3.2.0 and zc157c work with the followings add-ons: clone template 1.2.1; payment module fee 1-1-0; Direct bank Deposit V1.5.3 (AUS revised); securepayxml (modified for 157c); mod list 1.4.1; ozpost v4.2.7 (modified for 157c); numinix product fields 3.1.2; save your sideboxes layout as the default 151 (mod for 157c); ceon_back_in_stock_notifications V12; export_shipping_information_V1.4; edit_orders-4.6.0; printable price list 3.0.0; missing image checker 2.0 (modified for 157c); sales report 3.4.0; email archive manager 1.9; aupost 2.3;
I hope this helps.
Environment - Production: Zen Cart 157c; Apache 2.4.41; PHP 7.4.3; MySQL 8.0.27; Ubuntu 5.4.0
every plugin that i have completed works with the bootstrap template:Quote:
Originally Posted by nicksab
https://www.zen-cart.com/member.php?17577-carlwhat
with regards to various slider plugins, all of these are based on various slider libraries. in my experience, these slider libraries come and go. and you need to pick a slider that is based on a library that is currently supported. for example, i have a copy of v2.1 of ZX Slideshow. it is based on the nivo slider library. that library is no longer maintained, and as such, i could not recommend using v2.1 of that plugin. https://github.com/Codeinwp/Nivo-Slider-jQuery
the bootstrap template is actively maintained. if you want a slider to use with this template, i would find one that is actively maintained as well.
best.
You never stop learning. I know I don't. While your theory worked with responsive_classic or other templates, it will need to be different with bootstrap.Quote:
Originally Posted by OldNGrey
See https://www.zen-cart.com/showthread....39#post1386139 and follow it to github for more clarificcation.
Thank you very much for sharing the link. I really appreciate it.Quote:
Originally Posted by carlwhat
ZX slideshow is the one i am using right now on my site with a clone of responsive classic. I did and still have some issue with it like jquery conflict...
Any similar slideshow you would recommend using with bootstrap template?
Thank you
just to be clear, having a jquery conflict has nothing to do with the issue i'm bringing up. in general, jquery conflicts are due to merging elements between your template and your plugins.Quote:
Originally Posted by nicksab
a number of these sliders are based on outdated versions of jquery, which also has its problems.
unfortunately i do not have one to recommend. perhaps @balihr might, as he (in my mind) is a front end king. @swguy might know a good one, as he knows the plugins far better than i.
i tried playing around for a while with tiny-slider (http://ganlanyuan.github.io/tiny-slider/demo/), but alas my front end foo is not strong; or other projects took precedence. so i never really had a working go of it on a zc site.
best.
I've got a (beta) Bootstrap 4 slider for the home-page (https://github.com/lat9/bs4_home_slider). It makes use of the banner-manager to schedule the sliders.
Quote:
Originally Posted by lat9
Looking forward to trying it out...
Feedback welcomed in this support-thread.Quote:
Originally Posted by Carbonless
worked like a charm... easy configuration. Thanks for the add-on.Quote:
Originally Posted by Carbonless
Thanks for sharing the link lat9. Looking forward to try it out as wellQuote:
Originally Posted by lat9