Last active
October 14, 2018 16:12
-
-
Save joe-dempsey/dcdedbda0a6f58d54048291b8d4ba8ad to your computer and use it in GitHub Desktop.
Shopify reviews widget slick
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% if section.settings.show_reviews_slider %} | |
<div class="review_wrapper"> | |
<h2 class="center home-section--title">{{ section.settings.reviews_title }}</h2> | |
<div data-section-id="{{ section.id }}" id="slick-{{ section.id }}" class="slickslider reviews-responsive{% if section.settings.slideshow_width == 'contained' %} collection-list--container {% endif %}" data-section-type="reviews-slideshow-section"> | |
{% for block in section.blocks %} | |
<div class="brand-slide"> | |
<img src="{{ 'reviews_stars.png' | asset_img_url: 'original' }}" alt="5 star review"> | |
<h4>{{ block.settings.review_title }}</h4> | |
<div class="reviews_copy">{{ block.settings.review_copy }}</div> | |
<div class="reviewer_name">{{ block.settings.review_name }}</div> | |
</div> | |
{% endfor %} | |
</div> | |
</div> | |
{% endif %} | |
{% schema %} | |
{ | |
"name": "Reviews Slider", | |
"max_blocks": 20, | |
"settings": [ | |
{ | |
"type": "select", | |
"id": "slideshow_width", | |
"label": "Layout", | |
"options": [ | |
{ | |
"value": "full", | |
"label": "Full-width" | |
}, | |
{ | |
"value": "contained", | |
"label": "Contained" | |
} | |
], | |
"default": "full" | |
}, | |
{ | |
"type": "text", | |
"id": "reviews_title", | |
"label": "Reviews Title", | |
"default": "Reviews" | |
}, | |
{ | |
"type": "checkbox", | |
"id": "show_reviews_slider", | |
"label": "Enable reviews slider", | |
"default": true | |
}, | |
{ | |
"type": "header", | |
"content": "Info" | |
}, | |
{ | |
"type": "paragraph", | |
"content": "You may upload up to 25 reviews" | |
}, | |
{ | |
"type": "paragraph", | |
"content": "Please try to use the same pixel size for all images - I've suggested 133px by 73px but you can use whatever other size you want" | |
} | |
], | |
"blocks" : [ | |
{ | |
"type": "review", | |
"name": "Review", | |
"settings": [ | |
{ | |
"type": "header", | |
"content": "Review" | |
}, | |
{ | |
"type": "text", | |
"id": "review_title", | |
"label": "Review Title" | |
}, | |
{ | |
"type": "textarea", | |
"id": "review_copy", | |
"label": "Review Body" | |
}, | |
{ | |
"type": "text", | |
"id": "review_name", | |
"label": "Name of reviewer" | |
} | |
] | |
} | |
] | |
} | |
{% endschema %} | |
{% javascript %} | |
// form a brands slider with slick | |
$('.reviews-responsive').slick({ | |
dots: false, | |
infinite: true, | |
speed: 300, | |
slidesToShow: 4, | |
slidesToScroll: 1, | |
autoplaySpeed: 2000, | |
autoplay: true, | |
arrows: true, | |
responsive: [ | |
{ | |
breakpoint: 1024, | |
settings: { | |
slidesToShow: 2, | |
slidesToScroll: 2, | |
infinite: true | |
} | |
}, | |
{ | |
breakpoint: 769, | |
settings: { | |
slidesToShow: 1, | |
slidesToScroll: 1 | |
} | |
}, | |
{ | |
breakpoint: 480, | |
settings: { | |
slidesToShow: 1, | |
slidesToScroll: 1 | |
} | |
} | |
// You can unslick at a given breakpoint now by adding: | |
// settings: "unslick" | |
// instead of a settings object | |
] | |
}); | |
$('.reviews_copy').readmore({ | |
speed: 75, | |
lessLink: '<a href="#">Read less</a>', | |
collapsedHeight: 73 | |
}); | |
{% endjavascript %} | |
{% stylesheet %} | |
.reviews-responsive {padding-top:20px;padding-bottom:100px;} | |
.brand-slide h4 {margin-bottom:10px;} | |
.brand-slide { | |
padding:20px; | |
text-align:left; | |
} | |
.reviews_copy { | |
color: #b1b1b1; | |
font-style: italic; | |
padding-bottom:15px; | |
overflow:hidden; | |
} | |
.reviews_copy a {padding:10px 0;} | |
.slick-slide {outline:none;} | |
.slick-next {right:0;} | |
.slick-prev { | |
left: 0; | |
} | |
.center {text-align:center;} | |
.review_wrapper {margin-top:70px;} | |
{% endstylesheet %} | |
<style> | |
.brand-slide a {color:{{ settings.color_links }} !Important;} | |
.slick-prev, .slick-next{color:{{ settings.color_links }} !Important;} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here we have a sectioned reviews widget that can be added to homepage/cart etc. Edit and enjoy. Needs slick and readmore.js