On Product Page, Image Not Updating With Options Change

eweig · February 1, 2018, 12:00am

I have the following code in my products page template:

{include file="views/products/components/product_icon.tpl" product=$product show_gallery=true}

{assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}

{$smarty.capture.$discount_label nofilter}

On this product I have product combinations labeled as "size", each size having a different image attached to them.

I added cm-reload-{$product.product_id} class to the image div which in therory should update the image once the size is selected.

Can anyone spot something wrong with my code? The javascript used is exceptions.js

ecomlabs · February 1, 2018, 12:00am

At first, please try to replace

with

Then clear cache and check the result

eweig · February 1, 2018, 12:00am

Unfortunately it did not work. The odd thing is that I have the product price and it updates beautifully when the size is changed.

Here is the code to the template. This is my custom template to display all products available. I appreciate your help.

{* $Id: cat_grid_options_list.tpl 11423 2010-12-20 08:52:19Z alexions $ *}
{if $products}
{math equation=“100 / x” x=$columns|default:“2” assign=“cell_width”}

{if $item_number == “Y”}

{assign var=“cur_number” value=1}

{/if}
{* FIXME: Don’t move this file *}

{script src=“js/tygh/product_image_gallery.js”}
{if $settings.Appearance.enable_quick_view == ‘Y’}

{$quick_nav_ids = $products|fn_fields_from_multi_level:“product_id”:“product_id”}

{/if}

{if $subcategories or $category_data.description || $category_data.main_pair}
{math equation="ceil(n/c)" assign="rows" n=$subcategories|count c=$columns|default:"2"}
{split data=$subcategories size=$rows assign="splitted_subcategories"}
{if $category_data.description && $category_data.description != “”}


{$category_data.description|unescape}


{/if}


	{if $subcategories}
	{foreach from=$splitted_subcategories item="ssubcateg"}
			{foreach from=$ssubcateg item=category name="ssubcateg"}
                {if $category.category_id}{$category.category}
{if !$show_empty}

{split data=$products size=$columns|default:“2” assign=“splitted_products”}

{else}

{split data=$products size=$columns|default:“2” assign=“splitted_products” skip_complete=true}

{/if}
{script src=“js/addons/my_changes/firstword.change.js”}





{strip}

{foreach from=$products item=“product” key=“key” name=“products”}

{if $category.category_id==$product.main_category}

{assign var=“obj_id” value=$product.product_id}

{assign var=“obj_id_prefix” value=“$obj_prefix``$product.product_id”}




{if $product}

{assign var=“obj_id” value=$product.product_id}

{assign var=“obj_id_prefix” value=“$obj_prefix``$product.product_id”}

{include file=“common/product_data.tpl” product=$product}
                        

                            {assign var="form_open" value="form_open_`$obj_id`"}
                            {$smarty.capture.$form_open nofilter}
                            {hook name="products:product_multicolumns_list"}
                            
                            		
                                        
                                        {if $item_number == "Y"}
                                            {$cur_number}. 
                                            {math equation="num + 1" num=$cur_number assign="cur_number"}
                                        {/if}

                                        {assign var="name" value="name_$obj_id"}
                                        {$smarty.capture.$name nofilter}
                                    
											Product Details
                                  
                                  
                                  
                                  
                                  
                                    
                            
                            
                                
                                    {include file="views/products/components/product_icon.tpl" product=$product show_gallery=true}

                                    {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
                                    {$smarty.capture.$discount_label nofilter}
                                    
                                    
                            
							
							
                                    
                                    {if ($addons.ath_emerald_theme_settings.show_control_on_hover == 'Y' || $addons.ath_emerald_theme_settings.show_control_on_mobile == 'Y') && !$is_wishlist}
																					
											 
											
											
	                                        
	                                        {if $settings.Appearance.enable_quick_view == 'Y'}
                                                {include file="views/products/components/quick_view_link.tpl" quick_nav_ids=$quick_nav_ids}
                                            {/if}
	                                        
                                            {if $show_add_to_cart}
                                                {if $show_product_options}
                                                
                                                     {assign var="product_options" value="product_options_`$obj_id`"}
                                                     {$smarty.capture.$product_options nofilter}
                                                
                                                {/if}
                                                
                                                    {assign var="add_to_cart" value="add_to_cart_`$obj_id`"}
                                                    {$smarty.capture.$add_to_cart nofilter}
                                                
                                            {/if}
                                            
                                            {if $addons.wishlist.status == "A"}
												{include file="buttons/button.tpl" but_id="button_wishlist_`$obj_prefix``$product.product_id`" but_meta="ty-btn__text ty-add-to-wish icon-et-wish" but_name="dispatch[wishlist.add..`$product.product_id`]" but_text="" but_role="text" but_onclick=$but_onclick but_href=$but_href}
											{/if}
											
											{if $settings.General.enable_compare_products == "Y"}
								                {include file="buttons/add_to_compare_list_icon.tpl" product_id=$product.product_id}
								            {/if}
											
											{if !$hide_form && $addons.call_requests.buy_now_with_one_click == "Y"}

											    {include file="common/popupbox.tpl"
											        href="call_requests.request?product_id={$product.product_id}&obj_prefix={$obj_prefix}"
											        link_text=__("buy_now")
											        text=__("call_requests.buy_now_with_one_click")
											        id="call_request_{$obj_prefix}{$product.product_id}"
											        link_meta="ty-btn ty-btn__text ty-cr-product-button"
											        content=""
											    }
											
											{/if}
                                            
											
                                        
                                    {/if}


                                    {if $show_add_to_cart}
                                        {if $show_product_options}
                                        
                                             {assign var="product_options" value="product_options_`$obj_id`"}
                                             {$smarty.capture.$product_options nofilter}
                                        
                                        {/if}
							

							
                                       
                                            
														Qty:
+
														
												−
													
                                           
                                           			CODE: 

{$product.product_code}
            
                                            		
                                                       
														{assign var="old_price" value="old_price_`$obj_id`"}
                                                        {if $smarty.capture.$old_price|trim}{$smarty.capture.$old_price nofilter}{/if}
            											
                                                        {assign var="price" value="price_`$obj_id`"}
                                                        {$smarty.capture.$price nofilter}
            
            
                                                        {assign var="list_discount" value="list_discount_`$obj_id`"}
                                                        {$smarty.capture.$list_discount nofilter}
                                                       
                                                        {assign var="clean_price" value="clean_price_`$obj_id`"}
                                                        {$smarty.capture.$clean_price nofilter}
														
                                                    
                                            
                                                        {assign var="add_to_cart" value="add_to_cart_`$obj_id`"}
                                                        {$smarty.capture.$add_to_cart nofilter}
                                                    
										   
							

                                       
										
                                    {/if}
                                    
                                    
                                	{assign var="rating" value="rating_$obj_id"}
                                    {if $smarty.capture.$rating}
                                        
                                            {$smarty.capture.$rating nofilter}
                                        
                                    {/if}

                            {/hook}
                            {assign var="form_close" value="form_close_`$obj_id`"}
                            {$smarty.capture.$form_close nofilter}
                        

                    {/if}
                

            {/if}
        {/foreach}
    {/strip}

ecomlabs · February 2, 2018, 12:00am

It is required to examine issue on your server. I do not see any issues in your code

eweig · February 3, 2018, 12:00am

It seems to me it might be some sort of permission or something not found on that page.

This is part of the ajax call that updates when the size is changed:

 $.ceAjax('request', url, {
        result_ids: update_ids.join(',').toString(),
        caching: cache_query,
        force_exec: true,
        pre_processing: fn_pre_process_form_files,
        callback: function(data, params) {
            fn_post_process_form_files(data, params);
            var parents = $('.cm-reload-' + obj_id);
            $.each(parents, function(id, parent_elm) {
                if (data.html && data.html[$(parent_elm).prop('id')]) {
                    var reload_id = $(parent_elm).prop('id'),
                        elms = $(':input', parent_elm),
                        checked_elms = [];

The script does find the cm-reload in the page, but when it checks if there is a value returned by the ajax call, then that element comes through null on this if statement:

if (data.html && data.html[$(parent_elm).prop(‘id’)]) {

Why wouldn't it return the new image and code, but it does return the price for that product?

eweig · February 3, 2018, 12:00am

Found the issue, of course it was simple now that it's fixed. Hopefully this will help others.

In admin panel, go to design templates and in your options file for you custom template, make sure you have the right options enabled. In my case they were:

{include file="addons/my_changes/blocks/list_templates/cat_grid_options_list.tpl"
show_name=false 
details_page=true
show_product_amount=true
show_qty=true
show_sku=true 
show_trunc_name=true 
show_old_price=true
show_price=true
show_rating=true
show_clean_price=true
show_list_discount=true
show_add_to_cart=true
show_product_options=true
but_role="action"
show_discount_label=true}