How to load payment_button in javascript dynamically?

How to load payment_button in javascript dynamically?

Apil
Visitor
3 0 0

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

 
 
Replies 4 (4)

kaiyaa
Trailblazer
292 23 28

Hello @Apil 

Can you please explain in details what you exact want

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
Apil
Visitor
3 0 0

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 -%}
    <popout-select class="select-popout">
      <button type="button"
        class="select-popout__toggle"
        aria-expanded="false"
        aria-controls="{{ unique }}-select-quantity"
        aria-labelledby="{{ unique }}-select-quantity-label"
        data-popout-toggle>
        <span data-popout-toggle-text>1</span>
        {%- render 'icon-nav-arrow-down' -%}
      </button>

      <ul id="{{ unique }}-select-quantity" class="select-popout__list" data-popout-list data-scroll-lock-scrollable>
        {%- for idx in (1..10) -%}
          <li class="select-popout__item{% if forloop.index == 1 %} is-active{% endif %}">
            <a class="select-popout__option" href="#" {% if forloop.index == 1 %}aria-current="true"{% endif %} data-value="{{ forloop.index }}" data-popout-option>
              <span>
                {{ forloop.index }} {% if forloop.last %}+{% endif %}
              </span>
            </a>
          </li>
        {%- endfor -%}
      </ul>

      <quantity-counter class="quantity-selector">
        <label for="product-quantity-buttons-{{ unique }}" class="label-hidden">{{ 'products.product.quantity' | t }}</label>

        <button
          class="quantity__minus"
          type="button"
          name="decrease"
          title="{{ 'cart.general.decrease_quantity_label' | t }} - {{ product.title | strip_html }}">
          {%- render 'icon-minus' -%}
        </button>

        <input
          id="product-quantity-buttons-{{ unique }}"
          class="quantity__input"
          type="number"
          name="quantity"
          value="1"
          min="1"
          aria-label="quantity"
          autocomplete="off"
          title="{{ 'cart.general.quantity_field_label' | t }} - {{ product.title | strip_html }}"
          pattern="[0-9]*"
          data-popout-input>

        <button
          class="quantity__plus"
          type="button"
          name="increase"
          title="{{ 'cart.general.increase_quantity_label' | t }} - {{ product.title | strip_html }}">
          {%- render 'icon-plus' -%}
        </button>
      </quantity-counter>
    </popout-select>
  {%- else -%}
    <input type="hidden" name="quantity" value="1">
  {%- endif -%}
{%- endcapture -%}

<div class="product__block product__block--buttons block-padding"
  {{ block_style }}
  {{ block.shopify_attributes }}
>
  <product-form>
    {%- form 'product', product, id: product_form_id, class: 'product-form', data-product-form: '' -%}
      {%- if gift_card_recipient_feature_active -%}
        {%- render 'gift-card-recipient-form', product: product, form: form -%}
      {%- endif -%}

      <div class="product__submit{% if buybutton_setting %} product__submit--spb{% endif %}"
        {% if animation_name %}
          data-animation="{{ animation_name }}"
          data-animation-duration="{{ animation_duration }}"
          data-animation-delay="{{ animation_delay }}"
        {% endif %}>
        <div class="product__form__errors" data-cart-errors-container></div>

        <div class="product__submit__buttons{% if buybutton_setting and show_quantity == false %} product__submit__buttons--inline{% endif %}">
          <div class="product__submit__item{% if show_quantity %} product__submit__item--inline{% endif %}">
            {{ quantity_selector }}

            <button
              type="submit"
              name="add"
              id="AddToCart--{{ section.id }}"
              class="btn btn--primary {{ btn_atc_class }}"
              data-add-to-cart
              {% unless current_variant.available %}disabled="disabled"{% endunless %}>
              <span class="btn__text" data-add-to-cart-text>{{ button_text }}</span>
              <span class="btn__added">&nbsp;</span>

              <span class="btn__loader">
                <svg height="18" width="18" class=" svg-loader">
                  <circle r="7" cx="9" cy="9" />
                  <circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
                </svg>
              </span>
            </button>

            {%- if show_newsletter -%}
              {%- assign newsletter_text = 'general.newsletter_form.newsletter_product_availability' | t -%}
              {%- assign button_text = 'products.product.sold_out' | t | append: ' - ' | append: newsletter_text -%}

              <product-modal class="product-soldout-notification">
                <button type="button" class="btn btn--primary {{ btn_atc_class }}" data-popup-open>
                  <span class="btn__text">{{ button_text }}</span>
                </button>

                <dialog class="product-modal" aria-hidden="true" inert data-scroll-lock-required>
                  <form method="dialog">
                    <button class="visually-hidden no-js" aria-label="{{ 'general.accessibility.close' | t }}"></button>
                  </form>

                  <div class="drawer__inner product-modal__notification">
                    <div class="product-modal__content small" data-scroll-lock-scrollable>
                      <button type="button" class="product-modal__close" data-popup-close autofocus aria-label="{{ 'general.accessibility.close' | t }}">
                        {%- render 'icon-cancel' -%}
                      </button>

                      {%- render 'notification-form' product_title: product.title, current_variant: current_variant -%}
                    </div>
                  </div>
                </dialog>
              </product-modal>
            {%- endif -%}
          </div>
          {%- if buybutton_setting -%}
            <div class="product__submit__item">
              {{ form | payment_button }}
            </div>
          {%- endif -%}
        </div>
      </div>
    {%- endform -%}
  </product-form>
</div>

#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?

 

 

 

 

 

Apil
Visitor
3 0 0

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

kaiyaa
Trailblazer
292 23 28

@Apil you want to show paypal button on the place of buy now??

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me