I tried too much in vender but don't able to change the position of billing address on payment page.
I copied vender/magento/module_checkout/view/frontend/web/template/payment.html
file and putted at my module
company/module/view/frontend/web/template/payment.html
<!-- ko foreach: getRegion('beforeMethods') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<!-- ko foreach: getRegion('afterMethods') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div id="checkout-payment-method-load" class="opc-payment" data-bind="visible: isPaymentMethodsAvailable">
<!-- ko foreach: getRegion('payment-methods-list') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
afterMethod put before payment-method-load but no luck
can anyone help me!
Add css to your style this will help you
#co-payment-form .fieldset {
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
.checkout-billing-address {
flex:1;
order: 1;
}
.opc-payment {
flex:1;
order: 2;
}
.opc-payment-additional {
flex:1;
order: 3;
}
After doing these changes run deploy command using cli
flush cache
Happy Coding!
Related
I am trying to upload a remote file through window popup using protractor but none of the solutions work.
Request someone to please help
My code is something like:-
var remote = require('F:/untitled/node_modules/selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());
var fileElem = element(by.css('input[type="file"]'));
//files
//var fileElem = element(by.css('div.file-uploader'));
var absolutePath = 'F:/1778.docx';
browser.switchTo().activeElement();
browser.executeScript("arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px';arguments[0].style.opacity = 1", fileElem.getWebElement());
fileElem.sendKeys(absolutePath);
browser.driver.sleep(100);*/
source code is something like
File Drop not
available
<div ng-show="dropAvailable" ng-switch="buttonType" layout="row" layout-align="center center" class="">
<!-- ngSwitchWhen: fab -->
<!-- ngSwitchWhen: icon -->
<!-- ngSwitchWhen: text-icon --><div class="file-upload-button ng-scope" ng-switch-when="text-icon">
<button class="btn btn-primary ng-binding" aria-label="Add Attachment">Add Attachment <span ng-class="icon" class="glyphicon glyphicon-paperclip"></span></button>
</div>
<!-- ngSwitchDefault: -->
</div>
</div><!-- end ngIf: canUploadFn() -->
<!-- Display the existing files -->
<!-- ngIf: showAttachments -->
I am trying to create a simple typo3 template. The template looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>T3 TEST BLAH</title>
<link rel="stylesheet" href="">
</head>
<body>
<!-- ###DOCUMENT_BODY### -->
<h1>Webpage</h1>
<div id="right">
<h2>RIGHT:</h2>
<!-- ###CONTENT_SIDEBAR### -->
<!-- ###CONTENT_SIDEBAR### -->
</div>
<div id="content">
<!-- ###CONTENT### -->
<!-- ###CONTENT### -->
</div>
<!-- ###DOCUMENT_BODY### -->
</body>
</html>
and my typoscript like this:
page = PAGE
page.10 = TEMPLATE
page.10{
template = FILE
template.file = fileadmin/template.html
workOnSubpart = DOCUMENT_BODY
subparts{
CONTENT_SIDEBAR < styles.content.getRight
CONTENT < styles.content.get
}
}
all I get is the content from styles.content.get but not styles.content.getRight (or getLeft). What am I doing wrong?
there are a few things you could try:
First of all, make sure there is content in the "right" column.
Then you could try whether it works if you use
CONTENT_SIDEBAR < styles.content.get
to see if the subpart gets recognized.
Another problem I have seen is that you need some content between the subpart markers (don't know if that was fixed yet) - so try writing
<!-- ###CONTENT_SIDEBAR### -->
test
<!-- ###CONTENT_SIDEBAR### -->
HTH,
Susanne
styles.content.getRight has been removed with fluid_styled_content:
https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/7.6/Installation/Upgrading/
Because you don't have subpart "CONTENT_SIDEBAR", try use "RIGHT" like your subpart id.
Your template is valid and subparts are valid as well it's CONTENT_SIDEBAR NOT RIGHT.
Make sure you included correct CSS Styled Content (css_styled_content) in your TypoScript template and you cleared the cache.
Make sure you have some dummy code (whatever) between the subpart's comments like:
<!-- ###CONTENT_SIDEBAR### start--> Foo <!-- ###CONTENT_SIDEBAR### end-->
If you haven't and don't want to insert anything there, better use marker instead of subpart, like:
<body>
<!-- ###DOCUMENT_BODY### -->
<h1>Webpage</h1>
<div id="right">
<h2>RIGHT:</h2>
###CONTENT_SIDEBAR###
</div>
<div id="content">
###CONTENT###
</div>
<!-- ###DOCUMENT_BODY### -->
</body>
and TS:
page >
page = PAGE
page {
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/template.html
workOnSubpart = DOCUMENT_BODY
marks {
CONTENT < styles.content.get
CONTENT_SIDEBAR < styles.content.getRight
}
}
}
Finally use TypoScript analyzer to check if some extension or additional TS doesn't override CONTENT_SIDEBAR and/or styles.content.getRight.
Last advice maybe weird, but make sure that you put the content element in valid column and it isn't hidden or disabled.
I've been looking at examples of nested foreach loops in knockout all afternoon, and I haven't been able to get anything working. My current setup, at least the relevant parts, are below.
ViewModel:
var sample = {
this.pageData = ko.observable();
this.panels = ko.observableArray();
};
ko.utils.extend(sample.prototype, {
activate: {
this.pageData(sampleData);
this.panels([
{
name: 'column1',
keys: ['key1', 'key2', 'key3'],
loadedWidgets: ko.observableArray()
},
{
name: 'column2',
keys: ['key4', 'key5'],
loadedWidgets: ko.observableArray()
},
{
name: 'column3',
keys: ['key6'],
loadedWidgets: ko.observableArray()
}
]);
this.loadWidgetPanels(this.panels(), this.pageData());
},
loadWidgetPanels: function (panels, pageData) {
for (var i = 0; i < panels.length; i++) {
var screens = filterContentByKey(pageData.Content, panels[i].keys);
if (screens) {
panels[i].loadedWidgets.push(widgetFactory.getWidgets(screens));
}
}
}
}
View:
<div>
<!-- ko foreach: panels -->
<div class="3columnStyle">
<!-- ko foreach: loadedWidgets -->
<!--ko compose: $data --><!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
I've confirmed that I'm getting back the right data in the right format in my loadedWidgets, but they don't display in the view. I can tell that the view at least knows how much data is there, because my DOM has a ko compose element for each widget. For example, the first column has a handful of widgets, and that div gets created with a handful of widgets in it. Column 2 has 2 widgets, and it gets 2 compose elements. Column 3 has 1 widget and gets one element. It's just not displaying the widgets themselves. Do I need additional elements or additional binding somewhere?
I have a working model of this that doesn't rely on nested loops. Instead of using the array of objects, it just creates each of the observable arrays. In other words, it's not looping. Instead of one array containing three objects, each with its own array, I have three arrays:
this.column1Widgets();
this.column2Widgets();
this.column3Widgets();
They're constructed the same way, just manually instead of looping. And the View looks more like this:
<div class="3columnStyle">
<!-- ko foreach: column3Widgets -->
<!-- ko compose: $data --><!-- /ko -->
<!-- /ko -->
</div>
<div class="3columnStyle">
<!-- ko foreach: column3Widgets -->
<!-- ko compose: $data --><!-- /ko -->
<!-- /ko -->
</div>
<div class="3columnStyle">
<!-- ko foreach: column3Widgets -->
<!-- ko compose: $data --><!-- /ko -->
<!-- /ko -->
</div>
I'm not sure why it's not working with the nested loop, but since the data is identical, I'm sure there's something I'm missing in setting up the View.
Without seeing the rest of your code, it's difficult to tell for sure. I'm a little suspicious of the sample object in your viewmodel. But it seems to me that you're not actually nesting your foreach's.
In your view, replace
foreach: loadedWidgets
with
foreach: $data.loadedWidgets
You need to reference the parent foreach in some way. $data represents the current item in the parent foreach, and that item, if I understand your model correctly, contains a loadedWidgets key.
Also, there's no need for containerless binding in your case.
As Eric Taylor suggested, it must have something to do with the containerless binding. I created a jsfiddle with some oversimplified object models, but changing my DOM from the above to the following immediately fixed the issue:
<div>Test</div>
<div data-bind="foreach: panels">
<ul data-bind="foreach: loadedWidgets">
<li data-bind="text: $data"></li>
</ul>
</div>
I don't think I have a good grasp of how the containers interact with the binding yet.
When using facebook comments social plugin within a jquery tab element, it now returns a 0 width iframe resulting in a blank page (tab).
Call has been working for months (years) within the tab, but now a problem since a month.
If I place the call outside the tab, the plugin works fine.
Call is
<ul class="css-tabs">
<li><a id= "t1" href="#tab1">#ISUSkating</a></li>
<li><a id= "t2" href="#tab2">Facebook</a></li>
<li><a id= "t3" href="#tab2">Timetable</a></li>
</ul>
<!-- tab "panes" -->
<div class="css-panes">
<!-- TAB 1 -->
<div></div>
<!-- TAB 2 -->
<div id="fb_comments" style="height:530px; overflow-y:auto; background-color:white;border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:5px;">
<fb:comments href="http://livemanager.eurovision.edgesuite.net/isu/site/index.html" num_posts="10" width="300" colorscheme="light" order_by='reverse_time'></fb:comments>
</div>
<!-- TAB 3 -->
<div id="companion_right" style="height:250px; width:300px;"></div>
</div>
<!-- activate above css tabs with JavaScript -->
<script>
$(function() {
// :first selector is optional if you have only one tabs on the page
$(".css-tabs:first").tabs(".css-panes:first > div");
});
</script>
Add this to your CSS.
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {width: 100% !important;}
I have a dirty HTML code that is loaded from a foreign server (so I can't make a json file or clean the html code). My HTML's structure is like:
<!-- SOME DIRTY HTML, CSS, JS, AND OTHER STUFF -->
<div class="pic"> ... </div>
<div class="pic" id="pic311809">
<input type="hidden" class="pic_id" name="pic_id" value="311809" />
<!-- tylko komixxy.pl -->
<div style="font-family: verdana, arial, helvetica, sans-serif; font-weight: bold; font-size: 9px;">
FFFUUU (rageman)
</div>
<h1 class="picture">Kochana babcia</h1>
<div class="infobar">
Wrzucone 15 października 2010 o 16:03 przez Astraly
|
Skomentuj (23)
<!-- głosowanie przeniesione pod spód obrazka -->
</div><!-- .infobar -->
<div class="pic_image">
<img src="http://staticrps.komixxy.pl/uimages/201010/1287151388_by_Astraly_500.jpg" class="pic" alt="Kochana babcia - Wnusiu, a ty jeszcze nie w szkole? Dziś mamy na 10 babciu Co ty tam majaczysz? Jesteś na wagarach!? już ja to powiem twojej mamie! Ale babciu.... Przynosisz nam wstyd! Myślisz, że nie wiem o tej ostatniej niedzieli, w której nie byłeś u komunii? ZAMKNIJ SIĘ KU**A!!!! .... Nie musisz tak krzyczeć! Powiem twojej mamie z jakim tonem odnosisz się do mnie! " /> </div><!-- .pic_image -->
<div class="source">Źródło: Kto mieszka z babcią, ten wie jak to jest ;)</div>
<!-- głosowanie i ocena -->
<div class="source">
<div class="infobar center">
Głosuj:
<a href="/pic/vote/311809/up"
onclick="votowanie(this); return false;"
class="vote voteup iconlink"
>
mocne ↑ </a>
·
<a href="/pic/vote/311809/down"
onclick="votowanie(this); return false;"
class="vote votedown iconlink"
>
słabe ↓ </a>
<!-- DODATKOWY PRZYCISK RAPORTOWANIA DUPLIKATÓW (“BYŁO”) -->
|
<span class="points">
87% mocnych
</span>
<span class="count">
z 1291 głosów
</span>
<span class="vote_result"></span>
| Do ulubionych
</div><!-- .infobar -->
<!-- PRZYCISK LAJKONIKA -->
<div style="text-align: center;">
<fb:like href="http://komixxy.pl/311809/Kochana-babcia"
layout="button_count"
show_faces="true"
width="130"
font="arial"
style="width: 130px;">
</fb:like>
</div>
<!-- tylko komixxy.pl -->
Pokaż podobne komixxy Zrób własną wersję
<div style="clear: both;"></div>
</div><!-- .source -->
</div><!-- .pic -->
<div class="pic"> ... </div>
<div class="pic"> ... </div>
<div class="pic"> ... </div>
I want to select all <div class="pic" id="*"> by using xPath //div[#class='pic'][#id].
Here are two libraries that I used:
- Hpple
- TouchXML
As for Hpple -> it's great but I can't select innerHTML of an emelent. As for TouchXML, I use it for parsing XML and it's great. But it doesn't manage to parse dirty HTML - I get dozens of errors.
Is there a way to parse this HTML in iOS5 using TouchXML? It can be a different library, but I prefer that one.
I heard something about CTidy.h and I did as instructed but nothing's changed...
libxml has a module designed exactly for this problem :)
http://xmlsoft.org/html/libxml-HTMLparser.html
It works exactly the same as libxml normally works i.e. to parse an NSData object containing dirty html:
#include <libxml/htmlparser.h>
htmlDocPtr doc; /* the resulting document tree */
doc = htmlReadMemory([data bytes], [data length], "noname.xml", NULL, HTML_PARSE_RECOVER | HTML_PARSE_NOWARNING | HTML_PARSE_NOERROR);
if (NULL == doc)
return nil;
... parse DOM here ...
xmlFreeDoc(doc);
compared to the libxml example from their website :
xmlDocPtr doc; /* the resulting document tree */
doc = xmlReadMemory(content, length, "noname.xml", NULL, 0);
if (NULL == doc)
return nil;
... parse DOM here ...
xmlFreeDoc(doc);
PS Don't forget to include libxml2.dylib into your project as a framework in the 'link binary with libraries' project build phase
If I was doing this I would parse the HTML before passing it the the libraries and clean out all of the 'dirty' bits find the and and remove everything in between, doing the same for the other dirty areas then it will be easier for the libraries to work with the file.