Showing Product Option Blocks Based on Customer Tags with the Hidden Input Block

In this tutorial, we will demonstrate how to conditionally show/hide an upsell block based on a customer’s tag using the Hidden Input Block. This method works for both Giftship’s product options, cart options, and drawer cart.

Step 1: Duplicate Your Live Theme

It is good practice to work on a development theme.

Step 2: Upload Snippet

Create a Liquid file named “giftship-customer-tags” in the “snippets” folder and copy and paste the following code:

{% if customer %}

  <script>

    (() => {

        var MODULE = {

            customerTags: [], // Placeholder for customer tags
            initialized: false, // Flag to track initialization

            init: function () {
                this.registerEventHandlers();
                this.registerCustomerTags();
            },

            registerEventHandlers: function () {
                document.addEventListener('giftship.loaded', this.onGiftshipLoaded.bind(this));
                document.addEventListener('giftship.drawer-cart.opened', this.onDrawerOpened.bind(this));
            },

            registerCustomerTags: function () {

                this.customerTags = {{ customer.tags | json }};

                //console.log('Customer tags registered:', this.customerTags); // Log customer tags for testing

                // Check if initialization conditions are met
                if (!this.initialized) {
                    this.initialized = true;
                    this.registerElements();
                }
            },

            registerElements: function () {
                this.hiddenInputProduct = document.querySelector('#gsAppContainer input[name="properties[_customer_tags]"]');
                this.hiddenInputDrawer = document.querySelector('#gsDrawer input[name="attributes[_customer_tags]"]');
            },

            populateHiddenInput: function (hiddenInput, tags) {
                if (hiddenInput) {
                    // Convert customerTags to a comma-separated string (if it's an array)
                    var tagsString = Array.isArray(tags) ? tags.join(', ') : tags;
                    hiddenInput.value = tagsString; // Set the value of the hidden input field

                    // Trigger change event on the hidden input
                    var event = new Event('change');
                    hiddenInput.dispatchEvent(event);

                    // Log the value of the hidden input field after it's populated
                    //console.log('Hidden input value:', hiddenInput.value);
                } else {
                    console.warn('Hidden input not found.');
                }
            },

            onGiftshipLoaded: function () {
                //console.log('giftship.loaded triggered');
                if (this.initialized) {
                    this.registerElements();
                    this.populateHiddenInput(this.hiddenInputProduct, this.customerTags);
                }
            },

            onDrawerOpened: function () {
                //console.log('giftship.drawer-cart.opened triggered');
                if (this.initialized) {
                    this.registerElements();
                    this.populateHiddenInput(this.hiddenInputDrawer, this.customerTags);
                }
            }
        };

        // Initialize the MODULE

        MODULE.init();

    })();

  </script>

{% endif %}

Step 3: Edit theme.liquid and Include Snippet

At the bottom of this document, directly above the closing </body> tag, paste the following code:

{% include 'giftship-customer-tags' %}

Step 4: Set Up Product Option Set

Create a product option set and navigate to Display Settings. Make sure the product set is set for display.

Step 5: Add a Hidden Input Block

Create a hidden input block. You can name the input anything, but for this tutorial, use “_customer_tags” and remember to uncheck “Ignore value.”

Step 6: Set Up the Upsell Block

Create an upsell block and move to the display rules tab.

• Display Option: Select “When all conditions are met.”
  
• Block Conditions: Label it “_customer_tags” or the name you used for the hidden input + coded in the liquid file.
  
• Comparison: Set it to “contains” + Customer’s Tag or “does not contain” + Customer’s Tag.
  Important: do not use equal to, because if a customer has more then one tag, the rule will not fire3

Step 7: Test, Test and Test!

Preview the development theme, log in as a customer, and add/remove customer tags to trigger Giftship’s display rules.