Start Building Professional
Web Apps Today

combo box image - fromSelect with Miva Shopping Cart

Previously posted: http://dhtmlx.com/docs/products/kb/index.php?s=normal&q=4706&a=6875

I have referenced the aforementioned question and applied the recommended answer to no avail. Everything seems to work ok, except that no images appear in the combo box. Any suggestions?

Here is my code:

         <select opt_type="image" style='width:200px;' name="Product_Attributes[&mvt:attribute:index;]:value" id="combo_zone1">
            <mvt:foreach iterator="option" array="attribute:options">
               <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settings:option:id EQ l.settings:attribute:default_id ) ) OR
                                        ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
                  <option value="&mvte:option:code;" img_src="&mvte:option:image;" selected>&mvte:option:prompt; </option>
               <mvt:else>
                  <option value="&mvte:option:code;" img_src="&mvte:option:image;">&mvte:option:prompt; </option>
               </mvt:if>
            </mvt:foreach>

<script>
        var z=dhtmlXComboFromSelect("combo_zone1");
</script>

Thanks.. that partially worked, I now see the images. The path was correct I was missing the dhtmlxcombo_extra.js file.

Now two new issues have occurred. I have searched the Knowledge Base with no luck trying to solve it myself.

1. The dhtmlXComboFromSelect does not pass the option when I press the Add button. I've tried several modifications unsuccessfully.

2. How do I specify the setDefaultImage with dhtmlXComboFromSelect. - I've also had no luck with this.

Your advice is greatly appreciated.

>> Please, explain what code Add button executes.

<input type="hidden" name="Product_Attribute_Count" value="&mvte:global:Product_Attribute_Count;">

 Thank you for all your

The combo box is for attributes/options that are passed for a product being added to a shopping cart.

This combo box does not pass the attributes when I add the item using var z=dhtmlXComboFromSelect("combo_zone1");, although it does add the item.

This is the entire options code:

<table border=0>
   <mvt:foreach iterator="attribute" array="attributes">
   <input type="hidden" name="Product_Attributes[&mvt:attribute:index;]:code" value="&mvte:attribute:code;">
      <mvt:if expr ="l.settings:attribute:template_code NE 0">
         <input type="hidden" name="Product_Attributes[&mvt:attribute:index;]:template_code" value="&mvte:attribute:template_code;">
      </mvt:if>
   <mvt:if expr = "l.settings:attribute:type EQ 'checkbox'">
   <tr>
   <td>
      &nbsp;
   </td>
   <td align="left" valign="middle">
   <mvt:item name="fonts" param="body_font">
      <mvt:if expr = "g.Product_Attributes[l.settings:attribute:index]:value">
         <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" value="Yes" checked>
      <mvt:else>
         <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" value="Yes">
      </mvt:if>
      <mvt:if expr="l.settings:attribute:image">
         <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;">
      <mvt:else>
         <mvt:if expr="l.settings:attribute:required">
            <b>&mvt:attribute:prompt;</b>
         <mvt:else>
            &mvt:attribute:prompt;
         </mvt:if>
      </mvt:if>
      </mvt:item>
   </td>
   </tr>
      <mvt:else>
   <tr>
   <td align="left" valign="top">
   <mvt:item name="fonts" param="body_font">
      <mvt:if expr="l.settings:attribute:image">
         <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;">
      <mvt:else>
         <mvt:if expr="l.settings:attribute:required">
            <b>&mvt:attribute:prompt;</b>
         <mvt:else>
            &mvt:attribute:prompt;
         </mvt:if>
      </mvt:if>
      </mvt:item>
   </td>
   <mvt:if expr="l.settings:attribute:type EQ 'text'">
   <td align="left" valign="top">
      <mvt:item name="fonts" param="body_font">
         <input type="text" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:attribute:value;" size=40>
      </mvt:item>
   </td>
   <mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
   <td align="left" valign="top">
      <mvt:item name="fonts" param="body_font">
         <textarea name="Product_Attributes[&mvt:attribute:index;]:value" rows=10 cols=58 wrap="on">&mvte:attribute:value;</textarea>
      </mvt:item>
   </td>
   <mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
   <td align="left" valign="top">
      <table border = 0>
         <mvt:foreach iterator="option" array="attribute:options">
         <tr>
         <td valign = "middle">
            <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settings:option:id EQ l.settings:attribute:default_id ) ) OR
                        ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
               <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;" checked>
            <mvt:else>
               <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;">
            </mvt:if>
         </td>
         <td valign = "middle">
            <mvt:if expr="l.settings:option:image">
               <img src="&mvte:option:image;" alt="&mvte:option:prompt;">
            <mvt:else>
               <mvt:item name="fonts" param="body_font">
                  &mvte:option:prompt;
               </mvt:item>
            </mvt:if>
         </td>
         </tr>
         </mvt:foreach>
      </table>
   </td>
   <mvt:elseif expr="l.settings:attribute:type EQ 'select'">
   <td align="left" valign="top">
      <mvt:item name="fonts" param="body_font">
      <select opt_type="image" style='width:200px;' name="Product_Attributes[&mvt:attribute:index;]:value" id="combo_zone1">
         <mvt:foreach iterator="option" array="attribute:options">
            <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settings:option:id EQ l.settings:attribute:default_id ) ) OR
                ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
               <option value="&mvte:option:code;" img_src="&mvte:option:image;" selected>&mvte:option:prompt; </option>
            <mvt:else>
               <option value="&mvte:option:code;" img_src="&mvte:option:image;">&mvte:option:prompt; </option>
            </mvt:if>
         </mvt:foreach>

<script>
var z=dhtmlXComboFromSelect("combo_zone1");
var combo =dhtmlXComboFromSelect("combo_zone1");
combo.setDefaultImage("https://www169.safesecureweb.com/glittergalore/merchant2/graphics/00000001/blank.gif");
</script>

 </select>
   </mvt:item>
   </td>
      </mvt:if>
   </tr>
      </mvt:if>
   </mvt:foreach>
   <input type="hidden" name="Product_Attribute_Count" value="&mvte:global:Product_Attribute_Count;">
</table>

I am new with scripting and editing code. I was not aware that I was to replace var z with var combo I have fixed the duplicate entry and have also uploaded the files you included.

Modified Code:
      <select opt_type="image" style='width:200px;' name="Product_Attributes[&mvt:attribute:index;]:value" id="combo_zone1">
         <mvt:foreach iterator="option" array="attribute:options">
            <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settings:option:id EQ l.settings:attribute:default_id ) ) OR
                ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
               <option value="&mvte:option:code;" img_src="&mvte:option:image;" selected>&mvte:option:prompt; </option>
            <mvt:else>
               <option value="&mvte:option:code;" img_src="&mvte:option:image;">&mvte:option:prompt; </option>
            </mvt:if>
         </mvt:foreach>
<script>
var combo =dhtmlXComboFromSelect("combo_zone1");
combo.setDefaultImage("https://www169.safesecureweb.com/glittergalore/merchant2/graphics/00000001/blank.gif");
</script>

However, I am still not getting the option to pass when I press the Add button, which submits the product to the shopping cart. I believe the value is supposed to get passed by: value="&mvte:option:code;", which is not. The product gets added but the option does not.

I've tried using this as well. var z=dhtmlXComboFromSelect("combo_zone1", "&mvte:option:code;",200);

Here is the link to where I am trying to use the code: http://store.glittergaloreandmore.com/Glitter_Stars_Jars-p-Face_and_Body_Glitter.html.

Since the modification does not work. I have commented out the code.

I want to make sure I explain myself correctly. I want to use dhtmlxcombo and  place images for various products where I use a select combo box. I want one option per select combo box. However, some products may have multiple select combo boxes.

Here is a link for a one select combo box product: http://store.glittergaloreandmore.com/Glitter_Stars_Jars-p-Face_and_Body_Glitter.html

Here is a link for a multiple select combo box product: http://store.glittergaloreandmore.com/6pc_Custom_Stack-p-Create_Your_Collection.html

My goal is to add the dhtmlxcombo feature to every product where I currently use a select box (l.settings:attribute:type EQ 'select), as noted on the pasted code on the  previous post.

When I attempt to use dhtmlxcombo as described the product gets added but not the option. I do not know hot to pass that value with Miva Merchant.

I hope that by providing the links you get a better grasp of what I am trying to do.

Thanks in advance....jr

Hi Alex,

The images do work. The paths are created dynamically with img_src="&mvte:option:image;", depending on the product.

I only want to use the dhtmlx Combo box when I use the "select type.", which is why you don't see it for the other types in the code.

The reason that I have commented the code is because it doesn't work and the website is in production mode. When I use the code the clients cannot add the product options when they add the product. I have to make sure that it is working before I apply the dhtmlxcombo script permanently.

Is there any way that we can coordinate so I can apply the script and you can see what is happening. I can do it at a predetermined time, or if you have any other suggestions, I would gladly consider them.

I am in Phoenix, Arizona time zone. I look foward to your comments.

Thank you for giving me the idea to create a duplicate test template so you could see it first hand.

Here is the link: http://store.glittergaloreandmore.com/merchant2/merchant.mvc?Screen=PRD2&Store_Code=G&Product_Code=Glitter_Stars_Jars.

So far I have only added the icon images to this product.

I look forward to your response.

I forgot to mention that when you add the product after selecting a color star, click on the shopping bag to see the item. The color is not passed. This is what I am trying to fix

>>the issue is caused by incorrect select name Product_Attributes[1]:value. It is defined as array.

This works fine as is. It stops working when I try to use the script.  Here is the link to the original template (code) without the script:  http://store.glittergaloreandmore.com/merchant2/merchant.mvc?Screen=PROD&Store_Code=G&Product_Code=Glitter_Stars_Jars

To access the test template, modify the part of the URL from Screen=PROD to Screen=PRD2. This is the template that I am using now to test the script.
 
I am not sure how to replace the array with a new name without causing the other select types or other functions not to work. Everything works fine as is. I want to add the dhtmlxcombo feature as seamlessly as possible without modifying the original code to much and wrecking something else in the process.

Is there any other way to pass the attribute?

I really appreciate your help. My understanding of this type of programing is really minimal. I am not sure how to even test what I try .

I tried your suggestions of adding the combo.DOMelem_hidden_input2.name but this works on the second and subsequent products I add. It doesn't add the option for the fist product.

Please, take a look at the sample http://dhtmlx.com/docs/products/dhtmlxCombo/samples/actions/combo_save.html. Possibly it'll help for better understanding

I would like to try again. I've been busy with other projects and am now available.

Here is the link to the combo box. http://store.glittergaloreandmore.com/merchant2/merchant.mvc?Screen=PRD2&Store_Code=G&Product_Code=Glitter_Stars_Jars

The only issue is that the option value that is selected does not get added to the cart when the add button is pressed. So if i select "Red", it does not show in the cart.

This code is at: http://store.glittergaloreandmore.com/merchant2/merchant.mvc?Screen=PRD2&Store_Code=G&Product_Code=Glitter_Stars_Jars

To test; select any color stars and add to cart. Then click the shopping bag and the color is not added. To test without combo box got to link at bottom of this post.

<table border=0>
   <mvt:foreach iterator="attribute" array="attributes">
   <input type="hidden" name="Product_Attributes[&mvt:attribute:index;]:code" value="&mvte:attribute:code;">
      <mvt:if expr ="l.settings:attribute:template_code NE 0">
         <input type="hidden" name="Product_Attributes[&mvt:attribute:index;]:template_code" value="&mvte:attribute:template_code;">
      </mvt:if>
   <mvt:if expr = "l.settings:attribute:type EQ 'checkbox'">
   <tr>
   <td>
      &nbsp;
   </td>
   <td align="left" valign="middle">
   <mvt:item name="fonts" param="body_font">
      <mvt:if expr = "g.Product_Attributes[l.settings:attribute:index]:value">
         <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" value="Yes" checked>
      <mvt:else>
         <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" value="Yes">
      </mvt:if>
      <mvt:if expr="l.settings:attribute:image">
         <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;">
      <mvt:else>
         <mvt:if expr="l.settings:attribute:required">
            <b>&mvt:attribute:prompt;</b>
         <mvt:else>
            &mvt:attribute:prompt;
         </mvt:if>
      </mvt:if>
      </mvt:item>
   </td>
   </tr>
      <mvt:else>
   <tr>
   <td align="left" valign="top">
   <mvt:item name="fonts" param="body_font">
      <mvt:if expr="l.settings:attribute:image">
         <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;">
      <mvt:else>
         <mvt:if expr="l.settings:attribute:required">
            <b>&mvt:attribute:prompt;</b>
         <mvt:else>
            &mvt:attribute:prompt;
         </mvt:if>
      </mvt:if>
      </mvt:item>
   </td>
   <mvt:if expr="l.settings:attribute:type EQ 'text'">
   <td align="left" valign="top">
      <mvt:item name="fonts" param="body_font">
         <input type="text" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:attribute:value;" size=40>
      </mvt:item>
   </td>
   <mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
   <td align="left" valign="top">
      <mvt:item name="fonts" param="body_font">
         <textarea name="Product_Attributes[&mvt:attribute:index;]:value" rows=10 cols=58 wrap="on">&mvte:attribute:value;</textarea>
      </mvt:item>
   </td>
   <mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
   <td align="left" valign="top">
      <table border = 0>
         <mvt:foreach iterator="option" array="attribute:options">
         <tr>
         <td valign = "middle">
            <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settings:option:id EQ l.settings:attribute:default_id ) ) OR
                        ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
               <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;" checked>
            <mvt:else>
               <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;">
            </mvt:if>
         </td>
         <td valign = "middle">
            <mvt:if expr="l.settings:option:image">
               <img src="&mvte:option:image;" alt="&mvte:option:prompt;">
            <mvt:else>
               <mvt:item name="fonts" param="body_font">
                  &mvte:option:prompt;
               </mvt:item>
            </mvt:if>
         </td>
         </tr>
         </mvt:foreach>
      </table>
   </td>
   <mvt:elseif expr="l.settings:attribute:type EQ 'select'">
   <td align="left" valign="top">
      <mvt:item name="fonts" param="body_font">
      <select opt_type="image" style='width:200px;' name="Product_Attributes[&mvt:attribute:index;]:value" id="combo_zone1">
         <mvt:foreach iterator="option" array="attribute:options">
            <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settings:option:id EQ l.settings:attribute:default_id ) ) OR
                ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
               <option value="&mvte:option:code;" img_src="&mvte:option:image;" selected>&mvte:option:prompt; </option>
            <mvt:else>
               <option value="&mvte:option:code;" img_src="&mvte:option:image;">&mvte:option:prompt; </option>
            </mvt:if>
         </mvt:foreach>
   </select>
   </mvt:item>
   </td>
      </mvt:if>
   </tr>
      </mvt:if>
   </mvt:foreach>
   <input type="hidden" name="Product_Attribute_Count" value="&mvte:global:Product_Attribute_Count;">
</table>

<script>
var combo =dhtmlXComboFromSelect("combo_zone1");
combo.setDefaultImage("https://www169.safesecureweb.com/glittergalore/merchant2/graphics/00000001/blank.gif");
</script>


Here is the link to template page without the combo box: http://store.glittergaloreandmore.com/Glitter_Stars_Jars-p-Face_and_Body_Glitter.html
This Works!

Please Help!

Please, check the answer to another your post http://dhtmlx.com/docs/products/kb/index.php?s=normal&q=12776