| 1 |
<div class="imh-6310-form imh_6310_template_description imh-6310-form-03 imh-6310-form-04 imh-6310-form-05 imh-6310-hide"> |
| 2 |
<table border="0" width="50%" cellpadding="10" cellspacing="0"> |
| 3 |
<tr class=""> |
| 4 |
<td class='imh-6310-width-200'><label class="imh-6310-form-label" for="picture">Add Image:</label></td> |
| 5 |
<td> |
| 6 |
<input type="text" name="image" id="imh-6310-des-img" class="imh-6310-form-input imh-6310-des-img" value=""> |
| 7 |
<input type="button" value="Upload Image" class="imh-6310-btn-default imh-6310-icon-upload custom-icon-image" data-id="imh-6310-des-img"> |
| 8 |
</td> |
| 9 |
</tr> |
| 10 |
<tr class=""> |
| 11 |
<td class='imh-6310-width-200'><label class="imh-6310-form-label">Tooltip Width:</label></td> |
| 12 |
<td> |
| 13 |
<input type="text" name="tooltip-width" class="imh-6310-form-input imh-6310-tooltip-width" value="400"> |
| 14 |
</td> |
| 15 |
</tr> |
| 16 |
<tr> |
| 17 |
<td class='imh-6310-width-200'><b>Description:</b></td> |
| 18 |
<td> |
| 19 |
<textarea class="imh-6310-form-input imh-6310-tooltip_discription" name="" id="imh-6310-tooltip_discription" cols="30" rows="10" data-value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis vero maxime beatae fugiat, aspernatur quia."></textarea> |
| 20 |
</td> |
| 21 |
</tr> |
| 22 |
<tr> |
| 23 |
<td class='imh-6310-width-200'><b>Description Font Size:</b></td> |
| 24 |
<td> |
| 25 |
<input type="number" class="imh-6310-form-input imh-6310-tooltip_discription_font_size" name="" id="imh-6310-tooltip_discription_font_size" data-value="16"> |
| 26 |
</td> |
| 27 |
</tr> |
| 28 |
<tr> |
| 29 |
<td class='imh-6310-width-200'><b>Description Font Size in Mobile:</b></td> |
| 30 |
<td> |
| 31 |
<input type="number" class="imh-6310-form-input imh-6310-tooltip_discription_font_size_mobile" name="" id="imh-6310-tooltip_discription_font_size_mobile" data-value="12"> |
| 32 |
</td> |
| 33 |
</tr> |
| 34 |
<tr> |
| 35 |
<td class='imh-6310-width-200'><b>Description Font Color:</b></td> |
| 36 |
<td> |
| 37 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-tooltip_discription_font_color" data-format="rgb" data-opacity="0.8" data-value="rgb(0, 0, 0)" name="" id="imh-6310-tooltip_discription_font_color"> |
| 38 |
</td> |
| 39 |
</tr> |
| 40 |
</table> |
| 41 |
</div> |
| 42 |
<div class="imh-6310-form imh_6310_font_prop imh-6310-form-01 imh-6310-form-04 imh-6310-form-03 imh-6310-form-05 imh-6310-hide"> |
| 43 |
<table border="0" width="50%" cellpadding="10" cellspacing="0"> |
| 44 |
<tr> |
| 45 |
<td class='imh-6310-width-200'><b>Font Size</b></td> |
| 46 |
<td> |
| 47 |
<input type="number" min="0" class="imh-6310-form-input imh_6310_template_font_size" step="1" data-value="16" /> |
| 48 |
</td> |
| 49 |
</tr> |
| 50 |
<tr> |
| 51 |
<td class='imh-6310-width-200'><b>Mobile Font Size</b></td> |
| 52 |
<td> |
| 53 |
<input type="number" min="0" class="imh-6310-form-input imh_6310_template_font_size_mobile" step="1" data-value="14" /> |
| 54 |
</td> |
| 55 |
</tr> |
| 56 |
<tr> |
| 57 |
<td><b>Font Color</b></td> |
| 58 |
<td> |
| 59 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_template_font_color" data-format="rgb" data-value="rgb(18, 0, 0)"> |
| 60 |
</td> |
| 61 |
</tr> |
| 62 |
<tr> |
| 63 |
<td><b>Background Color</b></td> |
| 64 |
<td> |
| 65 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_template_bg_color" data-format="rgb" data-value="rgb(255, 255, 255)"> |
| 66 |
</td> |
| 67 |
</tr> |
| 68 |
|
| 69 |
</table> |
| 70 |
</div> |
| 71 |
|
| 72 |
<div class="imh-6310-form imh_6310_template_embedded imh-6310-form-02 imh-6310-hide"> |
| 73 |
<table border="0" width="100%" cellpadding="10" cellspacing="0"> |
| 74 |
<tr> |
| 75 |
<td class='imh-6310-width-200'><b>Embedded Code</b></td> |
| 76 |
<td> |
| 77 |
<textarea name="imh-6310-embedded_code_link" id="imh-6310-embedded_code_link" class="imh-6310-embedded_code_link" cols="90" rows="5"></textarea> |
| 78 |
</td> |
| 79 |
</tr> |
| 80 |
</table> |
| 81 |
</div> |
| 82 |
<div class="imh-6310-form imh_6310_custom_template imh-6310-hide"> |
| 83 |
<table border="0" width="100%" cellpadding="10" cellspacing="0"> |
| 84 |
<tr> |
| 85 |
<td class='imh-6310-width-200'><b>HTML Code</b></td> |
| 86 |
<td> |
| 87 |
<textarea name="imh-6310-custome_html" id="imh-6310-custome_html" class="imh-6310-custome_html" cols="90" rows="5" data-value=''></textarea> |
| 88 |
<a href="https://wpmart.org/image-hotspot-templates-01-10/" target="_blank" class='imh-6310-custom-code-url'>Get build in custom code for tooltip / popup</a> |
| 89 |
</td> |
| 90 |
</tr> |
| 91 |
<tr> |
| 92 |
<td class='imh-6310-width-200'><b>CSS Code</b></td> |
| 93 |
<td> |
| 94 |
<textarea name="imh-6310-custome_css" id="imh-6310-custome_css" class="imh-6310-custome_css" cols="90" rows="5" data-value=''></textarea> |
| 95 |
</td> |
| 96 |
</tr> |
| 97 |
</table> |
| 98 |
</div> |
| 99 |
|
| 100 |
<div class="imh-6310-form imh-6310-direct-link imh-6310-hide"> |
| 101 |
How to add direct link?<br /> |
| 102 |
<a href="https://youtu.be/oXEa9BtJIfc" target="_blank">Youtube Video</a> |
| 103 |
</div> |
| 104 |
|
| 105 |
<div class="imh-6310-form imh_6310_plugin_short_code imh-6310-hide"> |
| 106 |
<table border="0" width="100%" cellpadding="10" cellspacing="0"> |
| 107 |
<tr> |
| 108 |
<td class='imh-6310-width-200'><b>Other Plugin ShortCode</b></td> |
| 109 |
<td><input type="text" name="imh_6310_short_code" class="imh_6310_short_code" ></td> |
| 110 |
</tr> |
| 111 |
<tr> |
| 112 |
<td class='imh-6310-width-200'><b>Background Color</b></td> |
| 113 |
<td> |
| 114 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh_6310_short_code_bg_color" data-format="rgb" data-value="rgb(255, 255, 255)" name="imh_6310_short_code_bg_color"> |
| 115 |
</td> |
| 116 |
</tr> |
| 117 |
<tr> |
| 118 |
<td class='imh-6310-width-200'><b>Tooltip Width</b></td> |
| 119 |
<td> |
| 120 |
<input type="text" class="imh_6310_short_code_tooltip_width" name="imh_6310_short_code_tooltip_width" data-value="700"> |
| 121 |
</td> |
| 122 |
</tr> |
| 123 |
<tr> |
| 124 |
<td class='imh-6310-width-200'><b>Tooltip Padding</b></td> |
| 125 |
<td> |
| 126 |
<input type="text" class="imh_6310_short_code_tooltip_padding" name="imh_6310_short_code_tooltip_padding" data-value="0"> |
| 127 |
</td> |
| 128 |
</tr> |
| 129 |
</table> |
| 130 |
</div> |
| 131 |
|
| 132 |
<div class="imh-6310-form imh-6310-product"> |
| 133 |
<br> |
| 134 |
<div class="imh-6310-form-label">Choose Product</div> |
| 135 |
<?php |
| 136 |
$codeLoaded = false; |
| 137 |
|
| 138 |
add_action('plugins_loaded', function() use (&$codeLoaded) { |
| 139 |
$codeLoaded = true; |
| 140 |
}); |
| 141 |
|
| 142 |
if(!$codeLoaded){ |
| 143 |
imh_6310_render_products(); |
| 144 |
} |
| 145 |
?> |
| 146 |
<div class="imh-6310-selected-product-list"></div> |
| 147 |
|
| 148 |
<table border="0" width="48%" cellpadding="10" cellspacing="0" style="float: left;"> |
| 149 |
<tr> |
| 150 |
<td class='imh-6310-width-200'><b>Product per row in Desktop:</b></td> |
| 151 |
<td> |
| 152 |
<input type="number" class="imh-6310-form-input imh-6310-product-per-row-desk" data-value="3" min="1" max="6"> |
| 153 |
</td> |
| 154 |
</tr> |
| 155 |
<tr> |
| 156 |
<td class='imh-6310-width-200'><b>Product per row in Mobile:</b></td> |
| 157 |
<td> |
| 158 |
<input type="number" class="imh-6310-form-input imh-6310-product-per-row-mob" data-value="2" min="1" max="6"> |
| 159 |
</td> |
| 160 |
</tr> |
| 161 |
<tr> |
| 162 |
<td class='imh-6310-width-200'><b>Product Box Width:</b></td> |
| 163 |
<td> |
| 164 |
<input type="number" class="imh-6310-form-input imh-6310-product-box-width" data-value="500" min="100" max="1000"> |
| 165 |
</td> |
| 166 |
</tr> |
| 167 |
<tr> |
| 168 |
<td class='imh-6310-width-200'><b>Product Box Background Color:</b></td> |
| 169 |
<td> |
| 170 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-box-bg-color" data-format="rgb" data-value="rgb(255, 255, 255)" name=""> |
| 171 |
</td> |
| 172 |
</tr> |
| 173 |
<tr> |
| 174 |
<td class='imh-6310-width-200'><b>Product Box Hover Color:</b></td> |
| 175 |
<td> |
| 176 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-box-hover-color" data-format="rgb" data-value="rgb(240, 240, 240)" name=""> |
| 177 |
</td> |
| 178 |
</tr> |
| 179 |
<tr> |
| 180 |
<td class='imh-6310-width-200'><b>Product Title Font Size:</b></td> |
| 181 |
<td> |
| 182 |
<input type="number" class="imh-6310-form-input imh-6310-product-title-font-size" data-value="18" min="8" max="60" step="1"> |
| 183 |
</td> |
| 184 |
</tr> |
| 185 |
<tr> |
| 186 |
<td class='imh-6310-width-200'><b>Product Title Color:</b></td> |
| 187 |
<td> |
| 188 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-title-color" data-format="rgb" data-value="rgb(0, 0, 0)" name=""> |
| 189 |
</td> |
| 190 |
</tr> |
| 191 |
<tr> |
| 192 |
<td class='imh-6310-width-200'><b>Product Title Hover Color:</b></td> |
| 193 |
<td> |
| 194 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-title-hover-color" data-format="rgb" data-value="rgb(26, 26, 26)" name=""> |
| 195 |
</td> |
| 196 |
</tr> |
| 197 |
</table> |
| 198 |
|
| 199 |
<table border="0" width="48%" cellpadding="10" cellspacing="0" style="float: left;"> |
| 200 |
<tr> |
| 201 |
<td class='imh-6310-width-200'><b>Price Font Size:</b></td> |
| 202 |
<td> |
| 203 |
<input type="number" class="imh-6310-form-input imh-6310-product-price-font-size" data-value="16" min="8" max="60" step="1"> |
| 204 |
</td> |
| 205 |
</tr> |
| 206 |
<tr> |
| 207 |
<td class='imh-6310-width-200'><b>Discount Price Color:</b></td> |
| 208 |
<td> |
| 209 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-dis-price-color" data-format="rgb" data-value="rgb(255, 0, 0)" name=""> |
| 210 |
</td> |
| 211 |
</tr> |
| 212 |
<tr> |
| 213 |
<td class='imh-6310-width-200'><b>Price Color:</b></td> |
| 214 |
<td> |
| 215 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-price-color" data-format="rgb" data-value="rgb(4, 107, 210)" name=""> |
| 216 |
</td> |
| 217 |
</tr> |
| 218 |
<tr> |
| 219 |
<td class='imh-6310-width-200'><b>Button Font Size:</b></td> |
| 220 |
<td> |
| 221 |
<input type="number" class="imh-6310-form-input imh-6310-product-button-font-size" data-value="18" min="8" max="60" step="1"> |
| 222 |
</td> |
| 223 |
</tr> |
| 224 |
<tr> |
| 225 |
<td class='imh-6310-width-200'><b>Button Color:</b></td> |
| 226 |
<td> |
| 227 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-color" data-format="rgb" data-value="rgb(255, 255, 255)" name=""> |
| 228 |
</td> |
| 229 |
</tr> |
| 230 |
<tr> |
| 231 |
<td class='imh-6310-width-200'><b>Button Hover Color:</b></td> |
| 232 |
<td> |
| 233 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-hover-color" data-format="rgb" data-value="rgb(245, 245, 245)" name=""> |
| 234 |
</td> |
| 235 |
</tr> |
| 236 |
<tr> |
| 237 |
<td class='imh-6310-width-200'><b>Button Background Color:</b></td> |
| 238 |
<td> |
| 239 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-bg-color" data-format="rgb" data-value="rgb(4, 107, 210)" name=""> |
| 240 |
</td> |
| 241 |
</tr> |
| 242 |
<tr> |
| 243 |
<td class='imh-6310-width-200'><b>Button Background Hover Color:</b></td> |
| 244 |
<td> |
| 245 |
<input type="text" class="imh-6310-form-input imh_6310_color_picker imh-6310-product-button-bg-hover-color" data-format="rgb" data-value="rgb(210, 100, 72)" name=""> |
| 246 |
</td> |
| 247 |
</tr> |
| 248 |
</table> |
| 249 |
</div> |
