SHPING JS LIBRARY
Reviews web widget
Reviews web widget can be added to a customer page for showing users reviews, using the following way:
a. In the header of the page load a library and it's style sheets
html <script charset="utf-8" type="text/javascript" src="http://code.shping.com/widgets/reviews-1.0.1.js"></script><link rel="stylesheet" href="http://code.shping.com/widgets/reviews-1.0.1.css" />
b. Place the target in the page body in the desired location
html ... <div id="shping-reviews"></div> ...
c. Create widget in the placeholder
html <script>
Shping.widgets.create({
css: 'custom_class',
apikey: '4y8BWQSeBxgkxZxtgsup2R2r4PxPk2kD',
target: '#shping-reviews',
tag:'web'});
</script>
where: css
- custom css class, apikey
- received api key, target
- id of placeholder element, tag
- tag to filter the review
After that the customer's site will show a list of approved reviews
Reviews CSS Description
wrapper
class
presents a separate review panel
.wrapper { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; border-radius: 2px; background-color: rgb(255, 255, 255); transition: box-shadow 250ms ease 0s; padding: 25px; }
header
class
presents a header panel
.header { display: flex; }
header_icon
class
presents a user icon div element
.header_icon { margin-right: 15px; display: block; }for customize user image use
.header_icon > img { border-radius: 100px; }
header_container
class
presents a header without user image
.header_container { display: flex; flex-direction: column; width: 100%; }
header_main
class
presents a header main row (user nick, rating, review date)
.header_main { display: flex; flex-direction: row; -webkit-box-pack: justify; justify-content: space-between; }for customize user nick name use
.header_main > h3 { font-size: 1.2rem; letter-spacing: 0px; font-weight: 700; display: flex; -webkit-box-align: center; align-items: center; margin: 0px; }for rating div element
.header_main > h3 > div { display: flex; margin-left: 20px; }
subheader
class
presents a subheader (product code and product name)
.subheader { font-size: 0.8rem; color: rgb(208, 208, 208); display: block; }
review_wrapper
class
presents a review panel
.review_wrapper { font-size: 1.2rem; margin: 15px 0px; }
review_item
class
presents a review text
.review_item { overflow-wrap: break-word; white-space: pre-wrap; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; color: #333333; }
media_wrapper
class
presents a panel of product images
.media_wrapper { display: flex; flex-direction: row; }
media_item
class
presents a product image
.media_item { cursor: pointer; border-radius: 2px; transition: box-shadow 250ms ease 0s; min-height: 100px; max-width: 150px; margin-right: 20px; }
for customize product image thumbnail
.media_item > img { display: block; width: 100%; clip: rect(10px, 290px, 190px, 10px); }