Dynamic price change when choosing an optional property?

Question

PHP

It is necessary to add the cost of the option to the main price and dynamically, without reloading the page, display the result in the product card, so that where the main price is indicated, the final price is immediately recalculated taking into account the cost of the selected option. In the basket, everything is done as it should. The matter concerns only the product card, where there is a drop-down list of options (select) - where does the price of the options come from. The decision from the forum was taken as a basis:
Practically, this is what is needed. Only the code in basket.js responsible for this output cannot be corrected (I don’t understand php yet). What works for the base price and for the basket of goods in basket.js looks like this:
site.basket.add = function(id, form, popup) {
var e_name, options = {};
if (form) {
var elements = jQuery('option:selected', form);
for (var i = 0; i < elements.length; i++) {
e_name = elements[i].id.replace(/^options\[/, '').replace(/\]$/, '');
options[e_name] = elements[i].value;
}
} basket.
putElement(id, options, this.replace(id));
if (popup) jQuery('#add_options_' + id).remove();
};
What works (from the example - see the link), but separately what should be attached to the above code looks like this:
var site = {};
site.itemAddOptionPrice = function () {
$( "option:selected", this).each(function() {
var price = parseFloat(jQuery(this).data('original-price'
target = $(this).parent().parent().find('.price__value'),
itemPrice = parseFloat(target.data('original-price'));
target.html(itemPrice + price);
});
};
site.init = function () {
jQuery('.item__option').change(site.itemAddOptionPrice);
};
jQuery(document).ready(function () {
site.init();
});
The activation template for selecting options is located in the popup-add-options.xsl file and looks like this:
xsl:template match="/"
form class="options" action="/emarket/basket/put/element/{udata/page/ @id}/" onsubmit="site.basket.add('{udata/page/@id}', this, true); return false;"
xsl:apply-templates select="//group[@name = 'catalog_option_props']/property" /
/form
/xsl:template
and 2 templates from the object-view.xsl file responsible for displaying a drop-down list of options look like this:
xsl: template match="property" mode="table_options"
table class="object"
tr
th
xsl:value-of select="concat(title, ':')" /
/th
td
select id="options[{@name} ]" name="options[{@name}]"
xsl:apply-templates select="value/option" mode="table_options" /
/select
/td
/tr
/table
/xsl:template
xsl:template match="option" mode="table_options"
option value="{object/@id}" name="options[{../../@name}]" id="options[{../../@name}]"
xsl:if test= "position() = 1"
xsl:value-of select="object/@name" /
/xsl:if
xsl:if test="position() != 1"
xsl:value-of select="concat(object/ @name, ' ', '+', ' ', @float, ' ', 'р.')" /
/xsl:if
/option
/xsl:template
These options (drop-down list) are exactly what we are talking about:
xsl :if test="position() != 1"
xsl:value-of select="concat(object/@name, ' ', '+', ' ', @float, ' ', 'p.')" /
/xsl:if
The option price (@float) must be added to the base price $price = $this->getOptionPrice($propertyName, $optionId); The price recalculation logic is located in the optioned.xsl and basket.js files
Site on xslt on the UMI-CMS system. I understand that it will be enough to edit the code in the basket.js file and the template in the object-view.xsl file. Please suggest the best solution in my situation. Thanks in advance for any. support.

Answer 1

the link to the used example for this question did not appear. Duplicate: umihelp.ru/forum/index.php?topic=1784.0