145 comments found.
Hello, i have renew update 2 times … this is my 3th time but i can’t renew you told me 2 month ago about update and no update released can you provide update or not ?
Hello,
I will not provide any update at the moment.
Framework7 v6 is currently under development and the next update of Nectar will be based on this.
Generally, with every major release of Framework7 comes major changes, which makes the previous versions directly incompatible.
Framework7 v6 will also contain major changes to the code, therefore it will not be compatible with the previous versions.
So, to update your app, you must follow the migration guides provided by Framework7.
Thank You
hi… I got problem that I really difficult to integrate with onesignal, can you pleae help…
Hello,
Can you please share your email address? I will send you an example code integration for OneSignal.
Thank You
Any news about update ??
Would be awesome if you released a Framework7 VueJS version.
Hello,
Thank you for your valuable suggestion. Will certainly consider on this.
Thank You
First of all thank you so much for a wonderful script. May I know when you will be able to update it on the latest framework 7 module?
Hello,
Thank you very much 
At present, Framework7 v6 is under development. Once its stable version is released, I will update Nectar to that version.
Thank You
Regards, Praveen Mujawdiya
Hello,
We have updated Nectar to Framework7 v7.1.5
Please check the demo at https://nectar.website/demo
Thank You
Have a forecast to migrate framework7?
Hello,
The update will be released in December 2020 with the latest version of Framework7.
Thank You
Hello,
We have updated Nectar to Framework7 v7.1.5
Please check the demo at https://nectar.website/demo
Thank You
hey there this is really great I was wondering if your template can function just as a normal website as well and if it is possible to preview it on, e.g. a laptop?
Hello,
Thank you very much
Nectar is mainly designed for phone and tablet resolutions. It will certainly work on desktops/laptops as well, but the UI/UX will not be as good as it should be.
You can check how Nectar looks on desktop/laptop by visiting this link: https://nectar.website/material-hamburger/www
Thank You
Regards, Praveen Mujawdiya
Hi, When are you willing to release the update, I would like to buy after the update.
Hello,
The update will be released in December 2020. As this update is going to be huge, it will take considerable amount of time.
Thank You
Hello,
We have updated Nectar to Framework7 v7.1.5
Please check the demo at https://nectar.website/demo
Thank You
Not able to open a camera through cordova camera plugin. please help
Hello,
I got your email. I will check the code, fix it and send you the solution.
Thank You
when You release your New Update?
Hello,
I’m working on a new product to be released in July. Once it is released, I will work on Nectar update.
Thank You
Hi Preeven, Happy New Year Still we are waiting for update When you release?
Hello,
We have updated Nectar to Framework7 v7.1.5
Please check the demo at https://nectar.website/demo
Thank You
Hello how can i add a qr codereader on framework7 ,some information o anything ?
Hello,
For Web, you can use this library: https://github.com/cozmo/jsQR For Cordova, you can use plugin: https://www.npmjs.com/package/cordova-plugin-qrscanner-dual
These use device camera to scan QR codes.
Thank You
Regards, Praveen Mujawdiya
Any news about update?
The new update based on Framework7 v5 is scheduled to be released in June-July 2020.
Hello, any news about update ?
Hello,
I’m working on a new product to be released in July. Once it is released, I will work on Nectar update.
Thank You
I am not a professianol developer. This is my first expierince with framework7 and PWA project, But Nectar is a really really simple and most efective templates. Praveen is a great guy. You can feel his support deeply. You will not be alone when event you are not professional. in 4 days i nearly finish my views and started to make backend side. Amazing works. Keep going.
Thank you very much
It’s possible to use it as a normal html template, I mean, full url path instead one place loading, so I can share urls on social media? thanks!
Hello,
Nectar is based on Framework7, which is a Single Page Application framework. The entry point of SPAs is always index.html, which loads the subsequent inner pages using AJAX. Therefore you cannot use it as traditional HTML website.
To make SEO and Social Sharing work in SPAs, you have to resort on techniques such as Server-Side Rendering (SSR), Pre-rendering, etc. All other SPA frameworks such as Angular, React, Vue use these techniques.
Here is the tutorial on how you can share links on social media in a SPA https://developer.mastercard.com/blog/social-sharing-for-a-single-page-application
I hope it helps.
Let me know if you have any questions.
Thank You
Regards, Praveen Mujawdiya
Amazing work! I have three pre-purchase questions. How do you organize 1) chat and 2) e-commerce I assume that the chat is connected to a database and e-commerce to wordpress, if so, is there specific documentation? 3) Is there a way to organize a map with pre-arranged pins and view your position with the classic blue dot in the middle of the nearby red pins, all this within the app? Thanks and congratulations for the work.
Hello,
1 & 2) Nectar is a front-end only solution. It does not come with any backend or database. So to make the Chat and E-commerce functionality work, you will have to integrate on your own.
3) To realize this, you will need Maps & Geolocation functionalities. Both of these are provided in Nectar. For Maps, Nectar uses Google Maps JS SDK and for Geolocation, HTML5 Geolocation API is used. Using these, you can achieve the desired results perfectly.
Let me know if you have any questions.
Thank You
Regards, Praveen Mujawdiya
Thanks for the reply, but I don’t understand, in your demo there is a chat and an e-commerce, how do you connect? I have seen in the various comments that something can be done with wp json. Do you attach documentation to the purchase? And for the chat ok I have to do it alone but is there any instruction? Thank you. Matteo
Hello,
1) The chat and e-commerce pages contain static content only. It is hard-coded. You will need to connect these pages to your backend using AJAX.
2) WP-JSON is a REST API for WordPress websites. Using this, you can show your wordpress website content in app. But this does not mean that all the features of your wordpress website can be made available as-is inside app using REST API. WP-JSON has its own limitations.
3) Yes the documentation is provided with the purchased files. It is also available online at https://pmsgz.gitbook.io/nectar You can read here.
4) Yes, for chat you will have to implement by yourself. No instructions are provided for this.
Nectar is a front-end solution only. All the backend and database related stuffs are to be implemented by yourself. If you are looking for a fully functional ready-to-use product, this might not be suitable for you.
Let me know if you have any questions.
Thank You
Regards, Praveen Mujawdiya
Hello thanks for the answers, I read the excellent instructions and I understood that the cart is static. Do we assume that it was made to work with Alasql? By studying patiently you can get it working is that the way? Same thing for Chat with Disqus? Thank you.
Hello,
1. No, AlaSQL is a different thing. It is solely used for offline databases. For cart implementation, you will still need to connect it to your backend. A good example of using AlaSQL is ‘Saving articles for offline reading’ or creating purely offline apps with facility for database.
2. Chat Screen is intended for using in Chat Apps or in apps where feature for chating with members is provided, while Disqus is a ready-made solution for integrating commenting system in your app. So that you don’t have to implement your own.
Thank You
Regards, Praveen Mujawdiya
Thanks for the precise reply, you are very kind. Yet I still don’t understand why you do demos with shopping cart and chat and don’t give a hint of how to put them in place. However I will definitely buy because it is an excellent job, if you remove this doubt from my head, I would be happy. Mateo, Thank you
Hello,
Generally, the main purpose of templates is to save considerable amount of time on front-end development by providing ready-made screen which developers can integrate with the backend of their choice.
As it solely depends on developers how and using which backend language they integrate, it becomes difficult to provide examples for backend integration.
But one thing is for sure that, to communicate with the backend, whatever the language is, AJAX is used. And in case of Nectar (as it is an SPA) all the communications made to the backend must be via AJAX. You cannot mix the backend and frontend code together into one file.
Let me know if you have any doubts.
Thank You
Regards, Praveen Mujawdiya
how to solve apple reject app
Hello,
In iOS Cordova Apps, by default, anything stored in web storage (Local/Session Storage, IndexedDB, WebQL, or Service-Worker data) is automatically backed up to the iCloud. So this warning appears whenever we use too much web storage for storing app data.
Please add this line to your config.xml
<preference name="BackupWebStorage" value="none" />
This will prevent the automatic backup of your app data to the iCloud of user device.
Let me know if it helps you.
Thank You
Regards, Praveen Mujawdiya
Hello, thanks for reply I have do this but the page is blank where start on iOS 13 I have send on private the url
Hello,
I have just checked about this issue reported on Cordova iOS GitHub repository here: https://github.com/apache/cordova-ios/issues/706
Please check the solution here: https://github.com/apache/cordova-ios/issues/706#issuecomment-558169149
This might help you.
Let me know if the solution is working.
Thank You
Hello, i have try to solve no success can you explain me what i have to do …
Hello,
According to the solution on GitHub, you need to follow the steps below:
1. Open config.xml file 2. Look for:<plugin name="cordova-plugin-inappbrowser" source="npm" spec="3.0.0" />3. Replace this with
<plugin name="cordova-plugin-inappbrowser" spec="git+https://github.com/apache/cordova-plugin-inappbrowser" />
This has helped solve the issue.
Now recompile you app and check.
I have do i never solved issue…. 
2020-01-24 11:47:53.849015+0100 Ritirato[57464:2742638] Apache Cordova native platform version 5.0.1 is starting.
2020-01-24 11:47:53.849145+0100 Ritirato[57464:2742638] Multi-tasking -> Device: YES, App: YES
2020-01-24 11:47:54.040591+0100 Ritirato[57464:2742638] CDVWKWebViewEngine will reload WKWebView if required on resume
2020-01-24 11:47:54.040690+0100 Ritirato[57464:2742638] Using WKWebView
2020-01-24 11:47:54.040884+0100 Ritirato[57464:2742638] [CDVTimer][console] 0.042081ms
2020-01-24 11:47:54.041005+0100 Ritirato[57464:2742638] [CDVTimer][handleopenurl] 0.043988ms
2020-01-24 11:47:54.041582+0100 Ritirato[57464:2742638] Unlimited access to network resources
2020-01-24 11:47:54.041808+0100 Ritirato[57464:2742638] Unlimited access to network resources
2020-01-24 11:47:54.041905+0100 Ritirato[57464:2742638] [CDVTimer][intentandnavigationfilter] 0.820994ms
2020-01-24 11:47:54.042023+0100 Ritirato[57464:2742638] [CDVTimer][gesturehandler] 0.038981ms
2020-01-24 11:47:54.042225+0100 Ritirato[57464:2742638] [CDVTimer][keyboard] 0.114083ms
2020-01-24 11:47:54.045136+0100 Ritirato[57464:2742638] [CDVTimer][splashscreen] 2.833009ms
2020-01-24 11:47:54.046122+0100 Ritirato[57464:2742638] [CDVTimer][statusbar] 0.882983ms
2020-01-24 11:47:54.046272+0100 Ritirato[57464:2742638] [CDVTimer][socialsharing] 0.052929ms
2020-01-24 11:47:54.046361+0100 Ritirato[57464:2742638] [CDVTimer][TotalPluginStartup] 5.544066ms
2020-01-24 11:47:54.156428+0100 Ritirato[57464:2743082] [Client] Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 "The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated." UserInfo={NSDebugDescription=The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated.}
2020-01-24 11:47:54.156462+0100 Ritirato[57464:2743063] [Client] Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 "The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated." UserInfo={NSDebugDescription=The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated.}
2020-01-24 11:47:54.156871+0100 Ritirato[57464:2743082] [Client] Updating selectors after delegate addition failed with: Error Domain=NSCocoaErrorDomain Code=4099 "The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated." UserInfo={NSDebugDescription=The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated.}
2020-01-24 11:47:54.176779+0100 Ritirato[57464:2743063] [Client] Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 "The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated." UserInfo={NSDebugDescription=The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated.}
2020-01-24 11:47:54.176806+0100 Ritirato[57464:2743082] [Client] Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 "The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated." UserInfo={NSDebugDescription=The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated.}
2020-01-24 11:47:54.177204+0100 Ritirato[57464:2743063] [Client] Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 "The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated." UserInfo={NSDebugDescription=The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated.}
2020-01-24 11:47:54.177415+0100 Ritirato[57464:2743068] [Client] Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 "The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated." UserInfo={NSDebugDescription=The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated.}
2020-01-24 11:47:54.207358+0100 Ritirato[57464:2742876] - <Google>[I-ACS025031] AdMob App ID changed. Original, new: (nil), ca-app-pub-3940256099942544~3347511713
2020-01-24 11:47:54.208477+0100 Ritirato[57464:2742876] - <Google>[I-ACS023007] Analytics v.60201000 started
2020-01-24 11:47:54.209315+0100 Ritirato[57464:2742876] - <Google>[I-ACS023008] To enable debug logging set the following application argument: -APMAnalyticsDebugEnabled (see http://goo.gl/RfcP7r)
2020-01-24 11:47:54.242805+0100 Ritirato[57464:2742878] - <Google>[I-ACS023012] Analytics collection enabled
Hello,
You do not need to worry. You should know as a developer that when working with tools/frameworks/libraries related to Cordova, it is common that some unexpected bugs appear.
Regarding the issue you have mentioned, it only appears on iOS 13+. So unless the Cordova iOS team fixes this, we will need to rely on the workarounds and this is what the solutions at https://github.com/apache/cordova-ios/issues/706 suggests.
Now coming to your issue,
Started backup to iCloud! Please be careful. Your application might be rejected by Apple if you store too much data. For more information please read “iOS Data Storage Guidelines” at: https://developer.apple.com/icloud/documentation/data-storage/
This warning is being shown because in your app, you have used too much storage provided by the browser.
Now as you are creating native app for App store, you should disable the service worker (use for storing data), as it is needed only for the web.
1. Go to assets/custom/init.js
2. Inside app.on('init', function() {
3. Remove or comment the line initializeServiceWorker();
This solution will disable the service worker for app. Now the storage will not be used and you won’t get the warning.
Also in the app link you have shared with me, there a a lot of errors continuosly appearing in the console. This also might be the cause of this issue.
It would be very helpful, if you could share the code with me, so that I can have a look into it and be able to find the cause of this issue.
Thank You
Hello, you have got my mail ?... can you reply me to solve issue…
Hello,
I have checked the source code of your project.
After checking the code and searching on forums for related issues, it is obvious that iOS 13+ is causing buggy behaviors in Cordova apps. A number of developers have reported about these after updating to iOS 13, before which the apps were running without any issue. Also the root cause has not been found yet.
The only solution developers are relying upon is workarounds, until a patch related to this is released.
Here, I’m providing links of issues reported on forums and you can find various solutions there, which have worked for them successfully.
1. https://github.com/apache/cordova-ios/issues/680 In this issue, three solutions have been suggested. These are related to WebSQL, User Permission and Google Analytics Plugin.
2. https://github.com/apache/cordova-ios/issues/706 This solution suggests updating the InAppBrowser, and a workaround related to splash screen.
But one interesting thing here is that, the warning message if they are getting Started backup to iCloud! Please be careful. Your application might be rejected by Apple if you store too much data. For more information please read “iOS Data Storage Guidelines has nothing to do with the issue. So, if your app is already working with this warning, then you can safely ignore it.
Below are my suggested solutions, which might probably help you.
1. You can check by removing the plugins in config.xml one-by-one. This may help us find if some plugin is causing issues with iOS13. Try upgrading/downgrading its version and then re-check.
2. Update the Cordova CLI version to 9.0.0, which is the latest as of now. You are using 8.1.1 in your app. See if this helps.
<preference name="phonegap-version" value="cli-9.0.0" />
3. Remove the splash-screen plugin and check, as this has caused some issue in Android 9.0 as well previously.
4. Try removing the WKWebView plugin and then check. If this works, then you can use some other working fork of WKWebView provided by Ionic Team. 5. At last, check if this line:
<preference name="BackupWebStorage" value="local" />removes the warning without causing any further error. Then you are good to go.
Let me know if any of these workarounds help you.
Thank You
Regards, Praveen Mujawdiya
I have try all this no work.. so you update any new version or any fix I recreate the project ?
Hello,
A fix cannot be provided until we know the main issue causing this, as this is not affecting all the cordova apps deployed for iOS13. It is a unknown buggy behaviour.
Please do this and verify if something in config.xml is preventing the app from running after splash screen.
1. Download the Nectar source code zip from your ThemeForest account. 2. Compile IPA and test on your device.
Let me know if it works or it stucks.
Thank You
Hi @pmsgz How will we retrieve sms on otp-verification page if some one has got sms by otp mobile
Hello,
Due to security concerns, browsers/platforms implement SMS reading functionality in different ways or not at all.
We will first discuss for Web and then for Apps.
1. WEB
In Web, there is no such official API (similar to geolocation or notifications) yet which provides access to reading SMS. Therefore when the users retrieve OTP, they will have to manually input in OTP Verification screen. This is how it works for web at present.
Fortunately, Safari/iOS (v12+) provides a good alternative ‘Autocomplete’ for SMS API. Please read this for implementation: https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element
But, There is no such alternative for Chrome/Android or other browsers yet.
Alternatively, Android provides an option for copying the SMS code directly from push notification, without opening the full message.
However, SMS Retriever API for Web (Chrome) is currently under development. You can check its status here: https://web.dev/sms-receiver-api-announcement.
2. APP
For App, iOS/Safari uses the same ‘Autocomplete’ feature similar to Web for SMS Autofill. It does not provide any API for that again due to security concerns.
Android provides SMS Retriever API, for reading a SMS being received while the app is active. So if you are developing a Cordova/PhoneGap app using Nectar, then you can use this plugin: https://github.com/andreszs/cordova-plugin-sms-retriever
I hope my answer helps you.
Thank You
Regards, Praveen Mujawdiya
Hi @pmsgz, How to change splash screen nectar text ?
Hello,
The splash screen text is made of SVG and animated using javascript.
Please follow this step-by-step tutorial to create one.
1. Install InkScape (SVG Editing Tool). You can download from https://inkscape.org 2. Open Inkscape, a blank document is opened. 3. Now, set the document dimensions. Go to File > Document Properties or press Shift + Ctrl + D. In the Page tab, set custom size as per your need. 4. After setting the document size, select Text tool from the left toolbar or press F8. Now write the text, set its font, size and color. The font used in Nectar logo is Georgia. 5. Now, press F1, and select the text object. To make the text animatable using JS, we will need to convert the selected text into path. 6. So, to convert text into path, apply Path > Path to Object or press Shift + Ctrl + C. 7. Ungroup it, Object > Ungroup or press Shift + Ctrl + G. 8. Select all the ungrouped (individual) letters and apply Ctrl+J (Dynamic Offset). 9. Save the SVG file. 10. Now we will need to optimize and minimize the SVG file. So, go to https://jakearchibald.github.io/svgomg, upload the SVG. 11. Set the following parameters: Keep these UNCHECKED: Show original, Merge paths, Move attrs to parent group, Prefer viewBox to width/height, Remove viewBox Keep all other parameters CHECKED 12. Then, download the optimized SVG file. 13. Now open the optimized SVG file in a text editor, copy its content. 14. Open splash.html file. Inside <div class="splash-media">, Replace the current <svg> with the SVG you have copied. 15. Add class="logo" to the <svg> element. 16. Inside <svg> you will see a number of <path> elements. These <path> elements have fill="_COLOR_" attribute. Add stroke="_COLOR_" to these <path> elements. _COLOR_ can be in hex, rgb format. I have set both fill and stroke color same. Please note that the <path> element must have stroke property. Otherwise, the animation will not work.That's all you need to create animated SVG. Thank You Regards, Praveen Mujawdiya</div>
Or if you just want a static image then replace the <svg> element with <img /> element.
Hello again, I have a bigger issue, i have been working on it for couple hours now. Even days to be honest.
I am using the tabbar not to show VIEWS as tabs (as you guys are using it in the template) but using it to trigger pages:
<div class="views tabs">
<div class="toolbar toolbar-bottom-md tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="/home" class="tab-link tab-link-active">
<i class="icon mk_micon mk_flatkey" />
<span class="tabbar-label">Clés</span>
</a>
<a href="/screens/order" class="tab-link">
<i class="icon mk_micon mk_flatorder" />
<span class="tabbar-label">Commandes</span>
</a>
<a href="/screens/user-profile" class="tab-link">
<i class="icon mk_micon mk_flataccount" />
<span class="tabbar-label">Compte</span>
</a>
<a href="/screens/contact-us" class="tab-link">
<i class="icon mk_micon mk_flatcontact" />
<span class="tabbar-label">Contact</span>
</a>
</div>
</div>
</div>
instead of
<div class="views tabs ios-edges">
<div class="toolbar toolbar-bottom-md tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab-home" class="tab-link tab-link-active">
<i class="icon f7-icons ios-only">home</i>
<i class="icon material-icons md-only">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#tab-components" class="tab-link">
<i class="icon f7-icons ios-only">data</i>
<i class="icon material-icons md-only">widgets</i>
<span class="tabbar-label">Components</span>
</a>
<a href="#tab-screens" class="tab-link">
<i class="icon f7-icons ios-only">collection</i>
<i class="icon material-icons md-only">view_carousel</i>
<span class="tabbar-label">Screens</span>
</a>
<a href="#tab-more" class="tab-link">
<i class="icon f7-icons ios-only">more_vertical</i>
<i class="icon material-icons md-only">more_vert</i>
<span class="tabbar-label">More</span>
</a>
</div>
</div>
</div>
Now, each time I click on an icon, instead of triggering a “tab” i trigger a new page. This works pretty good. But in order to not cummulate open pages (as one has to click the back button to “close” a page and alss to maintain a good flow I force the tabbar to disappear with the no-toolbar inside the div.
Now this works verry well, i now can click on an icon in the bottom toolbar, it opens up a page and makes the toolbar disappear. The user has to click the back button to “close” the page and make the toolbar reappear.
The issue:
The issue is: If I refresh the app after using it for a while (scroll down on an android device or a simple refresh on a computer with dev tools on) and again click on a link on the toolbard i will correctly be directed to a page, once i click a back button again to “close” the page and to show the toolbar again, the toolbar appears and automaticly disappears.
At this point there is no way to make the toolbard reappear. I have to clear the Application Cache to make it work again. Each time i refresh the app without clearing the Application cache i make the toolbar disappear while hitting the back button.
I belive i am having an issue with app.toolbar.show(’.toolbar’, false);
Thanks if you can find an answer!
I have a link for you with the same files uploaded and a video also where i reproduce the issue if you want
Hello,
Do you guys have any idea on how to remove the white line on top of the active element inside the tabbar ?
You propose 2 menu types, tabbar or hamlburger. If tabbar is choosen, when you clic on an icon a white line pops up on top of it inidcating you are inside that menu (active). I would like to modify or remove it. I have been searching but no css visible. i belibe you guys are adding it via JS but can’t find the file…
Thanks à lot.
Hello,
The white line that appears on top of an active tab element is added dynamically via JavaScript. To modify its CSS, please use the following selectors:
.md .tabbar .tab-link-highlight, .md .tabbar-labels .tab-link-highlight {
background: transparent;
}
Let me know if it works for you.
Thank You
Regards, Praveen Mujawdiya
Thanks it works like a charm, could not find where it was.
