Can you include a search input in an Ebay listing design? [closed] - ebay-api

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Does anybody know if you can have a search input on an Ebay listing? I'm not talking about an Ebay Shop as I know you can for them.

Absolutely!
And here are a few fine examples just to prove the point:
http://www.ebay.com/itm/151439589823
http://www.ebay.com/itm/151354090252
Here's a good example. Note that you must replace http://stores.ebay.com/storeId/ with your own shop URL.:
The below should be placed inside of your template source:
<form action="http://stores.ebay.com/storeId/" target="_blank">
<input name="_nkw" placeholder="Search by brand or keyword...">
<input type="submit" value="Search">
</form>
Also note that target="_blank" is vital, otherwise the listing, which eBay houses within an iframe, will continue to reload within the iframe.

Here is something you can work with just change the store name
<div id="SearchBox"><form action="http://stores.ebay.com/STORENAME/" id="ga_search" target="_top" style="padding-top: 54px;">
<input type="text" style="width: 205px; height:40px; display: block; float:left;border: none;outline: none;background: transparent;padding-left: 20px;font-size: 18px;" class="searchbox" name="_nkw" value="">
<input name="Submit" type="submit" style="height:40px; display: block; border-style: none; float:left; background: none; cursor: pointer;padding:10px 22px;" class="searchbox_submit" value=" "></form>
</div>

Related

Foundation Range Slider with 2 Inputs?

Is it possible to have 2 different inputs controlling a Foundation range slider? I need to add a field to set specific fractions (like so): https://codepen.io/jinch/pen/OaKpZX?editors=1000
<div class="row">
<div class="small-2 columns">Width:</div>
<div class="small-5 columns">
<div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
<span class="slider-handle slideWidth" data-slider-handle role="slider" tabindex="1" aria-controls="customPort-2-width"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-5 columns">
<input type="number" step="1" id="customPort-2-width" style="border: 1px solid #999999; display:inline-block; width:39%;">
<select class="fractions fractionWidth" name="WidthFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
<option value="0" selected="">0</option>
<option value="1/8">1/8</option>
<option value="1/4">1/4</option>
<option value="3/8">3/8</option>
<option value="1/2">1/2</option>
<option value="5/8">5/8</option>
<option value="3/4">3/4</option>
<option value="7/8">7/8</option>
</select>
<span class="small">in.</span>
</div>
TL;DR The good news is this can be done! The bad news is that you'll need to adjust your code a bit. I'm typing this out at ten minutes past midnight so you will more than likely need to refactor this 😂but I hope it's a starting point.
I'll go into the reasons for the implementation, but if you want to just get into it, I've created a Codepen https://codepen.io/jamie-endeavour/pen/zyxPaY?editors=1010
A Bit of Background
When I first found this question I looked at the Slider documentation and noticed a section about 'Reflow' - https://foundation.zurb.com/sites/docs/slider.html#reflow - after reading about this method I decided to look in the Foundation source code:
_reflow() {
this.setHandles();
}
Then, I looked into setHandles()...
setHandles() {
if(this.handles[1]) {
this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true, () => {
this._setHandlePos(this.$handle2, this.inputs.eq(1).val(), true);
});
} else {
this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true);
}
}
Notice here that _setHandlePos() makes a reference to a value from a property called inputs.
When the Slider class is initialized the following are set:
this.inputs = this.$element.find('input');
this.$input = this.inputs.length ? this.inputs.eq(0) : $(`#${this.$handle.attr('aria-controls')}`);
In your example, you weren't supplying an input element. So as you can see the code is using the value of aria-controls to build up the selector of the 'input'. This is where your restriction lies as you won't be able to associate two input fields with the Slider this way.
The Solution
So, remember the ternary that was used in this.$input? If we add an <input> within your .slider element, then we can use this as a reference point for the Slider.
<div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
<input type="hidden" id="slider-reference" value="8" />
...
Now that you have a reference that can be used between the two input fields. You can then update this reference field's value on the back of a change callback against each element, then Slider will read this and update accordingly.
The JS required for the number input is fairly straightforward as we are supplying the absolute number that Slider needs to calculate the width position.
The fraction input gets a bit funky because you need to return a fraction of the difference between your min and max value (28) rather than a fraction of your max value (36 in this case). This is why I've included additional calculations to ensure you get the correct position against the Slider element. This is also the part that I feel can be refactored with a fresh set of eyes 😬
Finally, once you have acquired the new values in each change handler you simply call the _reflow method and this will update the Slider plugin accordingly without you having to re-initialize the plugin or anything nasty like that!

Why do my paypal add to cart buttons work with sandbox and my subscriptions buttons don't?

I am trying get two different Paypal hosted buttons on my website to work: Add to Cart and Subscribe". The Add to Cart button works. The Subscribe button doesn't.
Possible hint: notice the first line of the working code – Add to Cart – the atribute action has the word sandbox in the url. The non working code – Subscribe – complains about my account: it says the email and password are not correct. The Subscribe button doesn't allow me to add that sandbox word to the action Url: if I add the sandbox word to the Url it throws an error like "something is wrong with the seller website".
Both buttons were created on a live account.
Any thoughts on why this is happening?
Here is a working JS fiddle: https://jsfiddle.net/joaoalvesmarrucho/h7ranpbu/1/
Here is my code on a snippet but code doesn't work here because: security
div {
display:inline-block;
color: white;
padding: 3px;
text-align: center;
font-family: sans-serif;
}
.notWorking {
background-color: red;
}
.working {
background-color: green;
}
h1 {
color: white;
font-size: 1rem;
}
<div class="notWorking">
<h1>
Nor working
</h1>
<form v-if="userIsLogged && plan.name=='Small Venue'" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="GFCVDZUFPDSPN">
<table>
<tr><td><input type="hidden" name="on0" value="Select No. of Sensors">Select No. of Sensors</td></tr><tr><td><select name="os0">
<option value="Up to 5">Up to 5 : £37.50 GBP - monthly</option>
<option value="Up to 10">Up to 10 : £75.00 GBP - monthly</option>
<option value="Up to 15">Up to 15 : £112.50 GBP - monthly</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<label>
<input type="image" class="cartinput" src="https://www.paypalobjects.com/en_GB/i/btn/btn_subscribe_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
</label>
</form>
</div>
<div class="working">
<h1>
Working
</h1>
<form v-if="userIsLogged && product.name == 'Sensor W85/H200'" target="paypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="PHXUV7YX2SZY6">
<table>
<tr><td><input type="hidden" name="on0" value="Select quantity">Select quantity</td></tr><tr><td><select name="os0">
<option value="1 Sensor">1 Sensor £31.90 GBP</option>
<option value="10 Sensors">10 Sensors £319.00 GBP</option>
<option value="100 Sensors">100 Sensors £3,190.00 GBP</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input type="image" class="cartinput" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="Add to cart">
</form>
</div>
PS: Please use sandbox account to test if you can help. I'm using VueJs so please just ignore the vue directives as the html code works just as well without vue.
You are working with hosted buttons. A hosted button is directly related to the exact PayPal account that it was created in.
It sounds like what you are trying to do is take a button that was created in a live PayPal account, and simply switch the action so it works in the sandbox. This will not work, because that hosted button ID is not related to that sandbox account.
If you want to test hosted buttons in the sandbox you will need to create a separate hosted button from within that sandbox account to match what you did in the live account.

How to identify the element using xpath and text [duplicate]

This question already has answers here:
How do I find an element that contains specific text in Selenium WebDriver (Python)?
(12 answers)
Closed 4 years ago.
In below snippet , how do i select the label using the text "No gateway"? I can use ID , but wanted to select by text.
HTML:
<div class="form-group" style="">
<label class="col-xs-12 col-lg-12" for="noGateway" style="background: rgb(204, 136, 136); border: 2px solid red;">
<input type="radio" data-ng-model="proxyType" value="noGateway" name="noGateway" id="noGateway" class="ng-valid ng-touched ng-dirty ng-valid-parse" style="">
No gateway
</label>
</div>
To identify the label using the text No gateway you can use either of the following Java solutions:
XPath with contains():
WebElement element = driver.findElement(By.xpath("//label[contains(.,'No gateway')]"));
XPath with normalize-space():
WebElement element = driver.findElement(By.xpath("//label[normalize-space()='No gateway']"));

options for search TextField in navbar

Is it possible that the user could select from the utility dropdown (see picture below) a search option which will effect the search text field?
Or is it possible merge the dropdown and search text field together?
I think you will be able to do this leveraging input-groups. But the docs also mention:
Avoid using elements here as they cannot be fully styled in
WebKit browsers.
HTML to integrate a <select> in the navbar:
<form class="navbar-form navbar-left select-search" role="search">
<div class="input-group">
<span class="input-group-addon">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Then apply the following CSS:
.select-search .input-group-addon {
padding: 0;
border: 0;
}
.select-search .input-group .input-group-addon > select.form-control {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
Demo: http://www.bootply.com/8zPGZ9ySOl
I found this works well in chrome, but in firefox the select arrow got some button like styling:
I'm not sure how to fix the style of the select arrow here. Style the select with -moz-appearance:none or -moz-appearance:menulist won't help. Possible related to: Clearing the background of a <select> element's pulldown button with CSS

What is the Twitter Bootstrap convention for adding a new style to form labels?

I want to create a new style for forms in my Twitter Bootstrap site and I want to keep with the SMACKS / OOCSS conventions.
This is the default form:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<!-- More coontent in form here -->
If I want to override the input style it would seem to me to keep with conventions to add a class of form-control-newstyle:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<!-- More coontent in form here -->
However I also want to style the label. Should I add a new style to the label or to the div.form-group?
.form-group wraps around form groups label and an input, it acts like a .row in a .form-horizontal and otherwise, when the form stacks on smaller viewports there's some vertical space so it all doesn't squish together.
The default label style that goes on all labels is:
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
To do
.form-group label {}
Would affect all labels if you've properly formatted your forms.
If you just want to isolate it to a specific label you can make a class for that label and assign a class to just that label. If you want to affect all labels you can just modify the label element.
You can also make a new parent class for anything wrapping around that form and address the label styling like that.