How to load payment_button in javascript dynamically?

Technical Q&A
1

I am implementing to load 2nd product in 1st product page and updating with 2nd product information.

I updated other sections with 2nd product information but can’t see paypal button.
I saw this code.

<div class="product__submit__item">
{{ form | payment_button }}
</div>

How to resolve it? I want to handle it in this javascript code.

Please help me.

fetch(`/products/${productHandle}`)
.then((response) => response.text())
.then((responseText) => {
});

Apil_0-1719826469206.png
Apil_0-1719826469206.png575×110 4.04 KB

2

Hello @kaiyaa

I will share the code here.

product.liquid

{%- render 'product-buttons' product: product, current_variant: current_variant, unique: unique, block: block, block_style: block_style, product_form_id: product_form_id, preorder: preorder -%}

#product-buttons.liquid

{%- liquid
  assign buybutton_setting = false
  assign gift_card_recipient_feature_active = false
  assign show_quantity = show_quantity | default: block.settings.show_quantity | default: false
  assign is_quickview = quickview | default: false
  assign show_newsletter = settings.show_newsletter

  if quickview
    assign show_newsletter = false
  endif

  assign button_text = 'products.product.add_to_cart' | t
  if preorder
    assign button_text =  'products.product.pre_order' | t
  endif

  unless current_variant.available
    assign button_text =  'products.product.sold_out' | t
  endunless

  if block.settings.show_gift_card_recipient and product.gift_card? and is_quickview != true
    assign gift_card_recipient_feature_active = true
  endif

  if block.settings.show_payment_button and gift_card_recipient_feature_active == false and settings.enable_accept_terms == false
    assign buybutton_setting = true
  endif

  comment
    Override buy button setting if there are selling plan groups
  endcomment
  if product.selling_plan_groups.size > 0
    assign buybutton_setting = false
  endif

  assign btn_atc_class = 'btn--solid'
  if buybutton_setting
    assign btn_atc_class = 'btn--outline'
  endif
-%}

{%- capture quantity_selector -%}
  {%- if show_quantity -%}
    
  {%- else -%}
    
  {%- endif -%}
{%- endcapture -%}

#custom.js

(function() {

  function attachToggleEventListeners() {
    const toggleButtons = document.querySelectorAll('.toggle-button');
    toggleButtons.forEach((element) => {
      element.addEventListener('click', (event) => {
        const productURL = element.getAttribute('data-href');
        const productHandle = element.getAttribute('data-product-handle');
        const productId = element.getAttribute('data-product-id');

        fetch(`/products/${productHandle}`)
          .then((response) => response.text())
          .then((responseText) => {
            const html = new DOMParser().parseFromString(responseText, 'text/html');
            
            const mainElement = document.querySelector('#MainContent');
            const updatedMainElement = html.querySelector('#MainContent');
            mainElement.innerHTML = updatedMainElement.innerHTML;
      
            attachToggleEventListeners();          
          });
      });
    });
  }

  attachToggleEventListeners();
})();

There are Add To Cart and Buy with Paypal button in product detail page.

When toggle button, I want to display the information of other product. I already implemented it in custom.js.

But when toggle button in product detail page, I can’t see Buy with Paypal button in updated product page.

How to resolve this issue?

3

@kaiyaa
I want to add the code in custom.js to display Buy with Paypal button. Thanks