[Share] Simple Filter on Portfolio Page

On 11/26/2024 at 2:40 AM, alexandrabryson said:

@tuanphan yes this is perfect! This is how my portfolio is set up now but I’m only able to add text at the top as a category, I’m not able to section it out or add another section that is the same since it’s only a page layout. Even if there is a way to code just text breaks within the portfolio page that would work. Thank you!

We will replicate Portfolio Hover Background on a Blank Page. Then use code to add Filter Links on this blank page.

#1. First, add a Classic Editor Section

Click this

Next, click Add a blank section

#2. Follow this guide to recreate Portfolio Hover Background on #1 Page.

#3. Add a Code Block above Text Block. And Paste this code into Code Block

<div class="portfolio-filter">
    <span class="filter-all active">All</span>
    <span class="filter-coffee">Coffee</span>
    <span class="filter-tech">Tech</span>
    <span class="filter-fmcg">FMCG</span>
</div>

#4. In #2 guide, we used Heading 2 in Text Block. So you need to know these ID

• Starbucks: #block-yui_3_17_2_1_1732588943338_19608 h2:nth-child(1)
• Amazon #block-yui_3_17_2_1_1732588943338_19608 h2:nth-child(2)
• Unilever: #block-yui_3_17_2_1_1732588943338_19608 h2:nth-child(3)
• Google: #block-yui_3_17_2_1_1732588943338_19608 h2:nth-child(4)
• Open AI: #block-yui_3_17_2_1_1732588943338_19608 h2:nth-child(5)
• Starlinks: #block-yui_3_17_2_1_1732588943338_19608 h2:nth-child(6)

#5. Use this code to Code Injection > Footer (or Page Header Injection)

<style>
.portfolio-filter span {
    cursor: pointer;
    text-decoration: none;
}
.portfolio-filter span.active {
    text-decoration: underline;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
    const filterMap = {
        "filter-all": "h2",
        "filter-coffee": "h2:nth-child(1)",
        "filter-tech": "h2:nth-child(2), h2:nth-child(4), h2:nth-child(5), h2:nth-child(6)",
        "filter-fmcg": "h2:nth-child(3)"
    };
    $(".portfolio-filter span").click(function () {
        $(".portfolio-filter span").removeClass("active");
        $(this).addClass("active");
        const selector = filterMap[$(this).attr("class").split(" ")[0]]; 
        $("#block-yui_3_17_2_1_1732588943338_19608 h2").hide();
        $(`#block-yui_3_17_2_1_1732588943338_19608 ${selector}`).show();
    });
});
</script>

#6. Explain
You need to change Text Block ID here

This code mean

• If users click All - show all heading 2
• If users click Coffee - show heading 2: 1
• If users click Tech - show heading 2: 2, 4, 5, 6
• If users click FMCG - show heading 2: 3

This code will underline All, Coffee, Tech, FMCG when users click it.