ZCA Bootstrap Template 1.0 (BETA)

badarac:

I thought I'd document here that I installed Image handler from https://github.com/lat9/zen_Image-Handler along with bootstrap on a 1.5.5f site. I only needed to change one file in includes/modules/your_template/additional_images.php. I added a check to see if it was a bootstrap template and included the correct content. Cindy has opened an issue in github to modify bootstrap with a more elegant solution and accommodate the use of modal display of product images.
Thanks for the posting, @badarac. This is a link to that GitHub issue, for any interested parties to follow: https://github.com/zcadditions/ZCA-Bootstrap-Template-BETA-/issues/21

On the create account page, items with drop down menus (state, country) have an * on the line following to indicate it's required. As a text box they have the placeholder set to *.

I want to go back to the tagline problem. In includes/templates/bootstrap/common/header.php there is a test for the sales text being blank. If blank it does not include the tagline. This caused formatting problems with the header. I've looked at that again as a result of using a large width image in the header. Because the logo div is set to col-sm-4 regardless of the presence of a tagline, it shrinks the image to fit into 4 cols. There was also a problem with the location of the closing div for the logo wrapper and some line breaks that affected spacing of the header. Here's what I wound up with for the branding section:

<!--bof-branding display-->
<div id="logoWrapper">
    
  <div id="logo" class="row align-items-center">
        <?php if (HEADER_SALES_TEXT != '') {
		    echo '<div class="col-sm-4">';
		} 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>'; ?>
    </div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>    
    <div id="taglineWrapper" class="text-center col-sm-8">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?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) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } 
// no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
  </div>

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

badarac:

On the create account page, items with drop down menus (state, country) have an * on the line following to indicate it's required. As a text box they have the placeholder set to *.

This is standard, at least since v1.5.5 when the required * indicator was moved to the placeholder. drop-downs don't have a place holder.

badarac:

I want to go back to the tagline problem. In includes/templates/bootstrap/common/header.php there is a test for the sales text being blank. If blank it does not include the tagline. This caused formatting problems with the header. I've looked at that again as a result of using a large width image in the header. Because the logo div is set to col-sm-4 regardless of the presence of a tagline, it shrinks the image to fit into 4 cols. There was also a problem with the location of the closing div for the logo wrapper and some line breaks that affected spacing of the header. Here's what I wound up with for the branding section:

That's a good solution @badarac

I'm still looking at this, I never liked how the logo, sales message and banner all intermingled in the header logoWrapper. Not sure I'll be spending to much time on this before the weekend.

rbarbour:

That's a good solution @badarac

I'm still looking at this, I never liked how the logo, sales message and banner all intermingled the header. Not sure I'll be spending to much time on this before the weekend.

No worries. I've already fixed it with the solution I provided. If you want to give me access to upload to github I'll open an issue and fix.

rbarbour:

This is standard, at least since v1.5.5 when the required * indicator was moved to the placeholder. drop-downs don't have a place holder.
I understand that the text boxes have the placeholder. This is a minor formatting issue which resulted from bootstrap. It caused the * added to required dropdowns to move to a new line. The solution is to use col-11 to allow space for the * on the dropdowns. ```
<select class="custom-select col-11" name="zone_country_id" id="country">

badarac:

I understand that the text boxes have the placeholder. This is a minor formatting issue which resulted from bootstrap. It caused the * added to required dropdowns to move to a new line. The solution is to use col-11 to allow space for the * on the dropdowns. ```
<select class="custom-select col-11" name="zone_country_id" id="country">

Here's the change I made to includes/classes/observers/ZcaBootstrapObserver.php. It affects all pull downs not just required. ```php
                
            case 'NOTIFY_ZEN_DRAW_PULL_DOWN_MENU':
                $field = $p2;
                if (strpos($field, 'class="') !== false) {
                    $field = str_replace('class="', 'class="custom-select col-11', $field);
                } else {
                    $field = str_replace('<select ', '<select class="custom-select col-11" ', $field);
                }
                $p2 = $field;
                break;

badarac:

Here's the change I made to includes/classes/observers/ZcaBootstrapObserver.php. It affects all pull downs not just required. ```php

        case 'NOTIFY_ZEN_DRAW_PULL_DOWN_MENU':
            $field = $p2;
            if (strpos($field, 'class="') !== false) {
                $field = str_replace('class="', 'class="custom-select col-11', $field);
            } else {
                $field = str_replace('<select ', '<select class="custom-select col-11" ', $field);
            }
            $p2 = $field;
            break;

Nice one, @badarac.  I'll review all of those field-overrides to make sure that any pre-existing class isn't overwritten.  Are you going to create a GitHub issue, or should I?

lat9:

Nice one, @badarac. I'll review all of those field-overrides to make sure that any pre-existing class isn't overwritten. Are you going to create a GitHub issue, or should I?

Issue opened

badarac:

Issue opened

I found an additional issue related to this which I had fixed. It affected includes/templates/bootstrap/tpl_modules_create_account.php .
The pull down for the state was creating both the pull down and invisible fields for the text input box when $flag_show_pulldown_states was true. This took additional space under the state pulldown. Corrected the if logic to format correctly.

<?php
  if (ACCOUNT_STATE == 'true') {
		if ($flag_show_pulldown_states == true) {
	?>
	<label class="inputLabel" for="stateZone" id="zoneLabel"><?php echo ENTRY_STATE; ?></label>
	<?php
		  echo zen_draw_pull_down_menu('zone_id', zen_prepare_country_zones_pull_down($selected_country), $zone_id, 'id="stateZone"','true');
		  if (zen_not_null(ENTRY_STATE_TEXT)) echo ' <span >' . ENTRY_STATE_TEXT . '</span>';
		echo '<div class="p-2"></div>';
	 } else {?>
	<label class="inputLabel" for="state" id="stateLabel"><?php echo $state_field_label; ?></label>
	<?php
		echo zen_draw_input_field('state', '', zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_state', '40') . ' id="state" placeholder="' . ENTRY_STATE_TEXT . '"');
		if ($flag_show_pulldown_states == false) {
		  echo zen_draw_hidden_field('zone_id', $zone_name, ' ');
		}
	?>
	<div class="p-2"></div>
	<?php
	  }
}
?>

badarac:

Here's the change I made to includes/classes/observers/ZcaBootstrapObserver.php. It affects all pull downs not just required. ```php

        case 'NOTIFY_ZEN_DRAW_PULL_DOWN_MENU':
            $field = $p2;
            if (strpos($field, 'class="') !== false) {
                $field = str_replace('class="', 'class="custom-select col-11', $field);
            } else {
                $field = str_replace('<select ', '<select class="custom-select col-11" ', $field);
            }
            $p2 = $field;
            break;

> **lat9:**
>
> Nice one, @badarac.  I'll review all of those field-overrides to make sure that any pre-existing class isn't overwritten.  Are you going to create a GitHub issue, or should I?

> **badarac:**
>
> Issue opened

Nice catch @badarac,

I choose a different route only because this affected every pull-down menu (side-box pull-downs, pull-downs that aren't required, ect.), the following files have been updated to reposition the required indicator for pull-downs to be right of the pull-down label.

ZcaBootstrapObserver.php
tpl_modules_create_account.php
tpl_contact_us_default.php
tpl_modules_address_book_details.php
tpl_modules_checkout_new_address.php
tpl_modules_checkout_new_shipping_address.php
tpl_modules_checkout_new_payment_address.php

badarac:

I found an additional issue related to this which I had fixed. It affected includes/templates/bootstrap/tpl_modules_create_account.php .
The pull down for the state was creating both the pull down and invisible fields for the text input box when $flag_show_pulldown_states was true. This took additional space under the state pulldown. Corrected the if logic to format correctly.

Again, nice catch @badarac, I really appreciate the extensive testing. :smile:

A fix has been provided for all the following files:

tpl_modules_create_account.php
tpl_modules_address_book_details.php
tpl_modules_checkout_new_address.php
tpl_modules_checkout_new_shipping_address.php
tpl_modules_checkout_new_payment_address.php

rbarbour:

Again, nice catch @badarac, I really appreciate the extensive testing. :smile:

A fix has been provided for all the following files:

tpl_modules_create_account.php
tpl_modules_address_book_details.php
tpl_modules_checkout_new_address.php
tpl_modules_checkout_new_shipping_address.php
tpl_modules_checkout_new_payment_address.php

My pleasure. Thanks to you and Cindy. This was a huge undertaking as I've discovered just implementing it. Awesome job!!!

Found another one this morning. I've already opened an issue on github.
More information appears in the hamburger menu even though EZPAGES_STATUS_SIDEBOX is turned off. What I found was the if logic was executed after the beginning of the list item . I moved the check and it now works correctly. The edit is to includes/templates/bootstrap/tpl_offcanvas_menu.php. It also might be helpful to change the title and description for the config value to indicate that it controls the display in the hamburger menu as well.

<?php	  
  // test if sidebox should display
  if (EZPAGES_STATUS_SIDEBOX == '1' or (EZPAGES_STATUS_SIDEBOX== '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) {
    if (isset($var_linksList)) {
      unset($var_linksList);
    }	?>
      <li class="nav-item dropdown d-lg-none">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <?php echo BOX_HEADING_EZPAGES; ?>
        </a>
        <div class="dropdown-menu mb-2" aria-labelledby="navbarDropdown">

<?php

	echo '<ul class="m-0 p-0">';
	
    $page_query = $db->Execute("select * from " . TABLE_EZPAGES . " where status_sidebox = 1 and sidebox_sort_order > 0 order by sidebox_sort_order, pages_title");
    if ($page_query->RecordCount()>0) {
      $title =  BOX_HEADING_EZPAGES;
      $box_id =  'ezpages';
      $rows = 0;
      while (!$page_query->EOF) {
        $rows++;

The close of the if, div, and list item also needs to be moved or the formatting of the second and third rows moves outside the container. Here's the correct code:

<?php	  
  // test if sidebox should display
  if (EZPAGES_STATUS_SIDEBOX == '1' or (EZPAGES_STATUS_SIDEBOX== '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) {
    if (isset($var_linksList)) {
      unset($var_linksList);
    }	?>
      <li class="nav-item dropdown d-lg-none">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <?php echo BOX_HEADING_EZPAGES; ?>
        </a>
        <div class="dropdown-menu mb-2" aria-labelledby="navbarDropdown">

<?php

	echo '<ul class="m-0 p-0">';
	
    $page_query = $db->Execute("select * from " . TABLE_EZPAGES . " where status_sidebox = 1 and sidebox_sort_order > 0 order by sidebox_sort_order, pages_title");
    if ($page_query->RecordCount()>0) {
      $title =  BOX_HEADING_EZPAGES;
      $box_id =  'ezpages';
      $rows = 0;
      while (!$page_query->EOF) {
        $rows++;
        $page_query_list_sidebox[$rows]['id'] = $page_query->fields['pages_id'];
        $page_query_list_sidebox[$rows]['name'] = $page_query->fields['pages_title'];
        $page_query_list_sidebox[$rows]['altURL']  = "";
        switch (true) {
          // external link new window or same window
          case ($page_query->fields['alt_url_external'] != ''):
          $page_query_list_sidebox[$rows]['altURL']  = $page_query->fields['alt_url_external'];
          break;
          // internal link new window
          case ($page_query->fields['alt_url'] != '' and $page_query->fields['page_open_new_window'] == '1'):
          $page_query_list_sidebox[$rows]['altURL']  = (substr($page_query->fields['alt_url'],0,4) == 'http') ?
          $page_query->fields['alt_url'] :
          ($page_query->fields['alt_url']=='' ? '' : zen_href_link($page_query->fields['alt_url'], '', ($page_query->fields['page_is_ssl']=='0' ? 'NONSSL' : 'SSL'), true, true, true));
          break;
          // internal link same window
          case ($page_query->fields['alt_url'] != '' and $page_query->fields['page_open_new_window'] == '0'):
          $page_query_list_sidebox[$rows]['altURL']  = (substr($page_query->fields['alt_url'],0,4) == 'http') ?
          $page_query->fields['alt_url'] :
          ($page_query->fields['alt_url']=='' ? '' : zen_href_link($page_query->fields['alt_url'], '', ($page_query->fields['page_is_ssl']=='0' ? 'NONSSL' : 'SSL'), true, true, true));
          break;
        }

        // if altURL is specified, use it; otherwise, use EZPage ID to create link
        $page_query_list_sidebox[$rows]['link'] = ($page_query_list_sidebox[$rows]['altURL'] =='') ?
        zen_href_link(FILENAME_EZPAGES, 'id=' . $page_query->fields['pages_id'] . ($page_query->fields['toc_chapter'] > 0 ? '&chapter=' . $page_query->fields['toc_chapter'] : ''), ($page_query->fields['page_is_ssl']=='0' ? 'NONSSL' : 'SSL')) :
        $page_query_list_sidebox[$rows]['altURL'];
        $page_query_list_sidebox[$rows]['link'] .= ($page_query->fields['page_open_new_window'] == '1' ? '" target="_blank' : '');
        $page_query->MoveNext();
      }

      $title_link = false;

      $var_linksList = $page_query_list_sidebox;

    }

  for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) { 
    echo '<a class="dropdown-item" href="' . $var_linksList[$i]['link'] . '">' . $var_linksList[$i]['name'] . '</a>';
  } // end FOR loop

	echo '</ul>';


?>
        </div>
      </li>  
  <?php } // test for display	  ?>

badarac:

Found another one this morning. I've already opened an issue on github.
More information appears in the hamburger menu even though EZPAGES_STATUS_SIDEBOX is turned off. What I found was the if logic was executed after the beginning of the list item . I moved the check and it now works correctly. The edit is to includes/templates/bootstrap/tpl_offcanvas_menu.php. It also might be helpful to change the title and description for the config value to indicate that it controls the display in the hamburger menu as well.

badarac:

The close of the if, div, and list item also needs to be moved or the formatting of the second and third rows moves outside the container. Here's the correct code:

Thank for pointing this out. I'll try to get to this today so I can push 1.1.2 to zen plugins or 1.1.1 seeing how that upload never got updated in the zen plugins.

Version 1.0.2 is being upload today!

NEW IN THIS UPDATE

• Updated so the Clone a Template plugin can be used.
• Replace page specific jscript_addr_pulldowns.php files with jscript_addr_pulldowns_zca_bootstrap.php to include bootstrap classes.
• Update tpl_checkout_shipping_default.php to address a formatting issue.
• Update "/includes/templates/bootstrap/" tpl_modules_create_account.php, tpl_contact_us_default.php, tpl_modules_address_book_details.php, tpl_modules_checkout_new_address.php, tpl_modules_checkout_new_shipping_address.php, tpl_modules_checkout_new_payment_address.php to address a formatting issue with drop-downs. This update also places the "required indicator" right of the drop-down label.
• Update "/includes/languages/english/bootstrap/" document_general_info.php, document_product_info.php, product_free_shipping_info.php, product_info.php, product_music_info.php to reword "Larger Images" to "Additional Images".
• Update "/includes/templates/bootstrap/modalboxes/" tpl_bootstrap_images.php so the Main Image thumb and Additional Images thumbs are same size.
• Update "includes/templates/bootstrap/common" tpl_offcanvas_menu.php so the more_information drop-down adheres to the EZ-Pages Display Status - Sidebox configuration.

Hope I didn't forget anything :blush:

rbarbour:

Version 1.0.2 is being upload today!

NEW IN THIS UPDATE

• Updated so the Clone a Template plugin can be used.
• Replace page specific jscript_addr_pulldowns.php files with jscript_addr_pulldowns_zca_bootstrap.php to include bootstrap classes.
• Update tpl_checkout_shipping_default.php to address a formatting issue.
• Update "/includes/templates/bootstrap/" tpl_modules_create_account.php, tpl_contact_us_default.php, tpl_modules_address_book_details.php, tpl_modules_checkout_new_address.php, tpl_modules_checkout_new_shipping_address.php, tpl_modules_checkout_new_payment_address.php to address a formatting issue with drop-downs. This update also places the "required indicator" right of the drop-down label.
• Update "/includes/languages/english/bootstrap/" document_general_info.php, document_product_info.php, product_free_shipping_info.php, product_info.php, product_music_info.php to reword "Larger Images" to "Additional Images".
• Update "/includes/templates/bootstrap/modalboxes/" tpl_bootstrap_images.php so the Main Image thumb and Additional Images thumbs are same size.
• Update "includes/templates/bootstrap/common" tpl_offcanvas_menu.php so the more_information drop-down adheres to the EZ-Pages Display Status - Sidebox configuration.

Hope I didn't forget anything :blush:

You da man!!

Two issues opened in github. Other than those two items things look good.

For anyone wondering what the issues are, the fix for the alert on the required pull down fields was incomplete. The second issue was the one I raised earlier for a formatting issue when the tagline is blank. A workaround was provided in the earlier post. https://www.zen-cart.com/showthread.php?223594-ZCA-Bootstrap-Template-%28BETA%29&p=1343893#post1343893