Guide Request Page - Different Banners Based on form used

Hi Kieron Kiely

Can you please clarify which banner you are pointing to 

Thanks 

Pulkit

Team Diziana

Hey Kieron Kiely, yes it's possible, you can change the banner, icons, images, anything based on the forms ID. You just need to check forms ID via JS and add class-name in the main wrapper via JS and change the styling using CSS,

Here I am changing the hero banner based on forms using default Copenhagen Theme.

See the below steps

1). Hero section HTML code in Copenhagen Theme.

 <section id="main-content" class="section hero">
  <div class="hero-inner">
    <h2 class="visibility-hidden">{{ t 'search' }}</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
      <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
      <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search submit=false instant=settings.instant_search class='search search-full'}}
  </div>
</section>

2). Add the script code to your script.js file.

 function checkTicketId(){
    var mainHeroDiv = document.querySelector('#main-content');  //main hero section wrapper
    if(window.location.href.indexOf('360000674612')>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('360001547211')>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
    }else if(window.location.href.indexOf('360001522712')>0){ //Form 3 - the numbers are form ID which I get from the form URL
        mainHeroDiv.classList.add("banner-three");  //add class-name for third form hero banner
    }
  }
  
  checkTicketId();

3). Put the hero section class name and add banner image using CSS.

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




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



/**Three form hero banner**/
.hero.banner-three{ 
background-image: url($assets-three-banner-jpg);
}

4). Output: pay attention on banner image and form name - Test Form One, Test Form Two and Default Ticket Form.

Hope it would be helpful for you or if it's not what you want to do then share something more about your query with the screenshot.

Thanks

Team

Hi,

I have tried this but the banners do not show up it basically removes the whole banner sections when i input this code.

Regards

Kieron

It's because of different class name and form IDs,

you need to replace the form IDs with your form's IDs.

can you share the public URL of your theme so I can figure out and help.

@Kieron Kiely, as mentioned, make sure that you are replacing the form_id in the code with your ticket form_ids.

You must be getting something like this (as shared in the screenshot below), the highlighted part is the form_id.

I am updating the above JS code to highlight the area where the "FORM_ID" should be replaced. Hope this helps.

function checkTicketId(){
  // Replace FORM_ID with your ticket form id.
    var mainHeroDiv = document.querySelector('#main-content');  //main hero section wrapper
    if(window.location.href.indexOf('FORM_ID')>0){
        mainHeroDiv.classList.add("banner-one");   //add class-name for first form hero banner 
    }else if(window.location.href.indexOf('FORM_ID')>0){
        mainHeroDiv.classList.add("banner-two"); //add class-name for second form hero banner
    }else if(window.location.href.indexOf('FORM_ID')>0){
        mainHeroDiv.classList.add("banner-three");  //add class-name for third form hero banner
    }
  }
  
  checkTicketId();

Kieron, as I mentioned about form IDs above and Trapta has shared the screenshot for the same to get the form IDs, just follow the simple steps and hope you will get the solution now.

Hi,

Yes i had replaced all of the form id's with the one we have currently, it just seems to delete the banner

Our Public Zendesk is https://westcoastdealreg.zendesk.com/hc/en-gb

Regards

Kieron

let me figure out..

hey, it's because you have added the hero image by adding <img> tag in the middle of code, you didn't use CSS property- background-image for this.

Follow the below steps to fix this:

Template Name: New Request Page (new_request_page.hbs).

1). Remove the <img> tag from your hero section code.

<section id="main-content" class="section hero article-hero">

//Remove image tag
<img src="//theme.zdassets.com/theme_assets/2349432/93b809afad7cd3910dbce7e67d4db1817844895f.svg" alt="Community Topics">

2). Now your code is: without <img src="...>

<section id="main-content" class="section hero article-hero">
  <div class="hero-overlay">
    <div class="grid-container">
      <div class="grid-x grid-padding-x">
        <div class="small-12 medium-6 large-4 cell">
          <h1></h1>
        </div>
      </div>
      <div class="grid-x grid-padding-x">
        <div class="small-12 medium-6 medium-offset-6 cell text-right">
          <div class="hero-inner">
            <form role="search" class="search search-full" data-search="" data-instant="true" autocomplete="off" action="/hc/en-gb/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓"><input type="search" name="query" id="query" placeholder="Search" autocomplete="off" aria-label="Search"></form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

3).Upload your  banner images to the HC assets folder,

after uploading, then click on the uploaded banner image,

you will get the name, copy the banner name,

Copy the below code and paste to your stylesheet at the bottom. Only change the background-image name in the CSS which you copied from assets folder.

name - $assets-banner-png

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

Now your default banner image is shown. 

For different different forms

1). Just copy the below code and paste into your script file.

function checkTicketId(){
    var mainHeroDiv = document.querySelector('#main-content');  //main hero section wrapper
    if(window.location.href.indexOf('360000230913')>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('360000215237')>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
    }else if(window.location.href.indexOf('360002265437')>0){ //Form 3 - the numbers are form ID which I get from the form URL
        mainHeroDiv.classList.add("banner-three");  //add class-name for third form hero banner
    }else if(window.location.href.indexOf('360001203238')>0){ //Form 3 - the numbers are form ID which I get from the form URL
mainHeroDiv.classList.add("banner-fourth"); //add class-name for third form hero banner
}else if(window.location.href.indexOf('360001491118')>0){ //Form 3 - the numbers are form ID which I get from the form URL
mainHeroDiv.classList.add("banner-fifth"); //add class-name for third form hero banner
}else if(window.location.href.indexOf('360000174433')>0){ //Form 3 - the numbers are form ID which I get from the form URL
mainHeroDiv.classList.add("banner-sixth"); //add class-name for third form hero banner
}
  }
  
  checkTicketId();

2). Upload your all different different banner images to your HC assets folder.

3). Copy the below code and paste into your stylesheet. You just need to change the background-image as per yours.

/**First form hero banner**/
.hero.article-hero.banner-one{  
background-image: url($assets-first-banner-jpg); /*change the banner name as per yours*/
}




/**Second form hero banner**/
.hero.article-hero.banner-two{ 
  background-image: url($assets-second-banner-jpg); /*change the banner name as per yours*/
}



/**Three form hero banner**/
.hero.article-hero.banner-three{ 
background-image: url($assets-three-banner-jpg); /*change the banner name as per yours*/
}


/**four form hero banner**/
.hero.article-hero.banner-fourth{ 
background-image: url($assets-four-banner-jpg); /*change the banner name as per yours*/
}


/**Five form hero banner**/
.hero.article-hero.banner-fifth{ 
background-image: url($assets-five-banner-jpg); /*change the banner name as per yours*/
}


/**Six form hero banner**/
.hero.article-hero.banner-sixth{ 
background-image: url($assets-six-banner-jpg); /*change the banner name as per yours*/
}

4) . Go to the assets folder and you will see, you have uploaded all different banners.

5). Copy the first banner name.

6) . Go to the stylesheet.

7). Paste that banner name here:

/** First Form banner **/

.hero.article-hero.banner-one{ 
background-image: url($assets-first-banner-jpg); /*change the banner name as per yours*/
}

8). Again, copy the second banner name and paste here:

/**Second form hero banner**/

.hero.article-hero.banner-two{ 
background-image: url($assets-second-banner-jpg); /*change the banner name as per yours*/
}

Still, you are facing an issue so you can share the credential of your HC then I can log in and fix it.

Thanks

Hi,

I have followed all of these steps and the banner does not change  it just appears as the default banner only

Regards

Kieron

Okay, try this.

Do the above steps in your theme and set it as live and let me know here.. So I can see what's going wrong 

Hi

Currently  set as live

See, you have added the script code at wrong place.

Fix that:

Go to the script file and place the code inside the function:

Output is:

Also update the CSS code:

Current Code:

.hero.article-hero{
background-image:url($assets-banner-png); /*background image*/
 position: relative;
  height:549px;
    text-align: center;
   background-position: center;   // remove this line from the CSS code
    width: 100%;
    margin-bottom: 0 !important;
    position: relative;
}



Updated Code:

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

Don't forget to remove the property from CSS:

       background-position: center;

I am watching, the code is working fine, right?

https://westcoastdealreg.zendesk.com/hc/en-gb/requests/new?

I want to hide category page banner. Every category contain different banner. How to get ?

Hi, you can get doing easy steps.

Que 1). Every category contain different banner. How to get ?

Follow the steps below:

1). Go to the category_page.hbs.

2). Add the code snippet under the hero section class as the screenshot below.

3). You will get the category IDs by adding banner-{{category.id}}.

4). You can get the category IDs from inspect tool.

5). Go to the browser on preview mode of your theme.

6). Do right click of mouse, a list would be open, select inspect from that list.

7). You will get the code.

8). Copy the class name from the dev tool.

9). Paste at the stylesheet as the screenshot below.

10). The rest steps are the same, upload your banners into the HC assets Folder .

11). Open the first banner image, copy the name of banner.

12). Go to the style.css and paste as background image. See the screenshot below.

13). You will have to do the same process two or three or four banner images of your categories.

14). I did for two and the result is below:

Category Promoted

Category General

Note: I used default Copenhagen Theme.

Que 2). I want to hide category banner.

Didn't get. Can you explain?

if you simply want to hide hero banner then I think you are able to edit CSS, right?

If any issue let me know.

Thanks