145 comments found.
Hi I this template is amazing. Are you guys available for integration?
Hello,
Thank you very much.
May I know what kind of Integration/Customization you want?
Thank You
How do I remove the initial animation with the name nectar and go straight to the home page?
Hello,
1. Openassets/custom/js/routes.js
2. Inside
{
path: '/',
componentUrl: './partials/screens/splash.html'
}
Replace splash.html with home.html
Thank You
Hi,
How do I edit this template? Do you have some docs I can read? Thanks
You can find the docs here https://pmsgz.gitbook.io/nectar
App scrolling issue when i open app template in iphone Safari and Chrome browser then click on “components” section open any module, and press back button, phone scrolling stuck for 15-20 Second.. please fix this issue.
Hello,
Please check your mail.
Thank You
Hello, I like your template is very very complete, can you give me some information about post data for example send post form contact us to my php server?
Thanks
Hello,
Please provide me your email address. I will send you the php code for contact us form and also the steps to integrate it.
hello, thanks for your reply, my mail is cuorefolle@gmail.com and if you
have possibility can you help me by step to integrate onesignal if possible 
and other question can you upgrade framework7 ?
Many thanks 5 star rate
You have only one product description page for productlist.html. I would like to provide unique description for each product. How to set description list for each product
For unique description of each product in the list, you will have to store them in the database and fetch them by their product id via AJAX inside the app.
Hello,
Im interested in buying this theme but curious of a few things.
Mainly can I use python functions with this for pulling server side information?
Thanks
Hello,
Thank you for your interest in Nectar.
You will need to use AJAX functions to pull information from the server.
These AJAX functions are independent of the server side language.
So, whether you use Python or Java or Ruby on server side, you need to use AJAX to communicate.
Thank You
Regards, Praveen Mujawdiya
I’m sorry to ask you another question.
You are about to create a new link page. So I set the ‘path’ and ‘url’ in the routes.js file and tried the link but it is not connected.
So I did the same with other link files. I only set the name differently. I placed it in the same directory. It still does not link.
[index.html] ”/delivery_list”
[routes.js] { path: ’/delivery_list’, componentUrl: ’./partials/delivery_list.html’ },
I checked it now.
It will link normally on PC. However, there is no link on mobile.
Hello,
The issue seems strange. If it is working on PC, it should work on mobile as well. It would be very helpful, if you could provide me the live link to your web app, so I can check the issue there.
Thank You
Click on “맛집”
http://www.kiwimedia.co.kr/test/dingdong2/www/Did not you work on something? Suddenly, iOS, android mobile are good.
Hello,
I have checked the web app and routes.js file. It is perfect. The link might not be working due to browser cache issues.
If something similar happens next time, make sure that you clear the browser cache.
Thank You
The browser cache portion seems to be correct. Has confirmed. Thank You
How can I disable the Cache? In Chrome I have to double refresh.
Hello,
As Nectar is PWA by default, it uses a kind of caching strategy called stale-while-revalidate, in which the request is responded as quickly as possible with a cached response if available, falling back to the network request if it’s not cached. The network request is then used to update the cache.
Therefore, you have to double refresh after making changes in the files.
Solution
You will need to change the caching strategy inside the service-worker.js file.
The service worker is based on Google Workbox. If provides different kinds of caching strategies. See here https://developers.google.com/web/tools/workbox/modules/workbox-strategies
For your case, you should change the strategy from stale-while-revalidate to network-first
service-worker.js file.
2. Replace Line 12, 13, 14 with
workbox.strategies.networkFirst()
Or if you don’t need caching in your web app, then remove everything after line 10
I hope it helps.
Thank You
Works perfect. Thank you very much!
BTW: Great template / work. Love it!
Glad to know that it worked.
Your review on Nectar is greatly appreciated and will help us to improve the product and other buyers.
Thank You! Have a great day!
Regards, Praveen Mujawdiya
hi there, is the PWA functionality of this app capable of using phone camera already in both android and ios? we will be developing simple app but needs camera and gps ..
Hello,
Yes, You can use both Camera and GPS in Nectar for both Android and iOS, using Media Capture API and Geolocation API respectively.
By default, Nectar provides the implementation of Geolocation API. See demo at https://nectar.website/material-hamburger/www/#!/web-apis/geolocation
If you are using camera for capturing photos, then you can use simple
<input type="file" accept="image/*">
For advanced usage of camera, you can see implementation of Media Capture API here https://whatwebcando.today/camera-microphone.html
Thank You
Some questions before buying…. woocommerce products can sync with this? if checkout options can be edited ? will it support paytm payment gateway?
Hello,
1. Nectar does not provide out-of-the-box support for WooCommerce. You will need to make use of WooCommerce REST API for syncing products.
2. Yes, you can edit checkout options as per your needs.
3. As Paytm provides API and SDKs for Web and Apps, Nectar will support the gateway.
Here is the list of resources, which might be helpful for you: https://woocommerce.github.io/woocommerce-rest-api-docs/ https://developer.paytm.com/docs https://www.npmjs.com/package/cordova-plugin-paytmThank You
Thanks for quick reply.if possible please provide ur email id as we want some further info regarding customisation.
Sure, It’s praveen.mujawdiya@gmail.com
We have mailed you please check..
In addition, I would like to make the theme application pages selected at the first execution run also.
And, even if you change the theme color according to the guide, the color does not change. (https://pmsgz.gitbook.io/connectar/the-basics/theming)
A. Sorry, I could not understand your query. Could you please explain this?
I would like to make the theme application pages selected at the first execution run also.
B. When you change the theme color inside config.js, it is not being applied because it is set from the developer side. Let’s understand this flow: When the app is loaded for the first time by the user, the default theme color is fetched from the config.js file. (In our case it is ‘pink’) Once the app is loaded, this theme color (pink) is set as user preference inside Local Storage. Now if the user changes the theme color from the app, for example (orange), then ‘pink’ is replace with ‘orange’ inside Local Storage.
Here, the user preference > config.js theme color
When you first run three screens out one by one, you can not see the screen to customize the color and so on.
I do not want the theme color to be set by the user, but I want to specify it arbitrarily. What should I do?
A. The default flow of Nectar is: 1. Splash Screen 2. Walkthrough 3. Home
In this flow, the walkthrough screen is shown to the user for the first time only. This is how the walkthrough should work in apps. This walkthrough screen contains the slide to change theme color (swipe over the screen, to change slides)
If you want to show just a single screen specifically for changing the theme color every time the user starts the app, then we will need to create a new html file for that.
B. I do not want the theme color to be set by the user, but I want to specify it arbitrarily. What should I do? For this a change is to be made inside the core nectar.js file which contains theme changing code.
I will provide you the code for both (html file and theme change code) within next 24 hours.
Thank You
Hello,
Please download the files from here: https://www.dropbox.com/sh/hoajmouiftgmd8s/AAC__PlW6gVAeLxZI-EWdGuIa?dl=0
Replace
/partials/screens/walkthrough.htmland
/assets/vendor/nectar/nectar.jswith the downloaded files.
Thank You
Hi. I want to use it after purchasing today.
1. After running the template, after the splash screen, home.html in the screens folder is executed.
I do not see the splash screen and want home.html.
2. The left slide panel is touch type. How do I make it possible to drag?
I would appreciate your attention.
Hello,
A. To make home.html the entry point of your app, ie, the first screen:
1. Open/assets/custom/js/routes.js2. Inside
{
path: '/',
componentUrl: './partials/screens/splash.html'
}
Replace splash.htmlwith
home.html
B. To make side panel swipeable:
1. Open/assets/custom/js/init.js2. At line no. 72, inside
panel: {
swipe: false
}
Replace falsewith
'both'
Thank You
Thank you for your quick reply.
{ path: ’/’, componentUrl: ’./partials/screens/home.html’ }
The splash screen will not appear, but only the white screen will be visible. home.html will not appear.
The swipe has been resolved.
Sorry. When we renew, we both apply well.
Glad it worked!
is this template jquery dependent or independent ?
Hello, This template depends on jQuery. Thank You!
helllo do u have any template without jquery because i need to deploy in react.js
Sorry, I don’t have any other template.
there’s anyone have sample to check in my phone please ?
Hi,
You can the check the web app demo on your phone at https://nectar.website
If you want to test the APK on you android device then you can download it from https://gonative.io/share/deyono
Or If you want to check the android app available on PlayStore developed using Nectar, then you can install and test it from here https://play.google.com/store/apps/details?id=org.gyaanalert.gyaanalert
Thank You,
Regards, Praveen Mujawdiya
Hello Praveen.
Long time this question has been asked:
-Will you release a new version with F7 v2 or v3? -If so, will this be a free upgrade or you will sell it as a new package? -Finally, you mention that the template is PWA ready, is that fully ready? Can we take it as-is and test PWA with the examples?
By the way, great work, please keep up with it
Hello,
Yes, I will release a new version of Nectar with Framework7 v3 and it will be a free upgrade. However, it will not be backward compatible with Framework7 v1. I’m currently working on it and you can expect the release in mid-January.
Nectar currently contains the manifest and meta tags required for making a PWA but the service worker is not configured for offline support. You will have to configure the SW according to your needs. https://developers.google.com/web/tools/workbox/guides/get-started
Thank You! Have a great day!
Best Regards, Praveen Mujawdiya
Hello,
I’m glad to let you know that the new version of Nectar based on F7 v3 has been released.
Please check the demo at https://nectar.website
Thank You
Hi, I want to use modals on the home page. When you remove it and add “modals”, some functions become corrupted. How should I do?
Hello,
I have tried adding modals on the home page on my local server and they are working absolutely fine without breaking any other functionalities.
It would be very helpful if you could provide me the live link, so I can check there whats’s actually happening?
Thank You
hello, i create phonegap app using Nectar Web Kit it working nice but when my phone sleep >> my app fraze so i cant use my app after phone sleep only close the app and start it again
i try this but my problem didnt fixed https://github.com/framework7io/Framework7/issues/1361Hello,
Please check this: https://stackoverflow.com/questions/49928310/cordova-pgb-app-freezes-after-resume This might help you.
Thank You
interested with this kit, but does this have a desktop version as well? im trying to target both desktop and mobile with one website and code only (PWA)
Hello,
Thank you for your interest in Nectar.
Nectar is mainly designed for mobiles and tablets. You can test how it looks on desktops here at: https://nectar.website/material
Thank You
What is the best way to catch data from the input text fields?
Hello,
To catch data from the input text fields, Framework7 provides a simple method which you can call on the <form> element to get its data.
The method is myApp.formToData('FormElementCSSSelector');
EXAMPLE:
<form name="profile">
<input type="text" name="name" />
<textarea name="address"></textarea>
<input type="number" name="age" />
<button type="submit">Submit</button>
</form>
Now, to get data from the <form>, we write this JS code
$$('form[name=profile]').on('submit', function(e) {
e.preventDefault();
var formData = myApp.formToData(e.target);
console.log(formData);
});
That’s all you need to do to get data from the form inputs.
Let me know if it works.
Thank You
Regards, Praveen Mujawdiya
Hi Praveen,
Thank you very much! When I am trying to implement the above example into form-elements I do not get anything to print in the console. Also, the submit button causes the page to reload, any idea of why that may be happening? It does seem to be doing a GET request though
Hello Alex,
I have tested the above code and it is working absolutely fine.
Might be it is not working due to these reasons:
1. You must wrap the input elements inside <form> tag.
2. The submit button must be inside <form> as well.
3. The JS code must be put inside .js file. You must not write the JS code inside <script> tag, in html file. It won’t work.
For your convenience, I have modified the form-elements.html and also added the required JS code. Please download it from here: https://www.dropbox.com/s/kd2jb2ojhgsvp9b/form-elements.zip?dl=0
After extracting the ZIP, replace form-elements.html, copy code from form-elements.js and paste it into assets/custom/js/components.js at the end.
Thank You
Thank you!
You’re welcome
