[SOLVED] Editing the blockcart layout

[Audictive]

Hi !

I wanted to "clean" the layout in the blockcart itself, which was easy to do. But now I have some update problems:

When products are moved first to the blockcart, I don't get the layout I want (see img blockcart_start)
After refreshing or surfing to a different part of the homepage, it shows the layout I'm looking for (see img blockcart_after_reload)

All I did was change the order of some lines in the blockcart.tpl, it now looks like this:

I deleted the old code, because it's wrong and useless

[Audictive]

I finaly got this working perferctly.
I did this with 1.4.06

You have to change ajax-cart.js around line 414.
I changed some span to div, wrap some parts in div and changed the var name to display more characters of the product name. It now looks like this:

var content =  '';
/*New*/    content += '';
          content += '' + this.quantity + 'x';
/*Changed*/ var name = (this.name.length > 26 ? this.name.substring(0, 26) + '...' : this.name);
          content += '' + name + '';
/*New*/    content += '';
/*Changed*/ content += ' ';
/*Changed*/ content += '' + this.priceByLine + '';
           content += '';
           if (this.hasAttributes)
/*New/Changed*/ content += '  ' + this.attributes + '';

Now I edited the blockcart.tpl to correspond with the new divs in the ajax code, and also increased the length of the visible product name from 10 to 25 characters. It starts around line 64 :

/*New*/      
{$product.cart_quantity}x
/*Changed*/  getProductLink($product.id_product, $product.link_rewrite, $product.category)}" title="{$product.name|escape:html:'UTF-8'}">{t text=$product.name length='25' encode='true'}
/*New*/      
/*Changed*/  {if !isset($customizedDatas.$productId.$productAttributeId)}getPageLink('cart.php')}?delete&id_product={$product.id_product}&ipa={$product.id_product_attribute}&token={$static_token}" title="{l s='remove this product from my cart' mod='blockcart'}"> {/if}
/*Changed*/  {if $priceDisplay == $smarty.const.PS_TAX_EXC}{displayWtPrice p="`$product.total`"}{else}{displayWtPrice p="`$product.total_wt`"}{/if}

        {if isset($product.attributes_small)}

/*New*/       
getProductLink($product.id_product, $product.link_rewrite, $product.category)}" title="{l s='Product detail'}">{$product.attributes_small} 
/*New*/       
      {/if} 

[Audictive]

Now you have to refer the four new divs in the blockcart.css (or global.css for older prestashop)
The span "price" and span "remove link" are divs now, so you have to change this in css.
The div "cart_block_product_line" and "cart_block_combination" are new.

The idea was to change the position on the screen, but not in the code. Otherwise the scripts will not work correctly.
So you have to play around with the positions of the divs. The "price" and the "removelink" div must go down (this is controlled by the if script in the .tpl or the style=" +...." part in the .js), the "combinations" must move upwards, "cart_block_product_line" stays in place:

#cart_block div.cart_block_product_line { 
   height: 14px;
   width: 190px;  /* Width has to match right-colum width or design desire */
}
#cart_block div.price {
   font-size: 0.9em;
   color: #5D717E;
   position: relative;
   left: -6px;
   z-index:1; 
}
#cart_block div.remove_link {
   position: relative;
   left: 0px;
   z-index:1; 
}
#cart_block div.cart_block_combination {
   position: relative;
   top: -14px;
}

the last change is in blockcart-json.tpl , line 38

"name":          "{$product.name|html_entity_decode:2:'UTF-8'|addslashes|truncate:30:'...':true}"

With the number behind "truncate" (old value: 15) you can allow more characters of the product name to be fed into the ajax script.

Don't know if this was usefully to anybody but me... be if you can use it.. ENJOY !

[Audictive]

Ok, I did some changes to the code, its now working dynamical until 3 lines of product attributes. If you need more, it should be easy to adopt. If it doesn't fit to your design, you have to change the character count and the positions in js and in tpl.

[daquity36]

the last change is in blockcart-json.tpl , line 38

"name":		  "{$product.name|html_entity_decode:2:'UTF-8'|addslashes|truncate:30:'...':true}"

 

I struggled for hours until I ran into this post and found what I was missing (above)

Thank you OP!!

[maio]

actually it would be useful to have a clear scheme on the functionality of the blockcart module..

 

json-files (blockcart-json.tpl) are an exchange format between the php files (blockcart.php) and the js files (ajax-cart.js),

so any value you use in the .js file needs to correspond in .json (always)

 

in order for your template file (blockcart.tpl) to be update by the in ajax-cart .js transitions

your js files needs to target exactly the class/id and the specific value in the template;

anything relevant that happens in the ajax cart needs to be updated through functions in the php

(example: remove_link)...

 

Hope this can save you some time!!!!

Edited October 3, 2013 by maio (see edit history)