Hcfyk

I am trying to work out how I can separate my limiter values with a pipe (|)

Ideally, the end result will be View: 48 | 120 | ALL, at present I have been able to get View: 48 120 ALL

This is what I have used so far:

<div class="field limiter">
 <label class="label" for="limiter">
 <span><?= /* @escapeNotVerified */ __('View:') ?></span>
 </label>
 <div class="control">
 <?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>
 <a data-role="limiter" href="#" data-value="<?php /* @escapeNotVerified */ echo $_key ?>"<?php if ($block->isLimitCurrent($_key)): ?>
 class="selected"<?php endif ?>>
 <?php /* @escapeNotVerified */ echo $_limit ?>
 </a>
 <?php endforeach; ?>
 </div>
</div>

It can be easily done by CSS.

I always prefer CSS for this kind of tweaks.

.limiter .control a + a::before 
 content: " 

It will Add a Pipe separator between a tag

Demo can be found at Fiddle

Hope above will help!

Try using PHP implode(), check below modified code:

<div class="field limiter">
 <label class="label" for="limiter">
 <span><?= /* @escapeNotVerified */ __('View:') ?></span>
 </label>
 <div class="control">
 <?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>
 <a data-role="limiter" href="#" data-value="<?php /* @escapeNotVerified */ echo $_key ?>"<?php if ($block->isLimitCurrent($_key)): ?>
 class="selected"<?php endif ?>>
 <?php /* @escapeNotVerified */ echo implode("|",$_limit) ?>
 </a>
 <?php endforeach; ?>
 </div>
</div>