Modifying the reply of POST to cart.php for price recalculation

[CodeCo]

Hello everyone.

I've been heavily theming my instance of WHMCS but I've run into an issue while trying to retheme confproducts.tpl as the summary card is entirely handled by JS. The JS file posts the selected inputs and gets a preformatted reply with all the classes to fit the default WHMCS theme and just replaces a div with a specific ID in the summary tab with that, although I want to modify the design of that.

Here's the response from the POST request.

https://file.properties/host/raw/SlgrOiYz.png

    <span class="product-name">Game Test</span>
    <span class="product-group">Minecraft Baseline</span>

    <div class="clearfix">
        <span class="pull-left">Game Test</span>
        <span class="pull-right">$2.00 USD</span>
    </div>

    
    
            <div class="summary-totals">
                            <div class="clearfix">
                    <span class="pull-left">Setup Fees:</span>
                    <span class="pull-right">$1.00 USD</span>
                </div>
                                        <div class="clearfix">
                    <span class="pull-left">Monthly:</span>
                    <span class="pull-right">$2.00 USD</span>
                </div>
                                            </div>
    
    <div class="total-due-today">
        <span class="amt">$1.52 USD</span>
        <span>Total Due Today</span>
    </div>

This is what we would like it to look like.

https://file.properties/host/raw/LtUyWTxb.png

<div class="summary-container" id="producttotal">
  <span class="product-group">Game Test</span><br> <span class="product-name">Minecraft Baseline</span>
  <div class="d-flex justify-content-between mb-3">
    <div>
      <small>
      Game Test<br>
      Setup Fees:<br>
      Monthly:</small>
    </div>
    <div class="text-right">
      <small>
      $2.00 USD<br>
      $1.00 USD<br>
      $2.00 USD
      </small>
    </div>
  </div>
</div>

I've taken a look into the hooks but can't seem to find one that might be able to help. If anyone has any suggestions on how I could go about modifying the output, I would be very grateful. 

[brian!]

9 hours ago, CodeCo said:

The JS file posts the selected inputs and gets a preformatted reply with all the classes to fit the default WHMCS theme and just replaces a div with a specific ID in the summary tab with that, although I want to modify the design of that.

I think you're coming at this from the wrong angle - if all that you're looking to do is alter the styling of the order summary box, then you can just edit the ordersummary.tpl Smarty template in /templates/orderforms/standard_cart/ - it's that template that is defining the output used, not the JS.

{if $producttotals}
    <span class="product-name">{if $producttotals.allowqty && $producttotals.qty > 1}{$producttotals.qty} x {/if}{$producttotals.productinfo.name}</span>
    <span class="product-group">{$producttotals.productinfo.groupname}</span>

    <div class="clearfix">
        <span class="pull-left">{$producttotals.productinfo.name}</span>
        <span class="pull-right">{$producttotals.pricing.baseprice}</span>
    </div>

blah blah 

so then it's basically a case of replacing your text with the appropriate Smarty variable or language string...

<div class="summary-container" id="producttotal">
  <span class="product-group">{$producttotals.productinfo.groupname}</span><br> <span class="product-name">{$producttotals.productinfo.name}</span>
  <div class="d-flex justify-content-between mb-3">
    
blah blah

now it won't be quite as straightforward as your example because there will be lots of conditional if statements in there that you will likely need to keep to cover all eventualities of the output (unless you know what they do and decide that you don't need them in your circumstances - though frankly, even if that were the case, i'd probably still keep them in there for the future).

9 hours ago, CodeCo said:

I've taken a look into the hooks but can't seem to find one that might be able to help.

you can't use hooks on the ordersummary template - everything has to be done in the template itself.

9 hours ago, CodeCo said:

If anyone has any suggestions on how I could go about modifying the output, I would be very grateful. 

you'd need to edit viewcart.tpl as well - the order summary template is used at the product configuration stage, but by the time you get to viewcart, the summary box output is defined in viewcart.tpl - it will use different variables too, so it's not just a copy&paste job!

if you come unstuck wanting to know about available variables and language strings, then just add {debug} to the end of the template and you'll get a popup window of available arrays and variables - just remember to remove {debug} from the template when you're finished.

also, your site has missing FA5 icons which probably means that you css/js links are outdated for your template version compared to your installed WHMCS release.