From 2f9e75eb6def20d7acc6776a6408dd21c4345948 Mon Sep 17 00:00:00 2001 From: Damian Zabawa Date: Wed, 21 Mar 2018 11:18:23 +0100 Subject: [PATCH] DEMO-111: [Product] - Full view (#74) * DEMO-111: [Product] - Full view https://jira.ez.no/browse/DEMO-111 --- .../tastefulplanet/full/product.html.twig | 135 ++++++++++++ .../parts/product_modal_dialog.html.twig | 18 ++ app/config/ezplatform.yml | 1 + app/config/image_variations.yml | 4 + app/config/services.yml | 5 + app/config/views.yml | 5 + .../Twig/ContentInfoByLocationIdExtension.php | 62 ++++++ web/assets/css/product.css | 192 ++++++++++++++++++ web/assets/images/product/dairy.svg | 1 + web/assets/images/product/egg.svg | 1 + web/assets/images/product/gluten.svg | 1 + web/assets/images/product/nuts.svg | 1 + web/assets/images/product/seafood.svg | 1 + web/assets/images/product/servings.svg | 1 + web/assets/images/product/spicy.svg | 1 + 15 files changed, 429 insertions(+) create mode 100644 app/Resources/views/themes/tastefulplanet/full/product.html.twig create mode 100644 app/Resources/views/themes/tastefulplanet/parts/product_modal_dialog.html.twig create mode 100644 src/AppBundle/Twig/ContentInfoByLocationIdExtension.php create mode 100644 web/assets/css/product.css create mode 100644 web/assets/images/product/dairy.svg create mode 100644 web/assets/images/product/egg.svg create mode 100644 web/assets/images/product/gluten.svg create mode 100644 web/assets/images/product/nuts.svg create mode 100644 web/assets/images/product/seafood.svg create mode 100644 web/assets/images/product/servings.svg create mode 100644 web/assets/images/product/spicy.svg diff --git a/app/Resources/views/themes/tastefulplanet/full/product.html.twig b/app/Resources/views/themes/tastefulplanet/full/product.html.twig new file mode 100644 index 00000000..4d992ad1 --- /dev/null +++ b/app/Resources/views/themes/tastefulplanet/full/product.html.twig @@ -0,0 +1,135 @@ +{% extends "@ezdesign/pagelayout.html.twig" %} + +{% block page_head %} + {% set title = ez_content_name(content) ~ " - " ~ content.contentInfo.publishedDate|localizeddate('short', 'short', app.request.locale) %} + {{ parent() }} +{% endblock %} + +{% block content %} + {% include '@ezdesign/parts/product_modal_dialog.html.twig' %} + +
+
+
+ {{ ez_content_name(ezpublish.rootLocation().contentInfo) }} > + {{ ez_content_name(app_content_info_by_location_id(location.parentLocationId)) }} > + {{ ez_content_name(content) }} +
+
+
+
+
+ {% if not ez_is_field_empty(content, 'image') %} + {{ ez_render_field(content, 'image', { + 'parameters': { + 'alias': 'product_large', + 'class': 'img-responsive' + } + }) }} + {% endif %} +
+
+
+

{{ ez_content_name(content) }}

+
+
+
$ {{ ez_field_value(content, 'price').value|number_format(2, '.') }}
+
+
+
+ {{ ez_render_field(content, 'serving') }} {{ 'servings'|trans }} +
+
+
+ {% set spicy_level = ez_field_value(content, 'spicy').selection.0 %} +
{{ 'Spicy Level:'|trans }}
+ {% for level in 1..spicy_level %} +
+ {% endfor %} +
+
+
+ {{ ez_render_field(content, 'description') }} +
+
+ +
+
+

{{ 'Dietary restrictions'|trans }}

+ {% if ez_field_value(content, 'dairy').bool %} +
+
{{ 'Dairy'|trans }} +
+ {% endif %} + + {% if ez_field_value(content, 'egg').bool %} +
+
{{ 'Egg'|trans }} +
+ {% endif %} + + {% if ez_field_value(content, 'nuts').bool %} +
+
{{ 'Nuts'|trans }} +
+ {% endif %} + + {% if ez_field_value(content, 'gluten').bool %} +
+
{{ 'Gluten'|trans }} +
+ {% endif %} + + {% if ez_field_value(content, 'seafood').bool %} +
+
{{ 'Seafood'|trans }} +
+ {% endif %} +
+
+
+
+ +
+
+
+ {{ ez_render_field(content, 'ingredients') }} +
+
+
+
+ {{ ez_render_field(content, 'cooking_instructions') }} +
+
+
+
+
+
+ Tags +
+ {{ ez_render_field(content, 'tags') }} +
+
+
+ + +
+
+
+
+{% endblock %} diff --git a/app/Resources/views/themes/tastefulplanet/parts/product_modal_dialog.html.twig b/app/Resources/views/themes/tastefulplanet/parts/product_modal_dialog.html.twig new file mode 100644 index 00000000..986edbef --- /dev/null +++ b/app/Resources/views/themes/tastefulplanet/parts/product_modal_dialog.html.twig @@ -0,0 +1,18 @@ + diff --git a/app/config/ezplatform.yml b/app/config/ezplatform.yml index e7e4289d..a1e1f9e4 100644 --- a/app/config/ezplatform.yml +++ b/app/config/ezplatform.yml @@ -103,6 +103,7 @@ assetic: - 'assets/css/folder.css' - 'assets/css/place.css' - 'assets/css/place_list.css' + - 'assets/css/product.css' - 'assets/css/blog.css' - 'assets/css/blog_post.css' - 'assets/css/subscribe.css' diff --git a/app/config/image_variations.yml b/app/config/image_variations.yml index 5dd933aa..24d62bd6 100644 --- a/app/config/image_variations.yml +++ b/app/config/image_variations.yml @@ -15,3 +15,7 @@ ezpublish: reference: null filters: - {name: geometry/scaleexact, params: [505, 400]} + product_large: + reference: null + filters: + - {name: geometry/scaleexact, params: [633, 500]} diff --git a/app/config/services.yml b/app/config/services.yml index 5595b5d0..19cc0e9a 100644 --- a/app/config/services.yml +++ b/app/config/services.yml @@ -49,3 +49,8 @@ services: - '@templating' - '%app.contact_form.sender_email%' - '%app.contact_form.recipient_email%' + + app.twig.content_info_by_location_id_extension: + class: AppBundle\Twig\ContentInfoByLocationIdExtension + arguments: + - '@ezpublish.api.service.location' diff --git a/app/config/views.yml b/app/config/views.yml index cdba327c..39973d1e 100644 --- a/app/config/views.yml +++ b/app/config/views.yml @@ -80,6 +80,11 @@ ezpublish: match: Identifier\ContentType: [subscribe] + product: + template: "@ezdesign/full/product.html.twig" + match: + Identifier\ContentType: [product] + home: place_list: controller: 'ez_query:ContentQueryAction' diff --git a/src/AppBundle/Twig/ContentInfoByLocationIdExtension.php b/src/AppBundle/Twig/ContentInfoByLocationIdExtension.php new file mode 100644 index 00000000..83e3505b --- /dev/null +++ b/src/AppBundle/Twig/ContentInfoByLocationIdExtension.php @@ -0,0 +1,62 @@ +locationService = $locationService; + } + + /** + * Returns the name of the extension. + * + * @return string the extension name + */ + public function getName() + { + return 'app.content_info'; + } + + /** + * Returns a list of functions to add to the existing list. + * + * @return array + */ + public function getFunctions() + { + return [ + new Twig_SimpleFunction('app_content_info_by_location_id', [$this, 'contentInfoByLocationId']), + ]; + } + + /** + * Return ContentInfo based on Location Id + * + * @param $locationId int + * + * @return ContentInfo + */ + public function contentInfoByLocationId($locationId) + { + return $this->locationService->loadLocation($locationId)->getContentInfo(); + } +} diff --git a/web/assets/css/product.css b/web/assets/css/product.css new file mode 100644 index 00000000..055c6fe6 --- /dev/null +++ b/web/assets/css/product.css @@ -0,0 +1,192 @@ +.content-type-product { + background: #fff; +} + +.content-type-product .breadcrumb { + color: #8d8d8d; + line-height: 12px; + font-size: 14px; +} + +.content-type-product .breadcrumb a { + color: #8d8d8d; +} + +.content-type-product .breadcrumb a:nth-child(1) { + padding-right: 10px; +} + +.content-type-product .breadcrumb a:not(:nth-child(1)) { + padding: 0 10px; +} + +.content-type-product .breadcrumb a.product { + font-weight: bold; +} + +.product-main { + padding-top: 44px; + padding-bottom: 44px; +} + +.product-main .btn { + margin-bottom: 20px; + border-radius: 0; + text-transform: uppercase; + font-size: 15px; +} + +.product-main-title h2 { + color: #63605d; + font-size: 32px; + font-weight: bold; +} + +.product-main-add { + padding: 0; + margin-bottom: 10px; +} + +.product-dietary-list h3 { + font-size: 17px; +} + +.product-main-dietary { + padding: 7px 13px; + display: inline-block; + text-align: center; + margin-bottom: 4px; +} + +.product-main-dietary-icon { + width: 18px; + height: 18px; + display: inline-block; + margin-bottom: -3px; +} + +.product-main-dietary-dairy-icon { + background: url('/assets/images/product/dairy.svg') no-repeat; + width: 18px; + height: 24px; +} + +.product-main-dietary-egg-icon { + background: url('/assets/images/product/egg.svg') no-repeat; + width: 15px; + height: 21px; +} + +.product-main-dietary-nuts-icon { + background: url('/assets/images/product/nuts.svg') no-repeat; + width: 25px; + height: 22px; +} + +.product-main-dietary-gluten-icon { + background: url('/assets/images/product/gluten.svg') no-repeat; + width: 14px; + height: 22px; +} + +.product-main-dietary-seafood-icon { + background: url('/assets/images/product/seafood.svg') no-repeat; +} + +.product-main-serving-icon { + background: url('/assets/images/product/servings.svg') no-repeat; + width: 14px; + height: 22px; + display: inline-block; + padding: 11px; +} + +.product-main-spicy-pepper { + background: url('/assets/images/product/spicy.svg') no-repeat; + width: 10px; + height: 23px; + display: inline-block; + padding: 9px; +} + +.product-main-spicy .spicy-label { + display: inline-block; + padding: 0 7px 0 0; + font-size: 15px; + color: #63605d; +} + +.product-main-price { + font-size: 35px; + font-weight: bold; + line-height: 48px; + color: #0073ae; + padding-left: 13px; +} + +.product-main-serving { + font-size: 16px; + display: flex; +} + +.product-main-serving .serving-label { + display: inline-block; +} + +.product-main-spicy { + display: flex; + color: #63605d; + font-size: 15px; + font-weight: 600; +} + +.product-main-info .nav-tabs .nav-item { + margin-bottom: 0; +} + +.product-main-info .nav-tabs .nav-link { + border: 0; + color: #000; +} + +.product-main-info .nav-tabs .active { + font-weight: bold; + border-bottom-color: #ef5a2f; + border-bottom-width: 2px; + border-bottom-style: solid; +} + +.product-main-info .product-main-ingredients, +.product-main-info .product-main-instruction { + padding: 35px 10px 10px 10px; +} + +.content-type-product .content-tags, +.content-type-product .content-share { + padding: 20px; +} + +.product-main-details { + display: flex; + align-items: center; + padding-top: 35px; +} + +.product-main-description { + padding: 35px 0; +} + +.product-main-info { + padding: 15px 0; +} + +.share-buttons-list a, +.content-tags a { + color: #63605d; + text-decoration: underline; +} + +.share-buttons-list a:not(:nth-child(1)), +.content-tags a:not(:nth-child(1)) { + padding-left: 10px; +} diff --git a/web/assets/images/product/dairy.svg b/web/assets/images/product/dairy.svg new file mode 100644 index 00000000..f1d83bd1 --- /dev/null +++ b/web/assets/images/product/dairy.svg @@ -0,0 +1 @@ + diff --git a/web/assets/images/product/egg.svg b/web/assets/images/product/egg.svg new file mode 100644 index 00000000..36f4d99b --- /dev/null +++ b/web/assets/images/product/egg.svg @@ -0,0 +1 @@ + diff --git a/web/assets/images/product/gluten.svg b/web/assets/images/product/gluten.svg new file mode 100644 index 00000000..6897a353 --- /dev/null +++ b/web/assets/images/product/gluten.svg @@ -0,0 +1 @@ + diff --git a/web/assets/images/product/nuts.svg b/web/assets/images/product/nuts.svg new file mode 100644 index 00000000..c3e2f439 --- /dev/null +++ b/web/assets/images/product/nuts.svg @@ -0,0 +1 @@ + diff --git a/web/assets/images/product/seafood.svg b/web/assets/images/product/seafood.svg new file mode 100644 index 00000000..2fd4b22a --- /dev/null +++ b/web/assets/images/product/seafood.svg @@ -0,0 +1 @@ + diff --git a/web/assets/images/product/servings.svg b/web/assets/images/product/servings.svg new file mode 100644 index 00000000..f407eee4 --- /dev/null +++ b/web/assets/images/product/servings.svg @@ -0,0 +1 @@ + diff --git a/web/assets/images/product/spicy.svg b/web/assets/images/product/spicy.svg new file mode 100644 index 00000000..952fce8c --- /dev/null +++ b/web/assets/images/product/spicy.svg @@ -0,0 +1 @@ +