Displaying Image in Sub-Sub-Category

[lesliekirk]

I figured it would be better to start a new thread instead of convoluting an old one. Everything works great except for the product image. I've tried a couple different things but nothing is displaying the image

<mvt:assign name="l.settings:subcat:id" value=" " />
<mvt:do name="l.result" file="g.Module_Library_DB" value="Category_Load_Code( g.Category_Code, l.settings:current_category )" />
<mvt:do name="l.result" file="g.Module_Library_DB" value="Runtime_CategoryList_Load_Parent( l.settings:current_category:id, l.settings:sub_categories )" />

<mvt:assign name="l.subcat_count" value="miva_array_elements( l.settings:sub_categories )" />

<mvt:if expr="l.subcat_count GT 0">
<mvt:foreach iterator="subcat" array="sub_categories">
<h2 style="font-size:1.4rem; font-weight:bold;"><a name="&mvt:subcat:code;"></a>&mvte:subcat:name;</h2>
<mvt:assign name="l.settings:sub_categories2" value=" " />
<mvt:do name="l.result" file="g.Module_Library_DB" value="Runtime_CategoryList_Load_Parent( l.settings:subcat:id, l.settings:sub_categories2 )" />
<mvt:assign name="l.subcat2_count" value="miva_array_elements( l.settings:sub_categories2 )" />
<mvt:if expr="l.subcat2_count GT 0">
<mvt:foreach iterator="subcat2" array="sub_categories2">
<section>
<p></p>
<ul class="c-form-list o-layout o-layout--wide">
<li class="c-form-list__item o-layout__item u-width-10--m">
<a name="&mvte:subcat2:code;"></a>
<h3><strong>&mvte:subcat2:name;</strong></h3></li>
<li class="c-form-list__item o-layout__item u-width-2--m">
<h3> <a href="/&mvt:category:code;.html#top"><span class="u-font-small u-icon-chevron-up"></span>
<strong class="u-color-red">Back to top</strong></a></h3></li>
</ul>
</section>
<mvt:comment>tweaked with Ted's code</mvt:comment>

<mvt:assign name="l.settings:myProducts" value="0" />
<mvt:do name="l.doit" file="g.Module_Library_DB" value="Runtime_ProductList_Load_Offset_Category( l.settings:subcat2:id, g.Offset, l.settings:null, g.NextOffset, l.settings:myProducts )" />

<section class="o-layout o-layout--row--l o-layout--wide">
<div class="o-layout__item u-width-3--l">

<mvt:do file="g.Module_Root $ '/modules/component/cmp-cssui-cattitle.mvc'" name="l.success" value="CSSUI_CatTitle_Load(l.settings:subcat2:id, l.settings:subcat2:title_image)" />
<img src="&mvt:subcat2:title_image:image;" alt="&mvte:subcat2:name;">
</div>
<div class="o-layout__item u-width-9--l">
<mvt:foreach iterator="product" array="myProducts">
<section>
<form class="o-layout__item u-width-12 inline-labeling ctgy-add-form" data-hook="purchase" action="&mvte:urls:BASK:auto;" method="post" name="add">
<input type="hidden" name="Action" value="ADPR" />
<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
<ul class="c-form-list o-layout o-layout--wide">
<li class="c-form-list__item o-layout__item u-width-2--m">
<mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
<a data-mm-linktype="product-list-link" href="&mvte:product:link;"><img src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" /></a>
<mvt:else>
&mvt:category_listing:products:imagetypes:main;
</mvt:if>
<!-- <img src="&mvt:product:image;" alt="&mvte:product:name;" /> -->

</li>
<li class="c-form-list__item o-layout__item u-width-4--m">

<mvt:item name="customfields" param="Read_Product_ID(l.settings:product:id, 'index', l.settings:product:index)" />
<mvt:if expr="NOT ISNULL l.settings:product:index">
<a href="/&mvt:product:code;.html"><span>&mvt:product:nam e;</span></a>
<mvt:else>
<span>&mvt:product:name;</span>
</mvt:if>
<mvt:comment>
<mvt:if expr="NOT ISNULL l.settings:product:descrip">
<br>&mvt:product:descrip;
</mvt:if>
</mvt:comment>
<mvt:item name="customfields" param="Read_Product_ID(l.settings:product:id, 'notes', l.settings:product:notes)" />
<mvt:if expr="NOT ISNULL l.settings:product:notes">
<br><div class="custom-field" id="customfields-notes"><span class="bold">Notes:</span> &mvt:product:notes;</div>
</mvt:if>
</li>
<li class="c-form-list__item o-layout__item u-width-2--m"> <span>$<mvt:eval expr="l.settings:product:price ROUND 2" /></span></li>
<li class="c-form-list__item o-layout__item u-width-1--m"><span>
<input class="form-control form-control-sm col-sm-4 text-center float-right cart-quantity ctgyQuantity" autocomplete="off" style="margin:0 auto" type="tel" min="0" name="Quantity" value="1">
</span></li>
<li class="c-form-list__item o-layout__item u-width-3--m">
<input type="submit" value="Add to Cart" class="ctgyCart 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">
</li>
</ul>
</form>
<hr class="c-keyline">
</section>
</mvt:foreach>

</div>
</section>
</mvt:foreach>

<mvt:assign name="l.settings:sub_categories2" value=" " />
</mvt:if>
</mvt:foreach>
</mvt:if>

I have tried more than the 3 things highlighted in the code. I'm thinking maybe it needs some sort of Read_Product like what the customfields have. Is that what I need?

[Scot - ScotsScripts.com]

You need to load the product image type:

https://docs.miva.com/api-functions/...mage_load_type

Then load the image based on the image id you get in the structure from the previous func:

https://docs.miva.com/api-functions/image_load_id

Then if you want to use a thumb you load the generated images from the image id and find the size you want:

https://docs.miva.com/api-functions/...ist_load_image

[Scot - ScotsScripts.com]

Another option is make an extended product info module that gives you everything you need with one page item. I could make that in two hours if your client wants to pay for a couple hours of my dev time.

[lesliekirk]

You need to load the product image type:

https://docs.miva.com/api-functions/...mage_load_type

Then load the image based on the image id you get in the structure from the previous func:

https://docs.miva.com/api-functions/image_load_id

Then if you want to use a thumb you load the generated images from the image id and find the size you want:

https://docs.miva.com/api-functions/...ist_load_image

Yeah, I went straight to this one thinking I could figure it out, but I'm getting in my own way

<mvt:do name="l.success" file="g.Module_Library_DB" value="ProductImage_Load_Type(l.settings:product:i d, 1, l.settings:imagetype)" />
<mvt:do name="l.success" file="g.Module_Library_DB" value="Image_Load_ID(l.settings:imagetype:image_id , l.settings:imagedata)" />
<mvt:assign name="g.socialImage" value="g.baseurl $ l.settings:imagedata:image" />

[lesliekirk]

Ahhh, so I know where I've seen this before. Again, I'm one that works best from examples

<mvt:do file="g.Module_Library_DB" name="l.success" value="ImageType_Load_Code('main', l.settings:imagetype)" />
<mvt:do name="l.success" file="g.Module_Library_DB" value="ProductImage_Load_Type(l.settings:product:i d, 1, l.settings:imagetype)" />
<mvt:do name="l.success" file="g.Module_Library_DB" value="Image_Load_ID(l.settings:imagetype:image_id , l.settings:imagedata)" />
<mvt:assign name="g.socialImage" value="l.settings:imagedata:image" />
<a data-mm-linktype="product-list-link" href="&mvte:product:link;"><img src="&mvt:global:socialImage;" alt="&mvte:product:name;" height="75" style="max-height:75px;" /></a>

Now I still haven't figured out the generated size thing or how to display an "no image" image for products that don't have product image but it's getting closer. While what I'm trying to do might be obscure I'll post the code for posterity in the hopes that someone else might learn from my bumbling around.

[lesliekirk]

So found this https://docs.miva.com/code-samples/o...-product-image (yeah, I know this isn't what Scot suggested but I found it in the Miva docs), thinking it might help me understand how to find/use the generated size image. I've got the category image set to generate at 75x75.

<mvt:assign name="l.constraints[1]:height" value="75" />
<mvt:assign name="l.constraints[1]:width" value="75" />
<mvt:assign name="l.imagetype_codes[1]" value="'main'" />

<mvt:assign name="l.constraints_count" value="miva_array_elements( l.constraints )" />
<mvt:assign name="l.imagetypecode_count" value="miva_array_elements( l.imagetype_codes )" />

<mvt:do file="g.Module_Library_DB" name="l.imagedata_count" value="ProductImageDataList_Load_Product_TypeCodes _Constrained(l.settings:product:id, l.imagetype_codes, l.imagetypecode_count , l.constraints,l.constraints_count,l.settings:produ ctimagedatalist)" />

<mvt:comment>
| Check and see if the image exists, if not, Generate the file and return its path.
</mvt:comment>

<mvt:if expr="ISNULL l.settings:productimagedatalist[1]:generatedimages[1]:image">
<mvt:do file="g.Module_Library_DB" name="l.ok" value="GeneratedImage_FindOrInsert_Image_Dimension s( l.settings:productimagedatalist[1]:image, l.constraints[1]:width, l.constraints[1]:height, l.settings:generatedimage )" />

<a data-mm-linktype="product-list-link" href="<a href="/&mvt:product:code;.html"><img src="&mvt:generatedimage:image;" alt="&mvte:product:name;-generated" /></a>
<mvt:else>
<a data-mm-linktype="product-list-link" href="/&mvt:product:code;.html"><img src="&mvt:productimagedatalist[1]:generatedimages[1]:image;" alt="&mvte:product:name;-data" /></a>
</mvt:if>

I added a tag at the end of the alt tag &mvte:product:name; to try and track which is a generated image and which is not. If I understand this function correctly, if the 75x75 image does not exist, one will be created.

In the template that I am using this, all of the images are displaying the product name-data - but what is happening (and I think it's actually doing what is should be doing) is that if there isn't an image it's finding some image file and creating the product image. What I really need it to do is display a default "Image Coming Soon" image file. But if the function is same for every product how does it really know if there isn't an image available?

[lesliekirk]

Okay boys and girls, I just got tired of not knowing what I don't know I went back to something I did know.

Two lines of Toolkit coding and I have been able to create exactly what I need:

 <mvt:item name="toolkit" param="customimagec|thumbnail|l.all_settings:product:code||75|75|1" />
<a data-mm-linktype="product-list-link" href="/&mvt:product:code;.html">
<mvt:if expr="g.thumbnail">
<img src="&mvte:global:thumbnail;" alt="&mvte:product:name;" />
<mvt:else>
<img src="graphics/00000001/1/image-coming-soon_75x75.png" alt="&mvte:product:name;" />
</mvt:if>
</a>

Sigh...(miss you Bill)

[lesliekirk]

Some days persistence will win out. With a shout out to aarcmedia and RTHOMASDESIGN from this old post https://www.miva.com/forums/forum/on...tegories/page2 I was able to fix the code to no longer need the Toolkit.

It is with bittersweetness that I share the portion of the fix I needed for the main image thumbnail and the canonical URI

 <!-- placed outside product loop -->
<mvt:assign name="l.settings:img:width" value="160"/>
<mvt:assign name="l.settings:img:height" value="160"/>

<mvt:foreach iterator="product" array="myProducts">
<mvt:assign name="l.uri:store_id" value="g.Store:id" />
<mvt:assign name="l.uri:screen" value="''" />
<mvt:assign name="l.uri:page_id" value="0" />
<mvt:assign name="l.uri:cat_id" value="0" />
<mvt:assign name="l.uri:product_id" value="l.settings:product:id" />
<mvt:do file="g.Module_Feature_URI_DB" name="l.have_uri" value="URI_Load_Item_Canonical( l.uri, l.settings:canonical_uri )" />

<section>
<form class="o-layout__item u-width-12 inline-labeling ctgy-add-form" data-hook="purchase" action="&mvte:urls:BASK:auto;" method="post" name="add">
<input type="hidden" name="Action" value="ADPR" />
<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
<ul class="c-form-list o-layout o-layout--wide">
<li class="c-form-list__item o-layout__item u-width-2--m">

<!-- placed within the product loop -->
<mvt:do file="g.Module_Library_DB" name="l.settings:sub_category:product:image_count" value="ProductImageDataList_Load_Product(l.setting s:product:id, l.settings:product:images)" />
<mvt:foreach iterator="image" array="product:images">
<mvt:if expr="l.settings:image:imagetype:code EQ 'main'">
<mvt:assign name="l.settings:product:main_image" value="l.settings:image" />
<mvt:foreachstop/>
</mvt:if>
</mvt:foreach>

<mvt:do file="g.Module_Library_DB" name="l.result" value="GeneratedImage_FindOrInsert_Image_Dimension s( l.settings:product:main_image:image, l.settings:img:width, l.settings:img:height, l.settings:product:main_image:generated )" />
<mvt:assign name="l.settings:image:mainthumb" value="l.settings:product:main_image:generated:image" />

<a data-mm-linktype="product-list-link" href="&mvt:canonical_uri:uri;">

<mvt:if expr="l.settings:image:mainthumb">
<img src="&mvte:image:mainthumb;" alt="&mvte:product:name;" />
<mvt:else>
<img src="graphics/00000001/1/image-coming-soon_160x160.png" alt="&mvte:product:name;" />
</mvt:if>
</a>
</li>
<li class="c-form-list__item o-layout__item u-width-4--m">
<mvt:item name="customfields" param="Read_Product_ID(l.settings:product:id, 'index', l.settings:product:index)" />
<mvt:if expr="NOT ISNULL l.settings:product:index">

<a href="&mvt:canonical_uri:uri;"><span>&mvt:product: name;</span></a>
<mvt:else>
<span>&mvt:product:name;</span>
</mvt:if>

[Leanne]

Nice work, Leslie!

[lesliekirk]

Nice work, Leslie!

Thank you Leanne but I can't take all the credit. This was a collaborative work of shared efforts. I think even you may have had a touch in this too. So thank you too!