I'm implementing an infinite scroll with https://infinite-scroll.com/ at a prestashop for products list and I would like to show the items shown and the total items. I have a smarty variable with the total items and the items shown in first place. I'm using the "view more" button option and the problem is that, once the site is loaded, I can't change the smarty variables, I don't know how to do it with javascript and I think there's no infinite-scroll option for that.
{$listing.pagination['total_items']}
{$listing.pagination['items_shown_to']}
<button class="infinite-scroll-button" onclick=""> {* Can't increase items_shown_to at onclick becaus it's a smarty variable *}
{l s='See more' d='Shop.Theme.Actions'}
</button>
<p class="items-shown">{l s='You have seen' d='Shop.Theme.Global'} {$items_shown_to} {l s='products of' d='Shop.Theme.Global'} {$listing.pagination['total_items']}
I finally sorted it out at the js event that shows more products when the button is clicked (append.infiniteScroll) which actually has the number of new items that have been displayed on each click (items.length). I have all this at themes/my_theme/templates/catalog/_partials/productlist.tpl
I've just used a span at the products.tpl with an attribute to get the current items shown.
<button class="infinite-scroll-button">
{l s='See more' d='Shop.Theme.Actions'}
</button>
<p class="items-shown">{l s='Has visto' d='Shop.Theme.Global'} <span id="items_shown_to" items_shown="{$listing.pagination['items_shown_to']}">{$listing.pagination['items_shown_to']}</span>
{l s='productos de' d='Shop.Theme.Global'} {$listing.pagination['total_items']} </p>
And I update the value at the append event:
$('#items_shown_to').attr('items_shown',parseInt($('#items_shown_to').attr('items_shown'))+parseInt(items.length));
$('#items_shown_to').text($('#items_shown_to').attr('items_shown'));
I hope this is useful for someone else.
Thanks.
Related
So basically, I have a vue web app and created a container with multiple bootstrap cards. The cards have a button, which collapses a form I've made for guests to apply. However, when I press the button of a card, it collapses the apply form of all cards at once. To fix that, I have to give each individual card a specific id which matches the data-bs-target and aria-controls of the button. So far, so good.
I've made a variable card_id and inserted it into the attribute values with v-bind, but it's not working. The reason is, that the attribute data-bs-target needs a hashtag before the actual variable name, but I can't figure out a way to do that.
Code sample:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="card_id" aria-expanded="false" :aria-controls="card_id">Apply now!</button>
<div class="collapse" :id="card_id">
<div class="card card-body">
<GuestForm></GuestForm>
</div>
</div>
I obviously can't just put a hashtag in front of the variable, so what is my next best solution for this?
Thank you in advance.
You could use the string template with backticks `` like:
<button :data-bs-target="`#${card_id}`"
In Selenium 2, I managed to
pull out a slidebar from the left by invoking CSS code based on clicking a widget using Actions class
select an item from the menu list in that slide bar using Actions class
step 2 should have brought into view a toggle button which will roll down another menu list or roll it up depending on the toggle click
i am yet to get hold of the ID of this toggle (i tried XPATH, id and all that)
I am told this button and it's list are generated dynamically by Jquery which is pasted below.
How can i grab this toggle button , click it and then choose one item in the menu list that is rolled down ?
<!-- Select Menu Style -->
<div class="ui-widget" style="margin-left:-8">
<br/>
<h:selectOneMenu id="moduleMenu" value="#{baseBean.selectedMenu}"
onchange="jQuery('.submitMenuSelection').click()"
styleClass="comboboxnowidth leftSideMenuSelect " style="z-index: 0;">
<f:selectItems value="#{baseBean.userFeatures}" />
</h:selectOneMenu>
</div>
enter code here
I getting an HTML page going with twitter-bootstrap. I've been able to get the tooltips and popovers working and have been able to add some custom CSS styles to the popovers.
Now I am trying to add 3 buttons to the page that trigger 3 popovers on click.
I've added this code to each of the 3 buttons:
<a class="btn btn-default" href="#" role="button" id="st-popover" data-toggle="popover" rel="popover" title="<strong>Ideal for:</strong> Clients who no longer need an equity line of credit and are in a financial position to begin repaying their balance with the new monthly payments.<br /><br /><strong>What:</strong> Begin to pay off the balance of your existing equity line of credit when the draw period ends.<br /><br /><strong>Get started:</strong> Continue to make regular payments under the repayment period terms of your existing home equity line of credit; no further action is required." data-placement='bottom' data-html='true'>Learn More</a>
But the problem seems to be that only the first button popover in the DOM triggers on click. The other two just sit there doing nothing.
This is my scripts at the bottom:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="dist/js/tooltip.js"></script>
<script src="dist/js/popover.js"></script>
<script>
$(function(){
$('#st-popover').popover();
});
</script>
Any help getting the 3 to work on one page or any resources to look at would be appreciated, thanks.
When jQuery uses an id as a selector, it will stop searching after it finds the first. Since there are multiple btn's, use a class instead of an id.
So try changing id="st-popover" to class="st-popover"
And $('.st-popover').popover();
I am very new to this so apologise in advance for offending/upsetting anyone.
I have built my first website (http://www.goodgollyexeter.co.uk). There is a shopping cart on my website (I'm using Plum shop which is working great). I want the user to be able to click the "View Cart" button (in the top right hand corner on the website which has id="viewcart") and then for the contents of their cart to be displayed in a lightbox style window. The contents of their cart is contained within a <div> which has id="cart_holder".
To try and achieve the above I am using lightbox_me but I can't get it to work off of the "View Cart" button click event. If I remove the button click event coding then lightbox_me works and displays the contents of the cart but, as there is no event to trigger it, it opens as soon as the page loads. For now I have removed the button click event coding so if you were to visit the website you should see lightbox_me working (but on page load rather then a button click event).
I have tried to pick out the relevant code and show it below. This is the code that I have tried in order to get lightbox_me to work off of the "View Cart" button click event (adapted from lightbox_me website example) but this does not work:
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.lightbox_me.js"></script>
</head>
<body>
<button id="viewcart" class="viewcart">View Cart</button>
<div id="cart_holder">
<h1> Your Cart </h1>
<p>Currently your cart contains the following items:</p>
<div id="cart"></div>
<label>Items:</label> <span class="cart-quantity">0</span><br>
<label>Sub-Total:</label> <span class="cart-subtotal">£0.00</span><br>
<label>Shipping:</label> <span class="cart-shipping">£0.00</span><br>
<label>Total:</label> <span class="cart-total">£0.00</span><br>
<br>
Please click below to pay using a credit or debit card or via Paypal:
<br>
<br>
<button class="paypal">Checkout</input>
</div>
<script>
$("#viewcart").click(function() {
$("#cart_holder").lightbox_me();
});
</script>
</body>
When I add the above code lightbox_me stops working which is really annoying as if I remove the View Cart button click event coding so it reads like this:
<script>
$("#cart_holder").lightbox_me();
</script>
then lightbox_me works (but only on page load and not on button click event).
I don't know if it is of any use but when I inspected the <div id="cart_holder"> element in Chrome I did notice the following error message:
Uncaught TypeError: Object [object Object] has no method 'lightbox_me'
Due to my ignorance I'm afraid this means very little to me. If anyone could tell me what I am doing wrong and how to get lightbox_me to work from the "View Cart" button click event I would be very grateful indeed. Please let me know if I can explain anything better or post more code or anything else to better assist. Thanks Alex
Check your last closing button tag for checkout:
<button class="paypal">Checkout</input> <!-- should this close with button and not input? -->
Can you wrap your jquery like this?
;(function($){ // add
$(document).ready(function(){
$("#viewcart").button().click(function() {
$("#cart_holder").lightbox_me();
});
});
})(jQuery); // add
I am trying to hide/show a div that is within a for loop using jquery's toggle. When I click the button to toggle, the div slides out for a quick moment, but then hides again. When this happens, the toggle button almost seems disabled for the next click...then works again with the same problematic div display. I used the {{email.sender}} template value because when I clicked on the toggle button, all the items in the list would be activated instead of just that one. The below code is inserted into a tab with Jquery (this part is working). Thanks for any advice you can give on this-
<div id="email_received_list">
{% for email in email_received_list %}
<p>
<input type="button" id="{{email.sender}}" value="Show Message"> {{email.sender}}: {{ email.subject }}
</p>
<script>
$(document).ready(function(){
$('#{{email.sender}}').click(function() {
$('.{{email.sender}}').slideToggle('fast');
return false;
});
});
</script>
<div class="{{email.sender}}" style="display:none; background-color:#4CF;width:100%;height:100%;"></div>
{% else %}
(You have not received any messages yet.)
{% endfor %}
Ok, I feel stupid on this one - but once I added some actual content to the div (not just trying to color a square) it worked fine. I guess since it was in a loop, it was trying to size the div match the content. When there was no content, the div just hid itself again. If you know something different on this, please let me know -thanks.