alirazakhalid Posted April 30, 2017 Share Posted April 30, 2017 Hello Everyone, I am looking for some improvement in standard cart order template. What i am looking for is below. 1) Need to improve Configurable Options area. Right now options are showing in 2 column. I want to show all options in one column because in 2 column prices are showing really messed up and i don't like to show that. 2) Need to improve order summary part i want to expand and want little bigger. 3) I want to make bold headings in Configurable Options. Kindly review all 3 pictures to understand in a better way. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted April 30, 2017 Share Posted April 30, 2017 I am looking for some improvement in standard cart order template. What i am looking for is below. 1) Need to improve Configurable Options area. Right now options are showing in 2 column. I want to show all options in one column because in 2 column prices are showing really messed up and i don't like to show that. in configurableproduct.tpl, inside the {if $configurableoptions} block of code, you'll see the following 3 times... <div class="col-sm-6"> change it to... <div class="col-sm-12"> 2) Need to improve order summary part i want to expand and want little bigger. I don't think it's size is constrained - it's always the required size to show the information within it? anyway, if you want to edit it, it's ordersummary.tpl 3) I want to make bold headings in Configurable Options. that's either going to be a custom.css change, or a tweak to the output of the line below... <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted April 30, 2017 Author Share Posted April 30, 2017 Thanks brain for you response. Option 1 has been done, however option 2 and 3 are still pending to do it. As i have seen somewhere exactly the same and they also using same standard order form. His order summary is bigger and all words and prices are prominent and all the headings are bold with yellow color and i am not allowed to show his order form here sorry for that. Can you please guide me how can i do that. I am sure you have potential to tell everything. As i know you from 2010. Kindly review the picture below. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted April 30, 2017 Share Posted April 30, 2017 Option 1 has been done, however option 2 and 3 are still pending to do it. As i have seen somewhere exactly the same and they also using same standard order form. His order summary is bigger and all words and prices are prominent and all the headings are bold with yellow color and i am not allowed to show his order form here sorry for that. Can you please guide me how can i do that. with regards to the width, that's going to be in configureproduct.tpl and you'll see two lines... <div class="col-md-8"> and <div class="col-md-4" id="scrollingPanelContainer"> that means that the output is currently split 66% (configureproduct) / 33% (ordersummary) - if you want to split it 50/50, then both those values of 8 and 4 should be 6. <div class="col-md-6"> and <div class="col-md-6" id="scrollingPanelContainer"> and with regards to bold and colours, it's as I said before - it'll be using custom.css or via another template tweak - but viewing the source code of the site you want to copy will tell you how they are doing it. As i know you from 2010. Kindly review the picture below. really ? not from these forums... I didn't buy WHMCS until 2013! 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted April 30, 2017 Author Share Posted April 30, 2017 really ? not from these forums... I didn't buy WHMCS until 2013! Yeah i know not from this forum some where other forum not taking the name of the forum you know 2 option is also went spot on Now if you tell me last the option which is font and bold headings that would be stunning Kindly review the picture below. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted April 30, 2017 Share Posted April 30, 2017 Yeah i know not from this forum some where other forum not taking the name of the forum you know lol - I understand. Now if you tell me last the option which is font and bold headings that would be stunning I suspect you could do it all in custom.css #order-standard_cart .summary-container { font-size: .8em; } p { margin: 0 0 10px; } #order-standard_cart .sub-heading span { font-size: 16px; } #order-standard_cart label { font-weight: bold !important; font-size: 15px !important; } then it's just a case of playing with the font size (or px) value in each to suit your needs. 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted April 30, 2017 Author Share Posted April 30, 2017 lol - I understand. I suspect you could do it all in custom.css #order-standard_cart .summary-container { font-size: .8em; } p { margin: 0 0 10px; } #order-standard_cart .sub-heading span { font-size: 16px; } #order-standard_cart label { font-weight: bold !important; font-size: 15px !important; } then it's just a case of playing with the font size (or px) value in each to suit your needs. Can you please tell me where i have attach the custome.css file ? 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 1, 2017 Share Posted May 1, 2017 Can you please tell me where i have attach the custom.css file ? it would go in your main template/css directory - so if your main WHMCS template is "Six", then it will go in /templates/six/css/custom.css - if you've renamed the "Six" template, then put the file in the renamed folder using a similar path. 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted May 1, 2017 Author Share Posted May 1, 2017 it would go in your main template/css directory - so if your main WHMCS template is "Six", then it will go in /templates/six/css/custom.css - if you've renamed the "Six" template, then put the file in the renamed folder using a similar path. Thank you so much brain I having an other problem i did try to review NS1 and NS2 option but when i try to click on Continue button it give me error. I want to remove these option. How can i remove this option full? Review the image please. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 1, 2017 Share Posted May 1, 2017 I having an other problem i did try to review NS1 and NS2 option but when i try to click on Continue button it give me error. I want to remove these option. How can i remove this option full? I don't think you can remove them, all you can do is hide them and pass hidden values in the form by changing... <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="inputNs1prefix">{$LANG.serverns1prefix}</label> <input type="text" name="ns1prefix" class="form-control" id="inputNs1prefix" value="{$server.ns1prefix}" placeholder="ns1"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="inputNs2prefix">{$LANG.serverns2prefix}</label> <input type="text" name="ns2prefix" class="form-control" id="inputNs2prefix" value="{$server.ns2prefix}" placeholder="ns2"> </div> </div> </div> to... <input type="hidden" name="ns1prefix" class="form-control" id="inputNs1prefix" value="ns1"> <input type="hidden" name="ns2prefix" class="form-control" id="inputNs2prefix" value="ns2"> 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted May 1, 2017 Author Share Posted May 1, 2017 I don't think you can remove them, all you can do is hide them and pass hidden values in the form by changing... <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="inputNs1prefix">{$LANG.serverns1prefix}</label> <input type="text" name="ns1prefix" class="form-control" id="inputNs1prefix" value="{$server.ns1prefix}" placeholder="ns1"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="inputNs2prefix">{$LANG.serverns2prefix}</label> <input type="text" name="ns2prefix" class="form-control" id="inputNs2prefix" value="{$server.ns2prefix}" placeholder="ns2"> </div> </div> </div> to... <input type="hidden" name="ns1prefix" class="form-control" id="inputNs1prefix" value="ns1"> <input type="hidden" name="ns2prefix" class="form-control" id="inputNs2prefix" value="ns2"> Thank you brain appritiated give me your brian i will use it when ever i don't understand anything then i don't bother you again and again lol 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted May 2, 2017 Author Share Posted May 2, 2017 Hello Brain !! I did add the code in custom.css its working but thing that i am looking is not effecting. Kindly review the picture below. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 2, 2017 Share Posted May 2, 2017 I did add the code in custom.css its working but thing that i am looking is not effecting. Kindly review the picture below. then you might need to take a different path... remove the #order-standard_cart label code from custom.css and add this instead... .labelcolor { color: #ff0000 !important; font-weight: 900 !important; font-size: 15px !important; } and then in configureproduct.tpl, change... <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> to... <label for="inputConfigOption{$configoption.id}" class="labelcolor">{$configoption.optionname}</label> there's probably at least 4 instances of that in the file... 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted May 2, 2017 Author Share Posted May 2, 2017 then you might need to take a different path... remove the #order-standard_cart label code from custom.css and add this instead... .labelcolor { color: #ff0000 !important; font-weight: 900 !important; font-size: 15px !important; } and then in configureproduct.tpl, change... <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> to... <label for="inputConfigOption{$configoption.id}" class="labelcolor">{$configoption.optionname}</label> there's probably at least 4 instances of that in the file... I did try this but still not working any other way ? 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 2, 2017 Share Posted May 2, 2017 I did try this but still not working any other way ? it does work - I tried it on a v6 dev... the other way would be to do it inline... <label for="inputConfigOption{$configoption.id}" style="color: #ff0000; font-weight: 900; font-size: 15px">{$configoption.optionname}</label> 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted May 2, 2017 Author Share Posted May 2, 2017 i don't know i did it the same you told me and also i clear and whole browsing and cash still not working. Review the pictures. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 2, 2017 Share Posted May 2, 2017 Hostname and Root Password are not configurable options - they're separate from that... <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="inputHostname" style="color: #ff0000; font-weight: 900; font-size: 15px">{$LANG.serverhostname}</label> <input type="text" name="hostname" class="form-control" id="inputHostname" value="{$server.hostname}" placeholder="servername.yourdomain.com"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="inputRootpw" style="color: #ff0000; font-weight: 900; font-size: 15px">{$LANG.serverrootpw}</label> <input type="password" name="rootpw" class="form-control" id="inputRootpw" value="{$server.rootpw}"> </div> </div> </div> chances are, you'll be able to use custom.css with these too - it probably didn't work as you weren't adding the class to the right line. 0 Quote Link to comment Share on other sites More sharing options...
yggdrasil Posted May 2, 2017 Share Posted May 2, 2017 Beautiful order form but personally I gave up on configurable options for server configurations like you just posted with WHMCS. The reason: WHMCS has no logic functions. That means that WHMCS can't hide, display or block specific options based on the previous selection in your order form. Most forms have this today. This makes it impossible to properly offer server or cloud configuration with WHMCS unless you want to manually fix the orders or let people order incorrect or invalid settings. Example, users selecting cPanel as control panel choice and then selecting Windows Server as OS choice. The same can be said for your order form. Users selecting a raid configuration that is invalid (odd number of drives) or selecting more RAM than your motherboard can support). Without logic build in, the order forms are pretty much basic. And I suggest this feature years ago. The other software I was using before WHMCS had a simple logic with Javascript that could show or hide fields based on the user's selection. Based on your example, how will you avoid someone selecting Microsoft SQL Server + CentOS which clearly don't work together? 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted May 3, 2017 Author Share Posted May 3, 2017 Hostname and Root Password are not configurable options - they're separate from that... <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="inputHostname" style="color: #ff0000; font-weight: 900; font-size: 15px">{$LANG.serverhostname}</label> <input type="text" name="hostname" class="form-control" id="inputHostname" value="{$server.hostname}" placeholder="servername.yourdomain.com"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="inputRootpw" style="color: #ff0000; font-weight: 900; font-size: 15px">{$LANG.serverrootpw}</label> <input type="password" name="rootpw" class="form-control" id="inputRootpw" value="{$server.rootpw}"> </div> </div> </div> chances are, you'll be able to use custom.css with these too - it probably didn't work as you weren't adding the class to the right line. Hey Brain !!! This has been done like spark but still Configurable Options are not done i did try both way but still not working i don't know what i am missing 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 3, 2017 Share Posted May 3, 2017 Beautiful order form but personally I gave up on configurable options for server configurations like you just posted with WHMCS. The reason:WHMCS has no logic functions. That means that WHMCS can't hide, display or block specific options based on the previous selection in your order form. Most forms have this today. you can do it (hide/display/block etc), but the coding is an absolute pain to configure. but yes - WHMCS should be spending more time fixing issues like that, than some of the trivial features that they waste their time with. This has been done like spark but still Configurable Options are not done i did try both way but still not working i don't know what i am missing have you tried changing the font sizes of the css as I suggested? i'm pretty sure the code I gave you just copies the settings already there, so you wouldn't necessarily notice any difference UNLESS you change the sizes or add colours, styling etc to them. 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted May 3, 2017 Author Share Posted May 3, 2017 have you tried changing the font sizes of the css as I suggested? i'm pretty sure the code I gave you just copies the settings already there, so you wouldn't necessarily notice any difference UNLESS you change the sizes or add colours, styling etc to them. Brian !!! kindly review the below pictures and tell me where i am wrong I have one more issue and i will ask when this issue will resolve 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 3, 2017 Share Posted May 3, 2017 have you changed all four of them ? option 4 is for sliders, so if you aren't using any sliders in your config options, you won't see that change... in fact, taking a look at your configureproduct.tpl, I know that you haven't... the label class missing for option 1... {foreach $configurableoptions as $num => $configoption} {if $configoption.optiontype eq 1} <div class="col-sm-12"> <div class="form-group"> <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> also missing for option 2... {elseif $configoption.optiontype eq 2} <div class="col-sm-12"> <div class="form-group"> <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> {elseif $configoption.optiontype eq 3} <div class="col-sm-12"> <div class="form-group"> <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> and missing for option 3... {elseif $configoption.optiontype eq 4} <div class="col-sm-12"> <div class="form-group"> <label for="inputConfigOption{$configoption.id}" class="labelcolor">{$configoption.optionname}</label> it's there in option 4, but as I suspected, you aren't using sliders... if you had modified all 4 options (as I previously suggested), then it should work... 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted May 4, 2017 Author Share Posted May 4, 2017 have you changed all four of them ? option 4 is for sliders, so if you aren't using any sliders in your config options, you won't see that change... in fact, taking a look at your configureproduct.tpl, I know that you haven't... the label class missing for option 1... {foreach $configurableoptions as $num => $configoption} {if $configoption.optiontype eq 1} <div class="col-sm-12"> <div class="form-group"> <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> also missing for option 2... {elseif $configoption.optiontype eq 2} <div class="col-sm-12"> <div class="form-group"> <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> {elseif $configoption.optiontype eq 3} <div class="col-sm-12"> <div class="form-group"> <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> and missing for option 3... {elseif $configoption.optiontype eq 4} <div class="col-sm-12"> <div class="form-group"> <label for="inputConfigOption{$configoption.id}" class="labelcolor">{$configoption.optionname}</label> it's there in option 4, but as I suspected, you aren't using sliders... if you had modified all 4 options (as I previously suggested), then it should work... Its working like spark brother !! Below is the next issue Kindly review the picture. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 4, 2017 Share Posted May 4, 2017 the quickest way would be to remove <small> and </small> from the code below in viewcart.tpl {if $product.configoptions} <small> {foreach key=confnum item=configoption from=$product.configoptions} » {$configoption.name}: {if $configoption.type eq 1 || $configoption.type eq 2}{$configoption.option}{elseif $configoption.type eq 3}{if $configoption.qty}{$configoption.option}{else}{$LANG.no}{/if}{elseif $configoption.type eq 4}{$configoption.qty} x {$configoption.option}{/if}<br /> {/foreach} </small> {/if} and then I assume your next question is going to be to widen it so the raid card doesn't go onto a new line... personally, i'd leave them as they are, but if you want to you could change the values in... <div class="{if $showqtyoptions}col-sm-5{else}col-sm-7{/if}"> <div class="col-sm-4 item-price"> to... <div class="{if $showqtyoptions}col-sm-6{else}col-sm-8{/if}"> <div class="col-sm-3 item-price"> 0 Quote Link to comment Share on other sites More sharing options...
alirazakhalid Posted May 5, 2017 Author Share Posted May 5, 2017 and then I assume your next question is going to be to widen it so the raid card doesn't go onto a new line... personally, i'd leave them as they are, but if you want to you could change the values in.. hahahah I did everything but i can see that its still showing too small and little difficult to read. I want little bigger to readable you get me. 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.