shopping cart, update quantity: font awesome icon not used if IMAGE_USE_CSS_BUTTONS= yes

[torvista]

Putting this here for documentation/thought.

So I have IMAGE_USE_CSS_BUTTONS=yes, using text in most places.

However the update column on the shopping cart is one place where an icon is preferable/space is limited.

This file includes\modules\pages\shopping_cart\header_php_shopping_cart_zca_bootstrap.php

looks for the Update icon as an image and swaps it for a button with a FA icon. If the Update is text, it ignores it.

To get it to swap out css text as well, I needed to add/modify the preg_replace regex to
'/(<input.*type="submit".*?\/?>)(.*)/'

in a clause based on IMAGE_USE_CSS_BUTTONS, although some other test for the use of font awesome may be preferable.

[lat9]

What version of Zen Cart? I'm unable to reproduce this issue on either zc158 or zc200.

[dennisns7d]

My observations using zc1.5.8a with a Bootstrap clone:

• When IMAGE_USE_CSSBUTTONS=='no', the includes\modules\pages\shopping cart\header_php_shopping_cart_zca_bootstrap.php file replaces the image with the button with FA icon.

• When IMAGE_USE_CSS_BUTTONS=='yes', the observer in includes/classes/observers/ZcaBootstrapObserver.php for the NOTIFY_ZEN_CSS_BUTTON_SUBMIT notifier produces much the same button with FA icon.

In either case, I see no issues other than maybe considering adding btn-sm and fa-sm to the observer code.

[torvista]

Re-reading this, I couldn’t make head nor tail of this either, it took me a while to figure it out again. I think it is best understood with the responsive_classic

If you are using IMAGE_USE_CSS_BUTTONS=no buttons are images

If you are using IMAGE_USE_CSS_BUTTONS=yes buttons are css text but not the update icon....because when the alt text >30, the button->css-text substitution is not carried out, and this has by default 'ICON_UPDATE_ALT' => 'Change your quantity by highlighting the number in the box, correcting the quantity and clicking this button.',

So if this text is reduced 'ICON_UPDATE_ALT' => 'Update', the text is used

and takes up too much space...is better as an image!

Meanwhile in BS-land no substitution of the text for the fa icon as per my initial post.

Of course restoring the >30 character alt-text now retains the image which gets the fa icon substitution

So, my initial post was about the zc header needing to deal with whatever arrives, image/text to be able do the fa icon substitution.

This illustrates the need to always replicate things in a vanilla install, tedious as it is. Apologies for not providing a better explanation.

[torvista]

and this is what I ended up with:

    $productArray[$i]['buttonUpdate'] = preg_replace(
        ['/(<input type="image".*?\/?>)(.*)/','/(<input.*type="submit".*?\/?>)(.*)/'],
        '<button type="submit" class="btn btn-sm" aria-label="' . ICON_UPDATE_ALT . '" title="' . ICON_UPDATE_ALT . '"><i aria-hidden="true" class="fas fa-sm fa-sync-alt"></i></button>$2',
        $productArray[$i]['buttonUpdate']
    );

[dennisns7d]

Thank you @torvista for the expanded description. FWIW, my BS close uses a shortened ICON_UPDATE_ALT and I modified includes/classes/observers/ZcaBootstrapObserver.php to do the button substitution with the FA icon for the NOTIFY_ZEN_CSS_BUTTON_SUBMIT notifier. The observer is not invoked with the vanilla ICON_UPDATE_ALT but is with the shortened version. Noting that the vanilla observer will produce <button type="submit" class="btn ... (with no FA icon).

A related question: does the translation to button work for a disabled button (when includes/modules/pages/shopping_cart/header_php.php adds style="opacity: 0.25" disabled="disabled" to the call to zen_image_submit)?

[lat9]

FWIW, here's the starting HTML for each of the 'flavors' of button that are created on zc158:

<button type="submit" class="btn button_update_cart" style="opacity: 0.25" disabled="disabled">Update</button><input type="hidden" name="products_id[]" value="12">

<input type="image" src="includes/templates/template_default/buttons/english/button_update_cart.png" alt="Change your quantity by highlighting the number in the box, correcting the quantity and clicking this button." title="Change your quantity by highlighting the number in the box, correcting the quantity and clicking this button." style="opacity: 0.25" disabled="disabled"><input type="hidden" name="products_id[]" value="12">

When that ICON_UPDATE_ALT language constant is shrunk, the base is creating a <button type="submit", not an <input type="submit" tag.

Here's what works for me:

    $productArray[$i]['buttonUpdate'] = preg_replace(
        [
            '/<input.*type="image".*?\/?>/',
            '/<button.*type="submit".*?>.*button>/'
        ],
        '<button type="submit" class="btn btn-sm" aria-label="' . ICON_UPDATE_ALT . '" title="' . ICON_UPDATE_ALT . '"><i aria-hidden="true" class="fas fa-sm fa-sync-alt"></i></button>',
        $productArray[$i]['buttonUpdate']
    );

Note, updated the button-finding regex, removing the possibly trailing slash

[dennisns7d]

I haven't tried a test case, but a disabled attribute (if set in includes/modules/pages/shopping_cart/header_php.php) is not propagated to the final button code.

[lat9]

Under what condition(s) is a button displayed but disabled?

[dennisns7d]

includes/modules/pages/shopping_cart/header_php.php Lines 110,111: $show_products_quantity_max = zen_get_products_quantity_order_max($products[$i]['id']); $showFixedQuantity = (($show_products_quantity_max == 1 or zen_get_products_qty_box_status($products[$i]['id']) == 0) ? true : false); Used in lines 133-140: $buttonUpdate = ''; if (SHOW_SHOPPING_CART_UPDATE == 1 or SHOW_SHOPPING_CART_UPDATE == 3) { if (!$showFixedQuantity) { $buttonUpdate = zen_image_submit(ICON_IMAGE_UPDATE, ICON_UPDATE_ALT); } else { $buttonUpdate = zen_image_submit(ICON_IMAGE_UPDATE, ICON_UPDATE_ALT, 'style="opacity: 0.25" disabled="disabled"'); } } $buttonUpdate .= zen_draw_hidden_field('products_id[]', $products[$i]['id']);

If I'm reading the code correctly, one should be able to produce a disabled button for a product when either:

• Products Quantity Box Shows is set to 'No. Do not show Quantity Box'
• Product Qty Maximum is set to 1

Basically, disable a product's quantity box by either method.

[dennisns7d]

The following products in the sample products have their quantity boxes disabled and should have the disabled attribute on the update button:

• Test Examples :: Hide Quantity Box
• Test Examples :: Hide Quantity Box Methods

[lat9]

OK, for those cases the 'Update' icon will simply be rendered as  .

[dennisns7d]

For the disabled button cases, the hidden <input for products_id[] contained in $productArray[$i]['buttonUpdate'] is discarded. This disables the use of the checkbox below the delete icons.

[dennisns7d]

Note that the hidden <input for products_id[] is ALWAYS included in $productArray[$i]['buttonUpdate'], even when no button is to be displayed (no <input or <button included). It should NOT be stripped when replacing the button with  . Otherwise the capability to check the checkbox under the delete icon will have NO effect for fixed-quantity products when the update button below all products is clicked.

[lat9]

Dang it, I had updated that regex to gather the hidden field so it can be appended. Let me see what the heck I did with that.

[lat9]

Right, and I pushed it against #286 (not including this issue).

[dennisns7d]

A possible solution would be to use preg_replace code similar to that used below for normal quantities using   for the replacement argument. IMO extracting the hidden <input isn't necessary; just replace the <input or <button, if present, which the preg_replace do nicely, leaving the hidden <input in place.

[lat9]

Please refer to the update I made for #286. That extracts the fixed-quantity amount while retaining the hidden input (and any future additions) associated with that fixed-quantity.

[dennisns7d]

The hidden <input for products_id[] is contained in $productArray[$i]['buttonUpdate'] and is discarded in the $productArray[$i]['buttonUpdate'] = ' '; statement.

[dennisns7d]

There are two main hidden <input in play here (plus some for product attributes).

• cart_quantity[] contained in $productArray[$i]['showFixedQuantityAmount'] - handled properly by #286
• products_id[] contained in $productArray[$i]['buttonUpdate'] - currently discarded when update button is replaced by  . This is the hidden <input I'm referring to. It shouldn't be discarded.

[lat9]

OK, finally "got it". Using the "Hide Quantity Box" product, it can be removed from the cart via the delete-icon, but checking the 'delete checkbox' and the overall update-icon doesn't remove the product from the cart.