eBay

jlpereira · ‎03-21-2018

Hello... @shipscript .... you still around!?

I managed to hack this free code I found, using some info you provided, and it appears to be mobile friendly.

The photo gallery works fine when you toggle from eBays HTML view to Standard, BUT when I test it in Preview Listing, the gallery doesn't function.

Thank you in advance!!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,800");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  font-family: "Open Sans", sans-serif; }

.row::after {
  content: "";
  clear: both;
  display: block; }

[class*="col-"] {
  float: left;
  width: 100%;
  padding: 32px; }

.col-s-1 {
  width: 8.33%; }

.col-s-2 {
  width: 16.66%; }

.col-s-3 {
  width: 25%; }

.col-s-4 {
  width: 33.33%; }

.col-s-5 {
  width: 41.66%; }

.col-s-6 {
  width: 50%; }

.col-s-7 {
  width: 58.33%; }

.col-s-8 {
  width: 66.66%; }

.col-s-9 {
  width: 75%; }

.col-s-10 {
  width: 83.33%; }

.col-s-11 {
  width: 91.66%; }

.col-s-12 {
  width: 100%; }

@media only screen and (min-width: 768px) {
  .col-m-1 {
    width: 8.33%; }

  .col-m-2 {
    width: 16.66%; }

  .col-m-3 {
    width: 25%; }

  .col-m-4 {
    width: 33.33%; }

  .col-m-5 {
    width: 41.66%; }

  .col-m-6 {
    width: 50%; }

  .col-m-7 {
    width: 58.33%; }

  .col-m-8 {
    width: 66.66%; }

  .col-m-9 {
    width: 75%; }

  .col-m-10 {
    width: 83.33%; }

  .col-m-11 {
    width: 91.66%; }

  .col-m-12 {
    width: 100%; } }
@media only screen and (min-width: 1024px) {
  .col-1 {
    width: 8.33%; }

  .col-2 {
    width: 16.66%; }

  .col-3 {
    width: 25%; }

  .col-4 {
    width: 33.33%; }

  .col-5 {
    width: 41.66%; }

  .col-6 {
    width: 50%; }

  .col-7 {
    width: 58.33%; }

  .col-8 {
    width: 66.66%; }

  .col-9 {
    width: 75%; }

  .col-10 {
    width: 83.33%; }

  .col-11 {
    width: 91.66%; }

  .col-12 {
    width: 100%; } }
.row {
  max-width: 1280px;
  margin: 0 auto; }

.cover {
  padding: 0; }

.rowpad {
  padding-top: 64px;
  padding-bottom: 64px; }

.center {
  text-align: center !important; }

.right {
  text-align: right; }

.brey {
  background: #f8f8f8; }

.grey {
  background: #E8E8E8; }

.drey {
  background: #484848;
  color: white; }
  .drey * {
    color: white; }

.cc {
  background: #484848;
  color: white; }
  .cc * {
    color: white; }

.text {
  text-align: center; }
  @media screen and (min-width: 1024px) {
    .text {
      text-align: left; } }
  .text h1 {
    margin-bottom: 16px; }
  .text h2 {
    margin-bottom: 16px; }
  .text h3 {
    margin-bottom: 16px; }
  .text p {
    margin-bottom: 16px; }
  .text img {
    width: 100%;
    display: block;
    margin-bottom: 16px; }
  .text ul {
    margin-bottom: 16px;
    border-top: #E8E8E8 1px solid; }
    .text ul li {
      list-style-type: none;
      padding: 6px 16px;
      border-bottom: #E8E8E8 1px solid;
      line-height: 28.8px; }
    .text ul li::before {
      content: "-";
      width: 16px;
      display: inline-block;
      text-align: left;
      margin-left: -16px; }

.highlight {
  -webkit-transition: background .6s;
          transition: background .6s; }
  .highlight:hover {
    background: rgba(0, 0, 0, 0.05);
    -webkit-transition: all .6s;
            transition: all .6s; }

h1 {
  font-size: 32px;
  font-weight: 600;
  color: #484848; }

h2 {
  font-size: 32px;
  font-weight: 400;
  color: #484848; }

h3 {
  font-size: 24px;
  font-weight: 400; }

p {
  line-height: 28.8px;
  font-size: 16px;
  color: #484848; }

a {
  color: #484848; }

li {
  color: #484848;
  font-size: 16px; }

img {
  width: 100%;
  vertical-align: bottom;
  border: white 2px solid; }

.price {
  color: #484848;
  font-size: 32px;
  font-weight: 400; }

.old-price {
  color: #E8E8E8;
  font-size: 16px;
  font-weight: 400;
  text-decoration: line-through;
  display: inline; }

ol li {
  display: inline-block;
  padding: 8px 16px;
  margin-right: 16px;
  font-size: 14px;
  font-style: italic;
  background: #E8E8E8;
  margin-bottom: 16px; }

.btn {
  display: inline-block;
  padding: 16px 32px;
  font-size: 14px;
  background: #484848;
  color: white;
  text-decoration: none;
  -webkit-transition: .6s opacity;
          transition: .6s opacity;
  border: #484848 1px solid;
  border-radius: 4px; }
  .btn:hover {
    opacity: 0.8;
    -webkit-transition: .6s opacity;
            transition: .6s opacity; }

.site-header .site-logo {
  line-height: 32px;
  color: #484848; }
.site-header .nav-icon {
  text-align: right; }
  @media screen and (min-width: 768px) {
    .site-header .nav-icon {
      display: none; } }
  .site-header .nav-icon span {
    display: inline-block;
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 32px; }
.site-header #nav-input {
  display: none; }
.site-header input#nav-input:checked ~ .site-menu {
  height: auto !important; }
.site-header .site-menu {
  height: 0px;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    .site-header .site-menu {
      height: auto;
      text-align: right; } }
  @media screen and (min-width: 768px) {
    .site-header .site-menu li {
      display: inline-block; } }
  .site-header .site-menu li a {
    display: block;
    text-transform: uppercase;
    color: #484848;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    line-height: 16px;
    padding: 32px;
    -webkit-transition: .6s opacity;
            transition: .6s opacity; }
    @media screen and (min-width: 768px) {
      .site-header .site-menu li a {
        padding: 40px 21.33333px; } }
    .site-header .site-menu li a:hover {
      opacity: 0.8;
      -webkit-transition: .6s opacity;
              transition: .6s opacity; }

#trigger1,
#trigger2,
#trigger3,
#trigger4 {
  display: none; }

#result1,
#result2,
#result3,
#result4 {
  display: none; }

input#trigger1:checked ~ #result1,
input#trigger2:checked ~ #result2,
input#trigger3:checked ~ #result3,
input#trigger4:checked ~ #result4 {
  display: block; }

/*# sourceMappingURL=style.css.map */
    </style>
</head>

<body>
	<div class="site-wrap">
		<header class="site-header brey">
			<div class="row">
				<div class="col-m-4 col-s-8">
					<h1 class="site-logo">Basis</h1>
				</div>
				<div class="col-s-4 nav-icon">
					<label for="nav-input">
						<span>&#9776;</span>
					</label>
				</div>
				<input type="checkbox" name="navicon" id="nav-input">
				<div class="col-m-8 cover site-menu" id="navigation">
					<nav>
						<ul>
							<li><a href="#">Zum Shop</a></li>
							<li><a href="#">Bewertungen</a></li>
							<li><a href="#">Über Uns</a></li>
							<li><a href="#">Kontakt</a></li>
						</ul>
					</nav>
				</div>
			</div>
		</header>
		
		<main class="site-main">
			<div class="row rowpad">
				<div class="col-6">
					<div class="gallery">
						<div class="row results">
							<input type="radio" name="one" id="trigger1" checked>
							<input type="radio" name="one" id="trigger2">
							<input type="radio" name="one" id="trigger3">
							<input type="radio" name="one" id="trigger4">
							<div class="col-12 cover" id="result1">
								<img src="https://bruceleeitems.com/a1/bxlO0w.jpg">
							</div>
							<div class="col-12 cover" id="result2">
								<img src="https://bruceleeitems.com/a1/test.gif">
							</div>
							<div class="col-12 cover" id="result3">
								<img src="https://bruceleeitems.com/a1/rlYJcP.jpg">
							</div>
							<div class="col-12 cover" id="result4">
								<img src="https://bruceleeitems.com/a1/bxlO0w.jpg">
							</div>
						</div>
						<div class="row triggers">
							<label for="trigger1" class="col-s-3 cover">
								<img src="https://bruceleeitems.com/a1/bxlO0w.jpg">
							</label>
							<label for="trigger2" class="col-s-3 cover">
								<img src="https://bruceleeitems.com/a1/test.gif">
							</label>
							<label for="trigger3" class="col-s-3 cover">
								<img src="https://bruceleeitems.com/a1/rlYJcP.jpg">
							</label>
							<label for="trigger4" class="col-s-3 cover">
								<img src="https://bruceleeitems.com/a1/bxlO0w.jpg">
							</label>
						</div>
					</div>
				</div>
				<div class="col-6 text">
					<h1>Basis - Auktionsvorlage inkl. Editor</h1>
					<h2 class="old-price">89,00 EUR</h2><h2 class="price">59,00 EUR</h2>
					<ol>
						<li>responsive</li>
						<li>ebay2017</li>
						<li>Galerie</li>
						<li>Live-Editor</li>
					</ol>
				  <p>Unsere Auktionsvorlage Basis stellt Ihre Produkte und Angebote in den Fokus.</p>
				  <h2>Alle Vorteile von Basis auf einen Blick:</h2>
				  <ul>
				    <li>Klares und aufgeräumtes Design</li>
						<li>Responsive Vorlage, optimiert für alle Endgeräte und Displaygrößen</li>
						<li>Kein Javascript, pures HTML5 und CSS3</li>
						<li>Entspricht den Ebay Richtlinien 2017</li>
						<li>Editor inklusive, keine HTML-Kenntnisse notwendig</li>
				  </ul>
					<p>Bei offenen Fragen, Anpassungswünschen und individuellen Komplettlösungen sind wir Ihnen gerne behilflich. Sie können uns jederzeit kontaktieren.</p>
					<br/>
					<a href="#" class="btn">Sofort Kaufen</a>
				</div>
			</div>
		</main>
		
		<div class="grey"> </div>
		
	</div>
</body>
</html>

shipscript · ‎03-21-2018

@jlpereira

eBay disables some functionality in their preview, so that would not be a good test. Probably better to actually list something and work from there. eBay has a test category for listings (14111).

Everything Else > Test Category For Internal Use Only Parent Level 2 > General

If you create a test listing, the title and content must include words like "This is a test. Please do not buy".

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.

View Best Answer in original post

shipscript · ‎03-21-2018

@jlpereira

eBay disables some functionality in their preview, so that would not be a good test. Probably better to actually list something and work from there. eBay has a test category for listings (14111).

Everything Else > Test Category For Internal Use Only Parent Level 2 > General

If you create a test listing, the title and content must include words like "This is a test. Please do not buy".

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.

berserkerplanet · ‎03-22-2018

►eBay disables some functionality in their preview

I've been wondering about that. I had assumed that it was a stupid programming error, but it hasn't been fixed in 5 months (or more), If it is intentional, what is the rationale?

Is it that anything that renders horribly in preview is something eBay doesn't want? Tables, paragraphs, font tags?

shipscript · ‎03-29-2018

@berserkerplanet

The rationale for limited functionality in preview has more to do with links. Anything that looks or functions like a link has always been disabled in preview because the user could be taken away from the listing form and lose all their work. Thus, most of the clickables and events don't function. Pure CSS does still function because CSS can't cause the page to disappear.

Is it that anything that renders horribly in preview is something eBay doesn't want? Tables, paragraphs, font tags?

The problem with those elements is that eBay has always displayed the description preview as an integral part of eBay's page mockup. That means that when eBay sets their own styles for tables, paragraphs, fonts, and line-spacing, those styles interfere with elements styled or not styled in the description.

When eBay had two item views, inline and iframe, there was always the possibility of interference between eBay styles and a seller's custom styles with the inline view. This was never a problem with the iframe view. This interference is not so noticeable now that descriptions are almost always displayed in an iframe, except in preview. But, as you can see, the interference still exists when the preview does not look like the designed template. To overcome that interference, the seller needs to pay attention to how they add styles to their own template.

eBay inline vs iframe presentation went like this (all desktop based):

The item page was first loaded inline so that browser sniffers could determine capabilities. On refresh or upon loading another item, the description went to iframe format because the browser capabilies had been determined and were saved with the session. Some oddball browsers retained inline format and never displayed within an iframe. I don't know if eBay still uses this test because I can no longer load eBay on my older browsers.

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.

jlpereira · ‎03-30-2018

My test listing

I still can't get the listing to be mobile friendly.

It adjusts fine in Standard mode, but does not function in preview or after you publish it.

Thank you in advance

shipscript · ‎03-30-2018

@jlpereira

The test listing functions for me in the eBay page. What browser and device are you using to view the listing?

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.