Jump to content


Photo
- - - - -

Cart Module

cart

Best Answer Kess , 17 April 2014 - 23:02

Hello,

 

One of our subscribers already made similar module. It can do almost everything you need except changing the quantity of products. You can see how it works here - http://kingroll66.ru/menyu/rolly . Website is in Russian but I think you'll be able to use it just fine. Cart module will appear at the top left part of the website after you add something to the cart.

 

The developer of that module provided its source code so you'll be able to make a copy of it.

 

So, here is what you should do:

 

1. Replace /modules/mod_jbzoo_basket/tmpl/default.php with the one in the attachment. Or even better, create a Joomla template override for it.

 

2. Open that file and on the 75-th line find this code:

echo $image = $zoo->jbitem->renderImageFromItem($item1, array('f6bf4bf3-98d5-4741-af75-c1985b8728e3'), true);

Replace f6bf4bf3-98d5-4741-af75-c1985b8728e3 with the element ID of your image element (you can see it when you open "Edit Elements" screen of your item type.

 

3. Same as previous - on the line number 91 find this code:

<?$removeUrl = $zoo->jbrouter->element('b0d2b218-87a9-4573-85b7-350d2eec1061', $item['itemId'], 'ajaxRemoveFromCart',array($item[hash]) );?>

Replace b0d2b218-87a9-4573-85b7-350d2eec1061 with the element ID of your price element.

 

4. Upload attached image to the images folder of your Joomla template. This image should be named del.png and is used as the remove button.

 

5. If you like how the module looks on that website, you can add its CSS as well:

.jsJBZooModuleBasket{
background: #fff; 
}
.empt {display: none;}
#cart_full img{
    border-radius: 6px; width: 50px;
height: 50px;
}
#cart_full {padding: 10px; padding-bottom: 0;}
.tbs{
display: block;
color: #ee0000;
text-align: center; font-weight: normal;
margin-bottom: 10px;
font-size: 17px; border-bottom: solid 1px #ddd;
}
#cart_full .cart_item_image{
    float:left;
}
#cart_full .cart_main{
    float:left;
    margin-left: 10px;
   width: 150px;
}
#cart_full .cart_main .cart_name{
 
   font-weight: normal;
color: #333;
    width:100%
}
 
.cart{
    overflow: visible !important}
#cart_full .addcount{
    background: none;
}
.itogo {
padding: 0 10px;
color: #ee0000;
text-align: center;
font-weight: normal;
margin-bottom: 10px;
font-size: 15px;
text-transform: uppercase;
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd; width: 186px;
margin: 0 auto;
}
.itogo .price-total-value {font-size: 25px !important;}
 
 
#cart_full .addcount input,#cart_full .addcount .minus,#cart_full .addcount .plus{
color: #c9ced2 !important;
display: inline-block;
line-height: 26px;
height: 26px !important;
padding: 0;
width: 26px !Important;
background: none;
text-align: center;
font-weight: bold;
font-size: 14px;
vertical-align: bottom;
border-radius: 0 !important; margin-top: 9px;
}
#cart_full .addcount .minus,#cart_full .addcount .plus{
background-clip: padding-box;
cursor: pointer;
background-image: url(../images/del.png) !important;
background-repeat: no-repeat !important;
border: 0;
padding: 0;
float: left;
color: #fff !important;
 
}
#cart_full .addcount{margin:0;float: right;
width: 20px;}
#cart_full p{color:black;font-size: 16px; margin-top: 2px;
}
#cart_full  .jsCount{margin-top: 5px;
 
box-shadow: none !important;
-webkit-box-shadow: none !important;
border-radius: 0 !important; background: none !important;
border: solid 1px #E2E2E2;
float: left;
 
}
#cart_full .btn-mini {border: solid 1px #c9ced2}
.jbzoo a.empty-cart {
padding-right: 0;
display: block !important;
clear: both;
float: none;
text-align: center;
padding: 6px;
}
.jsJBZooModuleBasket .add-to-cart{margin: 0 auto;
display: block !important;
width: 100px;
text-align: center;
margin-bottom: 11px;}
.jbzoo .jbzoo-basket-wraper .basket-link {
padding-bottom: 6px;
}
.summ {
float: left;
margin-right: 23px;
}

This should be enough to make it work.

 

Also, on the 80-th line of the php file product name is trimmed to 20 characters using this code:

<?= mb_substr($item1->name,0,20) ?>...

So you can change it as you need.

Go to the full post


  • This topic is locked This topic is locked
1 reply to this topic

#1 xiaoqiang

xiaoqiang

Posted 16 April 2014 - 10:15

Hi,Is it possible to list all the cart items(include the action to delect and change the count of items) in the cart module?

If it is possible,can you tell me how to hack~


  • 0

#2 Kess

Kess
  • JBZoo User (rus)
  • User rate: 11.9
  • posts: 406
  • topics: 40

Posted 17 April 2014 - 23:02   Best Answer

Hello,

 

One of our subscribers already made similar module. It can do almost everything you need except changing the quantity of products. You can see how it works here - http://kingroll66.ru/menyu/rolly . Website is in Russian but I think you'll be able to use it just fine. Cart module will appear at the top left part of the website after you add something to the cart.

 

The developer of that module provided its source code so you'll be able to make a copy of it.

 

So, here is what you should do:

 

1. Replace /modules/mod_jbzoo_basket/tmpl/default.php with the one in the attachment. Or even better, create a Joomla template override for it.

 

2. Open that file and on the 75-th line find this code:

echo $image = $zoo->jbitem->renderImageFromItem($item1, array('f6bf4bf3-98d5-4741-af75-c1985b8728e3'), true);

Replace f6bf4bf3-98d5-4741-af75-c1985b8728e3 with the element ID of your image element (you can see it when you open "Edit Elements" screen of your item type.

 

3. Same as previous - on the line number 91 find this code:

<?$removeUrl = $zoo->jbrouter->element('b0d2b218-87a9-4573-85b7-350d2eec1061', $item['itemId'], 'ajaxRemoveFromCart',array($item[hash]) );?>

Replace b0d2b218-87a9-4573-85b7-350d2eec1061 with the element ID of your price element.

 

4. Upload attached image to the images folder of your Joomla template. This image should be named del.png and is used as the remove button.

 

5. If you like how the module looks on that website, you can add its CSS as well:

.jsJBZooModuleBasket{
background: #fff; 
}
.empt {display: none;}
#cart_full img{
    border-radius: 6px; width: 50px;
height: 50px;
}
#cart_full {padding: 10px; padding-bottom: 0;}
.tbs{
display: block;
color: #ee0000;
text-align: center; font-weight: normal;
margin-bottom: 10px;
font-size: 17px; border-bottom: solid 1px #ddd;
}
#cart_full .cart_item_image{
    float:left;
}
#cart_full .cart_main{
    float:left;
    margin-left: 10px;
   width: 150px;
}
#cart_full .cart_main .cart_name{
 
   font-weight: normal;
color: #333;
    width:100%
}
 
.cart{
    overflow: visible !important}
#cart_full .addcount{
    background: none;
}
.itogo {
padding: 0 10px;
color: #ee0000;
text-align: center;
font-weight: normal;
margin-bottom: 10px;
font-size: 15px;
text-transform: uppercase;
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd; width: 186px;
margin: 0 auto;
}
.itogo .price-total-value {font-size: 25px !important;}
 
 
#cart_full .addcount input,#cart_full .addcount .minus,#cart_full .addcount .plus{
color: #c9ced2 !important;
display: inline-block;
line-height: 26px;
height: 26px !important;
padding: 0;
width: 26px !Important;
background: none;
text-align: center;
font-weight: bold;
font-size: 14px;
vertical-align: bottom;
border-radius: 0 !important; margin-top: 9px;
}
#cart_full .addcount .minus,#cart_full .addcount .plus{
background-clip: padding-box;
cursor: pointer;
background-image: url(../images/del.png) !important;
background-repeat: no-repeat !important;
border: 0;
padding: 0;
float: left;
color: #fff !important;
 
}
#cart_full .addcount{margin:0;float: right;
width: 20px;}
#cart_full p{color:black;font-size: 16px; margin-top: 2px;
}
#cart_full  .jsCount{margin-top: 5px;
 
box-shadow: none !important;
-webkit-box-shadow: none !important;
border-radius: 0 !important; background: none !important;
border: solid 1px #E2E2E2;
float: left;
 
}
#cart_full .btn-mini {border: solid 1px #c9ced2}
.jbzoo a.empty-cart {
padding-right: 0;
display: block !important;
clear: both;
float: none;
text-align: center;
padding: 6px;
}
.jsJBZooModuleBasket .add-to-cart{margin: 0 auto;
display: block !important;
width: 100px;
text-align: center;
margin-bottom: 11px;}
.jbzoo .jbzoo-basket-wraper .basket-link {
padding-bottom: 6px;
}
.summ {
float: left;
margin-right: 23px;
}

This should be enough to make it work.

 

Also, on the 80-th line of the php file product name is trimmed to 20 characters using this code:

<?= mb_substr($item1->name,0,20) ?>...

So you can change it as you need.

Attached Thumbnails

  • del.png

Attached Files


  • 0





Click to return to top of page in style!