ZCA Bootstrap 4 Template [Support Thread]

[lat9]

I'm not seeing the need, whether with or without a top banner. A screenshot would help to show what you're seeing.

[diamond1]

I'm not seeing the need, whether with or without a top banner. A screenshot would help to show what you're seeing.

You are right Lat is better with pictures my English is weak, as you can see on the pictures the logo and the banner go down because the <br> is missing for me.

[lat9]

Thanks for the picture, that issue is fixed in the forthcoming v3.5.2 of the template where I'd changed the heading structure to more properly display when the upper-header banners are included.

[lat9]

v3.5.2 of the Bootstrap template is now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191

This release contains changes associated with the following GitHub issues:

#203: Correct shopping-cart display when both icon and checkbox is rendered.
#206: Correct heading structure and add landscape for accessibility.
#209: Remove unneeded code from the admin's Tools :: ZCA Bootstrap Colors tool.
#210, #211: Updates to "ZCA Bootstrap Colors" and /css/stylesheet_zca_colors.php to make it easier to add/update colors now and in the future. Refer to the template's wiki (https://github.com/lat9/ZCA-Bootstrap-Template/wiki) for additional information.
#212: Updating/adding various color settings for the "ZCA Bootstrap Colors" tool.
#215: Remove unwanted bootstrap base color classes, so the the "ZCA Bootstrap Colors" control the sections.
#220: Coupon modal pop-up not displaying any text when there are no category-related restrictions.
#221: Correct 'run-on' sentence structure in coupon modal pop-up.
#222: zc158a no longer includes <strong> tags in 3-page checkout guidance language constants.
#223: Coupon modal pop-up creates PHP Warning when coupon has product-related restrictions.
#224: Use FA-5 classes for FA-icons (some were still using FA-4 'syntax').
#226: Correcting header-tag hierarchy and adding labels for accessibility.
#227: Correct notification name for coupon-link update.

[jtlswan]

v3.5.2 of the Bootstrap template is now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191

Sorry...newbie guy/question here. Do I need to run the .sql file thats located in the /docs/bootstrap/uninstall/bootstrap_colors_uninstall.sql folder in the Install SQL Patches link on the admin site?

Thank you,

JTLS

[dbltoe]

Looking at the bootstrap_colors_unstall.sql code (a new file for this version) it appears that this is to be used strictly to reset colors for your bootstrap when they get messed up and they do.

When we were testing for color contrast compatibility, the process of wiping out all colors and starting over was tedious to say the least. This file will help us a lot.

This file can quickly get rid of alll colors and your next trip to the admin will return all the default colors to their rightful place.

[diamond1]

For Lat9, and developer look at this on tpl categories.php found on templates/sidebox I added title= why not get used to doing some SEO?

<?php
/**
* Side Box Template
*
* BOOTSTRAP v3.0.0
*
* @package templateSystem
* @copyright Copyright 2003-2018 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: Drbyte Sun Jan 7 21:28:50 2018 -0500 Modified in v1.5.6 $
*/
$content = '';

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="list-group-flush sideBoxContent">';
for ($i = 0, $j = count($box_categories_array); $i < $j; $i++) {
switch (true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'sideboxCategory-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'sideboxCategory-subs';
break;
default:
$new_style = 'sideboxCategory-products';
break;
}

if ($box_categories_array[$i]['has_sub_cat']) {
$box_categories_array[$i]['name'] .= CATEGORIES_SEPARATOR;
}

if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
// skip if this is for the document box (==3)
} else {
$content .= '<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center ' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '" title="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

if ($box_categories_array[$i]['current']) {
if ($box_categories_array[$i]['has_sub_cat']) {
$content .= '<span class="sideboxCategory-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';
} else {
$content .= '<span class="sideboxCategory-subs-selected">' . $box_categories_array[$i]['name'] . '</span>';
}
} else {
$content .= $box_categories_array[$i]['name'];
}

if (SHOW_COUNTS == 'true') {
if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
$content .= '<span class="badge badge-pill">' . CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX . '</span>';
}
}

$content .= '</a>';
}
}

if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
// if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
// $content .= '<hr id="catBoxDivider" />' . "\n";
// }
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
$show_this = $db->Execute("SELECT s.products_id FROM " . TABLE_SPECIALS . " s WHERE s.status= 1 LIMIT 1");
if (!$show_this->EOF) {
$content .= '<a class="list-group-item list-group-item-action list-group-item-secondary" href="' . zen_href_link(FILENAME_SPECIALS) . '" title="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>';
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
// display limits
// $display_limit = zen_get_products_new_timelimit();
$display_limit = zen_get_new_date_range();

$show_this = $db->Execute(
"SELECT p.products_id
FROM " . TABLE_PRODUCTS . " p
WHERE p.products_status = 1 " . $display_limit . " LIMIT 1"
);
if (!$show_this->EOF) {
$content .= '<a class="list-group-item list-group-item-action list-group-item-secondary" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '" title="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>';
}
}
if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
$show_this = $db->Execute("SELECT products_id FROM " . TABLE_FEATURED . " WHERE status = 1 LIMIT 1");
if (!$show_this->EOF) {
$content .= '<a class="list-group-item list-group-item-action list-group-item-secondary" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '" title="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>';
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
$content .= '<a class="list-group-item list-group-item-action list-group-item-secondary" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '" title="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>';
}
}
$content .= '</div>';

[brittainmark]

What new content are you adding?

Link Title Attribute Best Practices

You should use a link title when you are providing more information about the link.

Don’t use a link title to provide the information over again, as this is a usability fail that will only result in annoying your users.

[Jeff_Mash]

Cindy - I think I found an issue with the Bootstrap and the Remember Me plugin.

The plugin puts a "Remember Me" checkbox on the login page. However, due to the input class of the checkbox, the actual checkbox isn't displaying.

The code looks like this:

<input class="custom-control-input" type="checkbox" name="permLogin" value="1" checked="checked" id="permLogin">

As you can see in the screenshot, it doesn't display the actual checkbox:

Now, if I manually change the class to anything else, it works. The problem is that I don't know where to change it.

I ASSUME that I need to change it in the observers/class.remember_me_observer.php on this line:

zen_draw_checkbox_field('permLogin', '1', $this->checkbox_default, 'id="permLogin"') .
            '<label class="checkboxLabel" for="permLogin" title="' . TEXT_REMEMBER_ME_ALT . '">' . TEXT_REMEMBER_ME . '</label>';

However, I don't know how! I did try to edit that line of code above to say 'id="permLogin" class="testing", but all that did was create a checkbox with the class saying class="custom-control-input testing".

The problem is that the checkbox itself won't display with the "custom-control-input" class. Perhaps there's a CSS edit to be made?

Any help is appreciated.

[lat9]

@Jeff_Mash, you'll need to edit /includes/classes/observers/class.remember_me_observer.php. Find this method

    public function create_checkbox() 
    {
        if (!$this->enabled) {
            return '';
        }
        $return_value = 
            '<br />' .
            zen_draw_checkbox_field ('permLogin', '1', $this->checkbox_default, 'id="permLogin"') .
            '<label class="checkboxLabel" for="permLogin" title="' . TEXT_REMEMBER_ME_ALT . '">' . TEXT_REMEMBER_ME . '</label>';

        return $return_value;
    }

and change it to read as follows for compatibility with the bootstrap template:

    public function create_checkbox() 
    {
        if (!$this->enabled) {
            return '';
        }
        $return_value = 
            '<br>' .
           '<div class="custom-control custom-checkbox">' .
                zen_draw_checkbox_field('permLogin', '1', $this->checkbox_default, 'id="permLogin"') .
                '<label class="checkboxLabel" for="permLogin" title="' . TEXT_REMEMBER_ME_ALT . '">' . TEXT_REMEMBER_ME . '</label>' .
           '</div>';

        return $return_value;
    }

.. essentially wrapping the checkbox and its label in a custom_control custom-checkbox div.