Writing Category Custom Fields

[lesliekirk]

I would like to write the content for Custom Category Fields for a specific category onto a different category within the Category Header section. First, is including this type of store morph doable in a Category Header?

I "understand" I will need to assign the category code but the category data will not be a sub-category of this category. The content needs to be independent of whichever category this coding is included.


FWIW, I'm trying to create something that the store owner can update the category custom field in one place and it can be updated in what will be pseudo-subcategory pages since categories can only be assigned to one parent.

[Bruce - PhosphorMedia]

Yes. Category headers/footers are complied SMTs so custom fields should work. You might need to manually call them though using
<mvt:item name="customfields" param="Write_Categoy_Code( g.category_code, 'field name', l.settings:this_custom_data'' )" />

[lesliekirk]

Yes. Category headers/footers are complied SMTs so custom fields should work. You might need to manually call them though using
<mvt:item name="customfields" param="Write_Categoy_Code( g.category_code, 'field name', l.settings:this_custom_data'' )" />

I was hoping for something that might let me "assign" the category as part of "calling in" the custom fields

 <mvt:assign name="g.category_code" value="'cat1'" />

Then be able to use something like (but I don't know how to do this correctly)

<mvt:item name="customfields" param="Read_Category_Code( l.settings:subcategory:code, 'catbasicprice', l.settings:catbasicprice )" />

<span class="u-color-black"> &mvt:catbasicprice;</span><br>

<mvt:item name="customfields" param="Read_Category_Code( l.settings:subcategory:code, 'catshiptime', l.settings:catshiptime )" />

<span class="u-color-black">&mvt:catshiptime;</span>

Instead of

<mvt:item name="customfields" param="Read_Category_Code( 'cat1', 'catbasicprice', l.settings:catbasicprice )" />

<span class="u-color-black"> &mvt:catbasicprice;</span><br>

<mvt:item name="customfields" param="Read_Category_Code( 'cat1', 'catshiptime', l.settings:catshiptime )" />

<span class="u-color-black">&mvt:catshiptime;</span>

My reasoning for wanting to assign the category code I guess is to make it easier to change the category being pulled from. Sure, in this example, it's two places versus one place but this may end up being something the store owner will edit and I'm trying to keep the breaking points to as few as I can.

[Kent Multer]

I'm not sure if I'm following you, but I think you might be able to achieve this with an additional custom category field. It will contain the category code from which to pull. So for example, if category A is pulling content from category B, and the merchant wants to change it to pull from category C, he just needs to change the code in the "pull from" custom field. No changes will be needed to the template code.

[lesliekirk]

I'm not sure if I'm following you, but I think you might be able to achieve this with an additional custom category field. It will contain the category code from which to pull. So for example, if category A is pulling content from category B, and the merchant wants to change it to pull from category C, he just needs to change the code in the "pull from" custom field. No changes will be needed to the template code.

Yeah, I know. I'm having a hard time getting this one out of my head. It would have been sooo much easier if a category could truly be assigned to multiple parents then all of this stuff would take care of itself.

For example - I have a category that displays all gray cabinets. But these gray cabinet categories need to be assigned to other categories too. So creating a second set of pseudo sub-categories is not an option because then each new pseudo sub-categories would in turn need pseudo sub-sub-categories and it just would spiral out of control

So on this gray cabinet category, I am hard coding the (in this case) 8 sub-categories I need "assigned" to it. This includes links, thumbnails, and custom category fields for that category. So if I could figure out how to use your idea to be able to pick the 8 categories to assign.

Question - can the search filters be used to create something like this?

[Kent Multer]

Question - can the search filters be used to create something like this?

That was going to be my next suggestion: doing something with faceted search. I haven't worked with that much (although I did write faceted-search modules for a few clients before Miva added that feature to the store), so I'm not sure exactly how it would work. If each product's color is in a custom field, then I think customers can go to a category and filter for a specific color.

[lesliekirk]

That was going to be my next suggestion: doing something with faceted search. I haven't worked with that much (although I did write faceted-search modules for a few clients before Miva added that feature to the store), so I'm not sure exactly how it would work. If each product's color is in a custom field, then I think customers can go to a category and filter for a specific color.

If it's by product, it's not going to work.

[SidFeyDesigns]

Have you thought about leveraging navigation sets and content sections?

The client can assign the 8 categories easily in the admin and you can create as many of these navigation sets as needed.

I recently implemented a setup using navigation sets and content sections for subcategories instead of the native Content (subcategory_listing) template on our site.

Steps Taken:

Step 1: Add a Content Section for the Navigation Set Code

Since all these navsets will use the same template code, and it's time consuming to update the same code in multiple places, I chose to put the navset code in a content section.

EX:

• Content Section Code: ctgy_category_navsets
• Content Section Name: Category Navsets
• Content Section Description: Code for Navsets: Name Starts with: Categories (in case I forget lol)

Here's the template code that pulls in the catree image and any other cattree related variables much like the native Miva subcategroy_listing:

<div class="row bottom-shadow o-layout u-grids-2 u-grids-3--xxs u-grids-4--xs u-grids-5--s u-grids-6--m sub-category-layout">
    <mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
        <mvt:if expr="l.settings:navigationitem:link_type EQ 'C'">
            <mvt:do file="g.Module_Library_DB" name="l.success" value="Category_Load_Code( l.settings:navigationitem:link_dest, l.settings:category_navigation )" />
            <mvt:do file="g.Module_Root $ '/modules/component/cmp-cssui-cattree.mvc'" name="l.success" value="CSSUI_CatTree_Load( l.settings:category_navigation:id, l.settings:cattree )" />
            <mvt:if expr="l.settings:navigationitem:link_dest EQ l.settings:category:code">
                <div class="o-layout__item sub-category blue">
                    <div class="bold u-r-here">You Are<br>On This<br>Page.<br>&#x25bc;</div>
                    <p class="nm">&mvt:navigationitem:name;</p>
                </div>
            <mvt:else>
                <a href="&mvt:navigationitem:url;" class="o-layout__item sub-category" target="&mvt:navigationitem:link_targ;" aria-label="View &mvt:navigationitem:name;">
                    <div class="place-holder">
                        <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" width="102" height="102" data-src="&mvt:cattree:image;" alt="&mvt:navigationitem:name;" />
                        <noscript><img src="&mvt:cattree:image;" width="102" height="102" alt="&mvt:navigationitem:name;" /></noscript>
                    </div>
                    <p class="nm">&mvt:navigationitem:name;</p>
                </a>
            </mvt:if>
        </mvt:if>
    </mvt:foreach>
</div>

The above code could also be adjusted to pull in custom category fields and you could even add code to pull in the first (whatever number) of products in each category.


Step 2: Create Navigation Sets

Create as many navigation sets as you need using the item for the Content Section created above.

EX:

Navset 1:

• Navset Code: anniversary_gifts (similar to the category code)
• Navset Name: Categories: Anniversary Gifts

Then in the template, insert the Content Section Item:

<mvt:item name="readytheme" param="contentsection( 'ctgy_category_navsets' )" />

Then add whatever navigation items (categories) are needed to the Navset.

Repeat the above process for as many navigation sets the client may need.

Any category can be assigned and 1 category can be assigned to as many of these navigation sets as needed.


Step 3: Create Content Section to House Conditionals for "Parent Categories"

EX:

• Content Section Code: ctgy_subcats_navsets
• Content Section Name: CTGY Subcategory Navsets

Then in the template, I used conditionals based on the category codes of all the parent categories to control which navset gets displayed:

<mvt:if expr="l.settings:category:code EQ 'perfect-rose-gift-sets'">
    <h2 class="ptp1">Featured Collections</h2>
    <mvt:item name="readytheme" param="navigationset( 'rose_gift_sets' )" />
<mvt:elseif expr="l.settings:category:code EQ 'personalized-roses'">
    <h2 class="ptp1">Shop By Gift Occasion</h2>
    <mvt:item name="readytheme" param="navigationset( 'personalized_roses' )" />
<mvt:elseif expr="l.settings:category:code EQ '24k-gold-roses'">
    <h2 class="ptp1">Featured Collections</h2>
    <mvt:item name="readytheme" param="navigationset( 'gold_roses' )" />
<mvt:elseif expr="l.settings:category:code EQ 'silver-roses'">
    <h2 class="ptp1">Featured Collections</h2>
    <mvt:item name="readytheme" param="navigationset( 'silver_roses' )" />
<mvt:elseif expr="l.settings:category:code EQ 'platinum-roses'">
    <h2 class="ptp1">Featured Collections</h2>
    <mvt:item name="readytheme" param="navigationset( 'platinum_roses' )" />
<mvt:elseif expr="l.settings:category:code EQ 'anniversary-gift-ideas'">
    <h2 class="ptp1">Featured Collections</h2>
    <mvt:item name="readytheme" param="navigationset( 'anniversary_gifts' )" />
<mvt:elseif expr="l.settings:category:code EQ 'gift-ideas'">
    <h2 class="ptp1">Featured Occasions</h2>
    <mvt:item name="readytheme" param="navigationset( 'gift_ideas' )" />
</mvt:if>

Step 4: Add Content Section For Parent Categories to CTGY

Simply add the above Content Section item where ever you want it on CTGY:

<mvt:item name="readytheme" param="contentsection( 'ctgy_subcats_navsets' )" />

It could go in the Header Template, Content (subcategory_listing), etc.


Bonus: Create Content Sections For Related Categories or other Suplimental Navigation for "Subcategories"

You can also leverage those navigation sets with custom category field checkboxes in as many Content Sections as a client may need

Related Categories Ex:

First add Custom Category Field Checkboxes:

Codes: cats_rose_gift_sets, cats_personalized_roses, etc.

Names: Rose Gift Sets Cat?, Personalized Roses Cat?, etc.

Check those custom category field checkboxes for any categories that will display related categories (this is the time consuming part if there are a lot of categories).

Then add a Content Section for the conditionals based off the Custom Field Checkboxes being checked.

You can even use multiple navsets within 1 conditional.

EX:

• Content Section Code: ctgy_related_cats
• Content Section Name: CTGY Related Categories

Template Code:

<mvt:item name="customfields" param="Read_Category_Code( l.settings:category:code, 'cats_rose_gift_sets, cats_personalized_roses, cats_real_roses, cats_anniversary_gifts, cats_gift_ideas', l.settings )" />
<section class="column whole np mtp1-25 mbm1-25 print-hide">
    <mvt:if expr="l.settings:cats_rose_gift_sets EQ '1'">
        <h2>Shop Related Collections</h2>
        <mvt:item name="readytheme" param="navigationset( 'rose_gift_sets' )" />
        <h2 class="mtp1-25">Shop All Rose Collections</h2>
        <mvt:item name="readytheme" param="navigationset( 'real_roses' )" />
    <mvt:elseif expr="l.settings:cats_personalized_roses EQ '1'">
        <h2>Shop Related Collections</h2>
        <mvt:item name="readytheme" param="navigationset( 'personalized_roses' )" />
        <h2 class="mtp1-25">Shop All Rose Collections</h2>
        <mvt:item name="readytheme" param="navigationset( 'real_roses' )" />
    <mvt:elseif expr="l.settings:cats_real_roses EQ '1'">
        <h2>Shop All Rose Collections</h2>
        <mvt:item name="readytheme" param="navigationset( 'real_roses' )" />
    <mvt:elseif expr="l.settings:cats_anniversary_gifts EQ '1'">
        <h2>Shop Related Anniversary Collections</h2>
        <mvt:item name="readytheme" param="navigationset( 'anniversary_gifts' )" />
    <mvt:elseif expr="l.settings:cats_gift_ideas EQ '1'">
        <h2>Shop Related Gift Collections</h2>
        <mvt:item name="readytheme" param="navigationset( 'gift_ideas' )" />
    </mvt:if>
</section>

Then add Content Section Item to CTGY wherever you want it to display:

<mvt:item name="readytheme" param="contentsection( 'ctgy_related_cats' )" />

If you want to see all this on a live site:

Subcategories: https://www.loveisarose.com/24k-gold-roses.html (above category product list)

Related Categories: https://www.loveisarose.com/rose-and-vase-sets.html (below category product list)



I don't think people realize how powerful the navigation sets and content sections can be.

If set up properly, it's pretty easy for clients to update the navigation sets as well by just pointing and clicking.

And if setting up a new navigationset, the only code they need to copy and paste is:

<mvt:item name="readytheme" param="contentsection( 'ctgy_category_navsets' )" />

The Related Categories will take slightly more Miva Admin / SMT coding knowledge though. That part may depend on how often the site is adding new parent/subcategories.



This type of setup can even be coupled with the Transients Module by Tess to cache the content generated (to help with performance) if there are a lot of conditional statements within the content sections.

The only thing left to make this better would be synching the category tree. I may replicate that into a navigation set with collapsible subcategories in the future.


Hopefully this helps you or anyone else looking to have the same category "assigned" to multiple "Parent Categories".

Cheers Fellow Miva Enthusiasts!

[delcorsets]

SidFeyDesigns That's a great technique - I never thought to leverage Navigation Sets for subcats. Thanks for sharing!

[SidFeyDesigns]

SidFeyDesigns That's a great technique - I never thought to leverage Navigation Sets for subcats. Thanks for sharing!

Not a problem! Over the years I've learned a lot from this forum. So when I can, I like to return the favor / pay it forward.

[lesliekirk]

SidFeyDesigns Hey Nick, so I'll think about this to see if it will work for me. What I'm needing is the ability to include custom field content for each of the categories. I also need to use "thumbnail" images. I do want to keep it simple enough for the store owner to change out. The Navigations Sets "might" be able to do that IF I can get the Category Custom Fields included in the "pull". Well, ya got me thinking - thanks!

[SidFeyDesigns]

lesliekirk not a problem. BTW the first snippet of code included in my post includes the category tree image if that is what you're referring to as the "thumbnail" image.

Just got your direct message. I'll be responding shortly.

[lesliekirk]

I took up Nick's suggestion to use the Navigation Sets. Leave it to me to run into a snag. The only Category Custom Field that is "working" (being displayed) is the top_category_image Catgeory Custom Field. This is the code snippet I am using:

<mvt:if expr="NOT ISNULL l.settings:readytheme:navigationitems">
<style>
.x-product-list__figure-caption {font-size: 0.9rem;}
</style>
<section class="o-layout u-grids-1 u-grids-1--m u-grids-2--l x-product-list">
<mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
<mvt:item name="customfields" param="Read_Category_Code(l.settings:navigationitem:link_dest, 'top_category_image', l.settings:navigationitem:top_category_image)" />
<div class="o-layout__item x-product-list__item t-defer-object" data-defer>

<a class="u-block x-product-list__link" href="&mvte:navigationitem:url;" title="&mvte:navigationitem:name;" target="&mvte:navigationitem:link_targ;">
<figure class="x-product-list__figure">
<picture class="x-product-list__picture u-text-center">

<img class="x-product-list__image" data-src="&mvte:navigationitem:top_category_image;" src="&mvte:navigationitem:top_category_image;" alt="&mvte:navigationitem:name;" width="510" height="402">

<mvt:item name="customfields" param="Read_Category_Code(l.settings:navigationitem:link_dest, 'hp_short_desc', l.settings:navigationitem:hp_short_desc)" />
<div class="overlay">&mvt:hp_short_desc;</div>
</picture>
<figcaption class="x-product-list__figure-caption"> <span class="x-product-list__name u-color-oxide" style="padding-bottom:0;">&mvte:navigationitem:name;</span>
<mvt:item name="customfields" param="Read_Category_Code(l.settings:navigationitem:link_dest, 'catbasicprice', l.settings:navigationitem:catbasicprice)" />
<span class="u-color-black">Basic Kitchen Starting at &mvt:catbasicprice;</span><br>
<mvt:item name="customfields" param="Read_Category_Code(l.settings:navigationitem:link_dest, 'catshiptime', l.settings:navigationitem:catshiptime)" />
<span class="u-color-black">Ships within &mvt:catshiptime;</span> </figcaption>
</figure>
</a> <a href="&mvte:navigationitem:url;" title="&mvte:navigationitem:name;">
<button class="c-button c-button--full c-button--large c-control-group__button u-bg-primary u-color-yellow u-text-bold u-font-small u-text-uppercase">Shop Now &gt;</button>
</a> </div>
</mvt:foreach>
</section>
<br>
<!-- end -->
</mvt:if>

These Category Custom Fields do work when I use them in other places. Why not here?

[lesliekirk]

I figured it out. I changed the

l.settings:navigationitem:catbasicprice and l.settings:navigationitem:catshiptime

to

l.settings:catbasicprice and l.settings:catshiptime

[SidFeyDesigns]

Glad you got things figured out.