Forums
Engage with the Storenvy community to get help when you need it—or just to have a good time. Start with any of the categories below.
I was able to follow directions on
http://www.storenvy.com/topics/1896-cool-product-slider-help
for my product slider....but I can not seem to get product_showcase.js right. Someone please help?
I have done:
- Go to https://raw.github.com/gist/1048169/74075cb4687d9ae323715b700fef96489143facb/product_showcase
- Copy from line 6 down to the bottom
- Go to your layout
- Look for </head>
- Paste the code before </head>
- Remove // in front of <script> and </script>
but it is still not moving and half of my code on Layout page still comes out RED.
35 Replies
You just need to put the script in the right place.
delete the code you put at the end of layout page - i think you forgot this, you need to delete it
Hi Carolhine~
I did delete the code at the end of layout page...
but when I add the js code before </head> then half of js code and all the rest of layout code below </head> turns red.
and all the codes below code 63 which is
'<span></span>');
control.attr({
'data-storenvy-for': i,
'class': (i === 0) ? controlCurrent : ''
}).html(controlContent);
all the way down to the end is red....
okay hold on let me figure out ....
:)
Okay, i did it to my shop and It worked... so try what I did... Step by step..
STEP 1:
Go to Design Page, click "edit styles" then click "CSS mode".
on the very very bottom of the CSS page, copy and paste this code:
/* Add this CSS to your store Styles section under CSS mode */ /* http://www.storenvy.com/ */ /* Photo Slider */ .product_photo_slider { background: #fff; /*: Product Slider Background :*/ border: 5px solid #eaeaea; /*: Product Slider Border :*/ color: #555; /*: Product Slider Product Description :*/ display: block; margin-left:8px; overflow: hidden; position: relative; width: 651px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: inset 0 0 20px #ccc; -moz-box-shadow: inset 0 0 20px #ccc; -webkit-box-shadow: inset 0 0 20px #ccc; } .product_photo_slider .slide_inner { margin-left: 80px; position: relative; width: 530px; z-index: 5; } .product_photo_slider ul { width: 9999em; } .product_photo_slider li { float: left; overflow: hidden; position: relative; padding: 20px; width: 628px; } .product_photo_slider .product_photo_slider_bg { bottom: -100px; height: 200%; left: 0; position: absolute; z-index: 0; width: 100%; } .product_photo_slider dl { float: left; margin-left: 20px; width: 260px; } .product_photo_slider dt { color: #333; /*: Product Slider Product Name :*/ font-size: 11px; font-weight: bold; text-transform: uppercase; } .product_photo_slider dt p { padding-bottom: 0; } .product_photo_slider dd { font-size: 11px; line-height: 18px; padding-top: 10px; } .product_photo_slider .product_slider_price { color: #000; /*: Product Slider Price Color :*/ font-size: 36px; font-weight: normal; margin: 10px 0; } .product_photo_slider img { float: left; } .product_photo_slider .slider_controls { background-color: #ccc; /*: Product Slider Controls Background :*/ color: #a3a3a3; /*: Product Slider Controls Color :*/ cursor: pointer; font-size: 28px; padding: 5px 0; text-align: center; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } .product_photo_slider .slider_controls span { margin-right: 2px; } .product_photo_slider .slider_controls_current { color: #333; /*: Product Slider Controls Current Color :*/ } .product_photo_slider form { margin-top: 10px; } .product_photo_slider select { display: block; margin-bottom: 7px; } .slider_add_to_cart { background: -webkit-gradient(linear, left top, left bottom, from(#f8bb3d), to(#f89804)); background: -moz-linear-gradient(top, #f8bb3d, #f89804); background: -o-linear-gradient(top, #f8bb3d, #f89804); background-color: #f89804; border: 1px solid #c57816; color: #4e3227; cursor: pointer; display: -moz-inline-stack; display: inline-block; *display: inline; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .01em; overflow: visible; padding: 7px 18px; text-align: center; text-shadow: rgba(255, 255, 255, .3) 0 1px 0; text-transform: uppercase; width: auto; zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .2); -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .2); -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .2); } .slider_add_to_cart:active { box-shadow: inset 0 0 10px rgba(0, 0, 0, .3); -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .3); -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .3); } .clear { clear: both; }
STEP 2:
Return to the design page and click "Edit Pages". Then go to HOME - delete all the codes you see and replace with this code:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/gist/1048169/74075cb4687d9ae323715b700fef96489143facb/product_showcase.js" type="text/javascript" charset="utf-8"></script>
<!-- http://www.storenvy.com/ -->
<!-- Insert this into your Home page where you want the slider to appear. -->
<div class="product_photo_slider">
<ul>
{% for product in products.current limit:6 %}
<li>
<div class="slide_inner">
<img src="{{product.image.medium_url}}" alt="{{product.name | h}}">
<dl>
<dt>
<p><strong>{{product.name}}</strong></p>
<p class="product_slider_price">$<strong>{{product.price | money}}</strong></p>
</dt>
<dd>
{{product.description | truncate:140}}
<a href="{{product.url}}">Read More</a>
<form action="http://www.storenvy.com/cart" method="post">
{% if product.variants_in_stock.size > 1 %}
<select name="variant_id">
<option value="" selected="selected">Please select...</option>
{% for variant in product.variants_in_stock %}
<option value="{{ variant.id }}">{{ variant.name }}</option>
{% endfor %}
</select>
{% else %}
<input type="hidden" name="variant_id" value="{{ product.variants_in_stock.first.id }}" name="variant_id" />
{% endif %}
<input type="submit" name="submit" value="Add to Cart" class="slider_add_to_cart">
</form>
</dd>
</dl>
<div class="clear"></div>
</div>
</li>
{% endfor %}
</ul>
<div class="slider_controls"></div>
</div>
{% if products.current != blank %}
<ul>
{% for product in products.current %}
<li class="product" id="products_{{product.id}}">
<a href="{{product.url}}">
<img src="{{ product.image.medium_url }}" alt="{{product.name | h}}" />
<span class="product_price">{{ product.price | money_with_sign }}</span>
<span class="product_name">{{ product.name }}</span>
</a>
</li>
{% endfor %}
</ul>
{% else %}
<p>There are no products in this collection yet. Please check back later.</p>
{% endif %}
STEP 3:
Go to design page again, Click "edit pages", click "layout"
before you do this, make sure to delete any slider code you did put.
Once you are done, Look for </head>
and then paste this code before </head>
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function () {
// Plugin requires jQuery
//var $ = jQuery.noConflict():
jQuery(function () {
var
/**
* STUFF YOU CAN CHANGE
*/
// Time between slides in milliseconds
delay = 3000, // 3000 / 1000 = 3 seconds,
// Sliding animation speed
speed = 300,
// Specify the html contents of your slider controls
controlContent = '•',
/**
* !!STUFF YOU SHOULDN'T CHANGE!!
*/
// Timer object placeholder
timer,
// The slider list element
slider = jQuery('.product_photo_slider ul'),
// The slider controls element
controls = jQuery('.slider_controls'),
// Classname for the slider controls
controlCurrent = 'slider_controls_current',
// Cache all the slides within the slider
slides = slider.find('li'),
// Cache the slides total
total = slides.length,
// How wide is a slide?
slideWidth = slides.first().outerWidth(),
// Keep track of which slide we are on currently
currentSlide = 1
;
// Initiate our first slide action
timer = _delaySlide();
// Create the controls at the bottom
function _createControls() {
for (var i = 0, l = total; i < l; i++) {
var control = jQuery('<span></span>');
control.attr({
'data-storenvy-for': i,
'class': (i === 0) ? controlCurrent : ''
}).html(controlContent);
// Make sure clicks on a control send the slider to the right slide
control.bind('click', function (e) {
var el = jQuery(this);
controls.find('.' + controlCurrent).removeClass(controlCurrent);
el.addClass(controlCurrent);
_slide(el.attr('data-storenvy-for'));
return false;
});
controls.append(control);
}
};
// Move the slider left or right
function _slide(exact) {
var distance, to;
// If we've specified an exact slide to go to, use that instead of the current slide.
to = exact || currentSlide;
// How far are we sliding, in pixels
distance = (to * slideWidth) + 'px';
// We are going to a specific slide
if (exact !== undefined) {
currentSlide = exact;
_animate('-' + distance);
return true;
}
// Looks like we are at the end of the list, we should go back to the start.
if (currentSlide === total) {
distance = '0';
currentSlide = 0;
} else {
// We want to slide left, so we have to use negative values
distance = '-' + distance;
}
_animate(distance);
};
// Animate the slider movement
function _animate(distance) {
controls.find('.' + controlCurrent).removeClass(controlCurrent);
controls.find('[data-storenvy-for="' + currentSlide +'"]').addClass(controlCurrent);
// Animate the slider, increment the current slide, and set a timer
slider.animate({ 'margin-left' : distance }, speed, function () {
currentSlide++;
timer = _delaySlide();
});
};
// Delay our sliding actions
function _delaySlide() {
clearTimeout(timer);
return setTimeout(function () {
_slide();
}, delay);
};
function _createBackgroundImages() {
slides.each(function () {
var el = jQuery(this), img = el.find('img'), src = img.attr('src');
var bg = new Image();
bg.src = src;
bg = jQuery(bg).addClass('product_photo_slider_bg');
el.append(bg.fadeTo(0, .2));
});
};
function _setupSlider() {
_createControls();
_createBackgroundImages();
};
_setupSlider();
// Pause sliding on hover and resume on hover off
slides.hover(function () {
clearTimeout(timer);
}, function () {
timer = _delaySlide();
});
});
})();
// </script>
Then save changes
It finally worked for me! :) Do you know how to change the background image on the slider, behind the products? It is just showing the product picture really blown up, but I'd like a different background.
Thanks!
Shannon
Hello Shanon,
I do not know how to change the background image, i think that's the default. I'd like to know as well, It would be nice ;)
I'm going to try and play around with it. I'll let you know if I figure it out :) Haha, I'll probably just get frustrated though!
I tried the code and it worked perfectly! Thanks so much Carolhine for doing that step by step. I've tried so hard trying to figure that out.
yay!!! it finally works!!! thank you so much Carolhine!!! ^^
quick question though~ why are some of my codes turning red still? and the back ground to my slider is not clean.. it looks like my product image is being imprinted on the background kinda transparent...
how do I get this just plain white?
for step 2:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/gist/1048169/74075cb4687d9ae323715b700fef96489143facb/product_showcase.js" type="text/javascript" charset="utf-8"></script>
charset="utf-8"></script>
<script src="https://raw.github.com/gist/1048169/74075cb4687d9ae323715b700fef96489143facb/product_showcase.js" type="text/javascript" charset="utf-8"></script> <--- this part is RED does this mean anything??
To get it white, under Layout I just deleted the code BETWEEN these two codes:
bg.src = src;
el.append(bg.fadeTo(0, .2));
Mine is all red as well, but it seems fine.
Thank you frecklefox!!!
and welcome everyone ;) Glad to help!
OH GREAT!!! Thank you frecklefox & and thank you Carolhine!!!
you guys are great!!!!!
what do you guys think? should i get it white? or just leave it the way it is?
Yours actually looks pretty cute not white. I think it would look good either way. My photos were just looking really grainy and stuff in the background. Thanks guys!
thank you frecklefox!!!
frecklefoxbtq- I love your mizzou ornament!!!
Thanks so much bellabean! :D It is one of my most favorites!
Thanks for clearing that up. My slider was stuck on the bottom , not now its up top. Thanks Carolhine!
Now its up top*
Ok is anyone around? I need help. I did step three and I think I did something wrong. Now it's saying this:
2 errors prohibited this theme from being saved
Layout must contain \{{head_content}} between the <head> tags.
Layout must contain \{{page_content}} between the <body> tags.
help!!
ok figured it out. i'm a dork. went back to the default code and tried again and it worked!! yay!!
Hey just saw u comment on this thread. Im glad you got it to work! Be blessed
These instructions were wonderful, thank you!
I do have a question about this, though... for some reason slider_controls is showing up twice in the slider, so instead of one dot for each item, there are two. I've been digging through the code, but for the life of me I cannot find where this is being duplicated.
Any thoughts?
Thanks!
@samanthakyle - it seems to be that way for our admin view but it's normal view for clients~ mine is that way too
I'm seeing the extra controls out of admin view and on other computers as well, so... yeah. I dunno! I can get by with some basic html and css, but this is a bit out of my league.
Wow, those step by step instructions were excellent CaRoLHiNe.
Thank you so much...
Tried this and it didn't work, reset all of my themes and pages to default and it still didn't work. I give up lol.
Is this code still working!? I tried all the steps necessary and even saw all your codes for the ones that are working and still cant get mine to work :( would it be a Plug-in that i am missing? any feedback would be great.
I couldn't get it to work. Even wiped my store and did it from scratch, had a friend that does coding to do it and it still wouldn't work.
I followed the instructions and it WORKED!!!
I did have to do one extra step...
*select the correct collection that had the products in it that I wanted displayed and making it top of list
( you may want to create a specific collection just for this, I did so I wouldn't have to change any of my existing collections )
To Add a new collection
In products/manage collections/add collection
simple and so effective :)
A question for anyone who knows......
how do you change the postion of the description box?
right now its under the add to cart portion, i would like it under the photos... any suggestions?
Thank you guys so much for your help
:)
Please log in to comment.