Перейти к содержимому


Фотография
* * * * * 1 Голосов

Способы создания мобильной версии


Сообщений в теме: 19

#1 mdcsfk

mdcsfk

Отправлено 28 January 2015 - 04:36

Доброго времени суток)

 

Появилась необходимость создания мобильной версии сайта с каталогом jbzoo.

 

Наверняка у кого-то есть опыт в этом деле. Посоветуйте, какой подход выбрать?

 

Я вижу пока 3 варианта:

 

1. Сделать копию сайта с привязкой к прежней базе данных на поддомене m.mysite.com. Там изменить только стили. Этот вариант мне кажется наиболее кустарным.

2. Установить плагин, который автоматически меняет шаблон в зависимости от браузера, с которого входит пользователь. Сделать дубль основного шаблона и настраивать стили в нем.

3. Установить компонент на подобие Mobile Joomla и кастомизировать его.

 

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


  • 1

#2 mdcsfk

mdcsfk

Отправлено 28 January 2015 - 18:20

Установил новый шаблон для мобильных устройств. Но к нему по умолчанию не подключены js.

 

Какие js файлы необходимо подключить для нормального функционирования jbzoo? Все, что в media/zoo?)


  • 0

#3 Sliapy

Sliapy

Отправлено 28 January 2015 - 18:27

JBZoo подключает все нужные скрипты. Это никак не должно зависеть от шаблона Joomla. Если в нем, конечно, не включено удаление/объединение js-файлов.


  • 0
[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]

#4 i001

i001

Отправлено 29 January 2015 - 15:49

1. Если шаблон делаете сами, самый простой вариант использовать бутстрап или юкит, получите адаптивную верстку.

2. Если лень разбираться бутстрапом или юкитом, есть прекрасный класс Mobile Detect, с помощью которого достаточно просто делается верстка под разные устройства без необходимости создания поддоменов

3. Вы написали сами использовать всякие дополнения и компоненты или уже готовые шаблоны, коих тьма.


  • 0

#5 mdcsfk

mdcsfk

Отправлено 30 January 2015 - 06:40

Все это уже решено)

 

Возникло затруднение с корзиной. Она сделана таблицей и потому менять ее чисто с помощью css не получается. Возможно ли создать альтернативный макет корзины вместо /media/zoo/applications/jbuniversal/templates/catalog/renderer/basket/_default.php?

В мобильном виде используестя отдельный шаблон, можно как-то с ним связать это?


  • 0

#6 i001

i001

Отправлено 30 January 2015 - 10:19

Вы видимо не посмотрели класс про который я писал

решается элементарно без создания доп шаблонов

if( $detect->isMobile() && !$detect->isTablet() ){
 шаблон для мобильных и планшетов
}
else {
обычный шаблон
}

Сообщение отредактировал i001: 30 January 2015 - 10:19

  • 3

#7 CB9TOIIIA

CB9TOIIIA

Отправлено 30 January 2015 - 10:54

Вы видимо не посмотрели класс про который я писал
решается элементарно без создания доп шаблонов

if( $detect->isMobile() && !$detect->isTablet() ){
 шаблон для мобильных и планшетов
}
else {
обычный шаблон
}

Люблю готовые сниппеты :)


  • 0

#8 mdcsfk

mdcsfk

Отправлено 30 January 2015 - 15:48

Прошу прощения, за дилетантский вопрос, но не могли бы вы подсказать, как это применить вот в этом коде:

<?php
/**
 * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
 *
 * @package     jbzoo
 * @version     2.x Pro
 * @author      JBZoo App http://jbzoo.com
 * @copyright   Copyright (C) JBZoo.com,  All rights reserved.
 * @license     http://jbzoo.com/license-pro.php JBZoo Licence
 * @coder       Denis Smetannikov <denis@jbzoo.com>
 */

// no direct access
defined('_JEXEC') or die('Restricted access');


$view = $this->getView();
$this->app->jbassets->basket();
$this->app->jbassets->initJBPrice();
?>
<div class="basket-item-list box1">
    <div class="module-title">
        <h2 class="title"><?php echo JText::_('JBZOO_CART_ITEMS'); ?></h1>
    </div>
<table class="jbbasket-table jsJBZooBasket">
    <thead>
    <tr>
        <th>#</th>
        <th><?php echo JText::_('JBZOO_CART_ITEM_SKU'); ?></th>
        <th></th>
        <th><?php echo JText::_('JBZOO_CART_ITEM_NAME'); ?></th>
        <th style="min-width: 120px;"><?php echo JText::_('JBZOO_CART_ITEM_PRICE'); ?></th>
        <th><?php echo JText::_('JBZOO_CART_ITEM_QUANTITY'); ?></th>
        <th style="min-width: 120px;"><?php echo JText::_('JBZOO_CART_ITEM_SUBTOTAL'); ?></th>
        <th></th>
    </tr>
    </thead>

    <tbody>
    <?php
    $i = 0;
    $summa = 0;
    $count = 0;

    $currencyConvert = $view->appParams->get('global.jbzoo_cart_config.currency');
    $imageElementId = $view->appParams->get('global.jbzoo_cart_config.element-image');

    foreach ($view->basketItems as $hash => $basketItem) {

        $item = $basketItem['item'];

        $basketItem['price'] = $this->app->jbmoney->convert($basketItem['currency'], $currencyConvert, $basketItem['price']);

        $count += $basketItem['quantity'];

        $subtotal = $basketItem['quantity'] * $basketItem['price'];
        $summa += $subtotal;

        $image = $this->app->jbitem->renderImageFromItem($item, $imageElementId, true);

        echo '<tr class="row-' . $hash . '" data-itemId="' . $item->id . '" data-hash="' . $hash . '">';
        echo '<td class="cart-item-number">' . ++$i . '</td>';
        echo '<td class="cart-item-sku">' . $basketItem['sku'] . '</td>';
        echo '<td class="cart-item-image">' . $image . '</td>';

        echo '<td class="cart-item-name">';
        echo '<a href="' . $this->app->route->item($item) . '" title="' . $item->name . '">' . $item->name . '</a>';

        if (isset($basketItem['priceParams']) && !empty($basketItem['priceParams'])) {
            foreach ($basketItem['priceParams'] as $key => $value) {
                if (!empty($value)) {
                    echo '<div><strong>' . $key . ':</strong> ' . $value . '</div>';
                }
            }
        }

        if (!empty($basketItem['priceDesc'])) {
            echo '<br/><span class="price-description">' . $basketItem['priceDesc'] . '</span>';
        }

        echo '</td>';

        if ($basketItem['price']) {
            echo '<td class="jsPricevalue cart-item-price" price="' . $basketItem['price'] . '">'
                . $this->app->jbmoney->toFormat($basketItem['price'], $currencyConvert)
                . ' </td>';
        } else {
            echo '<td class="cart-item-price"> - </td>';
        }

        echo '<td class="cart-item-quantity"><input type="text" class="jsQuantity input-quantity" value="' . $basketItem['quantity'] . '" /></td>';

        if ($basketItem['price']) {
            echo '<td class="jsSubtotal">' . $this->app->jbmoney->toFormat($subtotal, $currencyConvert) . '</td>';
        } else {
            echo '<td> - </td>';
        }

        echo '<td class="cart-item-rembtn"><input type="button" class="jbbutton jsDelete" itemid="' . $item->id . '" value="' . JText::_('JBZOO_CART_DELETE') . '" /></td>';
        echo "</tr>\n";
    }
    ?>
    </tbody>

 <tfoot>
    <tr>
        <td colspan="5" class="right"><strong><span id="summ_delivery_label">Доставка:</span></strong></td>
        <td>&nbsp;</td>
        <td><span id="summ_delivery">0 р.</span></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="5" class="right"><strong><span id="summ_delivery_label"><?php echo JText::_('JBZOO_CART_TOTAL'); ?>:</span></strong></td>
        <td class="jsTotalCount"><?php echo $count; ?></td>
        <td class="jsTotalPrice"><span id="summ_full"><?php echo $this->app->jbmoney->toFormat($summa, $currencyConvert); ?></span></td>
        <td>
            <input type="button" class="button-default jsDeleteAll" value="<?php echo JText::_('JBZOO_CART_REMOVE_ALL'); ?>"/>
        </td>
    </tr>
    </tfoot>

</table>
</div>

    <script type="text/javascript">
    jQuery(function ($) {
    $('.jbzoo .jsJBZooBasket').JBZooBasket({
    'clearConfirm': "<?php echo JText::_('JBZOO_CART_CLEAR_CONFIRM');?>",
    'quantityUrl' : "<?php echo $this->app->jbrouter->basketQuantity($view->appId);?>",
    'deleteUrl' : "<?php echo $this->app->jbrouter->basketDelete($view->appId);?>",
    'clearUrl' : "<?php echo $this->app->jbrouter->basketClear($view->appId);?>"
    });
     
    $('#item-submission label > input[type=radio]').click(function() {
    var deliv_summ;
    var deliv_summ_arr;
    var deliv_summ_label_arr = $(this).parent().text().split(':');
    // сумма, если она указана
    var delivSumm = parseInt(deliv_summ_label_arr['1'].replace(/\D/g, ''));
    var delivLabel = deliv_summ_label_arr['0'];
    if (isNaN(delivSumm)) {
    delivSumm = 0;
    }
    $('#summ_delivery_label').text(delivLabel+':');
    $('#summ_delivery').text(delivSumm + ' р.');
    $('#d_id').val(delivSumm);
    $('#d_id_2').val(delivLabel);
    var summ = 0;
    $('#yoo-zoo .jsSubtotal').each(function(i, el){
    var elSumm = $(el).text().split(",")[0];
    elSumm = elSumm.replace(/\D/g, '');
    summ += parseInt(elSumm);
    });
    var su = summ + delivSumm;
    var su2 = su+'';
    su2 = su2.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 ");
    $('#yoo-zoo .jsTotalPrice').text(su2+' p.');
    });
    $('.jsQuantity').keyup(function(){
    setTimeout(function() {
    $('.delivery input[type=radio]:checked').click();
    }, 3000);
    });
    });
    </script>
    <style>
    td.right{ text-align: right;}
    td.right span{
    width: 99%;
    display: inline-block;
    text-align: right;
    }
    </style>

  • 0

#9 i001

i001

Отправлено 31 January 2015 - 08:26

качаем класс от сюда http://mobiledetect.net/

заливаем на сайт файл Mobile_Detect.php

 

в ваш файл, который выше, добавляем куда нибудь после 

defined('_JEXEC') or die('Restricted access');

это

require_once 'Mobile_Detect.php'; //здесь путь до файла проверьте
$detect = new Mobile_Detect;

далее по описанному выше примеру

if( $detect->isMobile() && !$detect->isTablet() ) //это условие для отображение на телефонах и планшетах
{
 сюда вашу верстку корзину для мобильных
}
else //это для десктопов
{
сюда обычную верстку
}

  • 2

#10 SmetDenis

SmetDenis

Отправлено 31 January 2015 - 08:45

Кстати, я этот класс Mobile_Detect вживил даже в JBlank . Мне нра, хотя подход к определению конечно не 100%

...но таких и не бывает (=


  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.





Click to return to top of page in style!