Автор Тема: Адаптация всплывающего окна под экран мобильного телефона  (Прочитано 37 раз)

06 Июль 2017, 15:15:39
  • Новичок
  • *
  • Сообщений: 49
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Здравствуйте, как можно адаптировать всплывающее окно которое появляется при добавлении товара в корзину? Это то окно которое предлагает продолжить покупки или оформить заказ. На компьютере все отлично, а на мобильном телефоне кнопки выходят за границы экрана и никак не двигаются. Cайт https://domik.shop
06 Июль 2017, 15:20:43
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 14006
  • Репутация: +14568/-2
  • Сообщество PrestaShop
    • Просмотр профиля
Стили добавить к форме окна Media queries или использовать Responsive utilities из http://getbootstrap.com/css/#responsive-utilities
06 Июль 2017, 15:24:50
Ответ #2
  • Новичок
  • *
  • Сообщений: 49
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
06 Июль 2017, 15:26:08
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 14006
  • Репутация: +14568/-2
  • Сообщество PrestaShop
    • Просмотр профиля
06 Июль 2017, 15:38:31
Ответ #4
  • Новичок
  • *
  • Сообщений: 49
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
я не нахожу там форму окна... простите пожалуйста
{*
* 2007-2015 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2015 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{include file="$tpl_dir./layout/setting.tpl"}
{if !isset($productClassWidget)}
    {assign var="productClassWidget" value={hook h="pagebuilderConfig" configName="productClass"}}
{/if}
{if !isset($productProfileDefault)}
    {assign var="productProfileDefault" value={hook h="pagebuilderConfig" configName="productKey"}}
{/if}
{if isset($products) && $products}
{*define numbers of product per line in other page for desktop*}
        {if isset($class)}
            {*only display grid mode when include from other module*}
            {assign var="LISTING_GRIG_MODE" value="grid" scope="global"}
            {assign var='nbItemsPerLine' value=$LISTING_PRODUCT_COLUMN_MODULE}
            {if $LISTING_PRODUCT_COLUMN_MODULE=="5"}
                {assign var="colValue" value="col-xs-{12/$LISTING_PRODUCT_MOBILE} col-sm-{12/$LISTING_PRODUCT_TABLET} col-md-2-4 col-sp-12" scope="global"}
            {else}
                {assign var="colValue" value="col-sp-12 col-xs-{12/$LISTING_PRODUCT_MOBILE} col-sm-{12/$LISTING_PRODUCT_TABLET} col-md-{12/$LISTING_PRODUCT_COLUMN_MODULE}" scope="global"}
            {/if}
        {else}
            {assign var='nbItemsPerLine' value=$LISTING_PRODUCT_COLUMN}
{/if}
        {assign var='nbItemsPerLineTablet' value=$LISTING_PRODUCT_TABLET}
        {assign var='nbItemsPerLineMobile' value=$LISTING_PRODUCT_MOBILE}
{*define numbers of product per line in other page for tablet*}
{assign var='nbLi' value=$products|@count}
{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
{math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}
<!-- Products list -->
<div {if isset($id) && $id} id="{$id}"{/if} class="product_list {$LISTING_GRIG_MODE} row {if isset($class) && $class} {$class}{/if}{if isset($productClassWidget)} {$productClassWidget}{/if}">
{foreach from=$products item=product name=products}
{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}
{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}
{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}
{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}
<div class="ajax_block_product col-sp-12 {$colValue}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line
{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}
{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}
{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line
{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}
{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line
{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}
{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">
{if isset($productProfileDefault) && $productProfileDefault}
                {capture name=productPath}{$tpl_dir}./profiles/{$productProfileDefault}.tpl{/capture}
                {include file="{$smarty.capture.productPath}" callFromModule=isset($class)}
            {else}
                {include file="$tpl_dir./sub/product-item/product-item.tpl" callFromModule=isset($class)}
            {/if}
</div>

{/foreach}
</div>
{addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}
{addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}
{addJsDef comparator_max_item=$comparator_max_item}
{addJsDef comparedProductsIds=$compared_products}
{/if}

06 Июль 2017, 15:57:14
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 905
  • Репутация: +10/-0
  • Сообщество PrestaShop
    • Просмотр профиля
06 Июль 2017, 16:09:39
Ответ #6
  • Новичок
  • *
  • Сообщений: 49
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
06 Июль 2017, 16:18:56
Ответ #7
  • Ветеран
  • *****
  • Сообщений: 905
  • Репутация: +10/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Код всплывающего окна при добавлении товара в корзину в файле /themes/default-bootstrap/modules/blockcart/blockcart.tpl. Начинается с
{if !$PS_CATALOG_MODE && $active_overlay == 1}
<div id="layer_cart">
Стили находятся в файле /themes/default-bootstrap/css/modules/blockcart/blockcart.css
Layer Cart Css
06 Июль 2017, 17:11:03
Ответ #8
  • Новичок
  • *
  • Сообщений: 49
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
все файлы нашел, но что именно в них надо добавить что бы кнопки не выходили за край экрана так и не понял
06 Июль 2017, 17:30:34
Ответ #9
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86534
  • Репутация: +25419/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В теме default-bootstrap окно корзины адаптировано под мобильные устройства. Если у вас установлена эта тема, то ничего менять не нужно. Если у вас другая тема, тогда нужно проверить наличие стилей для мобильный устройств. Ищите
@media (max-width:XXXpx) { в файле стилей модуля корзины, который находится в папке темы.
06 Июль 2017, 17:45:21
Ответ #10
  • Новичок
  • *
  • Сообщений: 49
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Место в коде нашел)) как с помощью css расположить кнопки слева на форме одна за другой?
06 Июль 2017, 17:49:09
Ответ #11
  • Ветеран
  • *****
  • Сообщений: 20988
  • Репутация: +25282/-0
  • Prestashop - просто и эффективно
    • Просмотр профиля
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!
06 Июль 2017, 19:57:48
Ответ #12
  • Новичок
  • *
  • Сообщений: 49
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
проблема была в том что у формы родительской было установлено
width: 1170px;
я поменял на
width: 100%;
и теперь красиво. Спасибо за наводку