ShopSite Forums

by **psldesigns** » Thu Apr 16, 2015 12:43 pm

I'm converting a very old ShopSite store to use the new templates and features in version 12, the BB-Trace templates. I am working on a site that sells stationery ... a product with many dropdown options, 10 for one specific product. So I cannot use the advanced options for images (only 4 are allowed). What would be great is if the title of the dropdown (like typestyle, ink color) could be linked to the image or pdf that has them. Perfect world it would open in a lightbox. Here it is in the demo store: http://jandemo.janicesinvites.com/Banner--Invitation,-Thank-You-Note-or-Announcement-BG-P23414.htm . In the old store we had buttons under the image that linked to the documents, but it would be nice if I could just incorporate it within the dropdown. Any ideas?

Thanks!

by **ShopSite Lauren** » Fri Apr 17, 2015 11:06 am

You could add the following code to the bottom of the more information page to accomplish what you are wanting.

Code: Select all: <style type="text/css"> span.optiontitle {display: block; padding: 10px 0px 0px 0px; font-weight: bold; font-size: 90%;} span.optiontitle a {font-weight: normal;} </style> <script type="text/javascript"> $("#bb-miopt select").each(function(){ var b = ($(this).children("option").eq(0).val()).replace(";n",""); var c = ""; if (b == "Typestyles") {c = " <a href=\"[-- OUTPUT_DIRECTORY_URL --]/media/BG/2014/PrentissTypestyles.pdf\" target=\"_blank\">view</a>";} else if (b == "Ink Colors") {c = " <a href=\"[-- OUTPUT_DIRECTORY_URL --]/media/BG/2014/PrentissInkColors.pdf\" target=\"_blank\">view</a>";} else if (b == "Motif") {c = " <a href=\"[-- OUTPUT_DIRECTORY_URL --]/media/BG/2014/PrentissDouthit_Motifs.pdf\" target=\"_blank\">view</a>";} else if (b == "Envelope Liners") {c = " <a href=\"[-- OUTPUT_DIRECTORY_URL --]/media/BG/2014/PD_Lined_Envelope_Sheet_14.pdf\" target=\"_blank\">view</a>";} $(this).before("<span class=\"optiontitle\">" + b + c + "</span>"); }); </script>

by **psldesigns** » Fri Apr 17, 2015 11:21 am

PERFECT! Exactly what I need. Thanks so much for the help! I have put it just on that page for now and it works like a charm!

by **psldesigns** » Fri Apr 17, 2015 11:45 am

Lauren ... on more question, please.

I would like to attach this to a lightbox instead of having it open in another page. I know how to do this using a number of different lightboxes that I have downloaded (free) from various sources. But often, when I try to use these, I end up with a jquery conflict. Many times Lexiconn has helped get me through these but I would prefer to avoid it.

What I'm wondering is if there is a lightbox feature that is now part of ShopSite that I might be able to use so that I know I will not have any conflicts. As you know all the templates, you would know if one has been used or would be accessible. :O)

Thanks again!

by **ShopSite Lauren** » Fri Apr 17, 2015 11:51 am

No, ShopSite doesn't have a lightbox feature built in that is being used.

My guess on why you have had troubles in the past is because most lightbox features use JQuery, and ShopSite changes their JQuery slightly so other JQuery files that are added don't conflict with ShopSite's (however that doesn't prevent ShopSite's from interfering with other JQuery files that are added). You can add the following code to the top of a page, then use JQuery regularly.
<script type="text/javascript">var $ = ss_jQuery, jQuery = ss_jQuery;</script>

Or just add the following before your JQuery:
var $ = ss_jQuery, jQuery = ss_jQuery;

by **psldesigns** » Fri Apr 17, 2015 11:55 am

Great, thanks again!

by **psldesigns** » Sat Apr 25, 2015 8:31 am

Lauren ...

I'm running into the jQuery conflict issue. The code you recommended:

Code: Select all: <script type="text/javascript">var $ = ss_jQuery, jQuery = ss_jQuery;</script>

I tried first at the bottom of the head section, the lightbox didn't work. I then tried it right after the opening <body> tag, lightbox still doesn't work. Then I noticed that it is already there ... being added either by a BB-template or ShopSite, so I removed mine.

The page I'm trying to put the lightbox on is:

Code: Select all: http://jandemo.janicesinvites.com/Banner-Invitation-Thank-You-Note-or-Announcement-BG-P23414.htm

It should load when you click the "typestyle" button.
You can see the lightbox files (called topup) in the header and the script you recommended just after the <body> (being added by a BB-template or SS) with a view source.

I also did a test page here:

Code: Select all: http://jandemo.janicesinvites.com/topup-test.htm

just to prove the popup box does work and a view source will show you it is the same code, just outside of ShopSite.

I love this particular lightbox because it will load .jpg, .pdf, and youtube videos ... if I can get it to work with ShopSite! :O)

Thanks for any help you can provide!

by **Jim** » Mon Apr 27, 2015 9:35 am

On the Utilities > Publish screen do you have the " Insert an html comment before each include file " box checked?
If you do uncheck it and publish the store again. Sometimes the debugging comments get inserted in places that break javascript. Let us know if that makes a difference.

by **ShopSite Lauren** » Mon Apr 27, 2015 10:38 am

You will need to have your jquery AFTER the code I recommended to add, that appears just after the <body> tag. I would suggest putting your jquery at the end of the file, just before the </body> tag. Putting script at the end of the body is better for Google's page load speed test, and will be after the line of jquery I recommended to add.

by **psldesigns** » Mon Apr 27, 2015 11:40 am

Hi, I moved the code to just before the </body> tag and regenerated (making sure the insert html comment was Unchecked). No change ... it still doesn't load. :O(

I also moved the code to just before the </body> on the test page which is outside ShopSite to make sure that still worked and it indeed did.

I did a view source to be sure that I was looking at the republished file.

by **ShopSite Lauren** » Mon Apr 27, 2015 12:52 pm

Pam, I have done some testing with your code, and it seems like you could actually modify the <script type="text/javascript">var $ = ss_jQuery, jQuery = ss_jQuery;</script>, and it will allow the custom topup code to work. In the BB-Header-Trace.sst include file, you will want to change:

<script type="text/javascript">var $ = ss_jQuery, jQuery = ss_jQuery;</script>

To just:

<script type="text/javascript">var $ = ss_jQuery</script>

Note: if you are not currently working with a copy of the BB-Header-Trace.sst include file, go to Merchandising > Custom Templates > Includes > Copy ShopSite Include, and make a copy of the BB-Header-Trace.sst include file. Then make a copy of your copy and rename it the exact same name as the original (this will override the original). You can then modify the file.

by **psldesigns** » Mon Apr 27, 2015 3:09 pm

It works! Thank you so much! I did have a custom BB-Header-Trace.sst include so it was easy enough to change. Since this lightbox works with all images, youtube videos, and pdfs ... I'm hoping I'll never have to get another one to play nice with ShopSite! Thanks again.

by **psldesigns** » Mon Apr 27, 2015 4:15 pm

Oh no ...

I was excited to quickly. Look at the carousel on her home page now. Changing that code broke it. All the images are shown and no longer scroll. :O(

http://jandemo.janicesinvites.com/index.html

by **ShopSite Lauren** » Mon Apr 27, 2015 4:52 pm

Pam, you have reached the end of my skill set. I can do some jquery, but this much jquery conflict, I am not experienced enough to provide a solution. ShopSite uses it's own jquery, then the code that is added at the beginning of the template (in the header include file), modifies ShopSite's jquery so that it works with standard jquery formatting and is also used by some of the ShopSite features using standard jquery formatting. It seems like the custom jquery code you are trying to add has a third type of jquery formatting. I don't know how to make all three types not-conflict.

by **psldesigns** » Tue Apr 28, 2015 5:24 am

Thanks for trying! This is often what I run into trying to make them all work together. What I did that so far seems OK is to create a BB-Header-Trace-PRODUCT.sst to be used only for the product template ... this one has:

<script type="text/javascript">var $ = ss_jQuery</script>

I put the original:

<script type="text/javascript">var $ = ss_jQuery, jQuery = ss_jQuery;</script>

back in the BB-Header-Trace. I only need lightboxes on product pages.

I originally put the code in the page and product templates and not in header files but that broke the search feature as it uses jQuery for height. So I believe having it ONLY in the Product template, I won't be breaking any other features .... do you think that is a correct statement?

Thanks again for all your work on this.

ShopSite Forums

BB-Trace template - add link to dropdown menu

BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Re: BB-Trace template - add link to dropdown menu

Who is online