Shopify pop-up - adding checkout button - popup

I am trying to add a "checkout" button to the standard cart popup that occurs when a customer "adds to cart".
I am using the Shopify debut theme, but the question would apply to pretty much any Shopify theme that has a "add to cart pop-up".
It was pretty easy to add the extra code to "cart-popup.liquid", as I copied it over from "cart-template.liquid".
The button itself is showing, but it doesn't work.
The other buttons I added, checkout with Paypal and Amazon checkout all show and also work fine.
Below is the 'donor code'
<div class="cart__buttons-container">
<div class="cart__submit-controls">
<input type="submit" name="checkout" class="cart__submit btn btn--small-wide" value="{{ 'cart.general.checkout' | t }}">
</div>
<div class="cart__error-message-wrapper hide" role="alert" data-cart-error-message-wrapper>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span> {% include 'icon-error' %}
<span class="cart__error-message" data-cart-error-message></span>
</div>
{%- if additional_checkout_buttons -%}
<div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}
</div>
And this extra code shows the buttons correctly on the popup.
the buttons all work except for the main one! checkout
I think something is missing ... any suggestions?
Thanks!

Related

TYPO3 8.7 - how to hide elements in navigation header before login with EXT:felogin?

I can't find a solution for a problem I have with a TYPO3 Fluid template.
In the navigation header template I have a search form and a logout link.
<div class="suche">
<f:form action="search" method="post" controller="Search" extensionName="indexedsearch" pageUid="61" pluginName="Pi2">
<f:form.textfield name="search[sword]" value="{sword}" class="quicksearch-sword" placeholder="search" />
<button type="submit" name="search[submitButton]" class="btn">
<i class="glyphicon glyphicon-search"></i>
</button>
</f:form>
<p>
<div class="logout">
<f:link.page pageUid="1" additionalParams="{logintype:'logout'}">Logout</f:link.page>
</div>
</p>
</div>
How can I tell the page, that these two elements should also hide till the user is logged in with EXT:felogin?
The template is included into the default page template in this way:
<f:render partial="Navigation/Main" arguments="{_all}" />
I guess a simple display:none/show from the two divs would be enough, but I have no idea how to do this. (I must admit I'm not the biggest expert in TypoScript).
Any advice would be really helpful and appreciated.
You can use the <f:security.ifAuthenticated> view helper.
More you can see here:
https://docs.typo3.org/other/typo3/view-helper-reference/8.7/en-us/typo3/fluid/TYPO3_8-7/Security/IfAuthenticated.html
Example:
<f:security.ifAuthenticated>
<f:then>
shown when a user logged in
</f:then>
<f:else>
shown when a user is not logged in
</f:else>
</f:security.ifAuthenticated>

Laravel checkbox inside form won't check

I'm stuck in Laravel 5.2 trying to be able to interact with a checkbox inside a form.
When I click them, they just light up, but won't get checked.
It seems that when I remove the form tags (or blade tags), the checkboxes can be checked, but I need them to be inside a form to submit if checked or not...
code is located in home.blade.php in the #section('content')
This seems to work:
#foreach($items as $item)
<li>
<input id="item" name="id" onClick="this.form.submit" type="checkbox" value="{{ $item->id }}" {{ $item->done ? 'checked' : ''}} />
{{ $item->name }}
</li>
#endforeach
Image of working checkboxes
But it fails here:
#foreach($items as $item)
<li>
{{Form::open()}}
<input id="item" name="id" onClick="this.form.submit" type="checkbox" value="{{ $item->id }}" {{ $item->done ? 'checked' : ''}} />
{{ $item->name }}
{{Form::close()}}
</li>
#endforeach
Image checkboxes not working
Thanks for helping!
Move your Form open & Form close tag outside of foreach. It is creating many form as much as the foreach looped. Your code should look like this:
{{Form::open()}}
#foreach($items as $item)
<ul>
<li>
<input id="item" name="id" onClick="this.form.submit" type="checkbox" value="{{ $item->id }}" {{ $item->done ? 'checked' : ''}} />
<label for="id">{{ $item->name }}</label>
</li>
</ul>
#endforeach
{{Form::close()}}
It looks like you are submitting the form as an onclick event of the checkbox. You are essentially submitting the form as soon as the checkbox is clicked, and since the form submits to itself, it is reloading in its default state (unchecked). By the time you have finished clicking it, the page has reloaded and it is unclicked again.
The reason why you don't see this when you remove the form tag, is because the event (submitting the form) no longer does anything, because there is no longer a form to submit.
I am referring to this offending attribute:
onClick="this.form.submit"

How to trigger a GTM Tag with a div class

I want to trigger a Google Tag Manager tag with the text within a div class. The text is "Accommodation offer successfully edited". I've tried element ids and classes to no success. Do you have any recommendation? Is this even possible?
There is nothing else on the page that makes it unique so I really have to go with what is inside this div
<div class="alert alert-success">
<button data-dismiss="alert" class="close close-sm" type="button">
<i class="fa fa-times"></i>
</button>
<i class="fa fa-check"></i>
Accommodation offer successfully edited
</div>

Forms within Bootstrap tabs not working/submitting

I'm faced with a simple problem but just don't know how to solve it. I'm using twitter bootstrap's tabs. The tabs work but the forms within each tab don't submit. The forms submit when used without the tabs.
Below is the links I've used for the tabs
<ul class="nav nav-list affix tabs" data-tabs="tabs">
<li>
Overview
</li>
<li>
Profile
</li>
</ul>
And what follows are the tabs
<div class="tab-content span9">
<div id="overview" class="tab-pane" data-toggle="tab">
<!-- Overview Forms go here -->
</div>
</div>
<div class="tab-content span9">
<div id="profile" class="tab-pane" data-toggle="tab">
<!-- Profile Form go here -->
</div>
</div>
Finally I've added the following jquery
$('.tabs').tab();
$('.tabs a[href="#profile"]').tab('show');
Same goes for bootstrap panels, when you have a form inside panel-body and try to submit the form nothing happens. You have to remove the "panel-collapse" class from the body :)

How do I click on a button in Selenium IDE using only the text associated with the button and not its position?

this is the dom source of the button I want to click on
<div class="footer clearFloat">
<div class="left">
</div>
<div class="right">
[P]
[-575063738]
[SB_XML]
<input class="button" value="Next step" id="dpTransportResultSelectLink[7]" type="submit">
</div>
</div>"
This is the x-path "/html/body[#id='transport-results']/div[#id='master']/div[#id='master_center']/div[#id='page_content']/div[#id='contentPad']/form[#id='fare_5']/div[2]/div[2]"
How do I frame my locator using "[SB_XML]", irrespective of the form Id?
//*[contains(text(),'[SB_XML]')]/following-sibling::input[1]
I've tested it as an xpath but not in Selenium
lemme know how it goes