Add size toggles to page

addSizeToggles.js

// Add non-existing bar to page
let buttonPanel = `<div><div class="landing-filters" style="display: flex;
    align-items: baseline;"><h2 style="font-size: 17px; margin-right: 10px">Filament Diameter:</h2>
<div class="button-group"><button class="filament-button filament-175-button" onclick="showItems('1.75mm')">1.75mm</button><button class="filament-button filament-300-button" onclick="showItems('2.85mm')">2.85mm</button></div></div></div>`;

let newItem = $('<div>').addClass('.product-collections-header');
$('.main').prepend(newItem);

newItem.html(buttonPanel);

// Add behavior to show only items of a given target
function showItems(target) {
   $('.filament-button').removeClass('active');

   var targetClass = (target == '1.75mm') ? '.filament-175-button' : '.filament-300-button';

   $(targetClass).addClass('active');
   
    $('.main .product-single.widget-single').each(function() {
        var $this = $(this);
        var text = $this.text();
        if (text.indexOf(target) >= 0) {
            $this.show();
        } else {
            $this.hide();
        }
    });
}

// Switch to 1.75 view on load
showItems('1.75mm');