Zoho подписка интеграция с угловой 5 - PullRequest
Новая
       16

Zoho подписка интеграция с угловой 5

0 голосов
/ 11 июня 2019

Как интегрировать код виджета для встраивания из подписок Zoho в угловой код 

 <div id="zf-widget-root-id"></div>
    <script type="text/javascript" src='https://js.zohostatic.com/books/zfwidgets/assets/js/zf-widget.js'></script>
    <script>
    var pricingTableComponentOptions = {
        id: 'zf-widget-root-id',
        product_id: '2-af63b261dc2e0358fdbd15e2c9066cf2b1d696ba014e3b56170c90ed9a54e6ccf0b48bbb8f7f67d2dcd6c241ff4b3036a073444c5559f6aae8f94ecca8061732',
        template: 'elegant_pro',
        most_popular_plan: '',
        is_group_by_frequency: false,
        group_options: [

        ],
        plans: [
          {
      plan_code: 'SILVER_01'
  },
{
      plan_code: 'GOLD_01'
  },
{
      plan_code: 'PLATINUM_01'
  },

        ],
        theme: { color: '#2AC497', theme_color_light: ''},
        button_text: 'Subscribe',
        product_url: 'https://subscriptions.zoho.in',
        price_caption: '',
        language_code: 'en'
    };
    ZFWidget.init('zf-pricing-table', pricingTableComponentOptions);
    </script>

это мой код для вставки виджета из подписок zoho, который имеет 3 плана. Приведенный выше код не работает с Angular 5. Есть ли другой способ, с помощью которого я могу интегрировать подписки Zoho с Angular 5, или я должен внести изменения в приведенный выше код для работы с Angular 5.

1 Ответ

3 голосов
/ 11 июня 2019

Поместить вызов библиотеки в файл index.html. 

 <script type="text/javascript" src='https://js.zohostatic.com/books/zfwidgets/assets/js/zf-widget.js'></script>
    <script>

В html-компоненте, где вы хотите показывать объявление zoho. 

<div id="zf-widget-root-id"></div>

В классе компонента. 

       pricingTableComponentOptions = {
        id: 'zf-widget-root-id',
        product_id: '2-af63b261dc2e0358fdbd15e2c9066cf2b1d696ba014e3b56170c90ed9a54e6ccf0b48bbb8f7f67d2dcd6c241ff4b3036a073444c5559f6aae8f94ecca8061732',
        template: 'elegant_pro',
        most_popular_plan: '',
        is_group_by_frequency: false,
        group_options: [

        ],
        plans: [
          {
      plan_code: 'SILVER_01'
  },
{
      plan_code: 'GOLD_01'
  },
{
      plan_code: 'PLATINUM_01'
  },

        ],
        theme: { color: '#2AC497', theme_color_light: ''},
        button_text: 'Subscribe',
        product_url: 'https://subscriptions.zoho.in',
        price_caption: '',
        language_code: 'en'
    };

    ngAfterViewInit() {
      setTimeout(()=>{
        ZFWidget.init('zf-pricing-table', this.pricingTableComponentOptions);
      }, 6000);

    }

https://stackblitz.com/edit/angular-s89z2d

...