In Spartacus I am trying to display an cart item in the HTML. On page load the item is not displayed but when I refresh the page the item is displayed. I am calling the this.activeCartService.getActive();
in ngOnit(). Here is a snippet of my code. Why is the cart item not available on page load but its available on page refresh? Am I missing anything?
Here is a snippet of my code.
I am using the this.cart$ = this.activeCartService.getActive(); and displaying the cart as
`
<div *ngIf="cart$ | async as cart">
<div>{{cart.deliveryMode?.name}}</div>
</div>`
`
ngOnInit(): void {
this.cart$ = this.activeCartService.getActive();
this.cart$.subscribe((cart: Cart) => {
console.log('cart', cart);
this.items = cart.entries;
});
}
Related
ecommerce update cart item quantity on button click?
I'm making a card. has a certain quantity that has a button on it I want to click on the button to increase the amount
You can use useState hook. The use state variable will be your cart quantity and the function will add value to the previous variable.
Here is a simple example how you can do that:
function App() {
const [cart, setCart] = useState(0)
return (
<div className='App'>
<h1>cart quantity: {cart}</h1>
<button onClick={() => setCart(cart + 1)}>Button</button>
</div>
);
}
export default App;
i am working in project where using model to show PDFTron webviewer. i am using model popup to load webviewer inside it when select pdf file from list.
first time it loads pdf document but when "clr-modal" open second time webviewer not load document.
//PdfviewerComponent html.
<div class="page">
<div #viewer class="viewer"></div>
</div>
export class PdfviewerComponent implements OnInit, AfterViewInit, OnChanges {
#ViewChild('viewer', { static: true }) viewer: ElementRef;
#Input() hash: string;
wvInstance: any;
constructor() { }
ngOnInit(): void { }
ngAfterViewInit(): void {
console.log('AfterViewInit called');
WebViewer({
path: '../assets/lib'
}, this.viewer.nativeElement).then(instance => {
this.wvInstance = instance;
const idtoken = localStorage.getItem('id_token');
const options = {
customHeaders: { Authorization: 'Bearer ' + idtoken }
};
const hash = this.hash.split(' ')[0];
const url = `/api/project/readfile/${hash}`;
this.wvInstance.loadDocument(url, options);
});
}
}
//popup in main component
<clr-modal [(clrModalOpen)]="openModel" >
<h3 class="modal-title">{{currentFileName}}</h3>
<div class="modal-body">
<app-pdfviewer [hash]="currentFileHash"></app-pdfviewer>
</div>
</clr-modal>
How does your popup modal work? Does it add "display:none" to hide the DOM element or does it remove the element from the DOM and add it back later?
If it removes the DOM element and add it back, there shouldn't be a problem (beside slower performance due to having to reload everything each time) as long as the WebViewer get re initialized.
If the popup is using "display:none", that is a problem. A lot of browsers have issues when using "display:none" with iframes (which WebViewer uses). If possible try using "visibility:hidde", "opacity:0", or "height: 0px" to hide the modal instead.
I simply don't know JS well enough to determine the issue. I'm sure it's glaring at me, in plain sight. I just need the button to function like a button. When I move the cursor over the button and click, neither do anything.
I've tried adding the type, as you can see.
<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>
<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
id="checkout-button-plan_555xxx555"
role="link"
type="button"
>
Checkout
</button>
<div id="error-message"></div>
<script>
(function() {
var stripe = Stripe('pk_test_555xxx555');
var checkoutButton = document.getElementById('checkout-button-plan_G2Z8GjQU8ZihZw');
checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: [{plan: '555xxx555', quantity: 1}],
// Do not rely on the redirect to the successUrl for fulfilling
// purchases, customers may not always reach the success_url after
// a successful payment.
// Instead use one of the strategies described in
// https://stripe.com/docs/payments/checkout/fulfillment
successUrl: window.location.protocol + '//cozelosdata.com/success',
cancelUrl: window.location.protocol + '//cozelosdata.com/canceled',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
})();
</script>
Your id for the button is wrong.
<button id="checkout-button-plan_G2Z8GjQU8ZihZw" role="link" type="button">Checkout</button>
I have a content type called DayTile which I have setup with a content picker field that is limited to HotelSection type. This type is a container for the Hotels type.
I want to render all the hotels in the HotelSection when the DayTile has that section picked. Is this possible?
From what I have tried so far, it does not seem that the HotelSection's contained items are accessible as a content picker field.
The selected content items are exposed by the ContentPickerFields ContentItems property (see Orchard.ContentPicker.Fields.ContentPickerField).
To access this from a DayTile content item, let's say from a Razor template named "Content-DayTile.cshtml", you would do it like so:
#{
dynamic contentItem = Model.ContentItem; // How to access the content item depends on the context. In this case, we're in a Content shape template.
// Assuming your picker field is named "HotelSections" and attached to your DayTile content type (which in reality means it's attached to an automatically created part called "DayTile").
var picker = contentItem.DayTile.HotelSections;
var hotelSectionContentItems = picker.ContentItems; // Typed as IEnumerable<ContentItem>.
}
<ul>
#foreach(var hotelSectionContentItem in hotelSectionContentItems)
{
// You can now either access individual parts and fields of each hotel section content item and render it, or you can choose to build a shape for each item and display that. Here are examples:
<li>#hotelSectionContentItem.TitlePart.Title</li>
// or:
// Build a content shape for the content item.
var hotelSectionContentShape = BuildDisplay(hotelSectionContentItem, "Summary");
// Render the shape.
<li>#Display(hotelSectionContentShape)</li>
}
If I understand you correctly this should absolutely be possible.
You will want to override the Fields.ContentPicker view in your theme/module, and in the foreach loop instead of displaying a link to each HotelSection, you want to display that HotelSection content item, which in turn will display all the Hotels contained within the HotelSection, like so:
#using Orchard.ContentPicker.Fields
#using Orchard.Utility.Extensions;
#{
var field = (ContentPickerField) Model.ContentField;
string name = field.DisplayName;
var contentItems = field.ContentItems;
}
<p class="content-picker-field content-picker-field-#name.HtmlClassify()">
<span class="name">#name</span>
#if(contentItems.Any()) {
foreach(var contentItem in contentItems) {
#Display(contentItem.ContentManager.BuildDisplay(contentItem, "Detail"))
}
}
else {
<span class="value">#T("No content items.")</span>
}
</p>
If you are looking to access the Hotels directly from within the content picker field you will need to add a little bit more to the view, a little messy but like this:
#using Orchard.ContentPicker.Fields
#using Orchard.Utility.Extensions;
#{
var field = (ContentPickerField) Model.ContentField;
string name = field.DisplayName;
var contentItems = field.ContentItems;
}
<p class="content-picker-field content-picker-field-#name.HtmlClassify()">
<span class="name">#name</span>
#if(contentItems.Any()) {
foreach(var contentItem in contentItems) {
var container = contentItem.As<ContainerPart>();
if(container == null) {
continue;
}
var hotels = contentItem.ContentManager
.Query(VersionOptions.Published)
.Join<CommonPartRecord>().Where(x => x.Container.Id == container.Id)
.Join<ContainablePartRecord>().OrderByDescending(x => x.Position);
foreach(var hotel in hotels) {
// do something
}
}
}
else {
<span class="value">#T("No content items.")</span>
}
</p>
I'm missing some using statements at the top but the gist of it is there.
I am creating an application to get some experience in jQuery Mobile and backbone. I have made a "restful" API with node.js that handles the data I need. It works fine with all my static pages I made in index.html. But when I need to create a page with data from a certain id I am a bit lost.
For example when I want to display all items(/items) I have a data-role=page with id items that list all items, but when I need to go to a detailed page for each item (/items/1) i want to create that details page whenever a user wants details on an item, in other words when a user visit the url spots#3 for example.
Is this possible?
my router: the model gives me all data i want
Spoter.Router = Backbone.Router.extend({
routes: {
"": "",
"spot#:id": "spotDetails"
},
//Details on a certain spot with id
spotDetails: function(id) {
var spotDetailsContentDiv = Spoter.spotDetailsContent;
spotDetailsContentDiv.empty();
var spot = new Spoter.spotModel({id: id});
spot.fetch({
successCallback: function(data) {
var spotDetailsView = new Spoter.spotDetailsView({
model: data
});
spotDetailsContentDiv.html(spotDetailsView.render().el);
}
});
}
});
View:
Spoter.spotDetailsView = Backbone.View.extend({
render:function () {
this.$el.html(this.template(this.model));
return this;
}
});
Template with underscore
<ul data-role="listview" data-theme="c" data-inset="true">
<li>
<a href="#">
<h1><%= this.model.name %></h1>
<p><%= this.model.description %></p>
</a>
</li>
</ul>