How to use custom tag URLs in storefront
To do so, make changes to your design theme in 2 files: for tag cloud and for product-viewing pages.
1. Changing tag cloud
Find the following code snippet in your design editor
$wa->shop->tags(...)
and change it as shown below
shopTageditorPlugin::tags($wa->shop->tags(...))
2. Changing product-viewing pages
Find the following code snippet in your design editor
<!-- tags -->
{if $product.tags}
<p class="tags" id="product-tags">
[`Tags`]:
{foreach $product.tags as $t}
<a href="{$wa->getUrl('/frontend/tag', ['tag' => urlencode($t)])}">{$t}</a>
{/foreach}
</p>
{/if}
and change it as shown below
<!-- tags -->
{if $product.tags}
<p class="tags" id="product-tags">
[`Tags`]:
{foreach shopTageditorPlugin::tags($product.tags) as $t}
<a href="{$wa->getUrl('/frontend/tag', ['tag' => $t.uri_name])}">{$t.name|escape}</a>
{/foreach}
</p>
{/if}
How to embed a custom tag cloud in category pages, search results page, and tag pages
Add plugin method's call to design templates of category (category.html) and search results pages (search.html):
{shopTageditorPlugin::cloud()}
If you place plugin method call in any other storefront template file, then the cloud will contain all tags linked with at least one product.
Method {shopTageditorPlugin::cloud()} accepts 2 parameters:
- tag sort style:
- 'name' — by tag name, default value
- 'count' — by number of linked products; the more products are linked with a tag, the closer is a tag to the list
- number — number of tags to be displayed
Example:
{shopTageditorPlugin::cloud('count', 30)}
Adjust the custom tag cloud appearance using CSS in design template files.
