Announcement bar help?

[Tamaerus]

Hi there everyone, just trying to get a little spit of code from a helpful friendly person who knows what they're typing in those CSS boxes and whatnot.

So I want to make different announcement bars for different pages. I know I need to do this with like custom code editing in the theme files, but I don't want to mess up anything due to specific inexperience.

I am using Dawn 7.0.1 (yes I know it's a little outdated but updating my theme right now would make a coding mess with some of my other design modifications, apparently some of my things won't migrate properly, it is what it is.)

I want to make two different announcement bars for my pages - one for the homepage and product pages, and one for my member-exclusive pages. Homepage and product pages are on "default" and member pages are set to a custom template format I have named "exclusive"

The homepage and product pages will have a sign-up pitch like "Sign up now to get exclusive deals!" whereas the member only annoucement would be perhaps a member only code they can use at checkout for a better deal like "Enter FREESHIP100 to get free shipping on any order over $100!"

I know this has something to do with associating the announcement bar with the template style in the true/false fashion and then doing some if/then/else-and/or things. I just don't know PRECISELY how to write that kind of code myself (I'm able to read it fairly well but struggle to write it with proper "grammar" so to speak lol)

I did notice another post that had the same question and Almost the answer I was looking for, but it wasn't theme-specific and again, I don't want to mess anything up.

So again, Dawn 7.0.1, templates "default" and "exclusive"

Anyone who could slip me the Game Genie to plug into this old Nintendo would be much appreciated =^^=

[wo · Accepted solution]

announcement-bar.liquid

schema, block, add

 {
    "type": "text",
    "id": "exclusive_text",
    "default": "Welcome to our store",
    "label": "Exclusive Text"
 }

find 'announcement-bar__message', modify

                <p class="announcement-bar__message h5">
                       {% if template == 'exclusive' %}
                        <span>{{ block.settings.exclusive_text | escape }}</span>
                       {% else %}
                          <span>{{ block.settings.text | escape }}</span>
                      {% endif %}
                      {%- if block.settings.link != blank -%}
                        {% render 'icon-arrow' %}
                      {%- endif -%}
                    </p>      

[Tamaerus · Accepted solution]

That helped a lot but I still have one tiny issue. I got the extra text box and got it to show me the Exclusive Text / Regular Text options, and nothing interfered with my page (thank you for that!) although I did have to shift the schema code down below block[ to the next block down after } settings { for it to track that it was supposed to be part of the announcement (it gave me an error when I tried to put it above that line, invalid id or something, but that was an easy fix to deduce just looking it over briefly)

But it won't seem to associate the template style to the text settings properly. I even tried to copy the entire template name '</>page.exclusive.json' with and without the </> and neither worked. I confirmed in the template json files that the name of the template is correct and it's showing the coding for the primary page I used to start that template.

I feel like I did something wrong here XP and I'm not sure what it was. The one error with the placement of the code in the schema settings that I ran into seemed easy enough to guess the fix by context but now I'm a little stumped. You are a wonderful person for helping me out so far and I just need like one more little instruction XD or maybe more lol you would know better than I do! XD Thank you so much in advance! 🙂

[WalkYourStyle]

One way to do this is to use JavaScript to dynamically change the announcement bar based on the page. I can help you if you don't mind sharing your store's URL.

[wo · Accepted solution]

announcement-bar.liquid

schema, block, add

 {
    "type": "text",
    "id": "exclusive_text",
    "default": "Welcome to our store",
    "label": "Exclusive Text"
 }

find 'announcement-bar__message', modify

                <p class="announcement-bar__message h5">
                       {% if template == 'exclusive' %}
                        <span>{{ block.settings.exclusive_text | escape }}</span>
                       {% else %}
                          <span>{{ block.settings.text | escape }}</span>
                      {% endif %}
                      {%- if block.settings.link != blank -%}
                        {% render 'icon-arrow' %}
                      {%- endif -%}
                    </p>      

[Tamaerus · Accepted solution]

That helped a lot but I still have one tiny issue. I got the extra text box and got it to show me the Exclusive Text / Regular Text options, and nothing interfered with my page (thank you for that!) although I did have to shift the schema code down below block[ to the next block down after } settings { for it to track that it was supposed to be part of the announcement (it gave me an error when I tried to put it above that line, invalid id or something, but that was an easy fix to deduce just looking it over briefly)

But it won't seem to associate the template style to the text settings properly. I even tried to copy the entire template name '</>page.exclusive.json' with and without the </> and neither worked. I confirmed in the template json files that the name of the template is correct and it's showing the coding for the primary page I used to start that template.

I feel like I did something wrong here XP and I'm not sure what it was. The one error with the placement of the code in the schema settings that I ran into seemed easy enough to guess the fix by context but now I'm a little stumped. You are a wonderful person for helping me out so far and I just need like one more little instruction XD or maybe more lol you would know better than I do! XD Thank you so much in advance! 🙂

[wo]

From your description, I don't quite understand the problem you encountered. If you can show me a screenshot of the code, I can better understand your problem.

[Tamaerus]

[Tamaerus]

So I did try about four different forms of changing the "if template == exclusive" section, First exactly the way you wrote it, then I re-wrote it thinking maybe it had like an extra space or something, then I tried it as page.exclusive.json, then adding the </> in front. None of this gave me an error when going to save it, but it also didn't work as intended. I'm stumped at this point.

[wo · Accepted solution]

I don't remember the syntax very well, and I haven't verified it.

if page.template_suffix == 'exclusive'

[Tamaerus]

That did it! Thank you so much for your help Wo! I appreciate you tremendously =^^= using this new line with your others solved the problem, and doesn't interfere with anything else in my theme. Thank you so much!!!