Can the Title be different from the Home Page to Specific Category pages?
Is it possible to have different page titles depending on what page the user is on? The homepage would have one title, the article group would have another, article has another....so on so forth.
-
Hey Hannah Lucid,
Follow the below steps:
i). Add the given code to the script.js file.
function capitalize(input) {
var words = input.split(' ');
var CapitalizedWords = [];
words.forEach(element => {
CapitalizedWords.push(element[0].toUpperCase() + element.slice(1, element.length));
});
return CapitalizedWords.join(' ');
}
var url = window.location.pathname;
var tempName = url.split('/').slice(3);
var dumpTempName = document.getElementById('template_name').innerHTML = tempName;
document.getElementById('template_name').style.display = "none";
var getTempName = document.getElementById("template_name").innerHTML;
var replaceCommaToLine = getTempName.replaceAll(","," | ");
var textCapitalize = capitalize(replaceCommaToLine);
document.getElementById('templates_name').innerHTML = textCapitalize;
Screenshot for the same:
ii). Add these two divs to the header.hbs file at the end.
<div id="template_name"></div>
<h1 id="templates_name"></h1>
Screenshot for the same:
iii). Output is:
New Request Page -
New Community Post Page -
Hope it works for your.
Thanks
-
You can use the given code to achieve it:
$(document).ready(function () {
var catName = $(".breadcrumbs li:nth-child(2)").text();
var removeWhiteSpace = $.trim(catName);
console.log(removeWhiteSpace);
if(removeWhiteSpace == "Making Payments"){
$(".category-content h1").text("Making Payments FAQ")
}
});I did for my category promoted:-
$(document).ready(function () {
var catName = $(".breadcrumbs li:nth-child(2)").text();
var removeWhiteSpace = $.trim(catName);
console.log(removeWhiteSpace);
if(removeWhiteSpace == "promoted"){
$(".category-content h1").text("promoted Articles")
} else if(removeWhiteSpace == "ADD YOUR CATEGORY NAME"){
$(".category-content h1").text("ADD NEW TEXT NAME FOR CATEGORY PAGE")
}
});Note: repeat the else if(){} condition and add you more categories name as I did in promoted category.
Output: On my HC,
I have category on my homepage named promoted but I change it into promoted Articles.
iF any confusion feel free to ask :)
-
Hi Hannah Lucid,
That is JavaScript code snippet so you can add that to the script.js file at the end of code of that file.
Happy to help :)
-
Just do it like:
$(document).ready(function () {
var catName = $(".breadcrumbs li:nth-child(2) a").text();
var removeWhiteSpace = $.trim(catName);
console.log(removeWhiteSpace);
if(removeWhiteSpace == "Making Payments FAQ"){
$(".section-container h1").text("Making Payments FAQ: Click the links below to learn more")
}
else if(removeWhiteSpace == "Cat Name One"){
$(".section-container h1").text("Making Payments FAQ: Click the links below to learn more")
}
else if(removeWhiteSpace == "Cat Name Two"){
$(".section-container h1").text("Making Payments FAQ: Click the links below to learn more")
}
}); -
Ifra Saqlain Saqlain Thank you so much! This is incredibly helpful. Another question, more specific to the ask, would it be possible to have a category title be one thing on a homepage but different on the actual category page?
-
Ifra Saqlain It's been awhile, and I really appreciate your help! I was getting ready to try out this code and found that I wasn't sure what page this code should go in. Would you mind helping me out again? You're seriously amazing.
-
Ifra Saqlain I adding this to the script.js page but it didn't change the text.
$(document).ready(function () {
var catName = $(".breadcrumbs li:nth-child(2)").text();
var removeWhiteSpace = $.trim(catName);
console.log(removeWhiteSpace);
if(removeWhiteSpace == "Making Payments FAQ"){
$(".category-content h1").text("Making Payments FAQ: Click the links below to learn more")
}
});
Help! :( -
Hannah, can you please share the public URL here so I can figure out the issue easily?, then I'll share exact solution.
-
@Hannah, you document_head.js file doesn't have jquery CDN, copy the given CDN and paste at the document_head.js file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
Ifra Saqlain we don't have a document_head.js file, only a document_head.hbs. When I added the supplied code to the document_head.hbs file and then added $(document).ready(function () {
var catName = $(".breadcrumbs li:nth-child(2)").text();
var removeWhiteSpace = $.trim(catName);
console.log(removeWhiteSpace);
if(removeWhiteSpace == "Making Payments FAQ"){
$(".category-content h1").text("Making Payments FAQ: Click the links below to learn more")
}
});
to the script.js file nothing is happening. -
No, you only have to add this given CDN to document_head.hbs file;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
After adding that CDN; add the given code to the script.js file at the bottom area.
$(document).ready(function () {
var catName = $(".breadcrumbs li:nth-child(2)").text();
var removeWhiteSpace = $.trim(catName);
console.log(removeWhiteSpace);
if(removeWhiteSpace == "Making Payments FAQ"){
$(".category-content h1").text("Making Payments FAQ: Click the links below to learn more")
}
}); -
Ifra Saqlain Thank you! That is exactly what I've done and still...nothing is happening. :(
-
Hannah, I can't see the jquery CDN and script code which I shared above, I checked in your help center by URL which has provided by you. There is something missing, are you doing all changes in your local theme or something.
-
I was doing it in a non-live theme. I just posted this theme as live for this website with the coding. Thank you! Ifra Saqlain
-
Hannah, remove previous script.js file code which provided above and use this updated code I changed class name as per your HC section file:
$(document).ready(function () {
var catName = $(".breadcrumbs li:nth-child(2) a").text();
var removeWhiteSpace = $.trim(catName);
console.log(removeWhiteSpace);
if(removeWhiteSpace == "Making Payments FAQ"){
$(".section-container h1").text("Making Payments FAQ: Click the links below to learn more")
}
}); -
YOU HAVE MADE MY DAY Ifra Saqlain. THANK YOU <3
Ifra Saqlain how do I go about getting the other categories to do the same? I tried repeated the } else if () condition but it doesn't work. Instead, it'll stop the original code from change the category page title and it won't change either categories. -
Yes! That worked beautifully. Thank you Ifra Saqlain. You are truly a life saver.
-
You're welcome Hannah :)
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
18 Kommentare