Михаил Кузнецов

Вопрос решил так: оказывается есть еще такие варианты отображения, как
'contain' - это дефолтный по размеру контейнера;
'cover' - растягивается на весь экран;
'scaledown' - по размеру изображения и при сжатии экрана сжимается;
'none' - по размеру изображения, но при сжатии экрана не сжимается.
Добавил атрибут и значение data-fit="scaledown" и всё зарабтало как надо.

1. Растеризовать SVG в обычную картинку. Вынести все данные в отдельный объект с картой. Слушать mouseover обычным VanillaJS.

2. Оптимизировать SVG.
Из этого

<circle class="tc-map-seat tc-map-seat_cat0" cx="201038" cy="16629" r="695" tc-seat-no="3"></circle>

Вот в это

<circle class="c0" cx="201038" cy="16629" r="695" n="3"></circle>

Забыть нахрен про jQuery, зумить через CSS, двигать через VanillaJS requestAnimationFrame.
С сервера загружать с gzip.

3. Посмотрите, как это сделано на ticketmaster.com. Там карта разбита на зоны. Можно сделать точно также, но по клику по зоне показывать карту зоны. Т.е. сделать 2 уровня зума. Просто и функционально, плюс можно подсвечивать занятые места.

PHP version 7.0 и выше
PDO PHP Extension
cURL PHP Extension
OpenSSL PHP Extension
Mbstring PHP Library
ZipArchive PHP Library
GD PHP Library

https://octobercms.com/docs/setup/installation#sys...

Нашла такое решение

// Loading document.
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
  // Document loaded, retrieving the page.
  return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
    // Creating the page view with default parameters.
    var pdfPageView = new PDFJS.PDFPageView({
      container: container,
      id: PAGE_TO_VIEW,
      scale: SCALE,
      defaultViewport: pdfPage.getViewport(SCALE),
      // We can enable text/annotations layers, if needed
      textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
      annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
    });
    // Associates the actual page with the view, and drawing it
    pdfPageView.setPdfPage(pdfPage);
    return pdfPageView.draw();
  });
});

Тут и текст и ссылки добавляются, еще нужно подключить сss чтоб annotation встали на место.
import 'pdfjs-dist/web/pdf_viewer.css';
Можно сделать и через метод который вы нашли :

import { AnnotationLayerBuilder } from 'pdfjs-dist/lib/web/annotation_layer_builder';
import { SimpleLinkService} from 'pdfjs-dist/lib/web/pdf_link_service';
import NullL10n from 'pdfjs-dist/lib/web/ui_utils.js';

var annotateMeta = page.getAnnotations().then(function (data) {

        var annotation = new AnnotationLayerBuilder({
          pageDiv: textcontainer,
          linkService: new SimpleLinkService(),
          pdfPage: page,
          l10n: NullL10n
        })
        annotation .render(viewport);
      });

Но первый вариант мне больше нравится

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}

Вообще это Mockup, для поиска просто гуглить Mockup MacBook; Mockup iPhone и так далее.

Могу описать тезисами.
1. Механика на сайте ДоДо понятна
2. Но их архитектура далека от идеала и элегантности. По сути это вынужденные костыли тк их платформа это самописька.
3. В Woo на мой взгляд есть более элегантное понятие Endpoint
4. Добавляем Endpoint "city" и получаем ссылку типа /product/pizza1/city/moscow/
5. При добавлении в корзину есть хук который позволяет подменить цену и любые другие данные о продукте

Где хранить цены? Вопрос вкуса и архитектуры. Например можно сделать тип поста Города и хранить данные о ценах в разрезе продукта в комментах. Можно отдельную таблицу написать. Можно в метаполях хранить. В общем то если самое простое решение и городов не много то метаполя будут норм.

Ну и далее имея данные пишем функцию получения цены по продукту и городу.

Далее через хук меняем цену.

Все.

Думаю за пару недель средний программист такое сможет написать.

Когда то собрал эти ссылки может помогут
PSD HTML CMS Шаблоны www.enfusionthemes.com www.mafiashare.net
HTML PSD PHOTOSHOP followdesign.com
Zoom эффект\галерея www.starplugins.com
Шаблоны chocotemplates.com css-free-templates.com
Флешь шаблоны www.flashmo.com
Шаблоны бесплатно www.websitetemplatesonline.com
Templatemonster blog.templatemonster.com/free-website-templates
PSD шаблоны all-psd.ru
Полезные разработки efimov.ws followdesign.com
Фото для фона patterns.ava7.com
Различные меню\всп окно\ и т.д. webscript.my1.ru