src/Aqarmap/Bundle/ListingBundle/Resources/views/ListingSearch/listingCardVertical.html.twig line 1

  1. {# Constants #}
  2. {% set FIRST_LISTING_FOR_FREE_LISTING_CATEGORY = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingCategories::FIRST_LISTING_FOR_FREE') %}
  3. {% set EBAWAB_LISTING_CATEGORY = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingCategories::EBAWAB') %}
  4. {% set UNLIMITED_LISTING_CATEGORY = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingCategories::UNLIMITED') %}
  5. {% set PAID_LISTING_CATEGORY = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingCategories::PAID') %}
  6. {% set PROJECT_LISTING_CATEGORY = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingCategories::PROJECTS') %}
  7. {% set SCRAPPED_LISTING_CATEGORY = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingCategories::SCRAPPED') %}
  8. {% set SPONSORED_TYPE = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingFeaturedTypes::SPONSORED') %}
  9. {% set FEATURE_TYPE = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingFeaturedTypes::FEATURED') %}
  10. {% set PREMIUM_CONSTANT = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingFeaturedTypes::PREMIUM') %}
  11. {% set SPOTLIGHT_CONSTANT = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingFeaturedTypes::SPOTLIGHT') %}
  12. {% set SOLD_BY_OWNER_TYPE = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingFeaturedTypes::SOLD_BY_OWNER') %}
  13. {% set SOLD_BY_OWNER_SPONSORED_TYPE = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingFeaturedTypes::SOLD_BY_OWNER_SPONSORED') %}
  14. {% set SCRAPPED_LISTING_CATEGORY = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingCategories::SCRAPPED') %}
  15. {% set SHOW_PHONE_CONSTANT = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\LeadTypes::SHOW_PHONE') %}
  16. {% set SEND_WHATSAPP_CONSTANT = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\LeadTypes::WHATSAPP') %}
  17. {% set CALL_REQUEST_CONSTANT = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\LeadTypes::CALL_REQUEST') %}
  18. {% set TOP_VIEWED_CONST = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingLabel::TOP_VIEWED') %}
  19. {% set TOP_FAVOURITAED_CONST = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingLabel::TOP_FAVORITE') %}
  20. {% set VALID_PRICE_CONST = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\ListingLabel::VALID_PRICE') %}
  22. {# Toggles #}
  23. {% set isEnabledSearchResultsActivity = (isEnabledFeature('web.activity.app') and isEnabledFeature('web.search.results.activities')) %}
  24. {% set isTopCustomerListingsPage = app.request.attributes.get('_route') == 'aqarmap_user_listings' %}
  25. {% set hideCtaButtons = hideCta is defined and hideCta %}
  26. {% set isCtaButtonsEnabled = isEnabledFeature('listing_card.lead.button') and not hideCtaButtons %}
  27. {% set showCtaButtons = isCtaButtonsEnabled %}
  28. {% set isEnabledElasticScoringDebug = elasticScoringDebug is defined and elasticScoringDebug and app.request.get('esdebug') %}
  30. {# inFeed #}
  31. {% set inFeedAdAppearance = 6 %}
  32. {% set isInFeedAdAappeared = false %}
  33. {% set scrappedUserName = "Aqarmap" %}
  35. {# user logo macro #}
  36. {% macro userLogo(imgLink, disableLazyLoadImgIndex, listingUserPhotoSize, listingId, classList = "") %}
  37. <div class="search-listing-card__logo {{ classList }}">
  38. <img
  39. {% if disableLazyLoadImgIndex %}
  40. src="{{ imgLink }}"
  41. {% else %}
  42. class="lazyload"
  43. src=""
  44. data-src="{{ imgLink }}"
  45. {% endif %}
  46. width="{{ listingUserPhotoSize }}"
  47. height="{{ listingUserPhotoSize }}"
  48. alt="user-logo-{{ listingId }}"
  49. fetchpriority="low"
  50. >
  51. </div>
  52. {% endmacro %}
  54. {% for listing in listings %}
  55. {% if agent is defined %}
  56. {% set listing = listing['listing'] %}
  57. {% endif %}
  59. {# Listing Toggles #}
  60. {% set isCompoundSearchResultsCard = isCompoundSearchResults is defined ? isCompoundSearchResults : false %}
  61. {% set isVerified = ((listing.featured == SPONSORED_TYPE) or (listing.featured == SPOTLIGHT_CONSTANT)) and isEnabledFeature('web.show.verified.sign') %}
  62. {% set isEligibleForMortgage = isEnabledFeature('web.mortgage.options') and listing.isMortgageApproved %}
  63. {% set isSponsoredCard = loop.index == 1 and not topSellersResults and not isRelatedResults and (listing.featured == SPONSORED_TYPE or listing.featured == SOLD_BY_OWNER_SPONSORED_TYPE) %}
  64. {% set isListingPhotosDefined = listingPhotos[listing.id] is defined and listingPhotos[listing.id].main is defined %}
  65. {% set isListingLogoDefined = listingPhotos[listing.id] is defined and listingPhotos[listing.id].logo is defined %}
  66. {% set disableLazyLoadImgIndex = loop.index in [1, 2] %}
  67. {% set searchedByOneLocation = isSearchedByOneLocation is defined and isSearchedByOneLocation %}
  69. {% if not isCompoundSearchResultsCard %}
  70. {% set isPricesWidgetListingTypes = not defaultResults and not topSellersResults and searchedByOneLocation %}
  71. {% set mobileFeedadsScreenLocation = loop.index == inFeedAdAppearance %}
  72. {% set isMobileFeedadsToggledOn = isEnabledFeature('web.search.mobile.feedads') and isMobile and isUXVersion %}
  73. {% set isFeedAdsWithinListingTypes = not defaultResults and not isInFeedAdAappeared %}
  74. {% set showMobileFeedads = isMobileFeedadsToggledOn and isFeedAdsWithinListingTypes and mobileFeedadsScreenLocation %}
  75. {% endif %}
  77. {# Listing Vars #}
  78. {% set listingCategory = listing.category %}
  79. {% set urlSource = app.request.query.get("source") ? app.request.query.get("source") : ''%}
  80. {% set containerSource = source is defined ? source : null %}
  81. {% set leadSources = containerSource ? [containerSource] : [urlSource] %}
  82. {% set financeFeatureValue = get_setting('features', 'finance_service') %}
  83. {% set isRelatedToMainListing = isRelatedToListing is defined ? isRelatedToListing : false %}
  84. {% set mainListingObj = (isRelatedToMainListing and mainListing is defined) ? mainListing : {} %}
  85. {% if isEnabledFeature('listing_card.lead.button') %}
  86. {% set listingPhones = isEnabledFeature('listing_user_phones') ? listing.phones : listing.listingPhones %}
  87. {% else %}
  88. {% set listingPhones = [] %}
  89. {% endif %}
  90. {% set listingPhone = null %}
  91. {% if listingPhones is not empty %}
  92. {% set listingPhone = listingPhones|first %}
  93. {% endif %}
  94. {% if listing.slug %}
  95. {% set LISTING_URL = isRelatedResults ? path("listing_slug", {id: listing.id, slug: listing.slug}|merge({'relatedseaarchlisting': true})) : path("listing_slug", {id: listing.id, slug: listing.slug}) %}
  96. {% else %}
  97. {% set LISTING_URL = isRelatedResults ? path('listing_view', {'id': listing.id}|merge({'relatedseaarchlisting': true})) : path('listing_view', {'id': listing.id}) %}
  98. {% endif %}
  99. {% if isRelatedToMainListing %}
  100. {% set LISTING_URL = LISTING_URL ~ '?source=listing-related' %}
  101. {% endif %}
  102. {% set relatedListingAnalytics = isRelatedResults ? 'gtm-btn-related-result-listing-click' : '' %}
  103. {% set relatedListingClass = isRelatedResults ? 'related-listing__card' : '' %}
  104. {% set searchListingCardClass = isTopPicksResults is defined and isTopPicksResults ? 'search-listing-card top-picks-card' : 'search-listing-card search-listing-card_mb-xl' %}
  105. {% set listingEvents = [{'isFired':isVerified , 'trigger': 'gtm-btn-verified-listing-click' }] %}
  106. {% set listingPhotoSize = 110 %}
  107. {% set iconSize = 24 %}
  108. {% set listingUserPhotoSize = 32 %}
  109. {% set neighborhoodAppearance = 9 %}
  110. {% set isExcludeWhatsappFromListing = isEnabledFeature('web.whatsapp.chat.exclude') and listing.getIsExcludedFromWhatsApp %}
  111. {% set acceptedWhatsAppFeature = not isExcludeWhatsappFromListing or not isEnabledFeature('web.whatsapp.chat.exclude') %}
  112. {% set isEnabledSendByWhatsapp = isEnabledFeature('web.whats.app.chat') and acceptedWhatsAppFeature %}
  113. {% if isEnabledSendByWhatsapp %}
  114. {% if (listing.user.getWhatsAppNumber) %}
  115. {% set whatsAppNumber = listing.user.getWhatsAppNumber.getPhone.getNumber %}
  116. {% endif %}
  117. {% set hasWhatsapp = listing.user.getWhatsAppNumber %}
  118. {% else %}
  119. {% set hasWhatsapp = false %}
  120. {% endif %}
  121. {% set callBtnClass = not hasWhatsapp ? 'big': '' %}
  122. {% set callBtnText = not hasWhatsapp ? 'listing.show_seller_phone'|trans : "" %}
  123. {% set isProject = listingCategory == PROJECT_LISTING_CATEGORY %}
  124. {% set projectListingChild = listing.parent != null %}
  125. {% set notProjectListing = not isProject and not projectListingChild %}
  126. {% set strictQuickRegistration = get_setting('features', 'strict_to_quick_registration') %}
  127. {% set autoShowPhone = not strictQuickRegistration and notProjectListing %}
  128. {% set isSoldByOwnerType = listing.featured == SOLD_BY_OWNER_TYPE or listing.featured == SOLD_BY_OWNER_SPONSORED_TYPE %}
  129. {% set listing_attributes = listing.getAttributesList() %}
  130. {% set listing_rooms = (listing_attributes["rooms"]) is defined ? getRoomsLabel(listing_attributes["rooms"]) : '' %}
  131. {% set listing_baths = (listing_attributes["baths"]) is defined ? getBathsLabel(listing_attributes["baths"]) : '' %}
  132. {% set backgroundClass = 'listing-phone-container_bg-white listing-phone-container_number-gray'%}
  133. {% set cardGridSize = cardGridSize is defined ? cardGridSize : 'col-sm-6 col-12' %}
  134. {% set showPhotosCount = disablePhotosCount is not defined or not disablePhotosCount %}
  135. {% set sellerName = '' %}
  136. {% set listingUser = listing.user %}
  137. {% set sellerName = listingUser.fullName %}
  138. {% set userLogo = listingUser.logo ? listingUser.logo.file : null %}
  139. {% set logo = listing.validUserLogo %}
  140. {% set sellerLogo = logo ? logo : userLogo %}
  141. {% set sellerUrl = path('aqarmap_user_listings', {'id': listingUser.id})%}
  142. {% set joinedData = listingUser.createdAt|date('Y')%}
  143. {% set activeListingsCount = liveListingsPerUser[listing.user.id] is defined ? liveListingsPerUser[listing.user.id] : 0 %}
  144. {% set leadsCount = listingUser.getClientServedCount() %}
  145. {% set encodedSellerPhones = []%}
  146. {% for phone in listingPhones %}
  147. {% set encodedSellerPhones = encodedSellerPhones | merge([{'number': phone.number|phoneNumberEncode}]) %}
  148. {% endfor %}
  150. {% set listingLabelType = listing.label %}
  151. {% set isListingTopPicks = listing.isTopPicks %}
  152. {% set allowListingLabel = isSearchResultsPage and not isListingTopPicks %}
  153. {% set isTopFavourited = listingLabelType == TOP_FAVOURITAED_CONST %}
  154. {% set isValidPrice = listingLabelType == VALID_PRICE_CONST %}
  155. {% set isTopViewed = listingLabelType == TOP_VIEWED_CONST %}
  156. {% set labelLeadSource = '' %}
  157. {% if isTopFavourited %}
  158. {% set labelLeadSource = 'top-favourite' %}
  159. {% set leadSources = leadSources|merge([labelLeadSource]) %}
  160. {% elseif isValidPrice %}
  161. {% set labelLeadSource = 'valid-price' %}
  162. {% set leadSources = leadSources|merge([labelLeadSource]) %}
  163. {% elseif isTopViewed %}
  164. {% set labelLeadSource = 'top-viewed' %}
  165. {% set leadSources = leadSources|merge([labelLeadSource]) %}
  166. {% endif %}
  167. {% set listingPrice = listing.price ?? null %}
  168. {% set listingFeatured = listing.featured %}
  169. {% set isSpotLight = listingFeatured == SPOTLIGHT_CONSTANT %}
  170. {% set isSponserd = listingFeatured == SPONSORED_TYPE %}
  171. {% set isPremium = listingFeatured == PREMIUM_CONSTANT %}
  172. {% set isFeatured = listingFeatured == FEATURE_TYPE %}
  173. {% set isPaid = listingCategory == PAID_LISTING_CATEGORY %}
  174. {% set isScrapped = listingCategory == SCRAPPED_LISTING_CATEGORY %}
  175. {% set isEBawab = listingCategory == EBAWAB_LISTING_CATEGORY %}
  176. {% set isUnlimited = listingCategory == UNLIMITED_LISTING_CATEGORY %}
  177. {% set isFlf2 = listingCategory == FIRST_LISTING_FOR_FREE_LISTING_CATEGORY %}
  179. {# Compounds Listing Vars #}
  180. {% if isCompoundSearchResultsCard %}
  181. {% set compoundAveragePrices = listing.compoundAveragePrices is defined ? listing.compoundAveragePrices : [] %}
  182. {% set isCompoundAveragePrices = compoundAveragePrices is not empty %}
  183. {% set showCompoundAveragePrices = false %}
  184. {% set compoundField = listing.CompoundField ? listing.CompoundField :{} %}
  185. {% set isEnabledDdeveloperCardData = isCompoundSearchResultsCard and isEnabledFeature('web.developer.card.data') %}
  186. {% set isCompoundPlannerPage = isCompoundPlanner is defined and isCompoundPlanner %}
  187. {% set compoundPrice = listing.CompoundField ? listing.CompoundField.minPrice : null %}
  188. {% set listingPrice = compoundPrice ?? listingPrice %}
  189. {% endif %}
  191. {# gtm events variables #}
  192. {% set leadSourcePage = leadSourcePage is defined ? leadSourcePage : "search_results"%}
  193. {% set propertySectionSlug = isProject ? "projects" : section is defined ? section.slug: listing.section.slug %}
  194. {% set propertyCategory = isProject ? "projects" : isScrapped ? "scrapped" :
  195. isPaid ? "paid" : isEBawab ? "bawab" : isUnlimited ? "unlimited" :
  196. isFlf2 ? "flf2" : "free" %}
  197. {% set depthProduct = isFeatured ? "featured" : isPremium ? "premium" :
  198. isSponserd ? "sponsored": isSpotLight ? "spotlight" : "regular" %}
  199. {% set insideCompound = isProject or listing.parent != null %}
  201. <div id="{{listing.id}}" class="{{ cardGridSize }} {{relatedListingClass}} {{searchListingCardClass}}"
  202. ng-init='setSourceRoute("{{ app.request.attributes.get('_route') }}");'
  203. itemscope itemtype="https://schema.org/SingleFamilyResidence">
  204. <div class="search-listing-card__container" ng-content-loaded
  205. callback='setListingDetail("{{listing.id}}",{
  206. "section": "{{listing.section.id}}",
  207. "sellerPhones": {{isCtaButtonsEnabled ? encodedSellerPhones|serialize('json') : []}},
  208. "sellerPhone": "{{ isCtaButtonsEnabled ? (hasWhatsapp ? whatsAppNumber|phoneNumberEncode : (listingPhone ? listingPhone.number|phoneNumberEncode : '')) :''}}",
  209. "financeUrl":"{{listing.getFinancialAidURL()}}",
  210. "userEmail": {{currentUserEmail|json_encode()}},
  211. "financeFeatureValue": "{{financeFeatureValue}}",
  212. "listingName" : {{listing.customSlug|default(listing.id)|serialize()}},
  213. "listingTitle" : {{listing.title|serialize()}},
  214. "listingUser": {
  215. "sellerName" : {{sellerName|serialize()}},
  216. "sellerLogo": "",
  217. "sellerUrl": "{{sellerUrl}}",
  218. "joinedData":"{{joinedData}}",
  219. "activeListingsCount": "{{activeListingsCount}}",
  220. "leadsCount":"{{leadsCount}}"
  221. }
  222. })'>
  223. <div class="search-listing-card__wrapper">
  224. <a class="search-listing-card__container__link {{ relatedListingAnalytics }}"
  225. onclick="elementEvents.fireGTM( 'listingId',{{ listing.id }}, {{ listingEvents|json_encode() }})"
  226. href="{{ LISTING_URL }}"></a>
  227. <div class="search-listing-card__labels">
  228. {% if isUserHasActiveSubscription %}
  229. {% if listing.featured == PREMIUM_CONSTANT %}
  230. <span class="search-listing-card__labels_card search-listing-card__labels_card_sponsored">
  231. {{ 'search_results.premium_small'|trans }}
  232. </span>
  233. {% elseif listing.featured == SPOTLIGHT_CONSTANT %}
  234. <span class="search-listing-card__labels_card search-listing-card__labels_card_sponsored">
  235. {{ 'search_results.spotlight'|trans }}
  236. </span>
  237. {% elseif listing.featured == SPONSORED_TYPE %}
  238. <span class="search-listing-card__labels_card search-listing-card__labels_card_sponsored">
  239. {{ 'search_results.sponsored'|trans }}
  240. </span>
  241. {% elseif isCompoundSearchResultsCard and listing.featured %}
  242. <span class="search-listing-card__labels_card search-listing-card__labels_card_sponsored">
  243. {{ 'search_results.featured_small'|trans }}
  244. </span>
  245. {% endif %}
  246. {% if listing.featured == FEATURE_TYPE %}
  247. <span class="search-listing-card__labels_card search-listing-card__labels_card_featured">
  248. {{ 'search_results.featured_capital'|trans }}
  249. </span>
  250. {% elseif isSoldByOwnerType %}
  251. <span class="search-listing-card__labels_card search-listing-card__labels_card_featured">
  252. {{ 'search_results.sold_by_owner'|trans }}
  253. </span>
  254. {% endif %}
  255. {% endif %}
  256. {% if isVerified %}
  257. <span class="search-listing-card__labels_card search-listing-card__labels_card_verified">
  258. {{ 'search_results.verified'|trans }}
  259. </span>
  260. {% endif %}
  261. {% if isEligibleForMortgage %}
  262. <span class="search-listing-card__labels_card search-listing-card__labels_card_mortgage">
  263. {{ 'search_results.is_mortgage'|trans }}
  264. </span>
  265. {% endif %}
  266. {% if isRelatedToMainListing %}
  267. <span class="search-listing-card__labels_card search-listing-card__labels_card_featured">
  268. {{ getSimilarLabel(mainListingObj, listing)|trans }}
  269. </span>
  270. {% endif %}
  271. </div>
  272. <div class="search-listing-card__img embed-responsive embed-responsive-4by3">
  273. <div class="search-listing-card__img__wrapper embed-responsive-item">
  274. {% if isListingPhotosDefined %}
  276. {% if disableLazyLoadImgIndex %}
  277. <picture>
  278. <source srcset="{{ custom_vich_uploader_asset(listingPhotos[listing.id].main.file, 'file')|thumbnail('search-thumb-webp') }}"
  279. type="image/webp">
  280. <source srcset="{{ custom_vich_uploader_asset(listingPhotos[listing.id].main.file, 'file')|thumbnail('search-thumb') }}"
  281. type="image/jpg">
  282. <img
  283. alt="{{ listing.title|excludeNumbers }}"
  284. width="{{ listingPhotoSize }}" height="{{ listingPhotoSize }}"
  285. fetchpriority="high" />
  286. </picture>
  287. {% else %}
  288. <picture>
  289. <source data-srcset="{{ custom_vich_uploader_asset(listingPhotos[listing.id].main.file, 'file')|thumbnail('search-thumb-webp') }}"
  290. type="image/webp">
  291. <source data-srcset="{{ custom_vich_uploader_asset(listingPhotos[listing.id].main.file, 'file')|thumbnail('search-thumb') }}"
  292. type="image/jpg">
  293. <img
  294. src="/images/placeholder.svg"
  295. class="lazyload"
  296. alt="{{ listing.title|excludeNumbers }}"
  297. width="{{ listingPhotoSize }}" height="{{ listingPhotoSize }}"
  298. fetchpriority="low" />
  299. </picture>
  300. {% endif %}
  301. {% elseif listing.mainPhoto %}
  302. {% if disableLazyLoadImgIndex %}
  303. <picture>
  304. <source srcset="{{ custom_vich_uploader_asset(listing.mainPhoto.file, 'file')|thumbnail('search-thumb-webp') }}"
  305. type="image/webp">
  306. <source srcset="{{ custom_vich_uploader_asset(listing.mainPhoto.file, 'file')|thumbnail('search-thumb') }}"
  307. type="image/jpg">
  308. <img
  309. alt="{{ listing.title|excludeNumbers }}"
  310. width="{{ listingPhotoSize }}" height="{{ listingPhotoSize }}"
  311. fetchpriority="high" />
  312. </picture>
  313. {% else %}
  314. <picture>
  315. <source data-srcset="{{ custom_vich_uploader_asset(listing.mainPhoto.file, 'file')|thumbnail('search-thumb-webp') }}"
  316. type="image/webp">
  317. <source data-srcset="{{ custom_vich_uploader_asset(listing.mainPhoto.file, 'file')|thumbnail('search-thumb') }}"
  318. type="image/jpg">
  319. <img
  320. src="/images/placeholder.svg"
  321. class="lazyload"
  322. alt="{{ listing.title|excludeNumbers }}"
  323. width="{{ listingPhotoSize }}" height="{{ listingPhotoSize }}"
  324. fetchpriority="low" />
  325. </picture>
  326. {% endif %}
  327. {% else %}
  328. <div class="search-listing-card__img__no-photo">{{ 'layout.no_listing_photo'|trans }}</div>
  329. {% endif %}
  330. {% if showPhotosCount %}
  331. <div class="search-listing-card__img__thumbnail search-listing-card__img__thumbnail_bottom">
  332. <div class="search-listing-card__img__count">
  333. <span class="fa fa-image"></span>
  334. {% if listingPhotosCount[listing.id] is defined %}
  335. {{ listingPhotosCount[listing.id] }}
  336. {% else %}
  337. 0
  338. {% endif %}
  339. </div>
  340. </div>
  341. {% endif %}
  342. </div>
  343. </div>
  344. <div class="search-listing-card__details">
  345. {% if app.request.attributes.get("_route") != 'aqarmap_user_listings' %}
  346. {% if isListingLogoDefined %}
  347. {{ _self.userLogo(
  348. custom_vich_uploader_asset(listingPhotos[listing.id].logo.file, 'file') | thumbnail('logo'),
  349. disableLazyLoadImgIndex,
  350. listingUserPhotoSize,
  351. listing.id
  352. ) }}
  353. {% elseif listing.validUserLogo %}
  354. {{ _self.userLogo(
  355. custom_vich_uploader_asset(listing.validUserLogo, 'file') | thumbnail('logo'),
  356. disableLazyLoadImgIndex,
  357. listingUserPhotoSize,
  358. listing.id
  359. ) }}
  360. {% endif %}
  361. {% endif %}
  362. <div class="search-listing-card__details__wrapper" >
  363. {% if isCompoundSearchResultsCard %}
  364. <div class="search-listing-card__compound-title">
  365. <span> {{ listing.title|fixArabicNumbers|raw }}</span>
  366. </div>
  367. <p class="search-listing-card__address search-listing-card__address_compound">
  368. <img
  369. fetchpriority="low"
  370. src="/images/BrandsIcons/listing/ic_location.svg"
  371. class="search-listing-card__attributes_icon"
  372. alt="{{ listing.address }}"
  373. width="{{ iconSize }}" height="{{ iconSize }}"
  374. />
  375. <span> {{ listing.address }} </span>
  376. </p>
  377. {% if showCompoundAveragePrices %}
  378. <div class="search-listing-card__units__wrapper">
  379. {% if isCompoundAveragePrices%}
  380. {% include '@AqarmapListingBundle/Listing/compoundAveragePrices.html.twig' with {'units': compoundAveragePrices} %}
  381. {% endif %}
  382. </div>
  383. {% endif %}
  385. <div class="search-listing-card__starting-price">
  386. {% if listingPrice %}
  387. {{ 'listing.starting_from'|trans }}
  388. <span class="integer">{{ listingPrice |number_format }}</span>
  389. <span>{{ get_setting('general', 'currency')|trans }}</span>
  390. {% elseif listing.section.searchable %}
  391. {{ 'listing.call_for_price'|trans }}
  392. {% endif %}
  393. </div>
  394. {% else %}
  395. {% if allowListingLabel %}
  396. <div class="search-listing-card__best-label">
  397. {% if isValidPrice %}
  398. <img fetchpriority="low" width="{{ iconSize }}" height="{{ iconSize }}"
  399. src="{{ asset('images/picks/ic_money_blue.svg') }}" alt="{{'listing.valid_price'|trans }}" />
  400. {{'listing.valid_price'|trans }}
  401. {% elseif isTopViewed %}
  402. <img fetchpriority="low" width="{{ iconSize }}" height="{{ iconSize }}"
  403. src="{{ asset('images/picks/analytics-arrow-up_blue.svg') }}" alt="{{'listing.top_viewed'|trans }}" />
  404. {{'listing.top_viewed'|trans }}
  405. {% elseif isTopFavourited %}
  406. <img fetchpriority="low" width="{{ iconSize }}" height="{{ iconSize }}"
  407. src="{{ asset('images/picks/ic_heart_blue.svg') }}" alt="{{'listing.top_favourite'|trans }}" />
  408. {{'listing.top_favourite'|trans }}
  409. {% endif %}
  410. </div>
  411. {% endif %}
  412. <div class="search-listing-card__price">
  413. {% if listing.price %}
  414. <span class="integer">{{ listing.price|number_format }}</span>
  415. <span class="mx-2">{{ get_setting('general', 'currency')|trans }}</span>
  416. {% elseif listing.section.searchable %}
  417. {{ 'listing.call_for_price'|trans }}
  418. {% endif %}
  419. </div>
  420. <h2 class="search-listing-card__title">
  421. {{ listing.title|fixArabicNumbers|raw }}
  422. </h2>
  423. <p class="search-listing-card__address" >
  424. <img
  425. fetchpriority="low"
  426. src="/images/BrandsIcons/listing/ic_location.svg"
  427. class="search-listing-card__attributes_icon"
  428. alt="{{ listing.address }}"
  429. width="{{ iconSize }}" height="{{ iconSize }}"
  430. />
  431. <span>{{ listing.address }}</span>
  432. </p>
  433. <div class="search-listing-card__attributes">
  434. <label class="search-listing-card__attributes_item">
  435. <img
  436. fetchpriority="low"
  437. src="/images/BrandsIcons/listing/ic_size.svg"
  438. class="search-listing-card__attributes_icon"
  439. alt="Listing attributes"
  440. width="{{ iconSize }}" height="{{ iconSize }}"
  441. />
  442. {{ listing.area}} {{ get_setting('general', 'measurement_unit')|trans }}
  443. </label>
  444. {% if listing_attributes|length > 0 %}
  445. {% if listing_rooms %}
  446. <label class="search-listing-card__attributes_item">
  447. <img
  448. fetchpriority="low"
  449. src="/images/BrandsIcons/listing/ic_bedroom.svg"
  450. class="search-listing-card__attributes_icon"
  451. alt="Listing attributes"
  452. width="{{ iconSize }}" height="{{ iconSize }}"
  453. />
  454. {{ listing_rooms }}
  455. </label>
  456. {% endif %}
  457. {% if listing_baths %}
  458. <label class="search-listing-card__attributes_item">
  459. <img
  460. fetchpriority="low"
  461. src="/images/BrandsIcons/listing/ic_bathroom.svg"
  462. class="search-listing-card__attributes_icon"
  463. alt="Listing attributes"
  464. width="{{ iconSize }}" height="{{ iconSize }}"
  465. />
  466. {{ listing_baths }}
  467. </label>
  468. {% endif %}
  469. {% endif %}
  470. </div>
  471. {% endif %}
  472. </div>
  473. </div>
  474. </div>
  475. {% if isEnabledDdeveloperCardData is defined and isEnabledDdeveloperCardData %}
  476. <div class="search-listing-card__user-properties__container">
  477. <hr class="desktop-separator">
  478. <div class="search-listing-card__user-properties user-properties-container">
  479. {% include '@AqarmapListingBundle/Listing/compoundCardDeveloperData.html.twig' with {'compound': compoundField} %}
  480. </div>
  481. </div>
  482. {% endif %}
  484. {% if showCtaButtons %}
  485. <div class="search-listing-card__footer">
  486. <hr class="desktop-separator">
  487. <div class="search-listing-card__cta w-100">
  488. {% if listingPhones is not empty and not listing.isCallRequest %}
  489. {% if hasWhatsapp %}
  490. <button aria-label="text seller by whatsapp"
  491. class="search-listing-card__cta-button search-listing-card__cta-button_whatsapp whatsapp big"
  492. ng-click="onSendLead($event,{
  493. leadType:'whatsapp' ,
  494. actionType:'{{ SEND_WHATSAPP_CONSTANT }}' ,
  495. {# listingType: {{leadSources|serialize('json')}} , #}
  496. propertySection: '{{propertySectionSlug}}' ,
  497. propertyCategory: '{{propertyCategory}}',
  498. leadSourcePage: '{{leadSourcePage}}' ,
  499. depthProduct: '{{depthProduct}}',
  500. listingId: '{{ listing.id }}' ,
  501. insideCompound : '{{insideCompound}}'
  502. });"
  503. >
  504. <img
  505. fetchpriority="low"
  506. src="/images/BrandsIcons/listing/ic_whatsapp.svg"
  507. class="search-listing-card__cta-button_whatsapp_icon"
  508. alt="{{ 'label.lead.whatsApp'|trans }}"
  509. width="{{ iconSize }}" height="{{ iconSize }}"
  510. />
  511. {{ 'label.lead.whatsApp'|trans }}
  512. </button>
  513. <div class="vertical-separator"></div>
  514. {% endif %}
  515. {% set phoneBtnClass = 'search-listing-card__cta-button search-listing-card__cta-button_call ' ~ callBtnClass %}
  516. <button class="{{ phoneBtnClass }}" aria-label="show seller phone"
  517. submit-text="{{ 'listing.show_seller_phone'|trans }}"
  518. ng-click="searchActionType = 'showNumber';
  519. onSendLead($event,{
  520. leadType:'call' ,
  521. actionType:'{{ SHOW_PHONE_CONSTANT }}' ,
  522. leadSourcePage: '{{leadSourcePage}}' ,
  523. propertySection: '{{propertySectionSlug}}' ,
  524. propertyCategory: '{{propertyCategory}}',
  525. depthProduct: '{{depthProduct}}',
  526. {# listingType: {{leadSources|serialize('json')}} , #}
  527. listingId: '{{ listing.id }}' ,
  528. insideCompound : '{{insideCompound}}'
  530. });"
  531. ng-if="!phoneShowed[{{listing.id}}]"
  532. data-gtm-listing-id="{{ listing.id }}">
  533. <img
  534. fetchpriority="low"
  535. src="/images/BrandsIcons/listing/ic_phone.svg"
  536. class="search-listing-card__cta-button_call_icon"
  537. alt="{{ 'listing.show_seller_phone'|trans }}"
  538. width="{{ iconSize }}" height="{{ iconSize }}"
  539. />
  540. <span class="cta-button-text"> {{ 'listing.show_seller_phone'|trans }}</span>
  541. </button>
  542. <button class="{{ phoneBtnClass }}" aria-label="seller phone"
  543. ng-cloak
  544. ng-click="showPhoneModalByListingId({{listing.id}})"
  545. ng-if="phoneShowed[{{listing.id}}]">
  546. <img
  547. fetchpriority="low"
  548. src="/images/BrandsIcons/listing/ic_phone.svg"
  549. class="search-listing-card__cta-button_call_icon"
  550. alt="{{ 'listing.show_seller_phone'|trans }}"
  551. width="{{ iconSize }}" height="{{ iconSize }}"
  552. />
  553. <span class="cta-button-text"> {{ 'listing.show_seller_phone'|trans }}</span>
  554. </button>
  555. {% else %}
  556. <button aria-label="request seller call"
  557. class="search-listing-card__cta-button search-listing-card__cta-button_call-request big m-0"
  558. ng-hide="callRequested[{{listing.id}}]"
  559. ng-click="searchActionType = 'sendRequest';
  560. onSendLead($event,{
  561. leadType:'request_call' ,
  562. actionType:'{{ CALL_REQUEST_CONSTANT }}' ,
  563. {# listingType: {{leadSources|serialize('json')}} , #}
  564. leadSourcePage: '{{leadSourcePage}}' ,
  565. propertySection: '{{propertySectionSlug}}' ,
  566. propertyCategory: '{{propertyCategory}}',
  567. depthProduct: '{{depthProduct}}',
  568. listingId: '{{ listing.id }}' ,
  569. insideCompound : '{{insideCompound}}'
  570. });"
  571. >
  572. <img
  573. fetchpriority="low"
  574. src="/images/BrandsIcons/listing/ic_phone.svg"
  575. class="search-listing-card__cta-button_call_icon"
  576. alt="{{ 'label.lead.call_request'|trans }}"
  577. width="{{ iconSize }}" height="{{ iconSize }}"
  578. />
  579. <span ng-hide="callRequested[{{listing.id}}]" class="cta-button-text"> {{ 'label.lead.call_request'|trans }} </span>
  580. </button>
  581. <button aria-label="seller call requested"
  582. class="search-listing-card__cta-button big success ng-hide"
  583. ng-show="callRequested[{{listing.id}}]"
  584. type= "button"
  585. disabled
  586. >
  587. <i class="fa fa-check circle-badge success"></i>
  588. <span class="mx-1"> {{ 'label.lead.call_requested'|trans }} </span>
  589. </button>
  590. {% endif %}
  591. </div>
  592. </div>
  593. {% endif %}
  594. </div>
  596. {# elastic scoring debug #}
  597. {% if isEnabledElasticScoringDebug %}
  598. {% include "@AqarmapListing/ListingSearch/listingElasticScore.html.twig" %}
  599. {% endif %}
  600. </div>
  601. {% if showMobileFeedads is defined and showMobileFeedads %}
  602. <div class="text-center col-12 visible-sm visible-xs" style="margin-bottom: 24px;">
  603. {% if get_setting('general', 'country') == 'SA' %}
  604. <div id='div-gpt-ad-1611049193067-0' style='width: 320px; height: 320px; margin: 0 auto 10px;'>
  605. <script>
  606. setTimeout(function() {
  607. if (typeof googletag !== 'undefined') {
  608. googletag.cmd.push(function() { googletag.display('div-gpt-ad-1611049193067-0'); });
  609. }
  610. }, 3000);
  611. </script>
  612. </div>
  613. {% else %}
  614. <div id='div-gpt-ad-1588541966744-0' style='width: 320px; height: 320px; margin: 0 auto 10px;'>
  615. <script type="application/javascript" v-pre defer>
  616. setTimeout(function() {
  617. if (typeof googletag !== 'undefined') {
  618. googletag.cmd.push(function() { googletag.display('div-gpt-ad-1588541966744-0'); });
  619. }
  620. }, 3000);
  621. </script>
  622. </div>
  623. {% endif %}
  624. </div>
  625. {% set isInFeedAdAappeared = true %}
  626. {% endif %}
  627. {% set listingPhoto = isListingPhotosDefined ? custom_vich_uploader_asset(listingPhotos[listing.id].main.file, 'file')|thumbnail('search-thumb-webp') : listing.mainPhoto ? custom_vich_uploader_asset(listing.mainPhoto.file, 'file')|thumbnail('search-thumb-webp') : "" %}
  628. {% block headScripts %}
  629. <script type="application/ld+json">
  630. {
  631. "@context": "https://schema.org",
  632. "@type": "SingleFamilyResidence",
  633. "name" : "{{listing.title}}",
  634. "image": "{{listingPhoto}}",
  635. "url": "{{ absolute_url(LISTING_URL) }}",
  636. "address": {
  637. "@type": "PostalAddress",
  638. "name": "{{ listing.location.title }}"
  639. },
  640. "geo": {
  641. "@type": "GeoCoordinates",
  642. "latitude": "{{ listing.location.centerLat }}",
  643. "longitude": "{{ listing.location.centerLng }}"
  644. },
  645. "floorSize": {
  646. "@type": "QuantitativeValue",
  647. "value": "{{ listing.area }}"
  648. }
  649. }
  650. </script>
  651. {% endblock %}
  652. {% endfor %}