renderProductInfo() not working for specific section of product page

Technical Q&A
1

Hi there,

I have this section on my product page where I’ve added some custom liquid to the Appstle Subscription app in order to show price per drink:

  {% if section.settings.show_per_price %}
  #appstle_subscription_widget0 .appstle_one_time_text:after {
    content: " - {{ product.selected_or_first_available_variant.price | divided_by: section.settings.total_drinks | money_without_trailing_zeros | replace: '<span class=money>', '' | replace: '</span>', '' }} / drink";
    padding-left: 2px;
    font-size: 16px;
  }
  #appstle_subscription_widget0 .appstle_subscribe_save_text:after {
    content: " - {{ product.selected_or_first_available_variant.price | times: 0.9 | divided_by: section.settings.total_drinks | money_without_trailing_zeros | replace: '<span class=money>', '' | replace: '</span>', '' }} / drink";
    padding-left: 2px;
    font-size: 16px;
  }
  {% endif %}

VasKB_0-1696441653276.png
VasKB_0-1696441653276.png1420×1044 52.4 KB

My issue is that when I change the variant, it only updates the price per drink if I refresh the page. I want it to update without needing to refresh.

I found the code in global.js that does this for the other sections - essentially it checks when the variant changes, and runs this code:

  onVariantChange() {
    this.updateOptions();
    this.updateMasterId();
    this.toggleAddButton(true, '', false);
    this.updatePickupAvailability();
    this.removeErrorMessage();
    this.updateVariantStatuses();

    if (!this.currentVariant) {
      this.toggleAddButton(true, '', true);
      this.setUnavailable();
    } else {
      this.updateMedia();
      this.updateURL();
      this.updateVariantInput();
      this.renderProductInfo();
      this.updateShareUrl();
    }
  }

I think the relevant snippet for me is renderProductInfo() as I’m pretty sure the issue is that the section isn’t ‘refreshing’ so I’ve added the following under there which I found in another thread, but for some reason it’s not working!

    const destinationMYpart = document.getElementById(`appstle_subscription_widget0-${this.dataset.section}`);
    const sourceMYpart = html.getElementById(`appstle_subscription_widget0-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
                
    if (sourceMYpart && destinationMYpart) destinationMYpart.innerHTML = sourceMYpart.innerHTML;

My page in question is here: https://wattwaterdrink.com/products/starter-set in case you need to see the selectors (but I’m not working on a live version when figuring this out).

Really hope someone can help me with this, I feel like I’m close but not quite there yet and I’m not technical enough to figure it out alone.

Thank you!