ZCA Bootstrap 4 Template [Support Thread]

[Dave224]

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?

[Saundan]

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...._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.

[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 echo zen_get_country_list('zone_country_id', $selected_country, 'id="country"'); ?>

To

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

This fixes the issue

[lat9]

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 echo zen_get_country_list('zone_country_id', $selected_country, 'id="country"'); ?>

To

<?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.

[DrByte]

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

[Saundan]

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-Bootstra...late/issues/42) GitHub issue for additional information. That update will be included in the forthcoming Bootstrap v3.1.0.

[keneso]

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;}

[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

[lat9]

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.