Announcement

Collapse
No announcement yet.

Displaying product image on sub-sub-category page

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Displaying product image on sub-sub-category page

    I'm moving right along on getting Toolkit coding converted over but now I'm stuck trying to get the product image - the Image Type main generated thumbnail - within the code.

    I have tried 3 methods, none display the image. Everything else displays correctly.

    Code:
    <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">
    
    <img class="x-product-list__image" data-src="&mvt:product:image;" src="" alt="&mvte:product:name;">
    
     <img src="&mvt:product:customfield_values:productimagecustomfields:main;" alt="&mvt:product:name;" title="&mvt:product:name;">
    
    <mvt:item name="customfields" param="Read_Product_ID(l.settings:product:id, 'main', l.settings:product:main)" />
        <mvt:if expr="NOT ISNULL l.settings:product:main">
     <img src="&mvt:product:main;"/>
        </mvt:if>
    
    </li>
                    <li class="c-form-list__item o-layout__item u-width-5--m"><a href="/&mvt:product:code;.html"><span>&mvt:product:name;</span></a>
            <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" 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-2--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-black u-text-bold u-font-small u-text-uppercase">
                    </li>
                  </ul>
                </form>
                <hr class="c-keyline">
              </section>
            </mvt:foreach>

    What do I need to do to pull the image in?

    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • lesliekirk This code here: https://gist.github.com/steveosoule/...f614b9b2927741 has really good code for getting resized image as long as the main image is big enough to need resizing. I have also found that if the image is so small it does not need to be resized then that code is not enough.
    Colin Puttick
    I solemnly swear that I am up to no good...

    Comment


    • Originally posted by dreamingdigital View Post
      lesliekirk This code here: https://gist.github.com/steveosoule/...f614b9b2927741 has really good code for getting resized image as long as the main image is big enough to need resizing. I have also found that if the image is so small it does not need to be resized then that code is not enough.
      So it's going to be a matter of using this as a starting point then figuring out what "recently_viewed" should be, "product" maybe?


      Code:
      <mvt:assign name="l.settings:recently_viewed:image:width" value="150" />
      <mvt:assign name="l.settings:recently_viewed:image:height" value="150" />
      <mvt:do file="g.Module_Library_DB" name="l.result" value="ImageType_Load_Code( 'main', l.settings:recently_viewed:image:type )" />
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


      • Hey Leslie,
        I posted a solution for this a couple of months ago here. Here's the code:

        HTML Code:
        <!-- placed outside product loop -->
        <mvt:assign name="l.settings:img:width" value="400"/>
        <mvt:assign name="l.settings:img:height" value="400"/>
        
        <!-- 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.settings: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_Dimensions( 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" />
        
        &mvte:image:mainthumb;
        You should be good to go with this :) -Ryan
        Last edited by RTHOMASDESIGN; 05-20-20, 12:13 PM.

        Comment


        • Thanks, Ryan - it didn't work. But I think it might be due to the sub sub category nesting. I'll dink around with and see if I can figure it out
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


          • Huh, I'm using the code in a "sub sub category" nesting as well. You can see it working here: https://www.tacer.biz/chiavari-chairs.html. Anyway, let me know if you need further help.

            Comment


            • I took a peek at the token list - nothing is found for &mvte:image:mainthumb; but it sees an image path for &mvt:image:image:image; (which is an image assigned to one of the products in the category).

              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


              • FYI - here's the code I'm using

                Code:
                    
                    <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="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.2rem; font-weight:bold;"><a name="&mvt:subcat:code;"></a><span style="color:#ff0000;">&mvte:subcat:name;</span></h2>
                    <mvt:assign name="l.settings:sub_categories2" value=" " />
                    <mvt:do name="l.result" file="g.Module_Library_DB" value="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 style="color:#ff0000;">&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 style="color:#ff0000;">Back to top</strong></a></h3></li>
                              </ul>
                              </section>
                
                
                          <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>
                          <ul class="c-form-list o-layout o-layout--wide u-text-uppercase">
                  <li class="c-form-list__item o-layout__item u-width-2--m"></li>
                            <li class="c-form-list__item o-layout__item u-width-5--m"><span>Name</span></li>
                            <li class="c-form-list__item o-layout__item u-width-2--m"><span>Price</span></li>
                            <li class="c-form-list__item o-layout__item u-width-3--m"></li>
                          </ul>
                        </section>
                
                <mvt:assign name="l.settings:img:width" value="400"/>
                <mvt:assign name="l.settings:img:height" value="400"/>
                        <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:do file="g.Module_Library_DB" name="l.settings:sub_category:product:image_count" value="ProductImageDataList_Load_Product(l.settings: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_Dimensions( 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" />
                
                <img class="x-product-list__image" data-src="&mvte:image:mainthumb;" src="" alt="&mvte:product:name;-1">
                                </li>
                                <li class="c-form-list__item o-layout__item u-width-5--m"><a href="/&mvt:product:code;.html"><span>&mvt:product:name;</span></a>
                
                        <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" 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-2--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-black u-text-bold u-font-small u-text-uppercase">
                                </li>
                              </ul>
                            </form>
                            <hr class="c-keyline">
                          </section>
                        </mvt:foreach>
                      </mvt:foreach>
                      <mvt:assign name="l.settings:sub_categories2" value=" " />
                    </mvt:if>
                  </mvt:foreach>
                </mvt:if>
                Leslie Kirk
                Miva Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment


                • I added this to the same <li> where the other image code is at to see what I could see:

                  Code:
                  <mvt:do name="l.image_count" file="g.Module_Library_DB" value="ProductImageDataList_Load_Product(l.settings:product:id, l.settings:imagedata)" />
                  
                  <mvt:foreach iterator="data" array="imagedata">
                  
                  
                      Image Data:<br>
                      &mvt:data:image:id;<br>
                      &mvt:data:image:height;<br>
                      &mvt:data:image:width;<br>
                      &mvt:data:image:image;<br>
                      &mvt:data:image:refcount;<br>
                  
                  
                      ImageType Data:<br>
                      &mvt:data:imagetype:code;<br>
                      &mvt:data:imagetype:descrip;<br>
                  
                  
                  </mvt:foreach>
                  Every product shows the same data for each product
                  Leslie Kirk
                  Miva Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                  • Originally posted by dreamingdigital View Post
                    lesliekirk This code here: https://gist.github.com/steveosoule/...f614b9b2927741 has really good code for getting resized image as long as the main image is big enough to need resizing. I have also found that if the image is so small it does not need to be resized then that code is not enough.
                    Hey Colin ( dreamingdigital ) have you used the recently viewed snippet? Just wondering.
                    Leslie Kirk
                    Miva Certified Developer
                    Miva Merchant Specialist since 1997
                    Previously of Webs Your Way
                    (aka Leslie Nord leslienord)

                    Email me: [email protected]
                    www.lesliekirk.com

                    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                    Comment


                    • lesliekirk RE: used the recently viewed snippet:
                      Yes. :)

                      Colin Puttick
                      I solemnly swear that I am up to no good...

                      Comment

                      Working...
                      X

                      This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                      This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                      Accept