-1

I've come across an issue when coding a site for a colleague of mine. He resells t-shirts that are given to him by a friend, and does so by listing them on his current eBay page. He asked me to code a site for him which would promote his t-shirts more, and wanted me to allow customers to click on the shirts from his website to be redirected to the corresponding eBay page. I want to be able to randomly generate images from his eBay page and have them show up on the website, and therefore be able to redirect users to his eBay page from the site.

EDIT: I have already included a script in my .html file for randomly selecting images. My main issue is being able to randomly select such images from eBay itself.

Here is the HTML for the page:

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ADARA Enterprises</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />  
</head>
<script type="text/javascript">
  var imageURLs = [
       "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
     , "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
     , "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
  ];
  function getImageTag() {
    var img = '<img src=\"';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '\" alt=\"Some alt text\"/>';
    return img;
  }
</script>
</head>
<body>
    <div id="background">
        <div id="page">
            <div id="header">
                <span id="connect">
                    <a href="http://www.adaraenterprises.com" target="_blank" class="facebook"></a>
                    <a href="http://www.adaraenterprises.com" target="_blank" class="twitter"></a>
                    <a href="http://www.adaraenterprises.com" target="_blank" class="vimeo"></a>
                </span>
                <a href="index.html" id="logo"></a> <!-- /#logo -->
                <ul id="navigation">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <!-- <li><a href="blog.html">Blog</a></li> -->
                    <li><a href="shop.html">Shop</a></li>
                    <li class="selected"><a href="contact-us.html">Contact Us</a></li>
                </ul>
            </div> <!-- /#header -->
            <div id="contents">
                <div id="main">
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
                        quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
                        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                    </p>
                    <address>
                        <span>Telephone numbers:</span>
                        555-5678901 to 555-5678902
                        <span>Email Address:</span>
                        adarasomething@whateverthehell.com
                        <span>Street Address:</span>
                        4th Lit Street, 73813 Yeet, CO
                    </address>
                </div>
                <div id="featured">
                    <ul>
                        <li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                        <li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                        <li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                        <li class="last"><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
                    </ul>
                    <a href="shop.html" class="button">shop here!</a> 
                </div>
            </div> <!-- /#contents -->
            <div id="footer">
                <div id="description">
                    <div>
                        <a href="index.html" class="logo"></a>
                        <span>&copy; Copyright &copy; 2017. <a href="index.html">ADARA Enterprises</a> All rights reserved</span>
                    </div>
                    <p>
                        This is just filler text. <br>
                        <br>
                        Filler text.
                    </p>
                </div>
                <div class="navigation">
                    <a href="index.html">Home</a>|
                    <a href="about.html">About</a>|
                <!--    <a href="blog.html">Yeet</a>| -->
                    <a href="shop.html">Shop</a>|
                    <a href="contact-us.html">Contact Us</a>
                </div>
            </div> <!-- /#footer -->
        </div> <!-- /#page -->
    </div> <!-- /#background -->
</body>
</html>

And here is the CSS file associated with it:

html {
    font-family: 'Trebuchet MS', sans-serif, Arial, Helvitica;
}
body {
    background-color: #ffffff;
    margin: 0;
    // padding-top: 19px;
    min-height: 100%;
}
#background {
    background: url(https://static.pexels.com/photos/29724/pexels-photo-29724.jpg) repeat;
    min-height: 100%;
    //border-top: 1px solid #000000;
    margin: 0;

}
#page {
    width: 960px;
    margin: 0 auto;
    min-height: 100%;
    height: 100%;
}
@font-face {
    font-family: 'Arial Bold';
    src: url('fonts/corben-bold-webfont.eot');
    src: local('?'), url('fonts/corben-bold-webfont.woff') format('woff'), 
        url('fonts/corben-bold-webfont.ttf') format('truetype'), 
        url('fonts/corben-bold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
img {
    border: 0;
}
*/
#connect .facebook, #connect .twitter, #connect .vimeo {
    background: url(../images/icons.png) no-repeat;
}

/*------------------------------ HEADER ------------------------------*/
#header {
    background: url(../images/bg-header.png) no-repeat center top;
    min-height: 340px;
    margin-bottom: 20px;
}

#connect {
    float: left;
    display: inline-block;
    height: 30px;
    width: 300px;
    margin: 15px 0 15px 10px;
}
#connect a {
    display: inline-block;
    height: 30px;
    margin: 0 10px;
    padding: 0;
}
#connect .facebook {
    background-position: 0 2px;
    width: 27px;
}
#connect .twitter {
    background-position: 0 -36px;
    width: 36px;
}
/* #connect .vimeo {
    background-position: 0 -74px;                // Removed Vimeo Logo. Can implement any other logo here with matching dimensions
    width: 32px; */
}

#infos {
    float: right;
    color: #ffe680  ;
    display: inline-block;
    height: 30px;
    width: 200px;
    margin: 15px 0;
}
#infos  a {
    color: #ffe680;
    font-family: Arial;
    font-size: 14px;
    line-height: 30px;
    margin: 0 5px;
    text-decoration: none;
}

/** Logo **/
#logo {
    clear: both;
    display: block;
    height: 217px;
    width: 950px;
    margin: 0 auto;
}

/** Navigation **/
#navigation {
    height: 40px;
    list-style-type: none;
    margin: 0;
    display: inline-block;
    padding: 8px 20px 12px 84px;
}
#navigation li {
    float: left;
    font-family: 'Arial Black';
    font-size: 22px;
    font-weight: bold;
    line-height: 40px;
    width: 186px;
    text-align: center;
}
#navigation a {
    color: #ffe680;
    text-decoration: none;
    text-shadow: 1px 1px #C3A33B;
}
#navigation a:hover, #navigation li.selected a {
    color: #FFFFAC;
    text-shadow: 1px 1px 0 #C3A33B;
}

/*------------------------------ CONTENTS ------------------------------*/
#contents {
    margin: 0 0 40px;
    padding: 0 5px;
}

#main {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    margin: 0 0 30px;
    padding: 0 0 30px;
}
#main p {
    color: #ffe680;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    padding: 0 0 20px;
    text-shadow: 1px 1px #C3A33B;
}
#main p a {
    color: #ffe680;
    text-shadow: 1px 1px #C3A33B;
}
#main address {
    color: #FFFFAC;
    font-style: normal;
    width: 350px;
    margin: 0 auto;
    text-align: center;
    text-shadow: 1px 1px #C3A33B;
}
#main address span {
    color: #ffe680;
    text-shadow: 1px 1px #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 18px;
    line-height: 20px;
    margin: 20px 0;
    width: 350px;
}

/* #adbox {
    background: #FFFFAC url(../images/bottom-shadow-headliner.jpg) no-repeat center bottom;
    height: 371px;
    width: 935px;
    margin: 0 auto;
    padding: 7px 7px 22px;
    position: relative;
}
#adbox img {
    height: 371px;
    width: 935px;
    margin: auto; 
}
*/
#featured {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    padding: 0 0 42px;
    position: relative;
}
#featured ul {
    display: inline-block;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
}
#featured ul li {
    float: left;
    background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
    height: 253px;
    width: 204px;
    margin-right: 28px;
    padding: 6px 6px 15px;
}
#featured ul li.last {
    margin-right: 0;
}
#featured ul li img {
    border: 1px solid #e4e0d1;
}
#featured a.button {
    background: url(../images/bg-button.jpg) no-repeat;
    color: #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    width: 144px;
    padding: 4px 0 6px;
    text-align: center;
    text-decoration: none;
    position: absolute;
    bottom: -20px;
    left: 403px;
}

/*------------------------------ Blog Page ------------------------------*/
#blogs {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    padding: 0 0 20px;
    position: relative;
}
#blogs div {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    display: inline-block;
    margin: 0 0 20px;
    padding: 0 0 20px;
}
#blogs div.last {
    background: none;
    margin: 0;
}
#blogs span {
    float: left;
    background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
    display: block;
    height: 253px;
    width: 204px;
    margin-bottom: 6px;
    margin-right: 40px;
    padding: 6px 6px 15px;
}
#blogs span img {
    border: 1px solid #e4e0d1;
}
#blogs h3 {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    line-height: 30px;
    margin: 0 0 20px 258px;
    padding: 0 0 10px;
}
#blogs p {
    color: #ffe680;
    max-height: 160px;
    line-height: 20px;
    margin: 0 0 20px 258px;
    padding: 0 0 20px;
    overflow: hidden;
    text-shadow: 2px 2px #C3A33B;
}
#blogs p a {
    color: #ffe680;
    text-shadow: 2px 2px #C3A33B;
}
#blogs a.more {
    color: #C3A33B;
    font-style: italic;
    text-decoration: none;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
    background: none;
    display: inline-block;
    width: 328px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -20px;
    left: 311px;
}
#blogs div.buttons a, #blogs div.blog-entry-buttons a {
    float: left;
    background: url(../images/bg-button.jpg) no-repeat;
    color: #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    width: 144px;
    margin-right: 20px;
    padding: 4px 0 6px; 
    text-align: center;
    text-decoration: none;
}
#blogs div.blog-entry-buttons {
    width: 690px;
    left: 258px;
}
#blogs div.blog-entry-buttons a.back {
    float: right;
    font-size: 16px;
    margin-right: 0;
}

/*------------------------------ Shop Page ------------------------------*/
#shop {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    padding: 0 0 20px;
    position: relavive;
}
#shop ul.items {
    display: inline-block;
    list-style-type: none;
    margin: 0 auto 16px;
    padding: 0;
}
#shop ul.items li {
    float: left;
    color: #ffe680;
    height: 340px;
    width: 216px;
    margin-bottom: 20px;
    margin-right: 28px;
}
#shop ul.items li span {
    background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
    display: block;
    height: 253px;
    width: 204px;
    margin-bottom: 10px;
    padding: 6px 6px 14px;
}
#shop ul.items li span img {
    border: 1px solid #e4e0d1;
}
#shop ul.items li span.price {
    float: right;
    background: none;
    color: #FFFFAC;
    display: inine-block;
    font-size: 17px;
    height: 20px;
    line-height: 20px;
    width: 80px;
    margin: 0;
    padding: 0;
    text-align: right;
}
#shop ul.items li a.buy {
    background-color: #ffe680;
    color: #C3A33B;
    display: block;
    font-family: 'Arial Black';
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    width: 80px;
    border-radius: 3px;
    margin: 13px auto 0;
    padding: 1px 0 4px;
    text-align: center;
    text-decoration: none;
}
#shop ul.items li.last {
    margin-right: 0;
}

/*------------------------------ FOOTER ------------------------------*/
#footer {
    padding: 0 5px;
}
#description {
    background: url(../images/border-dashed.jpg) repeat-x left bottom;
    margin: 0 0 30px;
    padding: 0 0 30px;
}
#description div {
    float: left;
    width: 180px;
    margin-right: 50px;
}
/*#description div a.logo {
    background: url(../images/logo-footer.gif) no-repeat;
    display: block;
    height: 30px;
    width: 175px;
    margin: 0 0 10px;
}
*/
#description div span {
    padding-bottom: 5px;
    color:#ffe680;
    display: block;
    font-size: 11px;
    line-height: 20px;
    text-shadow: 1px 1px #C3A33B;
}
#description div span a {
    color: #ffe680;
    text-decoration: none;
    text-shadow: 1px 1px #C3A33B;
}
#description p {
    color: #ffe680;
    font-size: 13px;
    line-height: 20px;
    margin: 20px 0;
    text-align: justify;
    text-shadow: 1px 1px #C3A33B;
}
#description p a {
    color: #ffe680;
    text-shadow: 1px 1px #C3A33B;
}

#footer div.navigation {
    color: #ffe680;
    font-size: 14px;
    line-height: 20px;
    width: 338px;
    margin: 0 auto 20px;
    text-shadow: 0 1px 0 #C3A33B;
}
#footer div.navigation a {
    color: #ffe680;
    padding: 0 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #C3A33B;
}
#footer div.navigation a:hover {
    color: #FFFFAC;
}

/*------------------------------ For IE6 ------------------------------*/
#background {
    _height: 1440px;
    min-height: 100%;
}

#featured a.button {
    _top: 299px;
}

#blogs {
    _height: 620px;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
    _top: 620px;
}

I know this is a lot, and I'm not asking for anyone to look through the entirety of the code and provide me with completely revamped code that I can use right off the bat. I could really just use some help figuring out an algorithm to put into place for creating these randomly generated images on the page.

Any help that can be provided is very much appreciated! Thank you all!

Dead Community
  • 157
  • 1
  • 13
  • 2
    Creating the random is easy, but you are talking about having his web site read the source code of the eBay page to find the images, right? That's a bit more of an issue since eBay can change the structure of their pages at any time. – Scott Marcus Jun 27 '17 at 14:17
  • @scott-marcus Yes, this is my issue. I am comfortable with generating the images randomly, and as you can see in my .html file, I've already written a script in Javascript to account for this. However, the problem you have already touched on (the fact that eBay can change their page structure at any given time) is what primarily affects me the most. – Dead Community Jun 27 '17 at 14:21
  • I think you are going to have to load up the eBay page in an HTML `iframe` and then read the source of that `iframe`, looking for the `img` elements that are relevant to you. And, even with this approach you may not be able to do it due to Cross Origin Request Specification (CORS) limitations. – Scott Marcus Jun 27 '17 at 14:22
  • @ScottMarcus I was afraid of that... the process is sure to be long and drawn out. I am mostly experienced with writing sites in HTML and CSS, but creating the `iframe` and reading its source may be a bit difficult for me. Would you be able to provide assistance / link me to somewhere that would be helpful? Thanks! – Dead Community Jun 27 '17 at 14:27
  • Creating the `iframe` and reading its contents is actually pretty easy `` and to gain access to its contents via JavaScript: https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript But, as I say, because of built-in security and eBay's ability to change the document structure, you may be on a wild goose chase. It would be much simpler for your friend to just provide you with the images to store on the site you are building. – Scott Marcus Jun 27 '17 at 14:33
  • @ScottMarcus Providing the images would definitely be the easiest route to take. However, the issue we run into there is the fact that once a t-shirt is sold, that image can no longer be used, and must therefore be updated manually. I do freelance work for other people as well, and therefore cannot always afford to continuously do manual updates for everyone's sites. Any other suggestions are fully accepted at this point; we're sort of between a rock and a hard place! – Dead Community Jun 27 '17 at 14:36
  • Actually, I think your between a hard place and a hard place. CORS was created to prevent exactly what you are attempting to do. – Scott Marcus Jun 27 '17 at 14:40
  • @ScottMarcus Trying to have all the automatic updates on a static-type (non-CMS-powered) page/site is a lot of work... Honestly, it almost sounds like I could do something such as setting up WordPress and WooCommerce with a WC extension (likely paid, as the better ones usually tend to be since people are going to be making money by using them, etc.) which would probably take an API keyset from his eBay account or just use OAuth or something for authentication with his account, and then synchronize the WC installation's products (including stock count, price, etc., probably) automatically. – Dead Community Jun 27 '17 at 14:58

1 Answers1

0

I ended up creating an iframe and pulling the photos from E-bay's site regardless. Couldn't create live image pulls due to built-in security, so I had to go ahead and use images manually in a DB.

Also created an href redirect to the owner's ebay sales page, which worked out when it came to overall sales of the shirts / products, etc.

Dead Community
  • 157
  • 1
  • 13