リクエストフォームに基づいて新しいリクエストテンプレートのバナーを変更する

前提条件： JavaScript、 CSS、

読む時間：5分、

埋め込む時間：5分

 

 

こんにちは、みんな、 ここでは、新しいリクエストページでヒーローエリアの背景画像を変更するためのヒントを皆さんと共有します。これは、表示されているチケットフォームによって異なります。 例：新しいリクエストのドロップダウンページに2つのフォームがあります

両方のヒーローバナー画像を変更する場合は、デフォルトのチケットフォームに別のバナーを含め、フォーム1に別のバナーを含める必要があります。 私たちのテーマに埋め込みに行きましょう：D。

 

I.ヘルプセンターでscript.jsファイルをナビゲートします。

 

 

II。以下のJSコードをコピーして、DOM関数の下のscript.JSファイルに貼り付けます。 ここで、00000、111111はリクエストフォームIDであり、フォームIDに置き換える必要があります。

function checkTicketId(){
    var mainHeroDiv = document.querySelector('#main-content');  //main hero section wrapper
    if(window.location.href.indexOf('00000000')>0){  //Form 1 - the numbers are form ID which I get from the form URL
        mainHeroDiv.classList.add("banner-one");   //add class-name for first form hero banner 
    }else if(window.location.href.indexOf('11111111')>0){ //Form 2 - the numbers are form ID which I get from the form URL
        mainHeroDiv.classList.add("banner-two"); //add class-name for second form hero banner
    }
  }
  
  checkTicketId();

 

同じのスクリーンショット

 

 

III。検索バーからフォームIDをコピーし、スクリプトコードに貼り付けて、「if」条件でチェックします。

 

if(window.location.href.indexOf('114094002233')>0){   //It's my Default form ID

 

両方に両方のフォームIDを追加する必要があります if（window.location.href.indexOf（ '114094002233'）> 0）{//これは私のデフォルトのフォームIDです if（window.location.href.indexOf（ '2534614138'）> 0）{//これは私のFormOneチケットフォームIDです IV。次に、2つの異なるバナーをヘルプセンターのアセットフォルダーにアップロードします。

 

 

V.以下のCSSコードをコピーして、下部のスタイルシートに貼り付けます

/**First form hero banner**/
.hero.banner-one{  
background-image: url(First-Banner-Image);
}




/**Second form hero banner**/
.hero.banner-two{ 
  background-image: url(First-Banner-Image);
}
hero{
background-image:url($assets-banner-png); /*default background image*/
position: relative;
height:549px;
text-align: center;
width: 100%;
margin-bottom: 0 !important;
position: relative;
}

/* Default banner already added to your hero area if not then you can upload 
a banner image and add that here 'background-image:url($assets-banner-png);'

 

VI。アセットフォルダに移動し、最初のバナー画像をクリックして、CSS用にコピーします

 

 

VII。コピーしたバナー名をCSSに貼り付けます。追加方法をご覧ください。

 

/**First form hero banner**/
.hero.banner-one{ 
background-image: url($assets-first-banner-jpg);  //For default form banner image
}

 

この手順を繰り返して、2番目のバナー画像を追加します

/**Second form hero banner**/
.hero.banner-two{ 
  background-image: url($assets-second-banner-jpg); //second form banner image
}

 

VIII。すべての変更を保存し、プレビューモードでテストします。

 

 

詳細と例については、以下をご覧ください。

https://support.zendesk.com/hc/en-us/community/posts/4404227151386-Guide-Request-Page-Different-Banners-Based-on-form-used

 

ありがとうございました ：）