ZCA Bootstrap 4 Template [Support Thread]

[mcqueeneycoins]

Looking for advice on how to combine the shipping modules display on the Checkout Shipping page into one "card". Using bootstrap template, 1.5.8, USPS shipping plugin. Basically, I have flat-rate shipping enabled but all of these orders are shipped via USPS anyways (first class package). I have USPS enabled to give customers option to upgrade to Priority at the calculated rate. I would like the "flat rate" option to appear as a radio option under the USPS card header rather than have a flat rate box and a USPS box. Suggestions? TIA!

[lat9]

Looking for advice on how to combine the shipping modules display on the Checkout Shipping page into one "card". Using bootstrap template, 1.5.8, USPS shipping plugin. Basically, I have flat-rate shipping enabled but all of these orders are shipped via USPS anyways (first class package). I have USPS enabled to give customers option to upgrade to Priority at the calculated rate. I would like the "flat rate" option to appear as a radio option under the USPS card header rather than have a flat rate box and a USPS box. Suggestions? TIA!

That formatting is provided by includes/templates/bootstrap/templates/tpl_checkout_shipping_default.php (or your template clone's version).

[mcqueeneycoins]

That formatting is provided by includes/templates/bootstrap/templates/tpl_checkout_shipping_default.php (or your template clone's version).

Thanks--I understand that and found the code creating the cards; however, I'm failing to see how I can make the shipping options combine into one. It looks like it is calling each shipping module (Flat Rate and USPS in my example) separately. I'm not savvy enough to figure out how to break it up. In the responsive classic template I would just modify the code within the <fieldset> tags, but this is entirely different. I'm still learning bootstrap so hoping you can point me in the right direction? What part of this should I be changing to combine both modules into one display card?

<!--bof shipping method option card-->
                <div class="card mb-3">
                    <div class="card-header">
                        <?php echo $quotes[$i]['module']; ?>&nbsp;
<?php
                if (!empty($quotes[$i]['icon'])) {
                    echo $quotes[$i]['icon'];
                }
?>
                    </div>
                    <div class="card-body p-3">
<?php
                if (isset($quotes[$i]['error'])) {
?>
                        <div><?php echo $quotes[$i]['error']; ?></div>
<?php
                } else {
                    for ($j = 0, $n2 = count($quotes[$i]['methods']); $j < $n2; $j++) {
// set the radio button to be checked if it is the method chosen
                        $checked = false;
                        if (isset($_SESSION['shipping']) && isset($_SESSION['shipping']['id'])) {
                            $checked = ($quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id'] == $_SESSION['shipping']['id']);
                        }

                        if ($n > 1 || $n2 > 1) {
?>
                        <div class="float-right"><?php echo $currencies->format(zen_add_tax($quotes[$i]['methods'][$j]['cost'], (isset($quotes[$i]['tax']) ? $quotes[$i]['tax'] : 0))); ?></div>
<?php
                        } else {
?>
                        <div class="float-right"><?php echo $currencies->format(zen_add_tax($quotes[$i]['methods'][$j]['cost'], $quotes[$i]['tax'])) . zen_draw_hidden_field('shipping', $quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id']); ?></div>
<?php
                        }
?>
                        <div class="custom-control custom-radio custom-control-inline">
                            <?php echo zen_draw_radio_field('shipping', $quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id'], $checked, 'id="ship-'.$quotes[$i]['id'] . '-' . str_replace(' ', '-', $quotes[$i]['methods'][$j]['id']) .'"'); ?>

                            <label for="ship-<?php echo $quotes[$i]['id'] . '-' . str_replace(' ', '-', $quotes[$i]['methods'][$j]['id']); ?>" class="custom-control-label checkboxLabel"><?php echo $quotes[$i]['methods'][$j]['title']; ?></label>
                        </div>
                        <div class="p-1"></div>
<?php
                        $radio_buttons++;
                    }
                }
?>
                    </div>
                </div>
<?php
            }
        }
    }
?>
            </div>
        </div>

Screenshot of what I'm talking about attached. THanks!shippingmethod.pdf

[lat9]

You'll need to 'bump up' an if-clause to re-parse the quotes, capturing the "Flat" value for later use when inserting that quote into the USPS card. The $i loop-level is on a per-shipping-module basis and the $j loop gathers the method(s) provided by the current shipping module.

<?php
    } else {
        $radio_buttons = 0;
        for ($i = 0, $n = count($quotes); $i < $n; $i++) {
      // bof: field set
// allows FedEx to work comment comment out Standard and Uncomment FedEx
//      if (!empty($quotes[$i]['id']) || !empty($quotes[$i]['module'])) { // FedEx
            if (!empty($quotes[$i]['module'])) { // Standard
?>
<!--bof shipping method option card-->
                <div class="card mb-3">
                    <div class="card-header">
                        <?php echo $quotes[$i]['module']; ?>&nbsp;
<?php
                if (!empty($quotes[$i]['icon'])) {
                    echo $quotes[$i]['icon'];
                }
?>
                    </div>
                    <div class="card-body p-3">
<?php
                if (isset($quotes[$i]['error'])) {
?>
                        <div><?php echo $quotes[$i]['error']; ?></div>
<?php
                } else {
                    for ($j = 0, $n2 = count($quotes[$i]['methods']); $j < $n2; $j++) {
// set the radio button to be checked if it is the method chosen
                        $checked = false;
                        if (isset($_SESSION['shipping']) && isset($_SESSION['shipping']['id'])) {
                            $checked = ($quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id'] == $_SESSION['shipping']['id']);
                        }

                        if ($n > 1 || $n2 > 1) {
?>

[mcqueeneycoins]

You'll need to 'bump up' an if-clause to re-parse the quotes, capturing the "Flat" value for later use when inserting that quote into the USPS card. The $i loop-level is on a per-shipping-module basis and the $j loop gathers the method(s) provided by the current shipping module.

Forgive me, but I'm completely out of my element on this one. I can work with basic html and css, and am slowly getting the hang of bootstrap, but adding if/then statements to php files starts getting over my head. I completely understand what you're saying needs to be done, I'm just lost as to how to execute. I've looked at the modules and classes files trying to get a better understanding of the $xxxx commands, but still confused as to specifically take the flat shipping modules quote value, "store it" and then output it. Even if you could give me a sample of what it might look like so I can use trial and error that would help.

If it really is too complicated I will just have to learn to live with it, but since I only ship USPS would prefer for all shipping options to display in one card so as to not confuse the customer.

[mcqueeneycoins]

Forgive me, but I'm completely out of my element on this one. I can work with basic html and css, and am slowly getting the hang of bootstrap, but adding if/then statements to php files starts getting over my head. I completely understand what you're saying needs to be done, I'm just lost as to how to execute. I've looked at the modules and classes files trying to get a better understanding of the $xxxx commands, but still confused as to specifically take the flat shipping modules quote value, "store it" and then output it. Even if you could give me a sample of what it might look like so I can use trial and error that would help.

If it really is too complicated I will just have to learn to live with it, but since I only ship USPS would prefer for all shipping options to display in one card so as to not confuse the customer.

I think I found a useable workaround--I moved the <div class="card-header"> and it displays all shipping options together with a less than perfect heading. This should work I would think, but any tips on how to make the heading and card body a little cleaner? It looks like it's inheriting the border-radius from the card class--the rounded-bottom, etc. doesn't seem to change anything. I tried messing with the mb, p, etc. as well but not having much luck.

<div class="card card-header mb-0 rounded-top">USPS</div>
<div class="card p-3 border-top-0 rounded-bottom">
				
<?php
    if ($free_shipping === true) {
?>
                <div id="shippingMethod-content-two" class="content"><?php echo FREE_SHIPPING_TITLE . (isset($quotes[$i]['icon']) ? '&nbsp;' . $quotes[$i]['icon'] : ''); ?></div>

                <div id="shippingMethod-selected" class="selected"><?php echo sprintf(FREE_SHIPPING_DESCRIPTION, $currencies->format(MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER)) . zen_draw_hidden_field('shipping', 'free_free'); ?></div>
<?php
    } else {
        $radio_buttons = 0;
        for ($i = 0, $n = count($quotes); $i < $n; $i++) {
      // bof: field set
// allows FedEx to work comment comment out Standard and Uncomment FedEx
//      if (!empty($quotes[$i]['id']) || !empty($quotes[$i]['module'])) { // FedEx
            if (!empty($quotes[$i]['module'])) { // Standard
?>
<!--bof shipping method option card-->
                <div class="card mb-3">
                   
                    <div class="card-body p-3">
<?php
                if (isset($quotes[$i]['error'])) {
?>
                        <div><?php echo $quotes[$i]['error']; ?></div>
<?php
                } else {
                    for ($j = 0, $n2 = count($quotes[$i]['methods']); $j < $n2; $j++) {
// set the radio button to be checked if it is the method chosen

[lat9]

I've just released v3.6.0 of the ZCA Bootstrap Template to the Zen Cart plugins: https://www.zen-cart.com/downloads.php?do=file&id=2191

This release contains changes associated with the following GitHub issues:

#236: Restructuring and notifications added for AJAX search.
#237: Add missing language constant for AJAX search.
#238: Add a 'soft' configuration setting to disable the 'back-to-top' icon.
#240: Simplify and reduce processing for SNAF pages.
#241: Price-related observer updated to honor a previous observer's changes.
#244: Add a 'soft' configuration setting to control whether zca_js_zone_list returns zone_id or zone_name values.
#245: Correct name of "Add Address" button on the address_book page, was displaying as "Back".
#246: Add role="button" to AJAX search header link to improve SEO rating.
#247: New colors defined for upper NavBar buttons (other than the AJAX header search icon).
#252: "Images" column for table-based product listings updates for screen-readers.
#253: Colors added for "Advanced Accessibility Standards". See this (https://github.com/lat9/ZCA-Bootstra...s#v360-updates) link for details.
#254: Correct styling for "Buy Now" buttons, 'more info ...' link and min/max/unit display on table-based listings.
#258: ask_a_question and account_history_info page/template updates based on recent zc158 base changes.
#259: Correct HTML validation issues on additional-images' modal display.
#261: "Sold Out" button, add coloring and remove hover-pointer since the button's not clickable.
#266: "Float" the 'Add Selected to Cart' button on product listing pages, to keep the button visible in the customer's viewport.