I feel like I am being stupid.
in the docs it says ngCart will render a checkout button with this:
<ngcart-checkout service="http" settings="{ url:'/checkout' }"></ngcart-checkout>
However this returns a 404. I have setup my checkout view and added to the routeprovider (which works with a normal link)
I have also tried variations (add hashbang etc) and links to non-angular pages but everything 404s
ngCart's example seem to invoke the checkout button like so:
<div ng-if="service=='http' || service == 'log'">
<button class="btn btn-primary" ng-click="checkout()" ng-disabled="!ngCart.getTotalItems()" ng-transclude>Checkout</button>
</div>
This returns: provider.checkout is not a function - expected as I haven't declared it. But I wouldn't know where to start with creating a function to open the checkout page.
Any help would be awesome!
Try changing your code like this:
<ngcart-checkout service="http" settings="{ url:'/#/checkout' }"></ngcart-checkout>
Also for ngCart, you'll have to add some more information to your settings object. Such as your paypal email, order items, total price, etc. See the docs.
Stupidity resolved:
Its a post request - which needs to go to the server. You can add ng-href="" to the checkout button inside the template files to progress to the checkout page.
Related
<Button href={node.slug}>
<span>Read more</span>
</Button>
So basically this is a button in a Card component, i don't think more code would present more meaning, please ask for more if needed. The node.slug variable is something like "product-name". In local environment works fine, but not after deployment on Github pages.
This is a button on a product-category page(i.e. /tools or /maintenance), clicking the button the first time, takes me to:
xxx.github.io/project-name/product-name/
Issue is that after i go back and then click the button again, /product-category/ gets added to the URL:
xxx.github.io/project-name/product-category/product-name/
This is not the link i want to be at, as there is no page here. The first URL is where i want to be, as that's the URL type where products are at. /product-category/ will not go away unless i click the Home Page button.
If I infer correctly node.slug is something like "product-name".
That means that it is not an absolute path, and therefore you can interpret it as ./product-name.
Try with:
<Button href={`/project-name/${node.slug}`}> ... </Button>
Another approach would be to change your base href of your pages. Add a <base> element in you <head>:
<head>
...
<base href="http://xxx.github.io/project-name/">
</head>
Then all your non-absolute hrefs will start from that base.
Don’t forget to add a / at the end of the base’s href!
I want to popup a Jira request popup, on click of an icon. This icon's css class is created in the JQ grid, in the column model. On the click of this icon, I need to open a Jira request popup.
can someone shed some light to achieve this.
EDIT - If you are talking about adding a JIRA issue collector to your own site, then this may help:
Step 1: Create an issue collector within Jira. Its a straight forward process and you can find the steps here or follow these steps:
Login to Jira
Choose > Projects.
On the left of the Project Summary page, click the Issue Collectors tab. The Issue Collectors page is displayed, listing any issue collectors that have already been set up in your project.
Click the Add Issue Collector button to open the Add Issue Collector page.
In the top section of the Add Issue Collector page, fill in the fields provided (name, description, issue type, issue reporter, match reporter, collector browser info)
In the middle section of the Add Issue Collector page (entitled 'Trigger'), specify the "Trigger text" and "Trigger style".
In the lower section of the Add Issue Collector page (entitled 'Issue Collector Form'), specify the "Template" and "Message".
Click the Submit button to save your changes.
After clicking the Submit button to save your new issue collector, a page containing code snippets is displayed. Use the code and information provided to embed your new issue collector into your web site. This is what the snippets looks like
<script type="text/javascript" src="https://your_jira_url.co.za/s/a08716ba9b893434c0030633c043df94-T/asfxnf/74002/32f7d0e4f4445b0f89b4b03188c6e1bf/2.0.23/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&collectorId=*****"></script>
Step 2: Embed code snippet to your site (Add the below code to the html page you want the Jira popup to appear on)
<!-- This is the script for the issue collector feedback form -->
<PASTE CODE SNIPPET HERE>
<!-- This is the script for specifying the custom trigger. -->
<script type="text/javascript">
window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requries that jQuery is available!
jQuery("#feedback-button").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}
};
</script>
Step 3: Add a trigger to call up the collector popup (same html page as above)
<a href="#" id="feedback-button" class='btn btn-primary btn-large'>Report feedback</a>
When you click the button, your Jira popup will appear.
Reference:
https://confluence.atlassian.com/adminjiraserver071/advanced-use-of-the-jira-issue-collector-802592648.html
Is it possible to set ng-href to go to the current page?
eg:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u={{ window.location.href }}">facebook</a>
When the above runs, I keep getting:
<a ng-href="https://www.facebook.com/sharer/sharer.php?u=" href="https://www.facebook.com/sharer/sharer.php?u=">facebook</a>
How are you setting value to window.location.href ? This sure doesn't look like native JS.
Here's a fiddle to help you out.
ng-href is part of AngularJS and there are a few ways to point to the same page. The method I use do not include the domain so the Angular Router will direct it as needed, like the following.
ng-href="/mySubDomain"
The Docs go into detail about this and give a nice code sample that shows you what you should expect from the route change.
https://docs.angularjs.org/api/ng/directive/ngHref
How can I show a spinner or loader gif animation while route is changing from one to another.
I am using ng view like as follows:
<div ng-view class="view-animate">
</div>
I am loading templates from server and also inline. While the HTTP request is pending I need to show the spinner/loader... any snippets?
You can show and hide the loader when location change starts and is completed, respectively.
Here is a plunkr that I have created for this situation. This uses ui-router and is taken from one of the apps that I have created, so it may not be useful as-is, but it will give you an idea on how to approach the problem.
HTML Code inserted below just to keep SO happy...
<ui-view class="view"></ui-view>
<div loader="" class="ng-hide"></div>
I hope it helps.
Abhi.
I have a page /hello where i have a link:
<a href="{{#url 'goodbye' }}{{/url}}">
that will redirect to /goodbye. But i want it to use an anchor too, something like /goodbye#message
I have tried doing:
<a href="{{#url 'goodbye' }}{{/url}}#message">
but when I click on it, it will redirect the page to /goodbye. It seems like Chaplin is deleting the anchor.
EDIT:
For the templates I'm using handlebars (with the chapling boilerplate), the {{#url}} helper generates correctly the link ( cf view-helper.js ). In the rendered page i see:
<a href="/goodbye#message">
but when i click on it, it just redirects me to /goodbye
Any idea?
Found a solution, I needed to stop the routing on the link. I just added the class noscript on the tag
<a href="{{#url 'goodbye' }}{{/url}}#message" class="noscript">
I couln't find a different way to do it. Hope this helps someone else
cf : skipRounting on Chaplin.Layout