Help with Cart Popup Showing Incorrect Item Details When Bundling Monogram Fee

[mwade9]

Hello Shopify community,

I am working on a feature for my store using jQuery, where I bundle “Monogram Fee” with a main product. The problem I am running into is that when I add the product to the cart, the cart popup displays the Monogram Fee details instead of the main product details.

Here is a summary on how the functionality works:

1. The user selects a customization option (e.g., a monogram) for the main product.

2. If the selected customization requires a fee, I append the Monogram Fee as a separate item to the form data before submitting it to the cart.

3. The fee item is added as a hidden input with specific properties and identifiers.

However, instead of showing the main product details in the cart popup, the details of the Monogram Fee are displayed.

Here is the relevant code snippet I am using:

_initAddToCart: function() {
  $(this.selectors.productForm, this.$container).on(
    'submit',
    function(evt) {
      if (this.$addToCart.is('[aria-disabled]')) {
        evt.preventDefault();
        return;
      }

      if (!this.ajaxEnabled) return;

      evt.preventDefault();

      this.$previouslyFocusedElement = $(':focus');

      var isInvalidQuantity = this.$quantityInput.val() <= 0;

      if (isInvalidQuantity) {
        this._showErrorMessage(theme.strings.quantityMinimumMessage);
        return;
      }

      var selectedSymbol = $('[id^=properties-customization_type]:checked').val();
      var isJHSymbol = $('#properties-symbol-jh-symbol').is(':checked');
      var isJHLogo = $('#properties-symbol-jh-logo').is(':checked');

      $('.patch-customization').remove();

      var randomNumber = Math.floor(Math.random() * 899999 + 100000);
      var handle = window.location.href.split('/products/')[1].split('?')[0];
      var mpID = handle + "-" + randomNumber.toString();
      var mpName = handle;

      if (!isJHSymbol && !isJHLogo && selectedSymbol != null) {
        $( "div#pricingProperties" ).after(`
          <div class="patch-customization">
            <input type="hidden" name="items[0][properties[_multiproduct_id]" value=` + mpID + ` />
            <input type="hidden" name="items[0][properties][_multiproduct_name]" value=` + mpName +  ` />
          </div>          
        `);
        $( "div.product-customizer" ).append(`
          <div class="patch-customization">
            <input type="hidden" name="items[1][id]" value="51631715615092" />
            <input type="hidden" name="items[1][properties][_retail]" value="1000" />
            <input type="hidden" name="items[1][properties][_multiproduct_id]" value=` + mpID + ` />
            <input type="hidden" name="items[1][properties][_multiproduct_name]" value=` + mpName + ` />
          </div>          
        `);
      }

      if (!isInvalidQuantity && this.ajaxEnabled) {
        this._handleButtonLoadingState(true);
        var $data = $(this.selectors.productForm, this.$container);
        this._addItemToCart($data);
        return;
      }
    }.bind(this)
  );
},

I suspect the issue might be due to how I am appending the Monogram Fee properties to the form data, but I am not sure how to structure it so that the main product remains the focus in the cart popup while still including the Monogram Fee as an additional item. I am bundling these products as one line item in the cart.

Has anyone else encountered this issue, or does anyone have advice on how to ensure the cart popup displays the main product details correctly?

Thanks in advance for your help!