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;
}

.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;
}

.header_main > h3 {
    font-size: 1.2rem;
    letter-spacing: 0px;
    font-weight: 700;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin: 0px;
}

.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);
}