X-Cart forums - Popup Text Window

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Popup Text Window (https://forum.x-cart.com/showthread.php?t=53947)

Popup Text Window

I want to build a pop up text window for the Product Details page that explains all of the options.

I want to call it Options FAQ.

My thought is that like those java image viewers that have the next and previous, like http://www.lokeshdhakar.com/projects/lightbox2/ I hope to be able to build it into a scrollable window and not to have to open a new browser window or redirect.

Re: Popup Text Window

I use this css script from Dynamic Drive for pop-ups and it works very well.

Re: Popup Text Window

Photo,

This will do text with scroll?

Re: Popup Text Window

Actually I think this will get me what I need.
http://www.dynamicdrive.com/dynamicindex11/abox2.htm

I'll just have to mess with it for a while.

Re: Popup Text Window

OK so I'm trying to do this Script, but I want to have a text link to the run the javascript.

I know it should be like below, but for some reason it's not working.

Code:

<a href="javascript:showbox('faq')">link</a>

Re: Popup Text Window

Quote:

Originally Posted by minfinger

OK so I'm trying to do this Script, but I want to have a text link to the run the javascript.

I know it should be like below, but for some reason it's not working.

Code:

<a href="javascript:showbox('faq')">link</a>

Where did you put the script? Make sure you have the paths to the script correct.

Re: Popup Text Window

Acutally I'm just testing it at the moment on my local C Drive. Everything is in the same directory.

Here's the HTML file

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script language="JavaScript" src="popup.js"></script>

</head>



<body>

<script>

window.onload=function(){

new popUp(200, 100, 500, 400, "faq", "<ul>

  <li><strong>Home Again Micro Chip</strong>

    <ul>

      <li>Its a reality: pets get lost.  Without proper identification, 90% never   return home.  The HomeAgain pet 



identification system includes a   national network of over 20,000 veterinarians and animal shelters,   200,000 



volunteer PetRescuers, and pet safety and wellness services   designed to prevent your pet from becoming an 



unfortunate statistic.    Give your pet the protection it needs for only $39.99, Give it a   HomeAgain microchip!!! 



 Each puppy that recieves a microchip will come   with an I.D. tag with your puppies unique 10 digit number. </li>

    </ul>

  </li>

  <li><strong>Deposit</strong>

    <ul>

      <li>A $100 deposit will hold the puppy of your choice for 7 days. Deposits   are non-refundable. Please call 



us and write in the special instructions   box the name of the puppy to let us know which puppy you would like to   



reserve. 740-497-2333 </li>

    </ul>

  </li>

  <li><strong>Shipping Options</strong>

    <ul>

      <li><strong>Standard Shipping to Nearest Airport

        </strong>

        <ul>

          <li>Includes the following: 1. Airfare  2. Vet Health Certificate  3. Travel Kennel  4. Puppy Toy</li>

        </ul>

      </li>

      <li><strong>Overnight Shipping

        </strong>

        <ul>

          <li>Unknown</li>

        </ul>

      </li>

      <li><strong>Local Pickup in Mount Vernon, OH

        </strong>

        <ul>

          <li>16149 Wooster Rd. Mt. Vernon OH 43050</li>

          <li><a href="http://maps.google.com/maps?q=16149+Wooster+Rd.+Mt.+Vernon+OH+43050&amp;oe=utf-



8&amp;client=firefox-a&amp;ie=UTF8&amp;hq=&amp;hnear=16149+Wooster+Rd,+Mt+Vernon,+Knox,+Ohio



+43050&amp;gl=us&amp;ei=iooATJ2SFsL88Aba6oWlDQ&amp;ved=0CBkQ8gEwAA&amp;z=16" target="_blank">Google Map 



Link</a></li>

        </ul>

      </li>

      <li><strong>Door to Door Delivery

        </strong>

        <ul>

          <li>Little Puppies Online will hand deliver your puppy to your door</li>

          <li>Please call 740-497-2333 before you choose this option.</li>

        </ul>

      </li>

    </ul>

  </li>

  <li><strong>Unconditional Replacement Guarantee

    </strong>

    <ul>

      <li>1 (one) year Unconditional Replacement Guarantee</li>

      <li>2 (two) year Unconditional Replacement Guarantee</li>

      <li>3 (three) year Unconditional Replacement Guarantee</li>

      <li>If you purchase an unconditional replacement guarantee, you have the   assurance that if your pet is in 



an unfortunate accident, we will give   you a new puppy.  Nothing will replace your pet, but having a new puppy   



will help ease the pain.  Also, with this guarantee, you will not have   to worry about the financial aspect of 



buying a new puppy.  If your   puppy dies for any reason at all within one year of purchase, we will   replace it 



with any puppy of your choice of equal or lesser value plus   shipping (if needed).  All we need is a death 



certificate from your   local veterinarian.</li>

    </ul>

  </li>

</ul>", "white", "black", "bold 10pt sans-serif", "Title Bar", "navy", "white", "#dddddd", "gray", "black", true, true, true, true, false);



}

</script>

<a href="javascript:showbox('faq')">link</a>



</body>

</html>

Re: Popup Text Window

Ok, and OMG. I think I figure out why it wasn't working. 1. It didn't like my Google Maps Link I had. 2. Look at the way I had to make the HTML Code one continous line. 3. It doesn't like Bullet points as the first level of the bulleted list, only numbers, then bullets.

Here's a link to the test code HTML file. I haven't put it in the X-Cart yet. I also turned off the auto popup as I don't need that function. I may just put the Google Map Link in the X-cart product_details.tpl

Click the "PopUp"
http://littlepuppiesonline.msidesigns.com/skin1/popup/Test.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script language="JavaScript" src="popup.js"></script>

</head>



<body>

<script>

window.onload=function(){    

new popUp(350, 125, 600, 380, "Div", "<ol><li><strong>Home Again Micro Chip</strong><ul><li>Its a reality: pets get lost.  Without proper identification, 90% never return home.  The HomeAgain pet identification system includes a national network of over 20,000 veterinarians and animal shelters, 200,000 volunteer PetRescuers, and pet safety and wellness services designed to prevent your pet from becoming an unfortunate statistic.  Give your pet the protection it needs for only $39.99, Give it a HomeAgain microchip!!!  Each puppy that recieves a microchip will come with an I.D. tag with your puppies unique 10 digit number.</li></ul></li><li><strong>Deposit</strong><ul><li>A $100 deposit will hold the puppy of your choice for 7 days. Deposits   are non-refundable. Please call us and write in the special instructions   box the name of the puppy to let us know which puppy you would like to reserve. 740-497-2333</li></ul></li><li><strong>Shipping Options</strong><ul><li><strong>Standard Shipping to Nearest Airport</strong><ul><li>Includes the following: 1. Airfare  2. Vet Health Certificate  3. Travel Kennel  4. Puppy Toy</li></ul></li><li><strong>Overnight Shipping</strong><ul><li>Unknown</li></ul></li><li><strong>Local Pickup in Mount Vernon, OH</strong><ul><li>16149 Wooster Rd. Mt. Vernon OH 43050</li></ul></li><li><strong>Door to Door Delivery</strong><ul><li>Little Puppies Online will hand deliver your puppy to your door</li><li>Please call 740-497-2333 before you choose this option.</li></ul></li></ul></li></ol>", "white", "black", "9pt sans-serif", "Options FAQ", "navy", "white", "#dddddd", "gray", "black", false, true, true, true, false);

}

</script>

<a href="javascript:showbox('Div')">link</a>



</body>

</html>

Re: Popup Text Window

Glad you got it to work. Most of this stuff just requires a bit of plain around with.

Re: Popup Text Window

Am I just missing it our is there not a real easy way to integrate a Map Link into the X-Cart system?

Re: Popup Text Window

Are you talking about using Google Maps API?

Re: Popup Text Window

Well not really, but I just need to put in the address where people can find his house. He does a lot of business where people come to house and pick up the dogs.

Re: Popup Text Window

I'm I'm totally confused as to how to get this in the product_details page.

http://littlepuppiesonline.msidesigns.com/product.php?productid=1&cat=0&bestseller=Y

I'd like it to appear just like this on the page:
Options (Click here for descriptions)

This should be above the "Home Again Micro Chip"

And the Click should be <a href="javascript:showbox('Div')">Click here for descriptions</a>

However I have no idea where to put the required <script> stuff for this app.

This is supposed to go in the head, which I put in the /customer/meta.tpl file

Code:

<script language="JavaScript" src="{$SkinDir}/popup/popup.js"></script>

I put the following into the file

Code:

<script>

window.onload=function(){new popUp(350, 125, 600, 420, "Div", "<ol><li><strong>Home Again Micro Chip</strong><ul><li>Its a reality: pets get lost.  Without proper identification, 90% never return home.  The HomeAgain pet identification system includes a national network of over 20,000 veterinarians and animal shelters, 200,000 volunteer PetRescuers, and pet safety and wellness services designed to prevent your pet from becoming an unfortunate statistic.  Give your pet the protection it needs for only $39.99, Give it a HomeAgain microchip!!!  Each puppy that recieves a microchip will come with an I.D. tag with your puppies unique 10 digit number.</li></ul></li><li><strong>Deposit</strong><ul><li>A $100 deposit will hold the puppy of your choice for 7 days. Deposits are non-refundable.</li></ul></li><li><strong>Shipping Options</strong><ul><li><strong>Standard Shipping to Nearest Airport</strong><ul><li>Includes the following: 1. Airfare  2. Vet Health Certificate  3. Travel Kennel  4. Puppy Toy</li></ul></li><li><strong>Overnight Shipping</strong><ul><li>1. VIP Next Day Air Shipping services 2. Airfare 3. Vet Health Certificate 4. Shipping Crate 5. Puppy Toy</li><li>Payment must be made by 12 noon EST. in order to recieve the puppy the next day. No Sunday shipments.</li></ul></li><li><strong>Local Pickup in Mount Vernon, OH</strong><ul><li>16149 Wooster Rd. Mt. Vernon OH 43050</li></ul></li><li><strong>Door to Door Delivery</strong><ul><li>Little Puppies Online will hand deliver your puppy to your door</li><li>Please call 740-497-2333 before you choose this option.</li></ul></li></ul></li><li><strong>Unconditional Replacement Guarantee</strong><ul><li>1 (one) Year Unconditional Replacement Guarantee</li><li>2 (two) Year Unconditional Replacement Guarantee</li><li>3 (three) Year Unconditional Replacement Guarantee</li><li><strong>Note:</strong> If you purchase an unconditional replacement guarantee, you have the   assurance that if your pet is in an unfortunate accident, we will give   you a new puppy.  Nothing will replace your pet, but having a new puppy will help ease the pain.  Also, with this guarantee, you will not have   to worry about the financial aspect of buying a new puppy.  If your   puppy dies for any reason at all within one year of purchase, we will   replace it with any puppy of your choice of equal or lesser value plus   shipping (if needed).  All we need is a death certificate from your   local veterinarian.</li></ul></li></ol>", "white", "black", "9pt sans-serif", "Options FAQ", "navy", "white", "#dddddd", "gray", "black", false, true, true, true, false);}</script>

I did put the text {include file="popup/popup.tpl"} in the /customer/main/product_details.tpl file.
The popup.tpl is:

Code:

{Literal}

<script>

window.onload=function(){    

new popUp(350, 125, 600, 420, "Div", "<ol><li><strong>Home Again Micro Chip</strong><ul><li>Its a reality: pets get lost.  Without proper identification, 90% never return home.  The HomeAgain pet identification system includes a national network of over 20,000 veterinarians and animal shelters, 200,000 volunteer PetRescuers, and pet safety and wellness services designed to prevent your pet from becoming an unfortunate statistic.  Give your pet the protection it needs for only $39.99, Give it a HomeAgain microchip!!!  Each puppy that recieves a microchip will come with an I.D. tag with your puppies unique 10 digit number.</li></ul></li><li><strong>Deposit</strong><ul><li>A $100 deposit will hold the puppy of your choice for 7 days. Deposits are non-refundable.</li></ul></li><li><strong>Shipping Options</strong><ul><li><strong>Standard Shipping to Nearest Airport</strong><ul><li>Includes the following: 1. Airfare  2. Vet Health Certificate  3. Travel Kennel  4. Puppy Toy</li></ul></li><li><strong>Overnight Shipping</strong><ul><li>1. VIP Next Day Air Shipping services 2. Airfare 3. Vet Health Certificate 4. Shipping Crate 5. Puppy Toy</li><li>Payment must be made by 12 noon EST. in order to recieve the puppy the next day. No Sunday shipments.</li></ul></li><li><strong>Local Pickup in Mount Vernon, OH</strong><ul><li>16149 Wooster Rd. Mt. Vernon OH 43050</li></ul></li><li><strong>Door to Door Delivery</strong><ul><li>Little Puppies Online will hand deliver your puppy to your door</li><li>Please call 740-497-2333 before you choose this option.</li></ul></li></ul></li><li><strong>Unconditional Replacement Guarantee</strong><ul><li>1 (one) Year Unconditional Replacement Guarantee</li><li>2 (two) Year Unconditional Replacement Guarantee</li><li>3 (three) Year Unconditional Replacement Guarantee</li><li><strong>Note:</strong> If you purchase an unconditional replacement guarantee, you have the   assurance that if your pet is in an unfortunate accident, we will give   you a new puppy.  Nothing will replace your pet, but having a new puppy will help ease the pain.  Also, with this guarantee, you will not have   to worry about the financial aspect of buying a new puppy.  If your   puppy dies for any reason at all within one year of purchase, we will   replace it with any puppy of your choice of equal or lesser value plus   shipping (if needed).  All we need is a death certificate from your   local veterinarian.</li></ul></li></ol>", "white", "black", "9pt sans-serif", "Options FAQ", "navy", "white", "#dddddd", "gray", "black", false, true, true, true, false);

}

</script>

{/literal}

<a href="javascript:showbox('Div')">PopUp</a>

Re: Popup Text Window

Try putting the following code directly in /customer/main/product_details.tpl file instead of using the include and see what happens. I dont think you need the literal tags but you can try it with and without them.

Code:

<script>

window.onload=function(){    

new popUp(350, 125, 600, 420, "Div", "<ol><li><strong>Home Again Micro Chip</strong><ul><li>Its a reality: pets get lost.  Without proper identification, 90% never return home.  The HomeAgain pet identification system includes a national network of over 20,000 veterinarians and animal shelters, 200,000 volunteer PetRescuers, and pet safety and wellness services designed to prevent your pet from becoming an unfortunate statistic.  Give your pet the protection it needs for only $39.99, Give it a HomeAgain microchip!!!  Each puppy that recieves a microchip will come with an I.D. tag with your puppies unique 10 digit number.</li></ul></li><li><strong>Deposit</strong><ul><li>A $100 deposit will hold the puppy of your choice for 7 days. Deposits are non-refundable.</li></ul></li><li><strong>Shipping Options</strong><ul><li><strong>Standard Shipping to Nearest Airport</strong><ul><li>Includes the following: 1. Airfare  2. Vet Health Certificate  3. Travel Kennel  4. Puppy Toy</li></ul></li><li><strong>Overnight Shipping</strong><ul><li>1. VIP Next Day Air Shipping services 2. Airfare 3. Vet Health Certificate 4. Shipping Crate 5. Puppy Toy</li><li>Payment must be made by 12 noon EST. in order to recieve the puppy the next day. No Sunday shipments.</li></ul></li><li><strong>Local Pickup in Mount Vernon, OH</strong><ul><li>16149 Wooster Rd. Mt. Vernon OH 43050</li></ul></li><li><strong>Door to Door Delivery</strong><ul><li>Little Puppies Online will hand deliver your puppy to your door</li><li>Please call 740-497-2333 before you choose this option.</li></ul></li></ul></li><li><strong>Unconditional Replacement Guarantee</strong><ul><li>1 (one) Year Unconditional Replacement Guarantee</li><li>2 (two) Year Unconditional Replacement Guarantee</li><li>3 (three) Year Unconditional Replacement Guarantee</li><li><strong>Note:</strong> If you purchase an unconditional replacement guarantee, you have the   assurance that if your pet is in an unfortunate accident, we will give   you a new puppy.  Nothing will replace your pet, but having a new puppy will help ease the pain.  Also, with this guarantee, you will not have   to worry about the financial aspect of buying a new puppy.  If your   puppy dies for any reason at all within one year of purchase, we will   replace it with any puppy of your choice of equal or lesser value plus   shipping (if needed).  All we need is a death certificate from your   local veterinarian.</li></ul></li></ol>", "white", "black", "9pt sans-serif", "Options FAQ", "navy", "white", "#dddddd", "gray", "black", false, true, true, true, false);

}

</script>

<a href="javascript:showbox('Div')">PopUp</a>

Re: Popup Text Window

He'll need the {literal} tags due to the { and } on the second and fourth line respectively.

Re: Popup Text Window

Tal like this?

Code:

<script>

window.onload=function(){literal}{    

new popUp(350, 125, 600, 420, "Div", "<ol><li><strong>Home Again Micro Chip</strong><ul><li>Its a reality: pets get lost.  Without proper identification, 90% never return home.  The HomeAgain pet identification system includes a national network of over 20,000 veterinarians and animal shelters, 200,000 volunteer PetRescuers, and pet safety and wellness services designed to prevent your pet from becoming an unfortunate statistic.  Give your pet the protection it needs for only $39.99, Give it a HomeAgain microchip!!!  Each puppy that recieves a microchip will come with an I.D. tag with your puppies unique 10 digit number.</li></ul></li><li><strong>Deposit</strong><ul><li>A $100 deposit will hold the puppy of your choice for 7 days. Deposits are non-refundable.</li></ul></li><li><strong>Shipping Options</strong><ul><li><strong>Standard Shipping to Nearest Airport</strong><ul><li>Includes the following: 1. Airfare  2. Vet Health Certificate  3. Travel Kennel  4. Puppy Toy</li></ul></li><li><strong>Overnight Shipping</strong><ul><li>1. VIP Next Day Air Shipping services 2. Airfare 3. Vet Health Certificate 4. Shipping Crate 5. Puppy Toy</li><li>Payment must be made by 12 noon EST. in order to recieve the puppy the next day. No Sunday shipments.</li></ul></li><li><strong>Local Pickup in Mount Vernon, OH</strong><ul><li>16149 Wooster Rd. Mt. Vernon OH 43050</li></ul></li><li><strong>Door to Door Delivery</strong><ul><li>Little Puppies Online will hand deliver your puppy to your door</li><li>Please call 740-497-2333 before you choose this option.</li></ul></li></ul></li><li><strong>Unconditional Replacement Guarantee</strong><ul><li>1 (one) Year Unconditional Replacement Guarantee</li><li>2 (two) Year Unconditional Replacement Guarantee</li><li>3 (three) Year Unconditional Replacement Guarantee</li><li><strong>Note:</strong> If you purchase an unconditional replacement guarantee, you have the   assurance that if your pet is in an unfortunate accident, we will give   you a new puppy.  Nothing will replace your pet, but having a new puppy will help ease the pain.  Also, with this guarantee, you will not have   to worry about the financial aspect of buying a new puppy.  If your   puppy dies for any reason at all within one year of purchase, we will   replace it with any puppy of your choice of equal or lesser value plus   shipping (if needed).  All we need is a death certificate from your   local veterinarian.</li></ul></li></ol>", "white", "black", "9pt sans-serif", "Options FAQ", "navy", "white", "#dddddd", "gray", "black", false, true, true, true, false);

}{/literal}

</script>

<a href="javascript:showbox('Div')">PopUp</a>

Re: Popup Text Window

It was the {litteral} commands as I posted above that made the difference.

For now it's puzzled dog heads, but I will probably change it.
http://littlepuppiesonline.msidesigns.com/Junior-Handsome-lil-TEACUP-male-Maltese.html