{% extends "layout/layout.html.twig" %}
{% block title %}
{{ product.name }}
{% endblock %}
{% block content %}
{% if product.brands.id == 263 %}
{% set class = "media-bg-brown" %}
{% elseif product.brands.id == 262 %}
{% set class = "media-bg-blue" %}
{% elseif product.brands.id == 413 %}
{% set class = "media-bg-purple" %}
{% else %}
{% set class = "media-bg-green" %}
{% endif %}
<!--Start Product Detail Main-->
<section class="info-media media-bg-right product-detail-main product-detail-revised {{class}}">
<div class="container container-sm">
<div class=" product-detail-holder">
<div
class="info-section">
<!--Start Breadcrumbs-->
{% if product.brands.id == 263 %}
{% set class = "breadcrumb-dbrown" %}
{% elseif product.brands.id == 262 %}
{% set class = "breadcrumb-blue" %}
{% elseif product.brands.id == 413 %}
{% set class = "breadcrumb-purple" %}
{% else %}
{% set class = "breadcrumb-dgreen" %}
{% endif %}
<div class="breadcrumb-holder {{class}} breadcrumb-fixed">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/{{app.request.locale}}">{{'Home'|trans}}</a>
</li>
<li class="breadcrumb-item">
<a href="/{{app.request.locale}}/products/">{{'Products'|trans}}</a>
</li>
{# {% if product.brands is defined %}
<li class="breadcrumb-item">{{product.brands.name}}</li>
{% endif %} #}
{% if product.categories is defined %}
<li class="breadcrumb-item">
<a href="/{{app.request.locale}}/products/{{product.categories[0].url}}">{{product.categories[0].name}}</a>
</li>
{% endif %}
<li class="breadcrumb-item active" aria-current="page">{{product.name}}</li>
</ol>
</div>
<!--End Breadcrumbs-->
<h1 class="product-name">{{ product.name }}</h1>
<h6 class="product-code">{{'Product Code'|trans}}:
{{ product.code }}</h6>
{% set user = app.session.get('loginUserName') %}
{% if user is not null %}
<ul class="list-unstyled recipe-info social-info recipe-info social-info-small">
{% if Liked|length > 0 %}
<li class="liked">{{'Like'|trans}}</li>
{% else %}
<li class="like" onclick="loyaltyProgram(this, {{ product.id }},'{{ product.name }}',10,'Product','Like')">{{'Like'|trans}}</li>
{% endif %}
<li class="share" onclick="loyaltyProgram(this, {{ product.id }},'{{ product.name }}',10,'Product','Share')">
<span onclick="sharemodal('Product','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/product/' ~ product.url}}' , '{{ " share product info with your friends"|trans }}')">{{'Share'|trans}}</span>
</li>
<li class="download d-none" onclick="loyaltyProgram(this, {{ product.id }},'{{ product.name }}',10,'Product','Download')">{{'Download'|trans}}</li>
</ul>
{% else %}
<ul class="list-unstyled social-info recipe-info">
<li class="like logged-out">{{'Like'|trans}}</li>
<li class="share" onclick="sharemodal('Product','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/product/' ~ product.url}}' , '{{ " share product info with your friends"|trans }}')">{{'Share'|trans}}</li>
<li class="download d-none">{{'Download'|trans}}</li>
</ul>
{% endif %}
<p>{{ product.description }}</p>
<div class="inline-info enjoy-with">
<h5 class="title">{{'Enjoy with'|trans}}:</h5>
<span class="text">{{'Cooking'|trans}}</span>
<a href="/{{app.request.locale}}/recipes" class="link d-none">{{'View Recipes'|trans}}</a>
</div>
{% if product.size is defined %}
<div class="inline-info available-in">
<h5 class="title">{{'Available in'|trans}}:</h5>
<ul class="list-unstyled portion-list">
{% for variant in variants|sort %}
<li class="{{ (variant.id == product.id) ? 'selected' : '' }}">
<a href="/{{app.request.locale}}/product/{{ variant.url }}">{{ variant.size }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="inline-info price-info">
{% if product.region[0]['price'].data is defined %}
<div class="price d-none">{{ product.region[0]['price'].data }}
{{product.region[0]['currency_symbol'].data|trans}}</div>
{% set points = (((product.region[0]['price'].data)/100)*10)|round %}
<div class="award d-none">
<i class="far fa-star"></i>
{{points}}
{{'Rewards Points'|trans}}</div>
{% endif %}
</div>
<div class="btn-holder">
<a href="javascript:void(0)" class="btn btn-custom btn-green" onclick="addCart(this, {{product.id}}, 1)">{{'Add to Cart'|trans}}</a>
{% if app.session.get('loginUserName') is not null %}
<a href="javascript:void(0)" class="btn btn-custom btn-lg-o-black d-none" onclick="inventoryProgram(this,{{points}},{{product.id}})">{{'Add to Inventory'|trans}}</a>
{% else %}
<a href="javascript:void(0)" class="btn btn-custom btn-green logged-out d-none">{{'Add to Inventory'|trans}}</a>
{% endif %}
</div>
<div class="btn-lg-holder invisible">
<a href="javascript:void(0)" class="btn btn-custom btn-lg-white">
<i><img src="/static/assets/images/inventory-manager.svg" alt="inventory manager"></i>TRY Inventory Manager
</a>
</div>
</div>
<div class="media-section">
<div class="custom-slider singal-slider product-detail-slider">
{% if product.attrimage.items is defined %}
{% for image_item in 0..product.attrimage.items|length - 1 %}
<div class="slide">
{% if product.attrimage.items[image_item] is defined %}
<img src="{{ product.attrimage.items[image_item] }}" alt="{{product.name}}">
{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
{% if product.brands.image is defined %}
<div class="brand-logo">
<img src="{{ product.brands.image }}" alt="Product-Brand-Logo">
</div>
{% endif %}
</div>
</div>
<!--Start Frequently Bought Together-->
{% if product.bought_with[0] is defined %}
{% if product.bought_with[0].brands.id == 263 %}
{% set class = "bg-dbrown" %}
{% elseif product.bought_with[0].brands.id == 262 %}
{% set class = "bg-blue" %}
{% elseif product.bought_with[0].brands.id == 413 %}
{% set class = "bg-purple" %}
{% else %}
{% set class = "bg-dgreen" %}
{% endif %}
<div class="frequently-bought frequently-bought-inner">
<div class="frequently-bought-box">
<h5 class="title">{{'Frequently Bought Together'|trans}}</h5>
{% for bought_with in product.bought_with %}
<div class="product-box product-box-horizon product-box-small">
<figure class="slide-img slide-img-{{class}}">
<img src="{{bought_with.attrimage.items[0]}}" alt="{{bought_with.name}}">
</figure>
<div class="slide-info">
<h5 class="title">{{ bought_with.name }}</h5>
<div class="kg">{{ bought_with.size }}</div>
{% if bought_with.region[0]['price'].data is defined and product.region[0]['currency_symbol'].data is defined %}
<div class="price d-none">{{ bought_with.region[0]['price'].data }}
{{product.region[0]['currency_symbol'].data|trans}}</div>
<div class="inline-info btn-holder">
{% set points = (((bought_with.region[0]['price'].data)/100)*10)|round %}
<div class="award " style="opacity:0">
<i class="far fa-star"></i>
{{points}}
{{'Rewards Points'|trans}}
</div>
{% set totlaprice = bought_with.region[0]['price'].data + product.region[0]['price'].data %}
<a href="javascript:void(0)" onclick="addCart(this, {{bought_with.id}}, 1)" class="btn btn-custom btn-primary ">
<span onclick="addCart(this, {{product.id}}, 1)">{{'Add Both to Cart'|trans}}
</span>
</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<!--End Frequently Bought Together-->
</div>
</section>
<!--End Product Detail Main-->
<!--Start Recipes Using Our Products Section-->
<!-- Class Added with-ellipses height-updatedbox-->
{% if product.recipes[0] is defined %}
<section class="featured-recipes-section inner-featured-recipe using-products with-ellipses height-updatedbox product-detail-similer"> <div class="container container-sm">
<h2 class="heading">{{'Recipes Using Our Products'|trans}}</h2>
<div class="featured-recipes">
<div class="custom-slider featured-recipes-slider">
{% for recipe in product.recipes %}
<div class="slide">
<div class="slide-holder">
<a href="/{{app.request.locale}}/all-recipes/{{ recipe.url }}" tabindex="0">
<figure class="slide-img">
<img src="{{ recipe.featured_image}}" alt="{{ recipe.name}}">
{% if recipe.banner_video %}
<i class="fas fa-play-circle"></i>
{% endif %}
</figure>
</a>
<div class="slide-content">
<a href="/{{app.request.locale}}/all-recipes/{{ recipe.url }}" tabindex="0">
<h3>{{ recipe.name }}</h3>
</a>
<p>{{ recipe.short_description }}</p>
<ul
class="list-unstyled recipe-info">
{# <li class="mins">{{ recipe.time}} {{"mins"|trans }}</li> #}
<li class="orders">{{'No. Of'|trans}}
{{'Serving'|trans}}
{{ recipe.serves}}</li>
<li class="time">{{ recipe.typeofmeal|trans }}</li>
</ul>
</div>
<div class="btn-holder">
<a href="/{{app.request.locale}}/all-recipes/{{recipe.url}}" class="btn btn-custom btn-green" tabindex="0">{{'View Recipe'|trans}}</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
{% endif %}
<!--End Recipes Using Our Products Section-->
<!--Start Product Info Section-->
{% if product.ingredients is not empty
or product.nutrition is not empty
or product.product_info is not empty
or product.usage_info is not empty
%}
<section class="product-infobox">
<div class="container container-sm">
<div class="row">
<div class="col-12 col-md-6 infomation-tabs infomation-tabs-left">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ingredients-tab" data-toggle="tab" href="#ingredients" role="tab" aria-controls="ingredients" aria-selected="true">{{'Ingredients'|trans}}</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nutritional-tab" data-toggle="tab" href="#nutritional" role="tab" aria-controls="nutritional" aria-selected="false">{{'Nutritional Info'|trans}}</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
<ul class="list-unstyled nutri-list">
<li>
{{product.ingredients}}
</li>
</ul>
</div>
<div class="tab-pane fade" id="nutritional" role="tabpanel" aria-labelledby="nutritional-tab">
<ul class="list-unstyled nutri-list nutri-list-singal">
{% for nutrition in product.nutrition %}
{% if nutrition.localizedfields.data.getLocalizedValue('nutritions') is defined %}
<li>
<span>{{ nutrition.localizedfields.data.getLocalizedValue('nutritions')}}
</span>
<span>{{ nutrition.localizedfields.data.getLocalizedValue('qty') }}</span>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 infomation-tabs infomation-tabs-right">
<ul class="nav nav-tabs" id="myTab2" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="productinfo-tab" data-toggle="tab" href="#productinfo" role="tab" aria-controls="productinfo" aria-selected="true">{{'Product Information'|trans}}</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="usageinformation-tab" data-toggle="tab" href="#usageinformation" role="tab" aria-controls="usageinformation" aria-selected="false">{{'Usage Information'|trans}}</a>
</li>
</ul>
<div class="tab-content" id="myTabContent2">
<div class="tab-pane fade show active" id="productinfo" role="tabpanel" aria-labelledby="productinfo-tab">
<ul class="list-unstyled nutri-list nutri-list-singal">
{% for pusageinfo in product.product_info %}
<li>
<span>{{ pusageinfo.localizedfields.data.getLocalizedValue('product_info_name')}}</span>
<span>{{ pusageinfo.localizedfields.data.getLocalizedValue('product_info_value')}}</span>
</li>
{% endfor %}
{# <li><span>Brand</span><span>{{product.brands.name}}</span></li>
<li>
<span>Region</span>
<span>
{% if product.region[0]['country'] is defined %}
{{ product.region[0]['country'].data }}
{% endif %}
</span>
</li> #}
</ul>
</div>
<div class="tab-pane fade" id="usageinformation" role="tabpanel" aria-labelledby="usageinformation-tab">
<ul class="list-unstyled nutri-list nutri-list-singal">
{% for pusage in product.usage_info %}
<li>
<span>{{ pusage.localizedfields.data.getLocalizedValue('usage_property')}}
</span>
<span>{{ pusage.localizedfields.data.getLocalizedValue('usage_value') }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
{% endif %}
<!--End Product Info Section-->
<!--Start Resources Section-->
<section class="info-media info-resources product-training info-resources-product-detail">
<div class="container container-sm">
<div class="info-section">
<h5>{{'Training for you'|trans}}</h5>
<h4>{{training.videoName}}</h4>
{# <h3>and kitchen safety</h3> #}
<p>{{training.details}}</p>
<div class="btn-holder">
<div class="btn-border">
<a href="/{{app.request.locale}}/professional-training" class="btn btn-custom btn-xl btn-lg-o-wblack">{{'Start Training Today!'|trans}}</a>
</div>
</div>
</div>
<div class="media-section">
<img src="{{training.Videos[0].title_img.data}}" alt="{{training.videoName}}">
</div>
</div>
</section>
<!--End Resources Section-->
<!--Start Featured Section-->
{% if similar_products|length > 0 %}
<section class="featured-section product-similar-products featured-section-product-detail">
<div class="container container-sm">
<h2 class="heading">{{'Similar Products'|trans}}</h2>
<div class="slide-grid">
{% for Similar_products in similar_products %}
{% if Similar_products.brands.id == 263 %}
{% set class = "slide-img-bg-brown" %}
{% elseif Similar_products.brands.id == 262 %}
{% set class = "slide-img-bg-blue" %}
{% elseif Similar_products.brands.id == 413 %}
{% set class = "lide-img-bg-purple" %}
{% else %}
{% set class = "slide-img-bg-green" %}
{% endif %}
<div class="slide">
<div
class="slide-holder product-box">
{# <div class="like">
{% if related_product.brands.image is defined %}
<img src="{{ related_product.brands.image }}" alt="">
{% endif %}</div> #}
{% set user = app.session.get('loginUserName') %}
{% if user is not null %}
{% if Similar_products.id in Liked_simialr_products_ids %}
<div class="like">
<a href="javascript:void(0)"><img src="/static/assets/images/Liked-01.svg" alt="Liked"></a>
</div>
{% else %}
<div class="like">
<a href="javascript:void(0)" onclick="loyaltyProgram(this ,{{ Similar_products.id }},'{{ Similar_products.name }}',10,'Product','Like')"><img src="/static/assets/images/Group_1271.svg" alt="Like"></a>
</div>
{% endif %}
{% else %}
<div class="like logged-out">
<a
href="javascript:void(0)">
{# <img src="/static/assets/images/like.svg" alt=""> #}
<img src="/static/assets/images/Group_1271.svg" alt="Like">
</a>
</div>
{% endif %}
<figure class="slide-img {{class}}">
<a href="/{{app.request.locale}}/product/{{ Similar_products.url }}">
{% if Similar_products.attrimage.items[0] is defined %}
<img src="{{ Similar_products.attrimage.items[0] }}" alt="{{ Similar_products.name }}">
{% endif %}
</a>
</figure>
<div class="slide-info">
<a href="/{{app.request.locale}}/product/{{ Similar_products.url }}">
<h5 class="title">{{ Similar_products.name }}</h5>
</a>
<div class="kg">{{ Similar_products.size }}</div>
{% if Similar_products.region[0]['price'].data is defined %}
<div class="price d-none">{{ Similar_products.region[0]['price'].data }}
{{ Similar_products.region[0]['currency_symbol'].data|trans}}</div>
{% set points = (((Similar_products.region[0]['price'].data)/100)*10)|round %}
<div class="award d-none">
<i class="far fa-star"></i>
{{points}}
{{'Rewards Points'|trans}}</div>
{% endif %}
<div class="btn-holder">
<a href="javascript:void(0)" onclick="addCart(this, {{Similar_products.id}}, 1)" class="btn btn-custom btn-green">{{'Add to Cart'|trans}}</a>
{# <a href="javascript:void(0)" class="btn btn-custom btn-p-outline">Add to Inventory</a> #}
{% if app.session.get('loginUserName') is not null %}
<a href="javascript:void(0)" class="btn btn-custom btn-p-outline-blue" onclick="inventoryProgram(this,{{points}},{{Similar_products.id}})">{{'Add to Inventory'|trans}}</a>
{% else %}
<a href="javascript:void(0)" class="btn btn-custom btn-p-outline-blue product-detail-logged-out">{{'Add to Inventory'|trans}}</a>
{% endif %}
</div>
<div class="product-detail-inventry-alert mt-2"></div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
<!--End Featured Section-->
<!--Start GFS Loyalty Program-->
<section class="info-media loyalty-program loyalty-program-product loyalty-program-inner loyalty-program-product-detail">
<div class="container container-sm">
<div class="info-section">
<h5>{{'Loyalty Program'|trans}}</h5>
<h4>{{ loyaltybanner.sliders[0].localizedfields.data.getLocalizedValue('heading')}}</h4>
<h3>{{ loyaltybanner.sliders[0].localizedfields.data.getLocalizedValue('heading1')}}</h3>
<p>{{ loyaltybanner.sliders[0].localizedfields.data.getLocalizedValue('description')}}</p>
<div class="btn-holder">
<div class="btn-border">
<a href="/{{app.request.locale}}/loyalty-program" class="btn btn-custom btn-green">{{'Discover More'|trans}}</a>
</div>
<div class="newsletter-subscribe">
<h4 class="cstmLP">"{{'Coming Soon'|trans}}"</h4>
</div>
{% if app.session.get('loginUserName') is null %}
<div class="btn-border btn-border-black d-none">
<a href="/{{app.request.locale}}/signup" class="btn btn-custom btn-lg-o-black">Sign-up Now!</a>
</div>
{% endif %}
</div>
</div>
<div class="media-section">
<img src="{{ loyaltybanner.sliders[0].slider_image.data}}" alt="loyalty banner slide image">
</div>
</div>
</section>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{product.name}}",
"image": "{{app.request.getSchemeAndHttpHost() ~ product.attrimage.Items[0].image.path ~ product.attrimage.Items[0].image.filename}}",
"description": "{{product.description}}",
"brand": {
"@type": "Brand",
"name": "{{product.brands.name}}"
},
"sku": "{{product.code}}",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"bestRating": "5",
"worstRating": "1",
"ratingCount": "2"
}
}
</script>
<!--End GFS Loyalty Program-->
<!--Start Footer-->
{% if (app.request.locale =='ar') %}
{% set topMenu ="/en/product/" ~ product.url('en') %}
{% else %}
{% set topMenu ="/ar/product/" ~ product.url('ar') %}
{% endif %}
<script>
var _TopMenuLink = "{{ topMenu }}";
</script>
{% endblock %}
{% block footer %}
{% include "includes/footer.html.twig" %}
{% endblock %}