Изменяем внешний вид Ajax корзины Prestashop 1.5

cartСледуя из названия статьи касаться она может только тех хозяев сайтов, у которых включен режим Ajax корзина в настройках модуля корзина покупателя. Остальные же могут просто почитать и мотать на ус. Для правки внешнего вида ajax корзины нам понадобиться четыре файла модуля: blockcart.tpl, blockcart-json.tpl, ajax-cart.js и blockcart.css.
Читаем очень внимательно абзац, что бы не задавать глупые вопросы. Для того, чтобы не потерять все изменения при обновлении Prestashop, копируем выше перечисленные файлы и помещаем их в следующие папки:

blockcart.tpl и blockcart-json.tpl в themes/ваш_шаблон/modules/blockcart/ если папка не существует, ее необходимо создать.
ajax-cart.js помещаем в themes/ваш_шаблон/js/modules/blockcart/ если папка не существует, ее необходимо так же создать.
blockcart.css в /themes/ваш_шаблон/css/modules/blockcart/ если папка не существует, ее необходимо так же создать.

Теперь открываем текстовым редактором Notepad++ файл blockcart.tpl и находим строчку

 
строка указывает какое количество товара добавлено в корзину и перед этим числом мы установим картинку товара. Для этого до этого куска кода добавляем строку

 
Для картинки устанавливаем свой стиль display: inline-block; float:left для того что бы картинка находилась левее числа товаров
для того что бы картинка не выпадала из контейнера добавляем класс clearfix
меняем строку

 
на

 
Решаем проблему с выводом полного названия товара
меняем строку

 
на

 
Для того что бы картинка отображалась сразу после добавления пользователем в корзину необходимо править файл blockcart-json.tpl, откроем его текстовым редактором и найдем строку

 
и после нее добавим

 
мы получаем ссылку для Ajax.
в этом файле тоже добавляем необходимое количество символов для названия товара
меняем строку

 
на

 
Теперь правим файл ajax-cart.js
находим строку

 
и перед ней добавляем

 
и добавляем класс clearfix
меняем строку

 
на

 
и в этом файле так же меняем количество символов названия товара
находим строку

 
и меняем ее на

 
Осталось поправить стили. Открываем файл blockcart.css редактором находим строку

 
добавляем между скобками {width: 400px;border: 3px solid red;} В конце можно поменять красный цвет red на нужный вам. Далее со стилями пофантазируйте сами. Результат работы можно посмотреть на моем сайте.
ajaxcart
готовые файлы

Comments (62)

Илья
05.12.2013 - 12:29 / Ответить

Евгений, спасибо, я кажется понял где стоит порыться, спасибо.)

Не совсем понял про атрибуты – цвет же штатный параметр, его сам Prestshop добавляет. В корзине он отображается просто надписью, то есть когда при добавлении в корзину выбрали цвет “чёрный” он так и будет выводиться надписью “чёрный” под названием товара. У меня проблема в том что когда я редактирую стили если и меняю для него параметры то в любом случае видно что он в другом блоке, то есть грубо говоря если я меняю margin то отступ идёт от границ блока в который мы в статье поместили картинку, в котором название товара, итд. А цвет выведен отдельно в другом блоке.)

В общем то спрашивать про него начал потому что он непосредственное отношение имеет к статье, то есть после того как мы добавили картинку эта надпись обозначающая цвет как раз и ушла вниз.) Вернее она там и была прото сейчас это более заметно.)

В общем буду разбираться сам, если что то получится отпишусь Вам, может быть захотите дополнить статью.)

Спасибо что навели на мысль.)

05.12.2013 - 18:36 / Ответить

Илья, Вы снова ничего не поняли. Добавляя атрибуты в Ajax корзину Вам придется добавить блок этих атрибутов и отобразить его с помощью стилей в блоке ajax. Атрибуты будь то цвета или еще что должны быть выделены в отдельный блок со своими стилями. А еще для того чтобы картинка товара изменяла свой цвет в зависимости от атрибута понадобиться еще доработка.

Илья
06.12.2013 - 11:52 / Ответить

Так я и не хотел чтобы картинка изменялась, да и атрибутов я никаких новых не добавил.
Просто у меня для товара указывается цвет. Это функция стоковая, родная, ничего нового я не добавлял.
Дело в том что сама эта надпись у меня (одно слово, “чёрный” там, “красный”, “белый”, и так далее) отображается под блоком в котором картинка, название товара, цена. А я пытаюсь сделать чтобы это слово попало в этот блок.
За вывод цветового атрибута как раз и отвечает cart_block_combination.

Что то я похоже где то очень сильно затупил.. А где никак не пойму. :(

Илья
06.12.2013 - 11:56 / Ответить

Кстати да, я забыл уточнить, эту “надпись” с наименованием цвета я тоже не добавлял – она сама там появляется при условии что товар имеет несколько цветов и при добавлении в корзину выбран один из них..

10.12.2013 - 00:38 /

Для особо “одаренных” задам встречный вопрос, в ajax корзине по умолчанию отображаются атрибуты? Ответите на этот вопрос и все встанет на свои места.

Илья
11.12.2013 - 12:35 / Ответить

В моём случае ничего дополнительного я не делал – тема стандартная, цвет в виде надписи выводился изначально.

11.12.2013 - 15:06 / Ответить

цвет в виде надписи“,а Вы хотите в виде рисунка. Я про Фому, а мне про Ерему.

Илья
12.12.2013 - 23:45 / Ответить

Я не хочу никакого рисунка, Евгений, Вы неправильно меня поняли.
Я хочу Надпись поместить в тот же блок в котором цена и наименование товара вот и всё. Просто она у меня намного ниже болтается и портит вид.
Видимо я очень криво объяснил, говорил же Вам что Я где то туплю. :)

13.12.2013 - 01:37 / Ответить

С самого начала лучше бы Вы выложили скриншот с пояснениями чего хотите. Теперь понятно. Для вывода надписи атрибута в тот же блок где наименование товара почитайте про теги dl, dt, dd.После того как прочтете, поменяйте dd на span и переместите закрывающий тег dt, все выстроится в линию.

Илья
14.12.2013 - 16:56 /

Да я просто не знал как выложить скрин, честно говоря.)
Спасибо Вам, Евгений, отдельное спасибо что даёте не готовый ответ а направление, прям огромное спасибо! :)
Я просто глубоко убеждён что так толку больше.) Пойду разбираться..) Спасибо ещё раз!!! :)

14.12.2013 - 19:06 /

скрин на файлообменник, а сюда ссылку и все дела

Илья
14.12.2013 - 16:59 / Ответить

Направление это я имею ввиду “почитайте про теги dl, dt, dd” :) Хоть буду на будущее знать.)

Илья
14.12.2013 - 17:19 / Ответить

Разобрался вообще сразу, почитал про теги теперь понял в чем я ошибался, я пробовал закрывающий dt двигать, но dd на span поменять не додумался!)

Спасибо Вам, Евгений ещё много-много-много раз, теперь всё отлично, просто идеально!!!)
СПАСИБО!!! :) Вы – Гений Prestashop!!!)

Пойду дальше читать про dd, dt и dl)) Я оказывается вообще про них мало что знал.)
Спасибо Вам ещё раз!!!)

Анна
26.12.2013 - 13:54 / Ответить

А как сделать так, чтобы корзина отображалась у меня в двух местах – сейчас она только в хедере, а я хочу, чтобы она была еще и в левой колонке? При обычном переносе хуком корзина подглючивает на 1,5.

27.12.2013 - 16:02 / Ответить

Как и любой другой модуль который зарегистрирован в левой колонке, модуль корзины добавляется в этот хук зайдя в управление хуками в настройках модуля. Далее нажимаете кнопку расположить модуль и выбираете из выпадающего списка displayLeftColumn. На дефолтном шаблоне “глюков” не наблюдал. На Вашем шаблоне видно не все порядке с css,например, список категорий налазят на слайдер. Возможно из-за этого ошибки и проявляются

Андрей
11.02.2014 - 22:49 / Ответить

Добрый вечер Евгений, скажите пож-та вкладка корзины слишком быстро пропадает, иногда не успеваешь мышку навести, как увеличить время активной вкладки

12.02.2014 - 05:39 / Ответить

откройте файл ajax-cart.js текстовым редактором и найдите строки
[php]function() {
$(‘#shopping_cart a’).css(‘border-radius’, ’3px’);
setTimeout(function() {
if (!shopping_cart.isHoveringOver() && !cart_block.isHoveringOver())
$("#header #cart_block").stop(true, true).slideUp(450);
}, 200);
}
);

$("#header #cart_block").hover(
function() {
$(‘#shopping_cart a’).css(‘border-radius’, ’3px 3px 0px 0px’);
},
function() {
$(‘#shopping_cart a’).css(‘border-radius’, ’3px’);
setTimeout(function() {
if (!shopping_cart.isHoveringOver())
$("#header #cart_block").stop(true, true).slideUp(450);
}, 200);[/php]
И замените цифру 200 ,например, на 3000.(это надо сделать в двух строках) Это время в течении которого окно остается открытым после того, как курсор мыши убрали из поля окна.

Sonya
13.02.2014 - 12:12 / Ответить

Всё прекрасно меняется, но если добавить товар в корзину и перейти на другую страницу, названия сразу же обрезаются.

13.02.2014 - 12:31 / Ответить

Название статьи внимательно читали? Кэш чистить пробовали?

Sonya
13.02.2014 - 12:43 / Ответить

да, разобрались. Дело в том, что в дефолтных темах лежит еще один blockcart.tpl, и поменяв и там truncate всё работает как следует.
Спасибо

13.02.2014 - 13:02 / Ответить

Я уважительно отношусь к представителям противоположного пола, но…, уважаемая, Sonya, Вам слово Ajax о чем нибудь говорит? И как внимательно Вы читали статью? Дело в том, что шаблон blockcart.tpl никакого отношения к Ajax корзине не имеет

Sonya
13.06.2014 - 16:02 /

Окей) вернемся к началу. Вы описываете: “Теперь открываем текстовым редактором Notepad++ файл blockcart.tpl и находим строчку… Решаем проблему с выводом полного названия товара меняем строку {$product.name|truncate:13:’…’|escape:html:’UTF-8′}
на {$product.name|truncate:300:’…’|escape:html:’UTF-8′}“. Всё работает, но при переходе на другую страницу срабатывают другие настройки транкейта, вот это – name|truncate:300 больше не 300, а хз откуда берется, вопрос был только в этом, почему так происходит.

06.07.2014 - 12:29 /

Изменения работают на моем сайте http://webnewbie.ru/ укажите где и как срабатывают другие настройки транкейта, что то я их не наблюдаю

Григорий
19.04.2015 - 05:53 / Ответить

Здравствуйте!
Отличный урок, подробный и доступный материал, спасибо! Все получилось с первого раза! Однако возник вопрос. Когда добавляешь товар, то в поле “Доставка” прописывается надпись “Бесплатная доставка!”, стоит обновить страницу или перейти на другую страницу сайта, данная надпись пропадает и вместо неё появляется “0 руб.”, если добавляешь еще один товар в корзину, то надпись “Бесплатная доставка!” появляется вновь и далее по аналогии. Как сделать. чтобы надпись “Бесплатная доставка!” не появлялась вообще? заранее спасибо!

19.04.2015 - 12:44 / Ответить

Здравствуйте!
Ранее в комментариях поднимался этот вопрос и на него был дан подробный ответ. Пролистать комментарии можно в самом низу нажав ссылку ← Предыдущие комментарии

Алексей
12.05.2015 - 23:09 / Ответить

Добрый день, Евгений. Подскажите, пожалуйста, как реализован блок “купоны’ class=cart_voucher_block на одношаговой странице оформления заказа http://webnewbie.ru/quick-order? Меня интересует frontend часть (shopping-cart.tpl) и backend(OrderOpcController). Спасибо.

13.05.2015 - 11:19 / Ответить

Здравствуйте! Оформление заказа на одной странице реализовано с помощью модуля OnePageCheckOut. Я его не писал, в коде не разбирался, поэтому ответить на Ваш вопрос не могу.

Алексей
14.05.2015 - 02:36 / Ответить

Понятно. Спасибо за ответ

Regul
16.09.2015 - 22:56 / Ответить

Евгений, добрый день! Подскажите, пожалуйста, а можно как-то сделать, чтобы при клике мышью по области корзины также разворачивалась Ajax-корзина, и не осуществлялся переход на страницу оформления заказа? Т.е. вместо “http://наш магазин/index.php?controller=order-opc” подложить туда ссылку на Ajax-корзину.

18.09.2015 - 01:35 / Ответить

Ajax корзина это анимация добавления товара в корзину и просмотра добавленного товара. Вы хотите заменить процесс заказа в магазине на простую анимацию, а как же клиенты будут покупать товары?

Regul
18.09.2015 - 09:29 / Ответить

У нас к кнопке оформить прикручен “Быстрый заказ”, т.е. по нажатию на кнопку “Оформить” в “развернутой Ajax-корзине” покупателю в отдельном окне открывается небольшая форма заказа. Через нее клиенты и будут пока оформлять заказ)

18.09.2015 - 14:53 / Ответить

Тогда проще всего удалить ссылку {$link->getPageLink(“$order_process”, true)|escape:’html’} в файле blockcart.tpl и вместо нее записать решетку #. По вашему варианту ищите специалиста по jquery для изменения скриптов. так же прошу обратить ваше внимание на мой модуль быстрого заказа в корзине

Regul
18.09.2015 - 20:45 /

У нас в blockcart.tpl нет такой ссылки… версия 1.5.4.1

Regul
18.09.2015 - 21:54 /

Нашли такую ссылку в общем blockcart.tpl (ни в теме), но ее удаление ничего не изменило…

19.09.2015 - 01:09 /

Прежде чем задавать вопросы уточняйте какой версией пользуетесь. Тратите мое и свое время. Ваша ссылка находится в файле blockuserinfo.tpl одноименного модуля. Либо в папке темы по пути указанному в статье.

Leave a Reply