Product prices not updating in Category View

[jenkinhill]

The custom field code displayed on the page is different between the category view product and the Featured Product. The code on the Product Details page is similar to this first example - and for some treason it works there....

Code for category view:

Code Select Expand


<div class="vm-customfields-wrap">
<div class="product-fields">
<div class="product-field product-field-type-E">
<span class="product-fields-title-wrapper"><span class="product-fields-title"><strong>Size:</strong></span>
</span>
<div class="product-field-display">






<script id="updateChosen-js" type="text/javascript">//<![CDATA[
if (typeof Virtuemart === "undefined")
var Virtuemart = {};
Virtuemart.updateChosenDropdownLayout = function() {
var vm2string = {editImage: 'edit image',select_all_text: 'Select all',select_some_options_text: 'Available for all'};
jQuery("select.vm-chzn-select").chosen({enable_select_all: true,select_all_text : vm2string.select_all_text,select_some_options_text:vm2string.select_some_options_text,disable_search_threshold: 5});
//console.log("updateChosenDropdownLayout");
}
jQuery(document).ready( function() {
Virtuemart.updateChosenDropdownLayout($);
}); //]]>
</script>
<script id="vm-countryState-js" type="text/javascript">//<![CDATA[
jQuery(document).ready( function($) {
$("#virtuemart_country_id_field").vm2front("list",{dest : "#virtuemart_state_id_field",ids : "",prefiks : ""});
}); //]]>
</script>
<script id="vm-countryStateshipto_-js" type="text/javascript">//<![CDATA[
jQuery(document).ready( function($) {
$("#shipto_virtuemart_country_id_field").vm2front("list",{dest : "#shipto_virtuemart_state_id_field",ids : "",prefiks : "shipto_"});
}); //]]>
</script>

<script id="ready.vmprices-js" type="text/javascript">//<![CDATA[
jQuery(document).ready(function($) {

Virtuemart.product($("form.product"));
}); //]]>
</script>

<div class="cf4all_wrapper  cf4all_required" id="cf4all_wrapper_22328_">
<span class="cf4all_error_msg" style="display:none">Please select an option!</span>
<select id="customProductData912622328customsforall_option" name="customProductData[91][26][22328][customsforall_option]">
<option value="0" selected="selected">Select</option>
<option value="43">700mm</option>
<option value="44">800mm&nbsp;(+&pound;10.13)</option>
<option value="45">900mm&nbsp;(+&pound;19.61)</option>
<option value="46">1000mm&nbsp;(+&pound;30.71)</option>
<option value="47">1200mm&nbsp;(+&pound;51.13)</option>
</select>
</div>
</div> </div>


Code for featured product module:

Code Select Expand


<div class="vm-customfields-wrap">
<div class="product-fields">
<div class="product-field product-field-type-E">
<span class="product-fields-title-wrapper"><span class="product-fields-title"><strong>Size:</strong></span>
</span>
<div class="product-field-display">
<div class="cf4all_wrapper  cf4all_required" id="cf4all_wrapper_22328_">
<span class="cf4all_error_msg" style="display:none">Please select an option!</span>
<select id="customProductData912622328customsforall_option" name="customProductData[91][26][22328][customsforall_option]">
<option value="0" selected="selected">Select</option>
<option value="43">700mm</option>
<option value="44">800mm&nbsp;(+&pound;10.13)</option>
<option value="45">900mm&nbsp;(+&pound;19.61)</option>
<option value="46">1000mm&nbsp;(+&pound;30.71)</option>
<option value="47">1200mm&nbsp;(+&pound;51.13)</option>
</select>
</div>
</div> </div>
[/div]


Both customs are of type E - ie they use a plugin

VM default custom field demo is type S  - a string

This is the code from a VM demo category view of a product with one price variant  - it is much simpler than your code - and works.

Code Select Expand


<div class="vm-customfields-wrap">
<div class="product-fields">
<div class="product-field product-field-type-S">
<span class="product-fields-title-wrapper"><span class="product-fields-title"><strong>String, admin list</strong></span>
<span class="hasTooltip" title="&lt;strong&gt;String, admin list&lt;/strong&gt;&lt;br /&gt;Select a variant"><img src="/VM34/media/system/images/tooltip.png" alt="Tooltip" /></span></span>
<div class="product-field-display"><select name="customProductData[162][14]" class="vm-chzn-select">
<option value="454">Standard No additional charge</option>
<option value="455">Waxed +&pound;10.35</option>
</select>
</div> </div>


[cjsmiff]

Cache problem ? Turn off cache and joomla cache plugin and clear cache to test.

Jörgen @ Kreativ Fotografi

Hi, Joomla system cache is already off as is the plugin System Page Cache (it's the only cache plugin I could find..?). Cleared cache and tested... still the same.

[cjsmiff]

The custom field code displayed on the page is different between the category view product and the Featured Product. The code on the Product Details page is similar to this first example - and for some treason it works there....

Code for category view:

Code Select Expand


<div class="vm-customfields-wrap">
<div class="product-fields">
<div class="product-field product-field-type-E">
<span class="product-fields-title-wrapper"><span class="product-fields-title"><strong>Size:</strong></span>
</span>
<div class="product-field-display">






<script id="updateChosen-js" type="text/javascript">//<![CDATA[
if (typeof Virtuemart === "undefined")
var Virtuemart = {};
Virtuemart.updateChosenDropdownLayout = function() {
var vm2string = {editImage: 'edit image',select_all_text: 'Select all',select_some_options_text: 'Available for all'};
jQuery("select.vm-chzn-select").chosen({enable_select_all: true,select_all_text : vm2string.select_all_text,select_some_options_text:vm2string.select_some_options_text,disable_search_threshold: 5});
//console.log("updateChosenDropdownLayout");
}
jQuery(document).ready( function() {
Virtuemart.updateChosenDropdownLayout($);
}); //]]>
</script>
<script id="vm-countryState-js" type="text/javascript">//<![CDATA[
jQuery(document).ready( function($) {
$("#virtuemart_country_id_field").vm2front("list",{dest : "#virtuemart_state_id_field",ids : "",prefiks : ""});
}); //]]>
</script>
<script id="vm-countryStateshipto_-js" type="text/javascript">//<![CDATA[
jQuery(document).ready( function($) {
$("#shipto_virtuemart_country_id_field").vm2front("list",{dest : "#shipto_virtuemart_state_id_field",ids : "",prefiks : "shipto_"});
}); //]]>
</script>

<script id="ready.vmprices-js" type="text/javascript">//<![CDATA[
jQuery(document).ready(function($) {

Virtuemart.product($("form.product"));
}); //]]>
</script>

<div class="cf4all_wrapper  cf4all_required" id="cf4all_wrapper_22328_">
<span class="cf4all_error_msg" style="display:none">Please select an option!</span>
<select id="customProductData912622328customsforall_option" name="customProductData[91][26][22328][customsforall_option]">
<option value="0" selected="selected">Select</option>
<option value="43">700mm</option>
<option value="44">800mm&nbsp;(+&pound;10.13)</option>
<option value="45">900mm&nbsp;(+&pound;19.61)</option>
<option value="46">1000mm&nbsp;(+&pound;30.71)</option>
<option value="47">1200mm&nbsp;(+&pound;51.13)</option>
</select>
</div>
</div> </div>


Code for featured product module:

Code Select Expand


<div class="vm-customfields-wrap">
<div class="product-fields">
<div class="product-field product-field-type-E">
<span class="product-fields-title-wrapper"><span class="product-fields-title"><strong>Size:</strong></span>
</span>
<div class="product-field-display">
<div class="cf4all_wrapper  cf4all_required" id="cf4all_wrapper_22328_">
<span class="cf4all_error_msg" style="display:none">Please select an option!</span>
<select id="customProductData912622328customsforall_option" name="customProductData[91][26][22328][customsforall_option]">
<option value="0" selected="selected">Select</option>
<option value="43">700mm</option>
<option value="44">800mm&nbsp;(+&pound;10.13)</option>
<option value="45">900mm&nbsp;(+&pound;19.61)</option>
<option value="46">1000mm&nbsp;(+&pound;30.71)</option>
<option value="47">1200mm&nbsp;(+&pound;51.13)</option>
</select>
</div>
</div> </div>
[/div]


Both customs are of type E - ie they use a plugin

VM default custom field demo is type S  - a string

This is the code from a VM demo category view of a product with one price variant  - it is much simpler than your code - and works.

Code Select Expand


<div class="vm-customfields-wrap">
<div class="product-fields">
<div class="product-field product-field-type-S">
<span class="product-fields-title-wrapper"><span class="product-fields-title"><strong>String, admin list</strong></span>
<span class="hasTooltip" title="&lt;strong&gt;String, admin list&lt;/strong&gt;&lt;br /&gt;Select a variant"><img src="/VM34/media/system/images/tooltip.png" alt="Tooltip" /></span></span>
<div class="product-field-display"><select name="customProductData[162][14]" class="vm-chzn-select">
<option value="454">Standard No additional charge</option>
<option value="455">Waxed +&pound;10.35</option>
</select>
</div> </div>


Hi jenkinhill, I have also tried disabling CustomFields4All and using String for the options instead but the result is the same and the prices do not update. 

[cjsmiff]

Ok, so I have done a fresh install of Joomla 3.9.5 and VM 3.4.5, I have set the Joomla Template as vmbeez3. Next I imported the products from my previous test site (3demo), I have disabled Custom Fields For All and created a Test Product using String for the options but the result is still the same: https://www.cooksroom.co.uk/4demo/cornell-classic-alabaster/high-line-base-units-c-1.html

The prices just do not want to update! 

[cjsmiff]

Solved! Thanks to:

You have an template error, You are missing the class "product-container" in your category view.

Jörgen @ Kreativ Fotografi

I finally found where to add this class! https://www.cooksroom.co.uk/2demo/zola-matte-paint-to-order-true-handleless/high-line-base-units.html

In products_slim on line 178 I changed:
<div class="product <?php echo $cellwidth.$show_vertical_separator ?>">
to
<div class="product-container <?php echo $cellwidth.$show_vertical_separator ?>">

Hooray! Thank you very much to everyone for their input!