Announcement

Collapse
No announcement yet.

Adding Product Images To Your Basket In PR8

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

    #46
    Re: Adding Product Images To Your Basket In PR8

    Ok = We have only about 380 products so this could be very cool to have small pictures of our CDs on the basket. I did everything up to step 3 of the instructions but i need some help with the code to add to the BASK page.

    My costume code name for the picture is "invoiceimage". So I guess the basic code I would use is "&mvte:item:imagetypes:invoiceimage". But this does not say how small to make the image as full size is too large. So I am thinking 1/2 side would be good. Does anyone know the complete code for this and where it should go?

    Here is the BASK page code:

    Code:
    <mvt:if expr="l.settings:basket:empty">
    Your shopping basket is currently empty.<br />
    <mvt:exit />
    </mvt:if>
    
    
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td class="listheader baskettext_left" colspan="2"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Product Name</h4></td>
    <td class="listheader baskettext_right"><h4>Quantity</h4></td>
    <td class="listheader baskettext_right"><h4>Price/Ea.</h4></td>
    <td class="listheader baskettext_right"><h4>Total</h4></td>
    </tr>
    <tr><td colspan="5">&nbsp;</td></tr>
    <mvt:foreach iterator="item" array="basket:items">
    
    
    <tr>
    <td valign="top" width="50">
        <form method="post" action="&mvt:global:sessionurl;">
        <input type="hidden" name="Screen" value="BASK">
        <input type="hidden" name="Action" value="RPRD">
        <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;">
        <input type="hidden" name="Basket_Line" value="&mvte:item:line_id;">
        <mvt:item name="buttons" param="Remove" />
        </form>
    </td>
    
    
    <td class="baskettext_left">
    
    
        <a href="http://&mvt:global:domain:name;/&mvta:item:code;">&mvt:item:name;</a>
    
    
        <mvt:if expr="l.settings:item:upsold">
        (Special Offer)&nbsp;&nbsp;
        </mvt:if>
    </td>
    <td class="baskettext_right" style="white-space: nowrap; padding: 0">
        <mvt:if expr="l.settings:item:upsold">
        &mvt:item:quantity;
        <mvt:else>
        <form method="post" action="&mvt:global:sessionurl;">
        <input type="hidden" name="Screen" value="BASK">
        <input type="hidden" name="Action" value="QNTY">
        <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;">
        <input type="hidden" name="Basket_Line" value="&mvte:item:line_id;">
        <mvt:item name="cim_qmin" param="bask" />
        <mvt:item name="buttons" param="Update" />
        </form>
        </mvt:if>
    </td>
    
    
    <td class="baskettext_right">
    &mvt:item:formatted_price;
    </td>
    
    
    <td class="baskettext_right">
    &nbsp;&mvt:item:formatted_subtotal;
    </td>
    
    
    </tr>
    
    
    <mvt:foreach iterator="option" array="item:options">
    
    
    <tr>
    <td></td>
    <td class="baskettext_left">
    
    
    <mvt:if expr="l.settings:option:option_id">
    &mvt:option:attr_prompt;: &mvt:option:opt_prompt; 
    <mvt:elseif expr="NOT ISNULL l.settings:option:data">
    &mvt:option:attr_prompt;: &mvt:option:data; 
    <mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
    &mvt:option:attr_prompt;: &mvt:option:data_long; 
    <mvt:else>
    &mvt:option:attr_prompt; 
    </mvt:if>
    
    
    </td>
    <td></td>
        <td class="baskettext_right">
        <mvt:if expr="l.settings:option:price">
        &mvt:option:formatted_price;
        </mvt:if>
            </td>
    
    
            <td class="baskettext_right">
        <mvt:if expr="l.settings:option:price">
        &mvt:option:formatted_subtotal;
        </mvt:if>
            </td>
    
    
    </tr>
    </mvt:foreach>
    
    
    
    
    </mvt:foreach>
    
    
    
    
    <mvt:foreach iterator="charge" array="basket:charges">
    <tr>
    <td></td>
    <td colspan="2" class="baskettext_left">
    <i>&mvt:charge:descrip;</i>
    </td>
    <td class="baskettext_right">
    &mvt:charge:formatted_disp_amt;
    </td>
    </tr>
    </mvt:foreach>
    
    
    <tr>
    <td colspan="5" id="total">
    <h5>Total:</h5>
    &nbsp;
    <h5>&mvt:basket:formatted_total;</h5>
    </td>
    </tr>
    </table>
    Thanks for your help!
    http://www.invinciblemusic.com

    Comment


      #47
      Re: Adding Product Images To Your Basket In PR8

      When you assign the image type to your basket page, a new tab called "Image Machine Image Dimensions" should show up on the page. This is where you can define how big you want the image to be.
      Brennan Heyde
      VP Product
      Miva, Inc.
      [email protected]
      https://www.miva.com

      Comment


        #48
        Re: Adding Product Images To Your Basket In PR8

        Also, here is the default basket contents code that has been modified to support the basket image:

        Code:
        <mvt:if expr="l.settings:basket:empty">
        Your shopping basket is currently empty.
        <p><mvt:item name="cssui_links" param="storefront">Home</mvt:item></p>
        <mvt:exit />
        </mvt:if>
        <table>
            <tr class="basket-heading">
                <td class="item-remove">&nbsp;</td>
                <td class="item-image">&nbsp;</td>
                <td class="item-name">Item</td>
                <td class="item-quantity">Qty.</td>
                <td class="item-price">Item Price</td>
                <td class="item-total">Total Price</td>
            </tr>
            <mvt:foreach iterator="item" array="basket:items">
            <tr>
                <td class="item-remove">
                    <form method="post" action="&mvt:global:sessionurl;Screen=BASK">
                    <input type="hidden" name="Action" value="RPRD" />
                    <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                    <input type="hidden" name="Basket_Line" value="&mvte:item:line_id;" />
                    <input type="hidden" name="Offset" value="&mvte:global:Offset;" />
                    <input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
                    <input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
                    <input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
                    <input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
                    <mvt:item name="buttons" param="Remove" />
                    </form>
                </td>
                <td class="item-image">
                    <mvt:if expr="NOT ISNULL l.settings:item:imagetypes:basket">
                         <img src="&mvte:item:imagetypes:basket;" alt="&mvt:item:name;" title="&mvt:item:name;" />
                    <mvt:else>
                         &nbsp;
                    </mvt:if>
                </td>
                <td class="item-name">
                    <div class="special-offer"><mvt:if expr="l.settings:item:upsold">(Special Offer)</mvt:if></div>
                    <div class="item-name">&mvt:item:name; - 
                    <span class="item-code">
                        <a href="&mvt:global:sessionurl;Screen=PROD&amp;Store_Code=&mvta:global:Store_Code;&amp;Product_Code=&mvta:item:code;">&mvt:item:code;</a>
                    </span>
                    </div>
                </td>
                <td class="item-quantity">
                    <mvt:if expr="l.settings:item:upsold">
                    &mvt:item:quantity;
                    <mvt:else>
                    <form method="post" action="&mvt:global:sessionurl;Screen=BASK">
                    <input type="hidden" name="Action" value="QNTY" />
                    <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                    <input type="hidden" name="Basket_Line" value="&mvte:item:line_id;" />
                    <input type="hidden" name="Old_Screen" value="BASK" />
                    <input type="hidden" name="Offset" value="&mvte:global:Offset;" />
                    <input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
                    <input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
                    <input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
                    <input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
                    <input type="text" name="Quantity" class="textfield basket-qty-input small" value="&mvt:item:quantity;" />
                    <mvt:item name="buttons" param="Update" />
                    </form>
                    </mvt:if>
                </td>
                <td class="item-price">&mvt:item:formatted_price;</td>
                <td class="item-total">&mvt:item:formatted_subtotal;</td>
            </tr>
            <mvt:foreach iterator="option" array="item:options">
            <tr class="item-options">
                <td class="item-remove">&nbsp;</td>
                <td class="item-image">&nbsp;</td>
                <td class="item-name">
                    <mvt:if expr="l.settings:option:option_id">
                    &mvt:option:attr_code;: &mvt:option:opt_code;
                    <mvt:elseif expr="NOT ISNULL l.settings:option:data">
                    &mvt:option:attr_code;: &mvt:option:data;
                    <mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
                    &mvt:option:attr_code;: &mvt:option:data_long;
                    <mvt:else>
                    &mvt:option:attr_code;
                    </mvt:if>
                </td>
                <td class="item-quantity">&nbsp;</td>
                <td class="item-price">
                    <mvt:if expr="l.settings:option:price">
                    &mvt:option:formatted_price;
                    <mvt:else>
                    &nbsp;
                    </mvt:if>
                </td>
                <td class="item-total">
                    <mvt:if expr="l.settings:option:price">
                    &mvt:option:formatted_subtotal;
                    <mvt:else>
                    &nbsp;
                    </mvt:if>
                </td>
            </tr>
            </mvt:foreach>
            </mvt:foreach>
            <mvt:foreach iterator="charge" array="basket:charges">
            <tr class="basket-charges">
                <td colspan="3">&nbsp;</td>
                <td class="charge-description">&mvt:charge:descrip;:</td>
                <td class="formatted-charge">&mvt:charge:formatted_disp_amt;</td>
            </tr>
            </mvt:foreach>
            <tr id="basket-totals">
                <td colspan="4">&nbsp;</td>
                <td class="total-prompt">Total:</td>
                <td class="formatted-total">&mvt:basket:formatted_total;</td>
            </tr>
        </table>
        <div class="clear"></div>
        Also this code is from a CSSUI store, but the you should be able to pick out what you need for your specific code.
        Last edited by Brennan; 03-12-12, 08:37 AM.
        Brennan Heyde
        VP Product
        Miva, Inc.
        [email protected]
        https://www.miva.com

        Comment


          #49
          Re: Adding Product Images To Your Basket In PR8

          You think you've heard everything...

          We have a few product like floor mats, car covers, etc that you can customize based on color, embroidered logo, etc...

          We also use Bill's Restock Shelves to email customers that have abandoned baskets.

          We've had no less than 3 people respond that they abandoned the basket because the thumbnail image did not match what they'd selected. Go figure...yeah, I guess it makes sense but who woulda ever thought...

          Comment


            #50
            Re: Adding Product Images To Your Basket In PR8

            Looks like this thread is a bit old but I have a quick question regarding thumbnails on the Basket page. Maybe I'm going crazy here but for years we've just used the code:

            Code:
            <img src="&mvt:item:thumbnail;">
            However, on a new Miva install site it's not working. The new site and old site seem to be exactly the same except that image management is turned on in the new store. Did the addition of the image machine functionality remove that variable? Is there something else I'm missing?

            Thanks for any thoughts on this.
            Joe McDonald
            patrickwebby.com

            Comment


              #51
              Re: Adding Product Images To Your Basket In PR8

              I don't think the thumbnail or full-size image variables have ever been available to display in the basket page (or any of the checkout pages)

              You can use image types which are supported and allow you to display the specific color or there are functions in toolkit that can call in the product images on any page:

              Code:
              <mvt:item name="toolkit" param="prodthumb|imgurl|l.all_settings:item:code" />
              <mvt:if expr="g.imgurl">
                  <img src="&mvte:global:imgurl;" border="0">
              </mvt:if>
              Brennan Heyde
              VP Product
              Miva, Inc.
              [email protected]
              https://www.miva.com

              Comment


                #52
                Re: Adding Product Images To Your Basket In PR8

                Hey Brennan,

                Thanks for the follow-up on this. I'm trying to reverse engineer my code from another site but it is definitely using that item:thumbnail variable in the basket contents tab of the BASK screen and the default product thumbnail is showing up in the cart. I just can't figure out why it's working lol

                Anyway, if you're interested I can provide the site info if you want to take a look at, but other then that I'm stumped. I can't see any module that is being used and although the Toolkit is installed, it's not using those functions to call it.

                Hope all is well with you.

                Thanks,
                Joe
                Joe McDonald
                patrickwebby.com

                Comment


                  #53
                  Re: Adding Product Images To Your Basket In PR8

                  Yeah, Private Message me temporary admin access and I will login and see what is going on.
                  Brennan Heyde
                  VP Product
                  Miva, Inc.
                  [email protected]
                  https://www.miva.com

                  Comment


                    #54
                    Re: Adding Product Images To Your Basket In PR8

                    So we should be able to use our existing thumbnails? Should the thumbnails be of a certain size to be best viewed in the basket contents?

                    Originally posted by pbrynie View Post
                    Steps to resolve this:

                    1) Create an image type under Products > Image Types
                    2) Install the Product Image Custom Fields module under Utilities
                    3) Export products to flat file, making sure to check the image type
                    4) In the resulting file, move or copy the contents of the thumbnail fields to the image type fields
                    5) Import the products to update them
                    6) Edit the BASK page and on the Basket Contents tab, check the image type you created
                    7) You can now render product images by using &mvt:item:imagetypes:YOUR_IMAGE_TYPE_CODE; within the items foreach loop

                    Keep in mind, these new additional images are automatically re-sized based on the settings of the Image Dimensions tabs on PROD and BASK, so you would most likely want to add the full-sized image to the image type for this.

                    Regards,

                    Comment

                    Working...
                    X