ZCA Bootstrap 4 Template [Support Thread]

Dave224:

I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.

<!--bof-navigation display-->

   <div id="navMainWrapper">
      <div id="navMain">
     <nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
             <ul class="dropdown-menu">
             <li>
                <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
                <ul class="submenu dropdown-menu">
                       <li>
                      <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
                                      <ul class="submenu dropdown-menu">
                     <li>
                        <a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
                                         </li>
                                      </ul>
                                   </li>
                                </ul>
                             </li>
                         </ul>
                      </li>
                   </ul>
                </div>
             </nav>
          </div>
       </div>

See post #269 for a list of great links to various Bootstrap elements.  Note, too, that <https://w3schools.com> has a bunch of "Try It" elements for Bootstrap.

Dave224:

I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.

<!--bof-navigation display-->

   <div id="navMainWrapper">
      <div id="navMain">
     <nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
             <ul class="dropdown-menu">
             <li>
                <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
                <ul class="submenu dropdown-menu">
                       <li>
                      <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
                                      <ul class="submenu dropdown-menu">
                     <li>
                        <a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
                                         </li>
                                      </ul>
                                   </li>
                                </ul>
                             </li>
                         </ul>
                      </li>
                   </ul>
                </div>
             </nav>
          </div>
       </div>

The following seems to work, but only after adding some supporting CSS and Javascript, inspired from <https://bootstrapious.com/p/bootstrap-multilevel-dropdown>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a> <ul class="dropdown-menu"> <li><a class="dropdown-item">Level 1 Item 1</a></li> <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 1 Submenu</a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 2 Submenu</a> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#">Level 3 Item 1</a> </li> </ul> </li> <li><a class="dropdown-item">Level 2 Item 2</a></li> </ul> </li> </ul> </li> ```

stylesheet_submenu.css:

.dropdown-submenu {
  position: relative;
}


.dropdown-submenu>a:after {
  float: right;
  border: none;
   /* change the character and/or font below to suit what you have available */
  content: "\f0da";  
  font-family: 'FontAwesome';
}


.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0px;
  margin-left: 0px;
}

jscript_submenu.php

<script>
$(function() {
  // ------------------------------------------------------- //
  // Multi Level dropdowns
  // ------------------------------------------------------ //
  $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
    event.preventDefault();
    event.stopPropagation();


    $(this).siblings().toggleClass("show");




    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });


  });
});
</script>

You will probably need to tweak the CSS to increase some padding to provide indentation at subsequent levels, or add padding/margin classes to your HTML.

Looking for an assist to help code my style sheet for the ZCAtemplate to put the logo & the tagline centered in the same area. I've been able to get the tag line to go above and below the logo in mobile view, but want them to be aligned with each other in desktop view.

If you goto https://venturedesignandprint.co.uk/ you can see they have aligned the two using the bootstrap template.

I am stuck figuring out the style sheet to the same with mine.

Here is the code as I have tpl_header.php currently:

<!--bof-branding display-->
<div id="logoWrapper">
    
   <div id="logo" class="row align-items-center p-3"> 
   <?php if (HEADER_SALES_TEXT != '') {
           echo '<div class="col-sm-6">';
        } else {
            echo '<div class="col-sm-12">';
            }
            ?>
        <?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a><br>'; ?>
    </div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>    
    <div id="taglineWrapper" class="col-sm-12 text-">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline" class="text-right"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
  if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
    if ($banner->RecordCount() > 0) {
$find_banners = zen_build_banners_group(SHOW_BANNERS_GROUP_SET2);
$banner_group = 2;
?>

<div class="zca-banner bannerTwo rounded">
<?php 
if (ZCA_ACTIVATE_BANNER_TWO_CAROUSEL == 'true') {
require($template->get_template_dir('tpl_zca_banner_carousel.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_zca_banner_carousel.php'); 
} else {
echo zen_display_banner('static', $banner);
}
?>
</div>
<?php
    }
  }
?>
    </div>
<?php } 
// no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
  </div>

</div>
<!--eof-branding display-->

Try changing your

<div id="taglineWrapper" class="col-sm-12 text-">

to

<div id="taglineWrapper" class="col-sm-6 text-right">

like the Venture site did.

dennisns7d:

Try changing your

<div id="taglineWrapper" class="col-sm-12 text-"> ``` > to > ``` <div id="taglineWrapper" class="col-sm-6 text-right"> ``` > like the Venture site did.

THANK. YOU!
that worked.

Working on a site: https://www.coffeewitheinstein.com and I'm trying to enlarge the header logo
ZC 1.5.7b
php 7.3
with Shopping cart Reminder
Edit Orders
TY Package tracker
Email Export
Clone Template
ZCA Boot 4
and Order Comment Boiler plate

I've edited the includes/languages/english/mytemplate/header/php file and it isnt affecting the size of the displayed logo.

Is this controlled elsewhere by the style sheet?

The div containing it is set to col-sm-4 which means it only shows at 33% width on devices other than smallest mobiles.

You can read up on Bootstrap's column grid rules at https://getbootstrap.com/docs/4.5/layout/grid/

DrByte:

The div containing it is set to col-sm-4 which means it only shows at 33% width on devices other than smallest mobiles.

You can read up on Bootstrap's column grid rules at https://getbootstrap.com/docs/4.5/layout/grid/

Most Excellent... My 10 year hiatus is showing its wings...

just in case...

modules/bootstrap/centerboxes/fetured_products.php - line # 85

$title = '<h4 [B]id="[/B]featuredCenterbox-card-header" class="centerBoxHeading card-header">' . TABLE_HEADING_FEATURED_PRODUCTS . ($category_title != '' ? ' - ' . $category_title : '') . '</h4>';

yesaul:

just in case...

modules/bootstrap/centerboxes/fetured_products.php - line # 85

$title = '<h4 [B]id="[/B]featuredCenterbox-card-header" class="centerBoxHeading card-header">' . TABLE_HEADING_FEATURED_PRODUCTS . ($category_title != '' ? ' - ' . $category_title : '') . '</h4>';

Thanks for that!  The correction will be part of v3.1.0 of the template.

Update: Tracking as part of <https://github.com/lat9/ZCA-Bootstrap-Template/issues/31>

Still working on nav menu drop-down menus and sub-menus. I've got them the way I want on large screens but not when the nav menu collapses for small devices. The nav bar containing the "hamburger" icon extends the full width of the screen which is fine. But the drop-down menus and sub-menus also extend across the screen instead of the width required for the contents. I've tried many schemes but I haven't hit on the right html or css to get what I want. The drop-down menus and sub-menus open down as expected.

How can I keep drop-down menus and sub-menus from extending across the entire screen when the nav menu is collapsed?

I am an old hand at building websites and know my way around pretty well when it comes to php, and MySQL but am completely a novice when it comes to Zen Cart. I am using the bootstrap theme which I love so far, thank you.

I added an "about us" define page and I think I am missing a small detail and I just don't know what yet because of my unfamiliarity with Zen Cart (but I am learning fast). The About Us page appears in the information sidebox at desktop width, but in the responsive bit when we get to the "Hamburger Menu" it does not show up at all.

Interesting enough when I look at the site map the About Us page is there but outside of the page hierarchy somehow. You can see it here (unless I find the solution before i get help https://shop.jedipath.academy/index.php?main_page=site_map I figure this is a clue as to what I did wrong or what is missing but my search terms is not turning up anything as to what to modify to get it in the correct place.

Thank you in advance for any help that is forthcoming.

I discovered an issue with 3.0.0 installed on 1.5.7b. If the shipping estimator is configured to display a button that opens the popup, the dropdowns incorrectly display the last states after the country is changed. I found that the template in includes/templates/bootstrap/templates/tpl_modules_shipping_estimator.php was missing the onchange.
I changed line 59 from ```php

<?php echo zen_get_country_list('zone_country_id', $selected_country, 'id="country"'); ?>

To```php
<?php echo zen_get_country_list('zone_country_id', $selected_country, 'id="country" onchange="update_zone(this.form);"'); ?>

This fixes the issue

badarac:

I discovered an issue with 3.0.0 installed on 1.5.7b. If the shipping estimator is configured to display a button that opens the popup, the dropdowns incorrectly display the last states after the country is changed. I found that the template in includes/templates/bootstrap/templates/tpl_modules_shipping_estimator.php was missing the onchange.
I changed line 59 from ```php

<?php echo zen_get_country_list('zone_country_id', $selected_country, 'id="country"'); ?>

> To```php
<?php echo zen_get_country_list('zone_country_id', $selected_country, 'id="country" onchange="update_zone(this.form);"'); ?>

This fixes the issue
Thanks for the report. The Bootstrap template has been updated to remove those onchange elements, deferring to its jQuery handling. It sounds like that processing needs to be extended to the popup_shipping_estimator page, too.

Saundan:

I added an "about us" define page and I think I am missing a small detail and I just don't know what yet because of my unfamiliarity with Zen Cart (but I am learning fast). The About Us page appears in the information sidebox at desktop width, but in the responsive bit when we get to the "Hamburger Menu" it does not show up at all.
You'll have to add it into /includes/templates/bootstrap/common/tpl_offcanvas_menu.php

DrByte:

You'll have to add it into /includes/templates/bootstrap/common/tpl_offcanvas_menu.php

That was the part that was missing. Thank you so very much. I am grateful. I apologize if the question was off topic for the theme. The learning curve on this is steep I only started looking at Zen Cart on Sunday. I got it in the drop down hamburger menu now but it still off to the side on the sitemap. But I will take it.

lat9:

Thanks for the report. The Bootstrap template has been updated to remove those onchange elements, deferring to its jQuery handling. It sounds like that processing needs to be extended to the popup_shipping_estimator page, too.
FWIW, I've chosen to replace that popup display with a Bootstrap modal. See this (https://github.com/lat9/ZCA-Bootstrap-Template/issues/42) GitHub issue for additional information. That update will be included in the forthcoming Bootstrap v3.1.0.

If someone is interested I removed the table display from cart, and changed it to divs, following is the code.

Removed from:

<div class="table-responsive"> thru </form>

<?php
  foreach ($productArray as $product) {
?>
<div class="row fz-product-in-cart">
	<div class="col-12 col-md-6">
		<div class="row">
			<div class="col-12">
<?php echo TABLE_HEADING_PRODUCTS; ?><br><br>
			<a href="<?php echo $product['linkProductsName']; ?>"><?php echo $product['productsImage']; ?><?php echo $product['productsName'] . '' . $product['flagStockCheck'] . ''; ?></a>
			<br class="clearBoth" />
	<?php
	echo $product['attributeHiddenField'];
	if (isset($product['attributes']) && is_array($product['attributes'])) {
	echo '<div class="productsCell-attributes">';
	echo '<ul>';
    foreach ($product['attributes'] as $option => $value) {
	?>
	<li>
		<?php
		echo $value['products_options_name'] . TEXT_OPTION_DIVIDER . nl2br($value['products_options_values_name']);
		?>
	</li>
	<?php
		}
	  echo '</ul>';
	  echo '</div>';
	  }
	?>
			</div>
		</div>
	</div>
	<div class="col-12 col-md-6">
		<div class="row fz-detail-separator">
			<div class="col-4">
			<?php echo TABLE_HEADING_QUANTITY; ?>
			</div>
			<div class="col-6">
			<?php
			if ($product['flagShowFixedQuantity']) {
			echo $product['showFixedQuantityAmount'] . '' . $product['flagStockCheck'] . '' . $product['showMinUnits'];
			} else {
			echo $product['quantityField'] . '' . $product['flagStockCheck'] . '' . $product['showMinUnits'];
			}
			?>
			</div>
			<div class="col-2">
			<?php
			  if ($product['buttonUpdate'] == '') {
				echo '' ;
			  } else {
				echo $product['buttonUpdate'];
			  }
			?>
			</div>
		</div>
		<div class="row">
		<div class="col-12">
			<div class="row fz-detail-separator">
			<div class="col-6">
				<?php echo TABLE_HEADING_PRICE; ?>/unit
			</div>
			<div class="col-6 text-right">
				<?php echo $product['productsPriceEach']; ?>
			</div>
			</div>
			<div class="row fz-detail-separator">
			<div class="col-6">
				<?php echo TABLE_HEADING_TOTAL; ?>/item
			</div>
			<div class="col-6 text-right">
				<?php echo $product['productsPrice']; ?>
			</div>
			</div>
			<div class="row fz-detail-separator">
			<div class="col-12">
			<?php
			  if ($product['buttonDelete']) {
			?>
				<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, 'action=remove_product&product_id=' . $product['id']); ?>" class="btn"><i class="fas fa-trash-alt"></i></a>
			<?php
			}
			?>
			</div>
			<div class="col-12">
			<?php
			  
			  if ($product['checkBoxDelete'] ) {
				echo zen_draw_checkbox_field('cart_delete[]', $product['id'], false, 'aria-label="' . ARIA_DELETE_ITEM_FROM_CART . '"');
			  }
			?>
			</div>
			</div>
		</div>
		</div>
	</div>
</div>
<?php
  } // end foreach ($productArray as $product)
?>
<div class="row fz-cart-total">
	<div class="col-12 col-md-6">
		<div class="row">
			<div class="col-12 fz-update-button">
			<?php
			// show update cart button
			  if (SHOW_SHOPPING_CART_UPDATE == 2 or SHOW_SHOPPING_CART_UPDATE == 3) {
			?>
			<button type="submit" class="btn"><i class="fas fa-sync-alt"></i></button>
			<?php
			  } else { // don't show update button below cart
			?>
			<?php
			  } // show update button
			?>
			</div>
		</div>
	</div>
	<div class="col-12 col-md-6">
		<div class="row fz-cart-total-price">
			<div class="col-6">
			<?php echo SUB_TITLE_SUB_TOTAL; ?>
			</div>
			<div class="col-6 text-right">
			<?php echo $cartShowTotal; ?>
			</div>
		</div>
	</div>
</div>

<!--bof shopping cart buttons-->
	<div class="row">
		<div class="col-12 col-sm-6 order-sm-2 fz-checkout-button">
			<?php echo '<a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a>'; ?>
		</div>
		<div class="col-12 col-sm-6">
			<?php echo zen_back_link() . zen_image_button(BUTTON_IMAGE_CONTINUE_SHOPPING, BUTTON_CONTINUE_SHOPPING_ALT) . '</a>'; ?>
		</div>
	</div><!-- .row .fz-cart-row-wrap -->
<!--eof shopping cart buttons-->
</form>

The css

.fz-product-in-cart {border: 1px solid #099f36; margin: 0.9rem auto;}
.fz-cart-total {border: 1px solid #099f36; margin: 0.9rem auto; background-color: rgba(144, 243, 135, 0.45);}
.fz-detail-separator {border-bottom: 1px solid #099f36; margin: 0 -0.19rem; padding: 0.9rem 0.27rem;}
.fz-detail-separator:last-child {border: none;}
.fz-update-button {padding: 0.63rem;}
.fz-cart-total-price{margin: 0 -0.19rem; padding: 0.9rem 0.27rem;}
.row.fz-shipping-method {margin: 0;}

I'm using ZCA Bootstrap 3.0.0 template with ZC 157b. On some screen widths , the "add to cart" quantity box on the product listing page goes partially off screen making it difficult or impossible to change the quantity from 0 to say 1. I have turned all sideboxes off. Any ideas on correcting this?
TIA,
Dave
zc157b php 7.3.21

Dave224:

I'm using ZCA Bootstrap 3.0.0 template with ZC 157b. On some screen widths , the "add to cart" quantity box on the product listing page goes partially off screen making it difficult or impossible to change the quantity from 0 to say 1. I have turned all sideboxes off. Any ideas on correcting this?
TIA,
Dave
zc157b php 7.3.21
Dave, I'm not seeing that behavior on a 'stock' installation like the demo (https://vinosdefrutastropicales.com/zc157_bs4). Perhaps if you'd be more specific with the screen widths, additional help could be provided.