ZCA Bootstrap 4 Template [Support Thread]

[lat9]

I have a client wanting BS5 so I may need to look at the conversion then. Perhaps you could set up a BS5 directory in your GitHub repo so I can share any work that I might do.
Would also help to agree on a version number for the change to 5.

Just for grins and giggles, let's call it v5.0.0 ... thanks for your assistance.

[strelitzia]

Hi Cindy,

I've started working on migrating the template from Bootstrap 4 to Bootstrap 5. One significant change in Bootstrap 5 is the removal of the jQuery dependency, which affects how we handle certain components, such as carousels.

Regarding the carousel updates, I wanted to get your input on the approach we should take. There are two options:

Stick with the existing jQuery carousel code: This would involve keeping the current jQuery implementation of the carousel and making necessary adjustments to ensure compatibility with Bootstrap 5. However, this approach would still rely on jQuery, which goes against Bootstrap 5's philosophy of removing the dependency.

Update to use the Bootstrap 5 default carousel: This would involve refactoring the carousel code to utilize the native Bootstrap 5 carousel component, which is built using vanilla JavaScript. This approach aligns with Bootstrap 5's recommended practices and eliminates the need for jQuery.

Considering the long-term maintainability and alignment with Bootstrap 5's principles, which approach do you prefer? Let me know your thoughts, and we can discuss further to determine the best course of action."

[lat9]

Hi Cindy,

I've started working on migrating the template from Bootstrap 4 to Bootstrap 5. One significant change in Bootstrap 5 is the removal of the jQuery dependency, which affects how we handle certain components, such as carousels.

Regarding the carousel updates, I wanted to get your input on the approach we should take. There are two options:

Stick with the existing jQuery carousel code: This would involve keeping the current jQuery implementation of the carousel and making necessary adjustments to ensure compatibility with Bootstrap 5. However, this approach would still rely on jQuery, which goes against Bootstrap 5's philosophy of removing the dependency.

Update to use the Bootstrap 5 default carousel: This would involve refactoring the carousel code to utilize the native Bootstrap 5 carousel component, which is built using vanilla JavaScript. This approach aligns with Bootstrap 5's recommended practices and eliminates the need for jQuery.

Considering the long-term maintainability and alignment with Bootstrap 5's principles, which approach do you prefer? Let me know your thoughts, and we can discuss further to determine the best course of action."

Using the native Bootstrap 5 for the carousel seems the right path to me. Please note that the template's load of the latest jQuery should be kept, since many other plugins make use of that interface.

[strelitzia]

Using the native Bootstrap 5 for the carousel seems the right path to me. Please note that the template's load of the latest jQuery should be kept, since many other plugins make use of that interface.

Yes, I've noticed this and retained it in the preload.

[lat9]

Yes, I've noticed this and retained it in the preload.

Great. Note, too, that I've created a v500 branch on the repo: https://github.com/lat9/ZCA-Bootstra...late/tree/v500

[lat9]

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

This release contains changes associated with these GitHub issues:

#316: Don't display back-to-top on small/medium devices.
#386: Use the $template class to locate site_specific_styles.php.
#411: Add the zc210 notifier to the account_history_info page's template.
#417: Submitted keywords to AJAX search must be a 'string'.
#419: Display shipping module's error messages in the shipping-estimator.
#421: "Align" with zc210's implementation for the order_status page's template.
#422: Split CSS/JS loading into separate modules; was in common/html_header.php.
#426: ezpages :: page_is_ssl removed in zc210; default always to 'SSL'.
#428: Recognize zc210's mobile-menu settings for EZ-Pages.
#429: Add support for zc210's "Featured Categories" feature.
#432: Correct layout inconsistency between "Notification" and "Manufacturers Info" centerboxes.
#434: Correct background-color bleed-through on various card classes.
#435: Centerbox Background Color applied to containing cards, not the wrapper.

[todoonada]

I had the following problems with the bestsellers displayed in the sideboxes:
- In Configuration -> Maximum Values -> Best Sellers for Box I had to put in 11 to display 10 bestseller.
- The number 1 bestseller was never displayed. It started with the second best selling item.

I fixed it by modifying includes/templates/bootstrap/sideboxes/tpl_best_sellers.php.
Line 19

for ($i = 1, $j = count($bestsellers_list); $i<$j; $i++) {

should be

for ($i = 0, $j = count($bestsellers_list); $i<$j; $i++) {

Line 22

$i . '. ' .

should be

$i+1 . '. ' .

Somebody check please.

[todoonada]

I forgot to add:
Zen Cart version 1.5.8a
Bootstrap 3.7.0

[carlwhat]

I had the following problems with the bestsellers displayed in the sideboxes:
- In Configuration -> Maximum Values -> Best Sellers for Box I had to put in 11 to display 10 bestseller.
- The number 1 bestseller was never displayed. It started with the second best selling item.

...

i can confirm the first item, but not the 2nd item; ie if you needed to have 1 more then the max to display that number.

BUT, the #1 best seller was displayed in my setup.

my fix:

//from
for ($i = 1, $j = count($bestsellers_list); $i<$j; $i++) {
// to
for ($i = 1, $j = count($bestsellers_list); $i<=$j; $i++) {

in my setup, your line 22 fix, is not correct.

my $bestsellers_list is an array. and the first array element is 1. if your first array element is 0 (which is possible if you have an override of the bestseller module; and i will note that your version of bootstrap does not); then i can see how your code would be correct.

best.

[todoonada]

I do not have an override of the bestseller module.
This code is the original code. I just added the first line (echo $bestsellers_list[0]['name'];) to access the first element in the array, which is position 0.

echo $bestsellers_list[0]['name'];
if ($is_carousel === false) {


    $content = '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="list-group-flush sideBoxContent">' . "\n";


    for ($i = 1, $j = count($bestsellers_list); $i<$j; $i++) {
        $content .=
            '<a class="list-group-item list-group-item-action" href="' . zen_href_link(zen_get_info_page($bestsellers_list[$i]['id']), 'products_id=' . $bestsellers_list[$i]['id']) . '">' .
                $i . '. ' .
                zen_trunc_string($bestsellers_list[$i]['name'], BEST_SELLERS_TRUNCATE, BEST_SELLERS_TRUNCATE_MORE) .
            '</a>';
    }


    $content .= "</div>\n";
    return;
}

Result looks like this. The item above the "Bestseller" headline is the best selling item at array position 0.