חזרה לדף תמיכה ראשי

שילוב פופאפ לסל הקניות

קריאת שרות

לחצו כאן לצפייה בדוגמא של החלונית הקופצת (popup)

 

ניתן להוסיף ללחיצה על כפתור "הוסף לסל הקניות" (או לכל אלמנט אחר בעמוד) הודעת Modal אשר תציג את הפריטים של סל הקניות.

על מנת ליישם את הנושא יש ליצור את האלמנט הבא ולאחריו את הCSS שמתאים מבחינה עיצובית לעמוד (מצורפת בהמשך דוגמת CSS לעיצוב שמוצג כאן).

ראשית יש לוודא שיש באתר את התמיכה לbootstrap ובפונטים של Fontawesome העדכני:

Bootstrap:

https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

FontAwesome:

https://fontawesome.com/start

 

את הקוד לחלון הקופץ יש למקם בתחילת ה-body:

 

הוספת הקישור לכפתור:

יש להוסיף את ה-attribues הבאים לאלמנט הרלוונטי, במקרה שלנו זה כפתור:

   
 data-toggle="modal" data-target="#CartModal"

דוגמא מלא לכל הכפתור:

קוד הCSS שבדוגמא המצורפת:

   
@import url('https://fonts.googleapis.com/css?family=Assistant');


body {
    direction: rtl;
}


/* Controls the top Close Icon ( The X icon ) */

.close {
    float: left;
    font-size: 51px;
    font-weight: 400;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.5;
}

/* Modal Title*/

.modal-title {
    margin: 10px;
    line-height: 1.42857143;
    font-family: 'Assistant', sans-serif;
}

/* container for the modal content*/

.modal-body {
    height: 350px;
    overflow-y: auto;
    background-color: rgba(232, 232, 232, 0.35);
    overflow-x: hidden;
    font-family: 'Assistant', sans-serif;
}


/* Modal Title Check icon*/

i.fas.fa-check-square {
    color: #60a21a;
    padding: 5px;
    vertical-align: middle;
}

/* Main product  Title*/
.prod_title {
    color: #60a21a;
}

/* This aligns the image of the produt to the right */

.modalImageRow {
    text-align: right;
}

/* The image propeties*/

img.modalImage {
    border: 5px solid #fff;
    border-radius: 14px;
    box-shadow: 3px 2px 10px -1px #868282;
}

/* Text controls for the item details*/

/* Heading */
p.prod_heading {
    font-size: 1.3em;
    font-weight: bold;
}

/* After the heading - item attribute*/
.cleantext {
    font-size: normal;
    font-weight: 400;
}

/* Devides the item rows*/

.prodRow.row {
    border-bottom: 3px solid #cccccc85;
    margin: 20px auto;
}

/* Controls the product price on the left of the row*/
.prodPrice {
    left: 0;
    position: absolute;
    top: 0px;
    font-size: 1.2em;
    font-weight: bold;
    color: #60a21a;
}

/* The bottom total row properties*/

#subtotal {
    text-align: right;
    padding-right: 20px !important;
    font-weight: bold;
    color: #60a21a;
}


/* Botton button controls*/

/* Blue button*/
button.btn.btn-info.form-control.continueShopingButton {
    border-radius: 0px!important;
    border: 0px!important;
    color: #fff!important;
}

/* Green button*/
a.btn.btn-success.gotoCartButton.form-control {
    border-radius: 0px!important;
    border: 0px!important;
    color: #fff!important;
}
חזרה לדף תמיכה ראשי
האם מידע זה היה שימושי?