Announcement bar Richtext issue

Solved

Announcement bar Richtext issue

15478
Tourist
10 0 4

I want to have a richtext section to enter my announcments. So i changed to code from this:

 

{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},

 

TO THIS:

 

 

{
"type": "richtext",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},

 

im now get the error ''All top level nodes must be '<p>'' Now if i add the <p> like this:

 

{
"type": "richtext",
"id": "text",
"default": "<p>Welcome to our store"</p>,
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},

 

It now litterly shows in the announcment bar on the website. How to fix this?Schermafbeelding 2024-06-12 094805.png

Accepted Solution (1)

dws_pvt_ltd
Shopify Partner
25 7 7

This is an accepted solution.

Hello @15478 


Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find your section announcement-bar.liquid
4) remove escape in code
5) File code

 

<p class="announcement-bar__message h5">
	<span>{{ section.blocks.first.settings.text | escape }}</span>
	{%- if section.blocks.first.settings.link != blank -%}
	  {% render 'icon-arrow' %}
	{%- endif -%}
</p>

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

 

6) Add new update file code

{
  "type": "richtext",
  "id": "text",
  "default": "<p>Welcome to our store</p>",
  "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
}

 

<p class="announcement-bar__message h5">
	<span>{{ section.blocks.first.settings.text }}</span>
	{%- if section.blocks.first.settings.link != blank -%}
	  {% render 'icon-arrow' %}
	{%- endif -%}
</p>

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

 

See theme customization
rich.png
After the changes file code
ff.pngdd.pngan.png

Output

qqq.png

If I managed to help you then, don't forget to Like it and Mark it as a Solution!

Best Regards,
Dws_pvt_ltd

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

View solution in original post

Replies 4 (4)

dws_pvt_ltd
Shopify Partner
25 7 7

This is an accepted solution.

Hello @15478 


Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find your section announcement-bar.liquid
4) remove escape in code
5) File code

 

<p class="announcement-bar__message h5">
	<span>{{ section.blocks.first.settings.text | escape }}</span>
	{%- if section.blocks.first.settings.link != blank -%}
	  {% render 'icon-arrow' %}
	{%- endif -%}
</p>

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

 

6) Add new update file code

{
  "type": "richtext",
  "id": "text",
  "default": "<p>Welcome to our store</p>",
  "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
}

 

<p class="announcement-bar__message h5">
	<span>{{ section.blocks.first.settings.text }}</span>
	{%- if section.blocks.first.settings.link != blank -%}
	  {% render 'icon-arrow' %}
	{%- endif -%}
</p>

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

 

See theme customization
rich.png
After the changes file code
ff.pngdd.pngan.png

Output

qqq.png

If I managed to help you then, don't forget to Like it and Mark it as a Solution!

Best Regards,
Dws_pvt_ltd

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
15478
Tourist
10 0 4

Thank you so much for the clear explanation. 

Raj-webdesigner
Shopify Partner
316 73 74

This is correct but only one change you add <p> tag to default this step is wrong

P tag is added but there is no add to this customize side

 

 

 

{
"type": "richtext",
"id": "text",
"default": "<p>Welcome to our store"</p>,
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},

 

 

this SIde You Change And Add Below Code

 

 

{
"type": "richtext",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},

 

 

Like This screen Shot

Rajwebdesigner_0-1718180768845.png

 

 



 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


EBOOST
Shopify Partner
1033 275 314

Hi @15478 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Sections/announcement-bar.liquid
3.  Find code below after that remove " | escape "

 

<span>{{ block.settings.text | escape }}</span>

 

4. Update <p> to <div>

EBOOST_0-1718182543264.png

Code has been updated

EBOOST_1-1718182606797.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤