How to exclude views fields from display when a node is flagged

Question

We use the flag module to mark items that will have delays in shipping so that the customer knows that those items will be delayed before adding them to cart. In drupal 7, we excluded our "add to cart" button and "more info" button from display and used a global custom text to rewrite them with the following text displaying them inside a btn-bar div class.

<div class="btn-bar [flagged_1]">[flagged]<span class="atc">[add_to_cart_form]</span> <span class="moreinfo"><a href="[path]">More info</a></span></div>

We then use the following css to hide the add to cart, and more info elements when the flag is present in the button bar.

.btn-bar.pre-order .atc,
.btn-bar.pre-order .moreinfo{ 
  display: none;
}

In Drupal 8, the functionality of this still works correctly (updating the replacement patterns of course), but there is apparently a security issue with rewriting forms, so the add to cart button won't render properly when being rewritten in a global custom text.

So my question is what is the "simplest" way to hide those 2 fields when that particular node is flagged? Can this be accomplished by adding some code to my custom theme for the view in question?

Answer 1

General approach:

Use the Rules module (which does not yet have a stable release for Drupal 8, but does have the capability in its current state to implement the recipe below) to detect the content is flagged, then do a Rules action which will result in those fields being hidden.

Here is one specific example, but there are many ways, and likely simpler ways to do it than my recipe. I wanted to give you an example that doesn't require coding or extra modules besides the Rules module:

Drupal automatically includes a body class with the content type of the node. So make a rule that will evaluate that a node has been flagged, and if it is, change that node's content-type via the action "Data => set a data value." Now you can easily create the css to hide the fields that you want hidden by using the body class for the content type assigned flagged nodes.

Make sure the two content types use the same fields and have all the same settings for those fields.

Also make sure to set up a second rule which does the opposite so that the content type is returned to the original when the flag is removed.