Hello,
I need to add a text field called Order Quantity in the catalog item form, this form just numeric only, if this field changes, I need to update the "Price" to multiply the entire cost of the catalog item by the number in the "Order Quantity" field, and the new price will be update date to the "Shopping Cart" when the catalog item be checked out.
I don't know how to get the "Price" in the catalog item using the Client Script? How to update the "Price" when the "Order Quantity" field changes? And how to update the "Price" to the "Shopping Cart" when the when the catalog item be checked out?
Do you have any suggestions?
See the picture below:
Best Regards,
Danny
Hi Jessica,
Not sure you would want to do this using the below approach, i have replaced the 'dropdown box' with a 'text box' like below
changes done:
macro name: sc_order_item_price_quantiy ( this is under maintain cart layouts--> Target type: Browser Widget (3)--> Item Ordering Widget)
Original lines:
<span id="quantity_span">
<g:evaluate expression="var choice_list = GlideScriptChoiceList.getChoiceList('sc_cart_item', 'quantity');" />
<select id="quantity" onchange="orderItemWidget.calcPrice()">
<g:options choiceList="${choice_list}" choiceValue="${jvar_cart_item.quantity}" />
</select>
</span>
replaced lines:
<span id="quantity_span">
<g:evaluate expression="var choice_list = GlideScriptChoiceList.getChoiceList('sc_cart_item', 'quantity');" />
<div class="select-editable">
<input type="text" id="quantity" name="quantity" onchange="orderItemWidget.calcPrice();"/>
</div>
</span>
<style>
.select-editable {
position:relative;
background-color:white;
border:solid grey 1px;
width:120px;
height:18px;
}
.select-editable select {
position:absolute;
top:0px;
left:0px;
font-size:14px;
border:none;
width:120px;
margin:0;
}
.select-editable input {
position:absolute;
top:0px;
left:0px;
width:100px;
padding:1px;
font-size:12px;
border:none;
}
.select-editable select:focus, .select-editable input:focus {
outline:none;
}
</style>
Note: This macro is read only as this is OOTB one, you will have to create a new one over here:( maintain cart layouts--> Target type: Browser Widget (3)--> Item Ordering Widget)) and delete the original macro from here (not the macro record))
Disclaimer: Any changes made to the OOTB macros or any other objects will not be upgraded during version upgrades, its our sole responsibility to do so.
In case you dont wanna follow the above approach! you may refer this link:
Please make answer as appropriate or correct!, if it helped!
Regards
Yogish
Here is what I have:
Code:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:set var="jvar_id" value="$[sysparm_id]" />
<j:set var="jvar_id_current" value="8cd541464fa29a003ce846028110c712" /> // specific catalog item sys id
<g:evaluate jelly="true">
var price_label_style = jelly.jvar_show_price == "true" || jelly.jvar_show_recurring_price == "true" ? "" : "display: none;";
var price_style = jelly.jvar_show_price == "true" ? "" : "display: none;";
var recurring_price_style = jelly.jvar_show_recurring_price == "true" ? "" : "display: none;";
var quantity_style = jelly.jvar_show_quantity == "true" ? "" : "display: none;";
</g:evaluate>
<tr>
<td>
<span id="price_label_span" style="${price_label_style}">
<strong>
${gs.getMessage('price')}
</strong>
</span>
</td>
<td class="cart_price_cell">
<span id="price_span" style="${price_style}">
${jvar_display_price}
</span>
<span id="recurring_price" style="${recurring_price_style}">
<span id="recurring_price_span">
+ ${jvar_display_recurring_price}
</span>
<span id="recurring_frequency_span">
${jvar_recurring_frequency}
</span>
</span>
</td>
</tr>
<tr style='${quantity_style}'>
<td>
<span id="quantity_label_span">
<strong>
<label for="quantity" style='${quantity_style}'>${gs.getMessage('quantity')}</label>
</strong>
</span>
</td>
<td>
<j:if test="$[sysparm_id == jvar_id_current]">
<span id="quantity_span">
<g:evaluate expression="var choice_list = GlideScriptChoiceList.getChoiceList('sc_cart_item', 'quantity');" />
<div class="select-editable">
<input type="text" id="quantity" name="quantity" onchange="orderItemWidget.calcPrice();"/>
</div>
</span>
<style>
.select-editable {
position:relative;
background-color:white;
border:solid grey 1px;
width:120px;
height:18px;
}
.select-editable select {
position:absolute;
top:0px;
left:0px;
font-size:14px;
border:none;
width:120px;
margin:0;
}
.select-editable input {
position:absolute;
top:0px;
left:0px;
width:100px;
padding:1px;
font-size:12px;
border:none;
}
.select-editable select:focus, .select-editable input:focus {
outline:none;
}
</style>
</j:if>
<span id="quantity_span">
<g:evaluate expression="var choice_list = GlideScriptChoiceList.getChoiceList('sc_cart_item', 'quantity');" />
<select id="quantity" class="form-control" onchange="orderItemWidget.calcPrice()" style='${quantity_style}'>
<g:options choiceList="${choice_list}" choiceValue="${jvar_cart_item.quantity}" />
</select>
</span>
</td>
</tr>
</j:jelly>
